chore: add additional component documentation for fast-foundation (#…

…3203)

* add additional anchor docs

* add badge additional docs

* add additional button docs

* add card additional docs

* add checkbox additional docs

* add additional dialog readme

* add additional divider docs

* add dialog and flipper

* add additional menu docs

* add progress and progress ring additional docs

* add radio additional docs

* fast-radio-group additional docs

* add slider and slider label additional docs

* add switch additional docs

* add tabs additional docs

* add text area additional docs

* add additional text field docs

* update code blocks and fix spelling

packages/web-components/fast-foundation/src/anchor/README.md

@@ -5,6 +5,10 @@ sidebar_label: fast-anchor
 custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/anchor/README.md
 ---
 
+`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.*
+
 ## Applying Custom Styles
 
 ```ts
@@ -21,4 +25,9 @@ import { MyAnchorStyles as styles } from "./anchor.styles";
     },
 })
 export class FASTAnchor extends Anchor {}
+```
+
+## Usage
+```html
+<fast-anchor href="https://fast.design" appearance="hypertext">FAST-DNA</fast-anchor>
 ```

packages/web-components/fast-foundation/src/badge/README.md

@@ -5,6 +5,8 @@ sidebar_label: fast-badge
 custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/badge/README.md
 ---
 
+The `fast-badge` component is used to highlight an item and attract attention or flag status.
+
 ## Applying Custom Styles
 
 ```ts
@@ -18,4 +20,24 @@ import { BadgeStyles as styles } from "./badge.styles";
     styles,
 })
 export class FASTBadge extends Badge {}
-```
+```
+
+## Usage
+The `fill` and `color` attributes of the *badge* create CSS custom properties which can be used to style the control.
+
+__Example custom property map__
+```css
+fast-badge {
+    --badge-fill-primary: #00FF00;
+    --badge-fill-danger: #FF0000;
+    --badge-color-light: #FFFFFF;
+    --badge-color-dark: #000000;
+}
+```
+
+
+```html
+<fast-badge fill="danger" color="light">Danger</fast-badge>
+```
+
+*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.*

packages/web-components/fast-foundation/src/button/README.md

@@ -5,6 +5,10 @@ sidebar_label: fast-button
 custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/button/README.md
 ---
 
+`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.*
+
 ## Applying Custom Styles
 
 ```ts
@@ -22,4 +26,9 @@ import { ButtonStyles as styles } from "./button.styles";
     },
 })
 export class FASTButton extends Button {}
+```
+
+## Usage
+```html
+<fast-button appearance="primary">Submit</fast-button>
 ```

packages/web-components/fast-foundation/src/card/README.md

@@ -5,6 +5,8 @@ sidebar_label: fast-card
 custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/card/README.md
 ---
 
+The `fast-card` component is a visual container without semantics that takes children. Cards are snapshots of content that are typically used in a group to present collections of related information.
+
 ## Applying Custom Styles
 
 ```ts
@@ -18,4 +20,15 @@ import { CardStyles as styles } from "./card.styles";
     styles,
 })
 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>
 ```

packages/web-components/fast-foundation/src/checkbox/README.md

@@ -5,6 +5,8 @@ sidebar_label: fast-checkbox
 custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/checkbox/README.md
 ---
 
+An implementation of a [checkbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/checkbox) as a form-connected web-component.
+
 ## Applying Custom Styles
 
 ```ts
@@ -18,4 +20,15 @@ import { CheckboxStyles as styles } from "./checkbox.styles";
     styles,
 })
 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>
 ```

packages/web-components/fast-foundation/src/dialog/README.md

@@ -4,6 +4,7 @@ title: fast-dialog
 sidebar_label: fast-dialog
 custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/dialog/README.md
 ---
+A web component implementation of a [dialog](https://w3c.github.io/aria-practices/#dialog_modal) which can either be modal or non-modal.
 
 ## Applying Custom Styles
 
@@ -18,4 +19,14 @@ import { DialogStyles as styles } from "./dialog.styles";
     styles,
 })
 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>
 ```

packages/web-components/fast-foundation/src/divider/README.md

@@ -5,6 +5,8 @@ sidebar_label: fast-divider
 custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/divider/README.md
 ---
 
+A web component implementation of a [horizontal rule](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr).
+
 ##  Applying Custom Styles
 
 ```ts
@@ -18,4 +20,9 @@ import { DividerStyles as styles } from "./divider.styles";
     styles,
 })
 export class FASTDivider extends Divider {}
+```
+
+## Usage
+```html
+<fast-divider></fast-divider>
 ```

packages/web-components/fast-foundation/src/flipper/README.md

@@ -5,6 +5,8 @@ sidebar_label: fast-flipper
 custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/flipper/README.md
 ---
 
