feat: add live code examples to docs site (#3216)

* add docusaurus live code extension * feat: add live code examples to docs * api run/update * update example code in fast-foundation readme * update sidebar to include accordion * update dialog example * update tabs example * add note syntax * update card example
microsoft · Jun 11, 2020 · 763054f · 763054f
1 parent 447c5a3
commit 763054f
Show file tree

Hide file tree

Showing 29 changed files with 19,749 additions and 135 deletions.
diff --git a/packages/web-components/fast-foundation/src/accordion/README.md b/packages/web-components/fast-foundation/src/accordion/README.md
@@ -21,4 +21,24 @@ import { MyAccordionStyles as styles } from "./accordion.styles";
     },
 })
 export class FASTAccordion extends Accordion {}
+```
+
+## Usage
+```html live
+<fast-design-system-provider use-defaults>
+    <fast-accordion>
+        <fast-accordion-item expanded>
+            <span slot="heading">Panel one</span>
+            Panel one content
+        </fast-accordion-item>
+        <fast-accordion-item>
+            <span slot="heading">Panel two</span>
+            Panel two content
+        </fast-accordion-item>
+        <fast-accordion-item expanded>
+            <span slot="heading">Panel three</span>
+            Panel three content
+        </fast-accordion-item>
+    </fast-accordion>
+</fast-design-system-provider>
 ```
diff --git a/packages/web-components/fast-foundation/src/anchor/README.md b/packages/web-components/fast-foundation/src/anchor/README.md
@@ -7,7 +7,9 @@ custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-
 
 `fast-anchor` is a web component implementation of an [HTML anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). The component supports the same visual appearances as the button component (accent, lightweight, neutral, outline, stealth) as well as a hypertext appearance for use inline with text.
 
-*NOTE: This component is built with the expectation that focus is delegated to the anchor element rendered into the shadow DOM.*
+:::note
+This component is built with the expectation that focus is delegated to the anchor element rendered into the shadow DOM.
+:::
 
 ## Applying Custom Styles
 
@@ -28,6 +30,8 @@ export class FASTAnchor extends Anchor {}
 ```
 
 ## Usage
-```html
-<fast-anchor href="https://fast.design" appearance="hypertext">FAST-DNA</fast-anchor>
+```html live
+<fast-design-system-provider use-defaults>
+    <fast-anchor href="https://fast.design" appearance="hypertext">FAST-DNA</fast-anchor>
+</fast-design-system-provider>
 ```
diff --git a/packages/web-components/fast-foundation/src/badge/README.md b/packages/web-components/fast-foundation/src/badge/README.md
@@ -36,8 +36,12 @@ fast-badge {
 ```
 
 
-```html
-<fast-badge fill="danger" color="light">Danger</fast-badge>
+```html live
+<fast-design-system-provider use-defaults>
+    <fast-badge appearance="accent">Danger</fast-badge>
+</fast-design-system-provider>
 ```
 
-*NOTE: In addition to the color map support detailed above, the `fast-badge` from the Microsoft component implementation (`@microsoft/fast-components-msft`) includes an attribute to set default appearances which ensure WCAG 2.1 AA contrast requirements.*
+:::note
+In addition to the color map support detailed above, the `fast-badge` from the Microsoft component implementation (`@microsoft/fast-components-msft`) includes an attribute to set default appearances which ensure WCAG 2.1 AA contrast requirements.
+:::
diff --git a/packages/web-components/fast-foundation/src/button/README.md b/packages/web-components/fast-foundation/src/button/README.md
@@ -7,7 +7,9 @@ custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-
 
 `fast-button` is a web component implementation of an [HTML button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button). The component supports several visual apperances (accent, lightweight, neutral, outline, stealth).
 
-*NOTE: This component is built with the expectation that focus is delegated to the button element rendered into the shadow DOM.*
+:::note
+This component is built with the expectation that focus is delegated to the button element rendered into the shadow DOM.
+:::
 
 ## Applying Custom Styles
 
@@ -29,6 +31,8 @@ export class FASTButton extends Button {}
 ```
 
 ## Usage
