using field-guide to document instead of markdown-templates

tests/dummy/app/templates/components/demo-accordion.md → docs/components/accordion.md

@@ -28,30 +28,3 @@
 
 {{/es-accordion}}
 ```
-
-{{#es-accordion as |accordionState|}}
-  {{#es-accordion/es-item
-    title="JavaScript Modules API"
-    status="shipped"
-    accordionItemIndex=0
-    accordionState=accordionState}}
-    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut nisi culpa magnam quam sed exercitationem alias corrupti aspernatur illo nobis eos dicta esse quasi assumenda officiis nostrum, impedit voluptates commodi.</p>
-  {{/es-accordion/es-item}}
-
-  {{#es-accordion/es-item
-    title="Module Unification"
-    status="inProgress"
-    accordionItemIndex=1
-    accordionState=accordionState}}
-    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut nisi culpa magnam quam sed exercitationem alias corrupti aspernatur illo nobis eos dicta esse quasi assumenda officiis nostrum, impedit voluptates commodi.</p>
-  {{/es-accordion/es-item}}
-
-  {{#es-accordion/es-item
-    title="Code Splitting"
-    status="rfcSubmitted"
-    accordionItemIndex=2
-    accordionState=accordionState}}
-    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut nisi culpa magnam quam sed exercitationem alias corrupti aspernatur illo nobis eos dicta esse quasi assumenda officiis nostrum, impedit voluptates commodi.</p>
-  {{/es-accordion/es-item}}
-
-{{/es-accordion}}

tests/dummy/app/templates/components/demo-button.md → docs/components/button.md

@@ -8,8 +8,6 @@ Simplest use case: a button with text in it, telling the user what to do.
 {{es-button label="click me"}}
 ```
 
-{{es-button label="click me"}}
-
 
 Also supported- block use:
 
@@ -19,10 +17,6 @@ Also supported- block use:
 {{/es-button}}
 ```
 
-{{#es-button}}
-  click me <span>🐹</span>
-{{/es-button}}
-
 To toggle the 'disabled' property, set 'isDisabled' to true
 
 ```handlebars
@@ -37,32 +31,24 @@ Outline button style:
 {{es-button label="click me" isDark=false}}
 ```
 
-{{es-button label="click me" isDark=false}}
-
 Smaller button:
 
 ```handlebars
 {{es-button label="click me" isTiny=true}}
 ```
 
-{{es-button label="click me" isTiny=true}}
-
 Less Padding:
 
 ```handlebars
 {{es-button label="click me" isDark=true isDense=true}}
 ```
 
-{{es-button label="click me" isDark=true isDense=true}}
-
 Full-width button:
 
 ```handlebars
 {{es-button label="click me" isBlock=true}}
 ```
 
-{{es-button label="click me" isBlock=true}}
-
 ## Accessibility
 
 Since we're using the native HTML button element and requiring a label value to be provided, the component itself is accesible as it is.
@@ -75,10 +61,6 @@ If you are going to put an icon in the button, then you will need to set an aria
 {{/es-button}}
 ```
 