+The flipper component is most often used to page through blocks of content or collections of ui elements. As flippers are often a supplemental form of navigation, the flippers are hidden by default to avoid duplicate keyboard interaction. Passing an attribute of `aria-hidden="false"` will expose the flippers to assistive technology.
+
 ## Applying Custom Styles
 
 ```ts
@@ -18,4 +20,9 @@ import { FlipperStyles as styles } from "./flipper.styles";
     styles,
 })
 export class FASTFlipper extends Flipper {}
+```
+
+## Usage
+```html
+<fast-flipper direction="previous"></fast-flipper>
 ```

packages/web-components/fast-foundation/src/menu-item/README.md

@@ -5,6 +5,8 @@ sidebar_label: fast-menu-item
 custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/menu-item/README.md
 ---
 
+The `fast-menu-item` is a custom element meant to be used with `fast-menu` and supports roles of `menuitem`, `menuitemcheckbox`, and `menuitemradio`.
+
 ## Applying Custom Styles
 
 ```ts
@@ -18,4 +20,10 @@ import { MenuItemStyles as styles } from "./menu-item.styles";
     styles,
 })
 export class FASTMenuItem extends MenuItem {}
+```
+
+## Usage
+
+```html
+<fast-menu-item role="menuitemcheckbox" checked>Open in new window</fast-menu-item>
 ```

packages/web-components/fast-foundation/src/menu/README.md

@@ -5,6 +5,8 @@ sidebar_label: fast-menu
 custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/menu/README.md
 ---
 
+The menu is a widget that offers a list of choices to the user, such as a set of actions or functions. While any DOM content is permissible as a child of the menu, only `fast-menu-item`'s and slotted content with a role of `menuitem`, `menuitemcheckbox`, or `menuitemradio` will recieve keyboard support.
+
 ## Applying Custom Styles
 
 ```ts
@@ -18,4 +20,25 @@ import { MenuStyles as styles } from "./menu.styles";
     styles,
 })
 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>
 ```

packages/web-components/fast-foundation/src/progress/README.md

@@ -4,6 +4,7 @@ title: fast-progress
 sidebar_label: fast-progress
 custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/progress/README.md
 ---
+Progress components are used to indicate the length of time a process will take. This may either be as a determinate state in which the progress is a percentage of the total time needed to complete the task, or as an indeterminate state where the wait time is unspecified. For progress components which have a linear visual appearance, use `fast-progress`. For progress implementations which are circular, use `fast-progress-ring`.
 
 ## Applying Custom Styles
 
@@ -35,4 +36,18 @@ import { ProgressStyles as styles } from "./progress-ring.styles";
     styles,
 })
 export class FASTProgressRing extends BaseProgressRing {}
+```
+
+## Usage
+
+### fast-progress
+
+```html
+    <fast-progress min="0" max="100" value="75"></fast-progress>
+```
+
+### fast-progress-ring
+
+```html
+    <fast-progress-ring paused="true" min="0" max="100" value="75"></fast-progress-ring>
 ```

packages/web-components/fast-foundation/src/radio-group/README.md

@@ -5,6 +5,8 @@ sidebar_label: fast-radio-group
 custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/radio-group/README.md
 ---
 
+An implementation of a [radio-group](https://w3c.github.io/aria-practices/#radiobutton). While any DOM content is permissible as a child of the radiogroup, only `fast-radio`'s and slotted content with a role of `radio` will recieve keyboard support.
+
 ## Applying Custom Styles
 
 ```ts
@@ -18,4 +20,16 @@ import { RadioGroupStyles as styles } from "./radio-group.styles";
     styles,
 })
 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>
 ```

packages/web-components/fast-foundation/src/radio/README.md

@@ -5,6 +5,8 @@ sidebar_label: fast-radio
 custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/radio/README.md
 ---
 
+An implementation of a [radio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio) as a form-connected web-component.
+
 ## Applying Custom Styles
 
 ```ts
@@ -18,4 +20,10 @@ import { RadioStyles as styles } from "./radio.styles";
     styles,
 })
 export class FASTRadio extends Radio {}
-```
+```
+
+## Usage
+
+```html
+<fast-radio value="mango" required>Mango</fast-radio>
+ ```

packages/web-components/fast-foundation/src/slider-label/README.md

@@ -5,6 +5,8 @@ sidebar_label: fast-slider-label
 custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/slider-label/README.md
 ---
 
+The `fast-slider-label` component provides a default styled label to be placed inside a `fast-slider`. Users can choose to hide the mark as well as provide custom label content.
+
 ## Applying Custom Styles
 
 ```ts
@@ -18,4 +20,10 @@ import { SliderLabelStyles as styles } from "./slider-label.styles";
     styles,
 })
 export class FASTSliderLabel extends SliderLabel {}
+```
+
+## Usage
+
+```html
+<fast-slider-label>Fast</fast-slider-label>
 ```

packages/web-components/fast-foundation/src/slider/README.md

@@ -5,6 +5,8 @@ sidebar_label: fast-slider
 custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/slider/README.md
 ---
 
+An implementation of a [range slider](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/range) as a form-connected web-component.
+
 ## Applying Custom Styles
 
 ```ts
@@ -18,4 +20,31 @@ import { SliderStyles as styles } from "./slider.styles";
     styles,
 })
 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>
 ```