docs(samples)

Signed-off-by: Dan Selman <[email protected]>

src/App.tsx

@@ -8,7 +8,6 @@ import TemplateModel from './TemplateModel';
 import useAppStore from './store';
 import Header from './Header';
 import Footer from './Footer';
-import SampleDropdown from './SampleDropdown';
 
 function App() {
   const init = useAppStore((state) => state.init);
@@ -20,7 +19,6 @@ function App() {
   return (
     <div>
       <Header/>
-      <SampleDropdown/>
       <Errors/>
       <div className="row">
       <TemplateMarkdown/>

src/Header.tsx

@@ -1,4 +1,5 @@
 import './App.css';
+import SampleDropdown from './SampleDropdown';
 
 function Header() {
   return (
@@ -12,6 +13,9 @@ function Header() {
             <div className="column">
               <h2>Template Playground (Beta)</h2>
             </div>
+            <div className="column">
+            <SampleDropdown/>
+            </div>
             <div className="column">
               <p></p>
             </div>

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}},  

src/samples/clausecondition.ts

@@ -0,0 +1,34 @@
+const MODEL = `namespace [email protected]
+
+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" : "[email protected]"
+};
+
+const NAME = 'Clause with Condition';
+export {NAME, MODEL,DATA,TEMPLATE};

src/samples/formula.ts

@@ -0,0 +1,21 @@
+const MODEL = `namespace [email protected]
+
+@template
+concept HelloWorld {
+    o String name
+}`;
+
+const TEMPLATE = `> Includes a TypeScript formula.
+
+### Welcome {{name}}!
+
+Your name has {{% return name.length %}} characters.
+`;
+
+const DATA = {
+    "$class" : "[email protected]",
+    "name": "John Doe"
+};
+
+const NAME = 'Formula';
+export {NAME, MODEL,DATA,TEMPLATE};

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() %}}**.
 `;

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 = {

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<Sample> = [
     playground,
     helloworld,
+    formula,
     formulanow,
     join,
     clause,
+    clausecondition,
     list,
     optional,
     markdown

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
 

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 = {

src/samples/markdown.ts

@@ -4,7 +4,7 @@ const MODEL = `namespace [email protected]
 concept Empty {
 }`;
 
-const TEMPLATE = `
+const TEMPLATE = `> Most markdown can be used in a template.
 
 # h1 Heading 8-)
 ## h2 Heading

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" : "[email protected]"
+    "$class" : "[email protected]",
+    "loyaltyStatus" : {
+        $class: "[email protected]",
+        level: "Gold"
+    }
 };
 
 const NAME = 'Optional';

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)
 

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