diff --git a/src/Header.tsx b/src/Header.tsx
index b206a94..a5b0eba 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -1,4 +1,5 @@
import './App.css';
+import SampleDropdown from './SampleDropdown';
function Header() {
return (
@@ -12,6 +13,9 @@ function Header() {
Template Playground (Beta)
+
+
+
diff --git a/src/samples/clause.ts b/src/samples/clause.ts
index 8eb7918..2975d0d 100644
--- a/src/samples/clause.ts
+++ b/src/samples/clause.ts
@@ -13,7 +13,10 @@ concept Customer {
o Address address
}`;
-const TEMPLATE = `{{#clause address}}
+const TEMPLATE = `
+> Renders an object using the \`#clause\` block.
+
+{{#clause address}}
#### Address
{{line1}},
{{city}}, {{state}},
diff --git a/src/samples/clausecondition.ts b/src/samples/clausecondition.ts
new file mode 100644
index 0000000..e88c8f7
--- /dev/null
+++ b/src/samples/clausecondition.ts
@@ -0,0 +1,34 @@
+const MODEL = `namespace hello@1.0.0
+
+concept Address {
+ o String line1
+ o String city
+ o String state
+ o String country
+}
+
+
+@template
+concept Customer {
+ o Address address optional
+}`;
+
+const TEMPLATE = `
+> Renders an optional object using the \`#clause\` block with a conditional expression.
+
+{{#clause address condition="return address!==undefined"}}
+#### Address
+{{line1}},
+{{city}}, {{state}},
+{{country}}
+{{/clause}}
+
+Done.
+`;
+
+const DATA = {
+ "$class" : "hello@1.0.0.Customer"
+};
+
+const NAME = 'Clause with Condition';
+export {NAME, MODEL,DATA,TEMPLATE};
\ No newline at end of file
diff --git a/src/samples/formula.ts b/src/samples/formula.ts
new file mode 100644
index 0000000..d41676f
--- /dev/null
+++ b/src/samples/formula.ts
@@ -0,0 +1,21 @@
+const MODEL = `namespace hello@1.0.0
+
+@template
+concept HelloWorld {
+ o String name
+}`;
+
+const TEMPLATE = `> Includes a TypeScript formula.
+
+### Welcome {{name}}!
+
+Your name has {{% return name.length %}} characters.
+`;
+
+const DATA = {
+ "$class" : "hello@1.0.0.HelloWorld",
+ "name": "John Doe"
+};
+
+const NAME = 'Formula';
+export {NAME, MODEL,DATA,TEMPLATE};
\ No newline at end of file
diff --git a/src/samples/formulanow.ts b/src/samples/formulanow.ts
index 8dd286b..724c470 100644
--- a/src/samples/formulanow.ts
+++ b/src/samples/formulanow.ts
@@ -5,7 +5,7 @@ concept HelloWorld {
o String name
}`;
-const TEMPLATE = `Hello {{name}}!
+const TEMPLATE = `> Includes a TypeScript formula that references the implicit \`now\` variable.
Today is **{{% return now.toISOString() %}}**.
`;
diff --git a/src/samples/helloworld.ts b/src/samples/helloworld.ts
index 38eb1ea..13d2552 100644
--- a/src/samples/helloworld.ts
+++ b/src/samples/helloworld.ts
@@ -5,7 +5,9 @@ concept HelloWorld {
o String name
}`;
-const TEMPLATE = `### Welcome {{name}}!
+const TEMPLATE = `> The one, the only...
+
+### Hello {{name}}!
`;
const DATA = {
diff --git a/src/samples/index.ts b/src/samples/index.ts
index 1a7fb88..aabe13c 100644
--- a/src/samples/index.ts
+++ b/src/samples/index.ts
@@ -6,6 +6,8 @@ import * as clause from './clause';
import * as list from './list';
import * as optional from './optional';
import * as markdown from './markdown';
+import * as formula from './formula';
+import * as clausecondition from './clausecondition';
export type Sample = {
NAME: string,
@@ -17,9 +19,11 @@ export type Sample = {
export const SAMPLES:Array
= [
playground,
helloworld,
+ formula,
formulanow,
join,
clause,
+ clausecondition,
list,
optional,
markdown
diff --git a/src/samples/join.ts b/src/samples/join.ts
index 5808d2a..fdfca25 100644
--- a/src/samples/join.ts
+++ b/src/samples/join.ts
@@ -10,7 +10,9 @@ concept Insurance {
o ItemType[] items
}`;
-const TEMPLATE = `## en Locale
+const TEMPLATE = `> Joins lists using formatting options
+
+## en Locale
## Style
diff --git a/src/samples/list.ts b/src/samples/list.ts
index c6f6391..78d66a1 100644
--- a/src/samples/list.ts
+++ b/src/samples/list.ts
@@ -5,10 +5,20 @@ concept Person {
o String[] middleNames
}`;
-const TEMPLATE = `## Middle Names
+const TEMPLATE = `> Ordered and unorded list expansion
+
+## Lists
+
+Ordered:
{{#olist middleNames}}
- {{this}}
{{/olist}}
+
+Unordered:
+{{#ulist middleNames}}
+- {{this}}
+{{/ulist}}
+
`;
const DATA = {
diff --git a/src/samples/markdown.ts b/src/samples/markdown.ts
index ae25816..b22dee4 100644
--- a/src/samples/markdown.ts
+++ b/src/samples/markdown.ts
@@ -4,7 +4,7 @@ const MODEL = `namespace hello@1.0.0
concept Empty {
}`;
-const TEMPLATE = `
+const TEMPLATE = `> Most markdown can be used in a template.
# h1 Heading 8-)
## h2 Heading
diff --git a/src/samples/optional.ts b/src/samples/optional.ts
index a11f6e3..1cf4668 100644
--- a/src/samples/optional.ts
+++ b/src/samples/optional.ts
@@ -9,13 +9,19 @@ concept TemplateData {
o LoyaltyStatus loyaltyStatus optional
}`;
-const TEMPLATE = `{{#optional loyaltyStatus}}Your loyalty status: {{level}}{{else}}You do not have a loyalty status.{{/optional}}
+const TEMPLATE = `> The \`{{#optional}}\` block is used with optional content.
+
+{{#optional loyaltyStatus}}You have loyalty status.{{else}}You do not have a loyalty status.{{/optional}}
Done.
`;
const DATA = {
- "$class" : "test@1.0.0.TemplateData"
+ "$class" : "test@1.0.0.TemplateData",
+ "loyaltyStatus" : {
+ $class: "test@1.0.0.LoyaltyStatus",
+ level: "Gold"
+ }
};
const NAME = 'Optional';
diff --git a/src/samples/playground.ts b/src/samples/playground.ts
index 72768ef..219c9ce 100644
--- a/src/samples/playground.ts
+++ b/src/samples/playground.ts
@@ -29,7 +29,8 @@ concept TemplateData {
o Order order
}`;
-const TEMPLATE = `### Welcome {{name}}!
+const TEMPLATE = `> A general sample that uses a range of features
+### Welcome {{name}}!
![AP Logo](https://avatars.githubusercontent.com/u/29445438?s=64)
diff --git a/src/store.ts b/src/store.ts
index 6a74ad5..be9f7c2 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -14,7 +14,7 @@ import { TemplateMarkTransformer } from '@accordproject/markdown-template';
import { transform } from '@accordproject/markdown-transform';
import {SAMPLES, Sample} from './samples';
-import * as playground from './samples/helloworld';
+import * as playground from './samples/playground';
interface AppState {
templateMarkdown: string