-```html
-<fast-button appearance="primary">Submit</fast-button>
+```html live
+<fast-design-system-provider use-defaults>
+    <fast-button appearance="primary">Submit</fast-button>
+</fast-design-system-provider>
 ```
diff --git a/packages/web-components/fast-foundation/src/card/README.md b/packages/web-components/fast-foundation/src/card/README.md
@@ -24,11 +24,13 @@ export class FASTCard extends Card {}
 
 ## Usage
 
-```html
-<fast-card style="--card-height: 300px; --card-width: 350px">
-    <img src="https://placehold.it/300x150" alt="Placeholder image with watermark" />
-    <h3>Card title</h3>
-    <p>At purus lectus quis habitant commodo, cras. Aliquam malesuada velit a tortor. Felis orci tellus netus risus et ultricies augue aliquet.</p>
-    <fast-button>Learn more</fast-button>
-</fast-card>
+```html live
+<fast-design-system-provider use-defaults>
+    <fast-card>
+        <img src="https://placehold.it/300x150" alt="Placeholder image with watermark" />
+        <h3>Card title</h3>
+        <p>At purus lectus quis habitant commodo, cras. Aliquam malesuada velit a tortor. Felis orci tellus netus risus et ultricies augue aliquet.</p>
+        <fast-button>Learn more</fast-button>
+    </fast-card>
+</fast-design-system-provider>
 ```
diff --git a/packages/web-components/fast-foundation/src/checkbox/README.md b/packages/web-components/fast-foundation/src/checkbox/README.md
@@ -23,12 +23,14 @@ export class FASTCheckbox extends Checkbox {}
 ```
 
 ## Usage
-```html
-<fieldset>
-    <legend>Fruits</legend>
-    <fast-checkbox checked>Apple</fast-checkbox>
-    <fast-checkbox checked>Banana</fast-checkbox>
-    <fast-checkbox>Honeydew</fast-checkbox>
-    <fast-checkbox checked>Mango</fast-checkbox>
-</fieldset>
+```html live
+<fast-design-system-provider use-defaults>
+    <fieldset>
+        <legend>Fruits</legend>
+        <fast-checkbox checked>Apple</fast-checkbox>
+        <fast-checkbox checked>Banana</fast-checkbox>
+        <fast-checkbox>Honeydew</fast-checkbox>
+        <fast-checkbox checked>Mango</fast-checkbox>
+    </fieldset>
+</fast-design-system-provider>
 ```
diff --git a/packages/web-components/fast-foundation/src/design-system-provider/README.md b/packages/web-components/fast-foundation/src/design-system-provider/README.md
@@ -31,7 +31,7 @@ The easiest way to get up-and-running is to use the `FASTDesignSystemProvider`.
 import { FASTDesignSystemProvider } from "@microsoft/fast-components";
 ```
 
-```html
+```html live
 <fast-design-system-provider use-defaults>
     Hello World
 </fast-design-system-provider>
@@ -41,7 +41,7 @@ _Design system_ properties can be overridden by setting the property or attribut
 
 **EXAMPLE: Setting design system properties**
 
-```html
+```html live
 <fast-design-system-provider use-defaults background-color="#111111" design-unit="6">
     Hello world!
 </fast-design-system-provider>
@@ -68,7 +68,7 @@ The `use-defaults` boolean attribute exposes a mechanism to apply the default va
 ### Composing Design System Providers
 *Design System Providers* are designed to compose their values with ancestor *Design System Providers* to facilitate changing values for decedents of the provider.
 
-```html
+```html live
 <fast-design-system-provider design-unit="4" background-color="#FFFFFF">
     <p style="height: calc(var(--design-unit) * 1px)">4px</p>
     <p style="background: var(--background-color)">#FFFFFF</p>
@@ -132,7 +132,7 @@ import { MyDesignSystemProviderStyles as styles} from "../design-system-provder.
 class FancyDesignSystemProvider extends DesignSystemProvider {}
 ```
 
-```html
+```html live
 <fancy-design-system-provider use-defaults>
     Hello Fancy World!
 </fancy-design-system-provider>