-{{#es-button  ariaLabel="Hamster Secrets" title="Hamster Secrets"}}
-  🐹
-{{/es-button}}
-
 ## Other Uses
 
 There are some other ways this component could be used:

tests/dummy/app/templates/components/demo-buttonbar.md → docs/components/buttonbar.md

@@ -2,8 +2,6 @@
 
 This component is not yet implemented
 
-```
+```handlebars
 <EsButtonbar />
 ```
-
-<EsButtonbar />

tests/dummy/app/templates/components/demo-card.md → docs/components/card.md

@@ -6,15 +6,8 @@
 {{/es-card}}
 ```
 
-{{#es-card}}
-  This is a card
-{{/es-card}}
-
 ```handlebars
 {{#es-card hasBorder=true}}
   This is a card
 {{/es-card}}
 ```
-{{#es-card hasBorder=true}}
-  This is a card
-{{/es-card}}

tests/dummy/app/templates/components/demo-codesample.md → docs/components/codesample.md

@@ -5,5 +5,3 @@ This component is not yet implemented
 ```handlebars
 {{es-codesample}}
 ```
-
-{{es-codesample}}

tests/dummy/app/templates/components/demo-datatable.md → docs/components/datatable.md

@@ -2,8 +2,6 @@
 
 This component is not yet implemented
 
-```
+```handlebars
 {{es-datatable}}
 ```
-
-{{es-datatable}}

tests/dummy/app/templates/components/demo-footer.md → docs/components/footer.md

@@ -4,12 +4,9 @@
 {{es-footer}}
 ```
 
-{{es-footer}}
-
 ```handlebars
 {{es-footer tagline="A framework for ambitious web developers"}}
 ```
-{{es-footer tagline="A framework for ambitious web developers"}}
 
 ```handlebars
 {{!-- Check out the component blocks and their respective
@@ -20,13 +17,6 @@ configuration --}}
   {{f.contributions contributorLinks=contributorLinks}}
 {{/es-footer}}
 ```
-{{!-- Check out the component blocks and their respective
-configuration --}}
-{{#es-footer as |f|}}
-  {{f.info infoLinks=infoLinks}}
-  {{f.statement socialLinks=socialLinks}}
-  {{f.contributions contributorLinks=contributorLinks}}
-{{/es-footer}}
 
 ```handlebars
 {{!-- You can also add your own content on each component block --}}
@@ -50,23 +40,3 @@ configuration --}}
   {{/f.contributions}}
 {{/es-footer}}
 ```
-{{!-- You can also add your own content on each component block --}}
-{{#es-footer as |f|}}
-  {{#f.info}}
-    <br/>
-    <a>Team</a>
-    <br/>
-    <a>Contact</a>
-  {{/f.info}}
-  {{#f.statement}}
-    Highly Productive Out of the Box
-  {{/f.statement}}
-  {{#f.contributions}}
-    <div class="contributor">
-      <p>Hosted by:</p>
-      <a href="https://www.heroku.com/emberjs">
-        {{svg-jar "heroku-logo" class="contributor-logo"}}
-      </a>
-    </div>
-  {{/f.contributions}}
-{{/es-footer}}

tests/dummy/app/templates/components/demo-form.md → docs/components/form.md

@@ -7,7 +7,3 @@ This component is not yet implemented
 ...
 {{/es-form}}
 ```
-
-{{#es-form}}
-
-{{/es-form}}

tests/dummy/app/templates/components/demo-header.md → docs/components/header.md

@@ -3,4 +3,3 @@
 ```handlebars
 {{es-header}}
 ```
-{{es-header}}

tests/dummy/app/templates/components/demo-heading.md → docs/components/heading.md

@@ -3,25 +3,18 @@
 ```handlebars
 {{es-heading headingText='This is a heading text'}}
 ```
-{{es-heading headingText='This is a heading text'}}
 
 ```handlebars
 {{#es-heading}}
   This is a heading text <span>🐹</span>
 {{/es-heading}}
 ```
 
-{{#es-heading}}
-  This is a heading text <span>🐹</span>
-{{/es-heading}}
-
 ```handlebars
 {{es-heading headingText='This is a heading text' isCentered=true}}
 ```
-{{es-heading headingText='This is a heading text' isCentered=true}}
 
 
 ```handlebars
 {{es-heading headingText='This is a heading text' isPageHeading=true}}
 ```
-{{es-heading headingText='This is a heading text' isPageHeading=true}}

tests/dummy/app/templates/components/demo-main.md → docs/components/main.md

@@ -3,4 +3,3 @@
 ```handlebars
 {{es-main}}
 ```
-{{es-main}}

tests/dummy/app/templates/components/demo-navbar.md → docs/components/navbar.md

@@ -5,10 +5,7 @@ The navbar comes with the default Ember links, if you would like to override the
 ```handlebars
 {{es-navbar}}
 ```
-{{es-navbar}}
 
 ```handlebars
 {{es-navbar links=customLinks}}
 ```
-
-{{es-navbar links=customLinks}}

tests/dummy/app/templates/components/demo-note.md → docs/components/note.md

@@ -5,11 +5,7 @@
   This is a note
 {{/es-note}}
 ```
-{{#es-note}}
-  This is a note
-{{/es-note}}
 
 ```handlebars
 {{es-note}}
 ```
-{{es-note}}

tests/dummy/app/templates/components/demo-page-header.md → docs/components/page-header.md

@@ -14,13 +14,6 @@ should use the `<EsPageHeader />` component:
 </EsPageHeader>
 ```
 
-<EsPageHeader
-  @headline="A framework for ambitious web developers"
-  @detail="Ember.js is a productive, battle-tested JavaScript framework for building modern web applications. It includes everything you need to build rich UIs that work on any device."
-  class="dark">
-  <EsButton>Go</EsButton>
-</EsPageHeader>
-
 This example is making use of the [`dark` css helper](/css/helpers#dark)
 which will most likely be required for the header section of the page.
 
@@ -36,10 +29,4 @@ remove the `class="dark"` css helper.
 </EsPageHeader>
 ```
 
-<EsPageHeader
-  @headline="Some other message"
-  @detail="This isn't really a design motif but we'll try it any for a demo">
-  <EsButton>Go</EsButton>
-</EsPageHeader>
-
 You will notice that the text color automatically adjusts to fit its use case

tests/dummy/app/templates/components/demo-pagewrapper.md → docs/components/pagewrapper.md

@@ -3,5 +3,3 @@
 ```handlebars
 {{es-pagewrapper}}
 ```
-
-{{es-pagewrapper}}

tests/dummy/app/templates/components/demo-search.md → docs/components/search.md

@@ -3,5 +3,3 @@
 ```handlebars
 {{es-search}}
 ```
-
-{{es-search}}

tests/dummy/app/templates/components/demo-ulist.md → docs/components/ulist.md

@@ -10,26 +10,20 @@ The list component is an unstyled, unordered list. A title must be defined, but
 {{es-ulist listTitle="Zoey by City" listItems=listItems}}
 ```
 
-{{es-ulist listTitle="Zoey by City" listItems=listItems}}
-
 ### With Images
 
 ```handlebars
 {{es-ulist listTitle="Zoey by City" listItems=listItems hasImage=true}}
 ```
-{{es-ulist listTitle="Zoey by City" listItems=listItems hasImage=true}}
 
 ### With Links
 
 ```handlebars
 {{es-ulist listTitle="Zoey by City" listItems=listItems hasImage=true hasLink=true}}
 ```
-{{es-ulist listTitle="Zoey by City" listItems=listItems hasImage=true hasLink=true}}
 
 ## Other use cases
 
 - to add a border: 'hasBorder=true'
 - to use an ordered list: 'isUnorderedList=false',
 - to visually hide the list title (it still must exist for A11y): 'isTitleVisible=false'
-
-{{docs-note}}

tests/dummy/app/templates/concepts/colours.md → docs/concepts/colours.md

@@ -7,7 +7,6 @@ The primary palette is applied across every page of the website and contains the
 
 The following swatches contain a sample of each of the primary palette colours, along with recommendations for its usage and the acceptable contrast guidelines when coupled with text.
 
-
 <div class="row">
   <div class="col-one-third">
     <ColorPallet @color="#1A1A1A" @name="Dark Gray" @variable="--color-dark" @class-name="bg-dark"/>
@@ -24,6 +23,7 @@ The following swatches contain a sample of each of the primary palette colours,
 </div>
 
 
+
 ## Secondary Colours
 The secondary palette is applied to UI elements and it's not part of the base colors. The purpose of the secondary palette is to ensure the readability, usability, and accessibility of all UI elements and enhance the communication of actions, changes in state, or errors.
 

tests/dummy/app/templates/concepts/layout.md → docs/concepts/layout.md

@@ -1,25 +1,32 @@
 # Layout
 
-### Content Width
+## Content Width
 
-#### Center Aligned fixed width
+### Center Aligned fixed width
+
+```html
 <div class="row justify-center">
   <div class="col-one-half text-center">
     <h2>Build with the teams that never stop shipping.</h2>
     <p>Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.</p>
   </div>
 </div>
+```
+
+### Left Aligned fixed width
 
-#### Left Aligned fixed width
+```html
 <div class="row">
   <div class="col-one-half">
     <h3>A Simple Component</h3>
     <p>Ember Components are a superset of HTML – that means is a full-fledged Ember Component! To pass data into Components, use the @ symbol along with an argument name.</p>
   </div>
 </div>
+```
 
-#### Equally Distributed Columns
+### Equally Distributed Columns
 
+```html
 <div class="row">
   <div class="col">
     <div class="card text-center">
@@ -65,9 +72,11 @@
     </div>
   </div>
 </div>
+```
 
-#### Photo Grid
+### Photo Grid
 
+```html
 <div class="row align-end">
   <div class="col">
     <img class="img-fluid margin-bottom-small" src="https://dummyimage.com/400x500/000/fff">
@@ -79,4 +88,5 @@
   <div class="col">
     <img class="img-fluid margin-bottom-small" src="https://dummyimage.com/400x500/000/fff">
   </div>
-</div>
+</div>
+```