diff --git a/packages/web-components/fast-foundation/src/anchor/README.md b/packages/web-components/fast-foundation/src/anchor/README.md index 246c52f7353..fb374503121 100644 --- a/packages/web-components/fast-foundation/src/anchor/README.md +++ b/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-DNA ``` \ No newline at end of file diff --git a/packages/web-components/fast-foundation/src/badge/README.md b/packages/web-components/fast-foundation/src/badge/README.md index fc3c6d053ac..2504545d68e 100644 --- a/packages/web-components/fast-foundation/src/badge/README.md +++ b/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 {} -``` \ No newline at end of file +``` + +## 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 +Danger +``` + +*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.* \ No newline at end of file diff --git a/packages/web-components/fast-foundation/src/button/README.md b/packages/web-components/fast-foundation/src/button/README.md index ff8c000f69c..8f01db4ebcb 100644 --- a/packages/web-components/fast-foundation/src/button/README.md +++ b/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 +Submit ``` \ No newline at end of file diff --git a/packages/web-components/fast-foundation/src/card/README.md b/packages/web-components/fast-foundation/src/card/README.md index 53b762b2218..35ab5f13048 100644 --- a/packages/web-components/fast-foundation/src/card/README.md +++ b/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 + + Placeholder image with watermark +

Card title

+

At purus lectus quis habitant commodo, cras. Aliquam malesuada velit a tortor. Felis orci tellus netus risus et ultricies augue aliquet.

+ Learn more +
``` \ No newline at end of file diff --git a/packages/web-components/fast-foundation/src/checkbox/README.md b/packages/web-components/fast-foundation/src/checkbox/README.md index ded52c8fe64..8ead1438fd3 100644 --- a/packages/web-components/fast-foundation/src/checkbox/README.md +++ b/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 +
+ Fruits + Apple + Banana + Honeydew + Mango +
``` \ No newline at end of file diff --git a/packages/web-components/fast-foundation/src/dialog/README.md b/packages/web-components/fast-foundation/src/dialog/README.md index b50c41de7f0..f249af75d5d 100644 --- a/packages/web-components/fast-foundation/src/dialog/README.md +++ b/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 + +

Dialog with text and button.

+ Button A + Should autofocus +
``` \ No newline at end of file diff --git a/packages/web-components/fast-foundation/src/divider/README.md b/packages/web-components/fast-foundation/src/divider/README.md index 8d7d9ccef31..43b51542ebb 100644 --- a/packages/web-components/fast-foundation/src/divider/README.md +++ b/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 + ``` \ No newline at end of file diff --git a/packages/web-components/fast-foundation/src/flipper/README.md b/packages/web-components/fast-foundation/src/flipper/README.md index 9eb4e8d4caa..a08a1c7b0ab 100644 --- a/packages/web-components/fast-foundation/src/flipper/README.md +++ b/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 + ``` \ No newline at end of file diff --git a/packages/web-components/fast-foundation/src/menu-item/README.md b/packages/web-components/fast-foundation/src/menu-item/README.md index 83cbfeb96af..2508e7c2f5f 100644 --- a/packages/web-components/fast-foundation/src/menu-item/README.md +++ b/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 +Open in new window ``` \ No newline at end of file diff --git a/packages/web-components/fast-foundation/src/menu/README.md b/packages/web-components/fast-foundation/src/menu/README.md index 2835405b413..4801534a429 100644 --- a/packages/web-components/fast-foundation/src/menu/README.md +++ b/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 + + Menu item 1 + Menu item 2 + Menu item 3 + + Menu item 4 + Menu item 5 + +``` + +__Custom menu items__ +```html + +
Menu item 1
+
Menu item 2
+
Menu item 3
+
``` \ No newline at end of file diff --git a/packages/web-components/fast-foundation/src/progress/README.md b/packages/web-components/fast-foundation/src/progress/README.md index 698b2cc9007..e49140bb68b 100644 --- a/packages/web-components/fast-foundation/src/progress/README.md +++ b/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-ring + +```html + ``` \ No newline at end of file diff --git a/packages/web-components/fast-foundation/src/radio-group/README.md b/packages/web-components/fast-foundation/src/radio-group/README.md index 0a8c0f5cf62..43c5d2623ec 100644 --- a/packages/web-components/fast-foundation/src/radio-group/README.md +++ b/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 + + + Ice Man + Maverick + Viper + Jester + ``` \ No newline at end of file diff --git a/packages/web-components/fast-foundation/src/radio/README.md b/packages/web-components/fast-foundation/src/radio/README.md index e0a962eabf1..3e6d9baeced 100644 --- a/packages/web-components/fast-foundation/src/radio/README.md +++ b/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 {} -``` \ No newline at end of file +``` + +## Usage + +```html +Mango + ``` \ No newline at end of file diff --git a/packages/web-components/fast-foundation/src/slider-label/README.md b/packages/web-components/fast-foundation/src/slider-label/README.md index 008044069c7..170cffd6ead 100644 --- a/packages/web-components/fast-foundation/src/slider-label/README.md +++ b/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 ``` \ No newline at end of file diff --git a/packages/web-components/fast-foundation/src/slider/README.md b/packages/web-components/fast-foundation/src/slider/README.md index 3ffb03df237..7d61b9aa870 100644 --- a/packages/web-components/fast-foundation/src/slider/README.md +++ b/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 + + + 0 + + + 10 + + + 90 + + + 100 + + ``` \ No newline at end of file diff --git a/packages/web-components/fast-foundation/src/switch/README.md b/packages/web-components/fast-foundation/src/switch/README.md index 6b05149f9fe..2eb7afb1e8f 100644 --- a/packages/web-components/fast-foundation/src/switch/README.md +++ b/packages/web-components/fast-foundation/src/switch/README.md @@ -5,6 +5,8 @@ sidebar_label: fast-switch custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/switch/README.md --- +An implementation of a [switch](https://w3c.github.io/aria/#switch) as a form-connected web-component. + ## Applying Custom Styles ```ts @@ -18,4 +20,14 @@ import { SwitchStyles as styles } from "./switch.styles"; styles, }) export class FASTSwitch extends Switch {} +``` + +## Usage + +```html + + Theme + Dark + Light + ``` \ No newline at end of file diff --git a/packages/web-components/fast-foundation/src/tabs/README.md b/packages/web-components/fast-foundation/src/tabs/README.md index 6f22a26c529..812de0667aa 100644 --- a/packages/web-components/fast-foundation/src/tabs/README.md +++ b/packages/web-components/fast-foundation/src/tabs/README.md @@ -49,4 +49,33 @@ import { TabPanelStyles as styles } from "./tab-panel.styles"; styles, }) export class FASTTabPanel extends TabPanel {} +``` + +## Usage + +```html + + Appetizers + Entrees + Desserts + + Stuffed artichokes + Bruschetta + Oven-baked polenta + Salami and Fig Crostini with Ricotta + Rosemary-Potato Focaccia with Goat Cheese + + + Mushroom-Sausage Ragù + Tomato Bread Soup with Steamed Mussels + Grilled Fish with Artichoke Caponata + Celery Root and Mushroom Lasagna + Osso Buco with Citrus Gremolata + + + Tiramisu + Spumoni + Limoncello and Ice Cream with Biscotti + + ``` \ No newline at end of file diff --git a/packages/web-components/fast-foundation/src/text-area/README.md b/packages/web-components/fast-foundation/src/text-area/README.md index 8b855315dc3..efbaab91d1f 100644 --- a/packages/web-components/fast-foundation/src/text-area/README.md +++ b/packages/web-components/fast-foundation/src/text-area/README.md @@ -5,6 +5,8 @@ sidebar_label: fast-text-area custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/text-area/README.md --- +An implementation of an [HTML textarea element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) as a form-connected web-component. The `fast-text-area` supports two visual appearances, outline and filled, with the control defaulting to the outline appearance. + ## Applying Custom Styles ```ts @@ -21,4 +23,10 @@ import { TextAreaStyles as styles } from "./text-area.styles"; }, }) export class FASTTextArea extends TextArea {} +``` + +## Usage + +```html +How was your stay? ``` \ No newline at end of file diff --git a/packages/web-components/fast-foundation/src/text-field/README.md b/packages/web-components/fast-foundation/src/text-field/README.md index b3385bd0f05..facf5cbc4d1 100644 --- a/packages/web-components/fast-foundation/src/text-field/README.md +++ b/packages/web-components/fast-foundation/src/text-field/README.md @@ -5,6 +5,8 @@ sidebar_label: fast-text-field custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/text-field/README.md --- +An implementation of a [text field](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/text) as a form-connected web-component. The `fast-text-field` supports two visual appearances, outline and filled, with the control defaulting to the outline appearance. + ## Applying Custom Styles ```ts @@ -21,4 +23,10 @@ import { TextFieldStyles as styles } from "./text-field.styles"; }, }) export class FASTTextField extends TextField {} +``` + +## Usage + +```html +Email ``` \ No newline at end of file