@@ -154,7 +154,7 @@ class FancyDesignSystemProvider extends DesignSystemProvider {
 }
 ```
 
-```html
+```html live
 <fancy-design-system-provider use-defaults>
     <p style="color: var(--fancy-property)">Red text!</p>
 </fancy-design-system-provider>

diff --git a/packages/web-components/fast-foundation/src/dialog/README.md b/packages/web-components/fast-foundation/src/dialog/README.md
@@ -23,10 +23,15 @@ export class FASTDialog extends Dialog {}
 
 ## Usage
 
-```html
-<fast-dialog id="simpleDialog" aria-label="Simple modal dialog" modal="true">
-    <h2>Dialog with text and button.</h2>
-    <fast-button>Button A</fast-button>
-    <fast-button autofocus>Should autofocus</fast-button>
-</fast-dialog>
+```html live
+<div>
+<fast-design-system-provider use-defaults>
+    <fast-button appearance="accent" onclick="document.getElementById('example1').toggleAttribute('hidden');">Open Dialog</fast-button>
+    <fast-dialog id="example1" class="example-dialog" aria-label="Simple modal dialog" modal="true" hidden>
+        <h2>Dialog</h2>
+        <p>This is an example dialog. Click the button below to close</p>
+        <fast-button autofocus onclick="document.getElementById('example1').toggleAttribute('hidden');">Close Dialog</fast-button>
+    </fast-dialog>
+</fast-design-system-provider>
+</div>
 ```
diff --git a/packages/web-components/fast-foundation/src/divider/README.md b/packages/web-components/fast-foundation/src/divider/README.md
@@ -23,6 +23,8 @@ export class FASTDivider extends Divider {}
 ```
 
 ## Usage
-```html
-<fast-divider></fast-divider>
+```html live
+<fast-design-system-provider use-defaults>
+    <fast-divider></fast-divider>
+</fast-design-system-provider>
 ```
diff --git a/packages/web-components/fast-foundation/src/flipper/README.md b/packages/web-components/fast-foundation/src/flipper/README.md
@@ -23,6 +23,8 @@ export class FASTFlipper extends Flipper {}
 ```
 
 ## Usage
-```html
-<fast-flipper direction="previous"></fast-flipper>
+```html live
+<fast-design-system-provider use-defaults>
+    <fast-flipper direction="previous"></fast-flipper>
+</fast-design-system-provider>
 ```
diff --git a/packages/web-components/fast-foundation/src/menu-item/README.md b/packages/web-components/fast-foundation/src/menu-item/README.md
@@ -24,6 +24,8 @@ export class FASTMenuItem extends MenuItem {}
 
 ## Usage
 
-```html
-<fast-menu-item role="menuitemcheckbox" checked>Open in new window</fast-menu-item>
+```html live
+<fast-design-system-provider use-defaults>
+    <fast-menu-item role="menuitemcheckbox" checked>Open in new window</fast-menu-item>
+</fast-design-system-provider>
 ```
diff --git a/packages/web-components/fast-foundation/src/menu/README.md b/packages/web-components/fast-foundation/src/menu/README.md
@@ -23,22 +23,15 @@ export class FASTMenu extends Menu {}
 ```
 
 ## Usage
-```html
-<fast-menu>
-    <fast-menu-item>Menu item 1</fast-menu-item>
-    <fast-menu-item>Menu item 2</fast-menu-item>
-    <fast-menu-item>Menu item 3</fast-menu-item>
-    <fast-divider></fast-divider>
-    <fast-menu-item role="menuitemradio">Menu item 4</fast-menu-item>
-    <fast-menu-item role="menuitemradio">Menu item 5</fast-menu-item>
-</fast-menu>
-```
-
-__Custom menu items__
-```html
-<fast-menu>
-    <div role="menuitem">Menu item 1</div>
-    <div role="menuitem">Menu item 2</div>
-    <div role="menuitem">Menu item 3</div>
-</fast-menu>
+```html live
+<fast-design-system-provider use-defaults>
+    <fast-menu>
+        <fast-menu-item>Menu item 1</fast-menu-item>
+        <fast-menu-item>Menu item 2</fast-menu-item>
+        <fast-menu-item>Menu item 3</fast-menu-item>
+        <fast-divider></fast-divider>
+        <fast-menu-item role="menuitemradio">Menu item 4</fast-menu-item>
+        <fast-menu-item role="menuitemradio">Menu item 5</fast-menu-item>
+    </fast-menu>
+</fast-design-system-provider>
 ```
diff --git a/packages/web-components/fast-foundation/src/progress/README.md b/packages/web-components/fast-foundation/src/progress/README.md
@@ -42,12 +42,16 @@ export class FASTProgressRing extends BaseProgressRing {}
 
 ### fast-progress
 
-```html
+```html live
+<fast-design-system-provider use-defaults>
     <fast-progress min="0" max="100" value="75"></fast-progress>
+</fast-design-system-provider>
 ```
 
 ### fast-progress-ring
 
-```html
-    <fast-progress-ring paused="true" min="0" max="100" value="75"></fast-progress-ring>
+```html live
+<fast-design-system-provider use-defaults>
+    <fast-progress-ring min="0" max="100" value="75"></fast-progress-ring>
+</fast-design-system-provider>
 ```
diff --git a/packages/web-components/fast-foundation/src/radio-group/README.md b/packages/web-components/fast-foundation/src/radio-group/README.md
@@ -24,12 +24,14 @@ export class FASTRadioGroup extends RadioGroup {}
 
 ## Usage
 
-```html
-<label id="radiogroup">Preset selected-value</label>
-<fast-radio-group value="maverick" aria-labelledby="radiogroup" name="best-pilot">
-    <fast-radio value="ice-man">Ice Man</fast-radio>
-    <fast-radio value="maverick">Maverick</fast-radio>
-    <fast-radio value="viper">Viper</fast-radio>
-    <fast-radio value="jester">Jester</fast-radio>
-</fast-radio-group>
+```html live
+<fast-design-system-provider use-defaults>
+    <label id="radiogroup">Preset selected-value</label>
+    <fast-radio-group value="maverick" aria-labelledby="radiogroup" name="best-pilot">
+        <fast-radio value="ice-man">Ice Man</fast-radio>
+        <fast-radio value="maverick">Maverick</fast-radio>
+        <fast-radio value="viper">Viper</fast-radio>
+        <fast-radio value="jester">Jester</fast-radio>
+    </fast-radio-group>
+</fast-design-system-provider>
 ```
diff --git a/packages/web-components/fast-foundation/src/radio/README.md b/packages/web-components/fast-foundation/src/radio/README.md
@@ -24,6 +24,8 @@ export class FASTRadio extends Radio {}
 
 ## Usage
 
-```html
-<fast-radio value="mango" required>Mango</fast-radio>
+```html live
+<fast-design-system-provider use-defaults>
+    <fast-radio value="mango" required>Mango</fast-radio>
+</fast-design-system-provider>
  ```
diff --git a/packages/web-components/fast-foundation/src/slider-label/README.md b/packages/web-components/fast-foundation/src/slider-label/README.md
@@ -24,6 +24,8 @@ export class FASTSliderLabel extends SliderLabel {}
 
 ## Usage
 
-```html
-<fast-slider-label>Fast</fast-slider-label>
+```html live
+<fast-design-system-provider use-defaults>
+    <fast-slider-label>Fast</fast-slider-label>
+</fast-design-system-provider>
 ```
diff --git a/packages/web-components/fast-foundation/src/slider/README.md b/packages/web-components/fast-foundation/src/slider/README.md
@@ -24,27 +24,29 @@ export class FASTSlider extends Slider {}
 
 ## Usage
 
-```html
-<fast-slider min="0" max="100" step="10" value="70">
-    <fast-slider-label
-        position="0"
-    >
-        0
-    </fast-slider-label>
-    <fast-slider-label
-        position="10"
-    >
-        10
-    </fast-slider-label>
-    <fast-slider-label
-        position="90"
-    >
-        90
-    </fast-slider-label>
-    <fast-slider-label
-        position="100"
-    >
-        100
-    </fast-slider-label>
-</fast-slider>
+```html live
+<fast-design-system-provider use-defaults>
+    <fast-slider min="0" max="100" step="10" value="70">
+        <fast-slider-label
+            position="0"
+        >
+            0
+        </fast-slider-label>
+        <fast-slider-label
+            position="10"
+        >
+            10
+        </fast-slider-label>
+        <fast-slider-label
+            position="90"
+        >
+            90
+        </fast-slider-label>
+        <fast-slider-label
+            position="100"
+        >
+            100
+        </fast-slider-label>
+    </fast-slider>
+</fast-design-system-provider>
 ```