Accordion Item Heading
- `,
- expanded: true,
+ expanded: false,
+ },
+ argTypes: {
+ expanded: { control: "boolean" },
+ headinglevel: { control: { type: "number", max: 6, min: 1 } },
+ id: { control: "text" },
+ storyContent: { table: { disable: true } },
},
-} as AccordionItemMeta;
+} as MetaAccordion Item Heading
+ `,
};
diff --git a/packages/web-components/fast-foundation/src/accordion/README.md b/packages/web-components/fast-foundation/src/accordion/README.md
index 36029bc7afa..b98f16d7248 100644
--- a/packages/web-components/fast-foundation/src/accordion/README.md
+++ b/packages/web-components/fast-foundation/src/accordion/README.md
@@ -104,6 +104,16 @@ export const myAccordionItem = AccordionItem.compose+ + + ### class: `FASTAccordion` #### Superclass @@ -138,14 +148,6 @@ export const myAccordionItem = AccordionItem.compose
-### Variables - -| Name | Description | Type | -| --------------------- | ----------------------------- | --------------------------------------- | -| `AccordionExpandMode` | Expand mode for FASTAccordion | `{ single: "single", multi: "multi", }` | - -
- ### class: `FASTAccordionItem` diff --git a/packages/web-components/fast-foundation/src/accordion/accordion.options.ts b/packages/web-components/fast-foundation/src/accordion/accordion.options.ts new file mode 100644 index 00000000000..65430ab7737 --- /dev/null +++ b/packages/web-components/fast-foundation/src/accordion/accordion.options.ts @@ -0,0 +1,21 @@ +/** + * Expand mode for {@link FASTAccordion} + * @public + */ +export const AccordionExpandMode = { + /** + * Designates only a single {@link @microsoft/fast-foundation#(FASTAccordionItem:class) } can be open a time. + */ + single: "single", + + /** + * Designates multiple {@link @microsoft/fast-foundation#(FASTAccordionItem:class) | FASTAccordionItemItems} can be open simultaneously. + */ + multi: "multi", +} as const; + +/** + * Type for the {@link FASTAccordion} Expand Mode + * @public + */ +export type AccordionExpandMode = typeof AccordionExpandMode[keyof typeof AccordionExpandMode]; diff --git a/packages/web-components/fast-foundation/src/accordion/accordion.ts b/packages/web-components/fast-foundation/src/accordion/accordion.ts index bdf7aea98e8..1b192037667 100644 --- a/packages/web-components/fast-foundation/src/accordion/accordion.ts +++ b/packages/web-components/fast-foundation/src/accordion/accordion.ts @@ -7,28 +7,7 @@ import { wrapInBounds, } from "@microsoft/fast-web-utilities"; import { FASTAccordionItem } from "../accordion-item/accordion-item.js"; - -/** - * Expand mode for {@link FASTAccordion} - * @public - */ -export const AccordionExpandMode = { - /** - * Designates only a single {@link @microsoft/fast-foundation#(FASTAccordionItem:class) } can be open a time. - */ - single: "single", - - /** - * Designates multiple {@link @microsoft/fast-foundation#(FASTAccordionItem:class) | FASTAccordionItemItems} can be open simultaneously. - */ - multi: "multi", -} as const; - -/** - * Type for the {@link FASTAccordion} Expand Mode - * @public - */ -export type AccordionExpandMode = typeof AccordionExpandMode[keyof typeof AccordionExpandMode]; +import { AccordionExpandMode } from "./accordion.options.js"; /** * An Accordion Custom HTML Element diff --git a/packages/web-components/fast-foundation/src/accordion/index.ts b/packages/web-components/fast-foundation/src/accordion/index.ts index ad2c4085329..dc8f7f0aa86 100644 --- a/packages/web-components/fast-foundation/src/accordion/index.ts +++ b/packages/web-components/fast-foundation/src/accordion/index.ts @@ -1,2 +1,3 @@ -export * from "./accordion.template.js"; export * from "./accordion.js"; +export * from "./accordion.options.js"; +export * from "./accordion.template.js"; diff --git a/packages/web-components/fast-foundation/src/accordion/stories/accordion.stories.ts b/packages/web-components/fast-foundation/src/accordion/stories/accordion.stories.ts index f89243dea60..a4750abd9b8 100644 --- a/packages/web-components/fast-foundation/src/accordion/stories/accordion.stories.ts +++ b/packages/web-components/fast-foundation/src/accordion/stories/accordion.stories.ts @@ -1,44 +1,37 @@ import { html } from "@microsoft/fast-element"; -import type { Args, Meta } from "@storybook/html"; -import type { FASTAccordion } from "../accordion.js"; -import { AccordionExpandMode } from "../accordion.js"; +import type { Meta, Story, StoryArgs } from "../../__test__/helpers.js"; +import { renderComponent } from "../../__test__/helpers.js"; +import { FASTAccordion } from "../accordion.js"; +import { AccordionExpandMode } from "../accordion.options.js"; -type AccordionArgs = Args & FASTAccordion; -type AccordionMeta = Meta
Accordion Item 1 Heading
- Accordion Item 1 Content
- Accordion Item 2 Heading
- Accordion Item 1 Heading
+ Accordion Item 1 Content
+ Accordion Item 2 Heading
+ + + + ### class: `FASTAnchor` #### Superclass @@ -69,17 +79,17 @@ This component is built with the expectation that focus is delegated to the anch #### Fields -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------------- | ------- | -------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `download` | public | `string` | | Prompts the user to save the linked URL. See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | | -| `href` | public | `string` | | The URL the hyperlink references. See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | | -| `hreflang` | public | `string` | | Hints at the language of the referenced resource. See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | | -| `ping` | public | `string` | | See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | | -| `referrerpolicy` | public | `string` | | See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | | -| `rel` | public | `string` | | See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | | -| `target` | public | `"_self" or "_blank" or "_parent" or "_top"` | | See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | | -| `type` | public | `string` | | See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | | -| `control` | public | `HTMLAnchorElement` | | References the root element | | +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------------- | ------- | ------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `download` | public | `string` | | Prompts the user to save the linked URL. See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | | +| `href` | public | `string` | | The URL the hyperlink references. See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | | +| `hreflang` | public | `string` | | Hints at the language of the referenced resource. See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | | +| `ping` | public | `string` | | See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | | +| `referrerpolicy` | public | `string` | | See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | | +| `rel` | public | `string` | | See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | | +| `target` | public | `AnchorTarget` | | See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | | +| `type` | public | `string` | | See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | | +| `control` | public | `HTMLAnchorElement` | | References the root element | | #### Attributes diff --git a/packages/web-components/fast-foundation/src/anchor/anchor.options.ts b/packages/web-components/fast-foundation/src/anchor/anchor.options.ts new file mode 100644 index 00000000000..bee40f4c585 --- /dev/null +++ b/packages/web-components/fast-foundation/src/anchor/anchor.options.ts @@ -0,0 +1,18 @@ +/** + * Anchor target values. + * + * @public + */ +export const AnchorTarget = { + _self: "_self", + _blank: "_blank", + _parent: "_parent", + _top: "_top", +} as const; + +/** + * Type for anchor target values. + * + * @public + */ +export type AnchorTarget = typeof AnchorTarget[keyof typeof AnchorTarget]; diff --git a/packages/web-components/fast-foundation/src/anchor/anchor.ts b/packages/web-components/fast-foundation/src/anchor/anchor.ts index 8730147b4c1..781230fc73e 100644 --- a/packages/web-components/fast-foundation/src/anchor/anchor.ts +++ b/packages/web-components/fast-foundation/src/anchor/anchor.ts @@ -5,6 +5,7 @@ import { StartEndOptions, } from "../patterns/index.js"; import { applyMixins } from "../utilities/apply-mixins.js"; +import type { AnchorTarget } from "./anchor.options.js"; /** * Anchor configuration options @@ -86,7 +87,7 @@ export class FASTAnchor extends FASTElement { * HTML Attribute: target */ @attr - public target: "_self" | "_blank" | "_parent" | "_top"; + public target: AnchorTarget; /** * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | element } for more information. diff --git a/packages/web-components/fast-foundation/src/anchor/index.ts b/packages/web-components/fast-foundation/src/anchor/index.ts index 3249312b46f..9ca2f50053d 100644 --- a/packages/web-components/fast-foundation/src/anchor/index.ts +++ b/packages/web-components/fast-foundation/src/anchor/index.ts @@ -1,2 +1,3 @@ -export * from "./anchor.template.js"; export * from "./anchor.js"; +export * from "./anchor.options.js"; +export * from "./anchor.template.js"; diff --git a/packages/web-components/fast-foundation/src/anchor/stories/anchor.stories.ts b/packages/web-components/fast-foundation/src/anchor/stories/anchor.stories.ts index a39c54cc5f7..a273bfddf84 100644 --- a/packages/web-components/fast-foundation/src/anchor/stories/anchor.stories.ts +++ b/packages/web-components/fast-foundation/src/anchor/stories/anchor.stories.ts @@ -1,44 +1,81 @@ import { html } from "@microsoft/fast-element"; -import type { Args, Meta } from "@storybook/html"; -import type { FASTAnchor as FoundationAnchor } from "../anchor.js"; +import type { Meta, Story, StoryArgs } from "../../__test__/helpers.js"; +import { renderComponent } from "../../__test__/helpers.js"; +import type { FASTAnchor } from "../anchor.js"; +import { AnchorTarget } from "../anchor.options.js"; -type AnchorArgs = Args & FoundationAnchor; -type AnchorMeta = Meta
+ + + ### class: `FASTAnchoredRegion` #### Superclass @@ -168,14 +183,6 @@ export const myAnchoredRegion = AnchoredRegion.compose({
-### Variables - -| Name | Description | Type | -| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | -| `AutoUpdateMode` | Defines if the component updates its position automatically. Calling update() always provokes an update. anchor - the component only updates its position when the anchor resizes (default) auto - the component updates its position when: - update() is called - the anchor resizes - the window resizes - the viewport resizes - any scroll event in the document | `{ anchor: "anchor", auto: "auto", }` | - -
- ## Additional resources diff --git a/packages/web-components/fast-foundation/src/anchored-region/anchored-region-config.ts b/packages/web-components/fast-foundation/src/anchored-region/anchored-region-config.ts index 17a3fa770ce..378f70ffccb 100644 --- a/packages/web-components/fast-foundation/src/anchored-region/anchored-region-config.ts +++ b/packages/web-components/fast-foundation/src/anchored-region/anchored-region-config.ts @@ -4,7 +4,7 @@ import type { AxisScalingMode, HorizontalPosition, VerticalPosition, -} from "./anchored-region.js"; +} from "./anchored-region.options.js"; /** * A utility interface to store anchored region diff --git a/packages/web-components/fast-foundation/src/anchored-region/anchored-region.options.ts b/packages/web-components/fast-foundation/src/anchored-region/anchored-region.options.ts new file mode 100644 index 00000000000..0a818297c5e --- /dev/null +++ b/packages/web-components/fast-foundation/src/anchored-region/anchored-region.options.ts @@ -0,0 +1,122 @@ +/** + * Values to define the base behavior of an anchored region on a particular axis + * @public + */ +export const AxisPositioningMode = { + uncontrolled: "uncontrolled", + locktodefault: "locktodefault", + dynamic: "dynamic", +} as const; + +/** + * Type to define the base behavior of an anchored region on a particular axis + * @public + */ +export type AxisPositioningMode = typeof AxisPositioningMode[keyof typeof AxisPositioningMode]; + +/** + * Values to define the scaling behavior of an anchored region on a particular axis + * @public + */ +export const AxisScalingMode = { + anchor: "anchor", + content: "content", + fill: "fill", +} as const; + +/** + * Type to define the scaling behavior of an anchored region on a particular axis + * + * @public + */ +export type AxisScalingMode = typeof AxisScalingMode[keyof typeof AxisScalingMode]; + +/** + * Values for the horizontal positioning options for an anchored region + * @public + */ +export const HorizontalPosition = { + start: "start", + end: "end", + left: "left", + right: "right", + center: "center", + unset: "unset", +} as const; + +/** + * Type for the horizontal positioning options for an anchored region + * + * @public + */ +export type HorizontalPosition = typeof HorizontalPosition[keyof typeof HorizontalPosition]; + +/** + * Values for the vertical positioning options for an anchored region + * @public + */ +export const VerticalPosition = { + top: "top", + bottom: "bottom", + center: "center", + unset: "unset", +} as const; + +/** + * Type for the vertical positioning options for an anchored region + * + * @public + */ +export type VerticalPosition = typeof VerticalPosition[keyof typeof VerticalPosition]; + +/** + * Defines if the component updates its position automatically. Calling update() always provokes an update. + * anchor - the component only updates its position when the anchor resizes (default) + * auto - the component updates its position when: + * - update() is called + * - the anchor resizes + * - the window resizes + * - the viewport resizes + * - any scroll event in the document + * + * @public + */ +export const AutoUpdateMode = { + anchor: "anchor", + auto: "auto", +} as const; + +/** + * Type for the auto update mode values + * @public + */ +export type AutoUpdateMode = typeof AutoUpdateMode[keyof typeof AutoUpdateMode]; + +/** + * Values to describe the possible positions of the region relative to its anchor. + * Depending on the axis start = left/top, end = right/bottom + * @public + */ +export const AnchoredRegionPositionLabel = { + start: "start", + insetStart: "insetStart", + insetEnd: "insetEnd", + end: "end", + center: "center", +} as const; + +/** + * Describes the possible positions of the region relative + * to its anchor. Depending on the axis start = left/top, end = right/bottom + * + * @public + */ +export type AnchoredRegionPositionLabel = typeof AnchoredRegionPositionLabel[keyof typeof AnchoredRegionPositionLabel]; + +/** + * @internal + */ +export interface Dimension { + height: number; + width: number; +} diff --git a/packages/web-components/fast-foundation/src/anchored-region/anchored-region.ts b/packages/web-components/fast-foundation/src/anchored-region/anchored-region.ts index 2bdf4d1821f..f68bf6a9345 100644 --- a/packages/web-components/fast-foundation/src/anchored-region/anchored-region.ts +++ b/packages/web-components/fast-foundation/src/anchored-region/anchored-region.ts @@ -6,77 +6,15 @@ import type { ResizeObserverClassDefinition, ResizeObserverEntry, } from "../utilities/resize-observer.js"; - -/** - * Defines the base behavior of an anchored region on a particular axis - * - * @public - */ -export type AxisPositioningMode = "uncontrolled" | "locktodefault" | "dynamic"; - -/** - * Defines the scaling behavior of an anchored region on a particular axis - * - * @public - */ -export type AxisScalingMode = "anchor" | "fill" | "content"; - -/** - * Defines the horizontal positioning options for an anchored region - * - * @public - */ -export type HorizontalPosition = "start" | "end" | "left" | "right" | "center" | "unset"; - -/** - * Defines the vertical positioning options for an anchored region - * - * @public - */ -export type VerticalPosition = "top" | "bottom" | "center" | "unset"; - -/** - * Defines if the component updates its position automatically. Calling update() always provokes an update. - * anchor - the component only updates its position when the anchor resizes (default) - * auto - the component updates its position when: - * - update() is called - * - the anchor resizes - * - the window resizes - * - the viewport resizes - * - any scroll event in the document - * - * @public - */ -export const AutoUpdateMode = { - anchor: "anchor", - auto: "auto", -} as const; - -/** - * @public - */ -export type AutoUpdateMode = typeof AutoUpdateMode[keyof typeof AutoUpdateMode]; - -/** - * Describes the possible positions of the region relative - * to its anchor. Depending on the axis start = left/top, end = right/bottom - * - * @public - */ -export type AnchoredRegionPositionLabel = - | "start" - | "insetStart" - | "insetEnd" - | "end" - | "center"; - -/** - * @internal - */ -interface Dimension { - height: number; - width: number; -} +import type { + AnchoredRegionPositionLabel, + AutoUpdateMode, + AxisPositioningMode, + AxisScalingMode, + Dimension, + HorizontalPosition, + VerticalPosition, +} from "./anchored-region.options.js"; /** * An anchored region Custom HTML Element. diff --git a/packages/web-components/fast-foundation/src/anchored-region/index.ts b/packages/web-components/fast-foundation/src/anchored-region/index.ts index 31e0379e3fb..5ec59157ebb 100644 --- a/packages/web-components/fast-foundation/src/anchored-region/index.ts +++ b/packages/web-components/fast-foundation/src/anchored-region/index.ts @@ -1,3 +1,4 @@ -export * from "./anchored-region.template.js"; -export * from "./anchored-region.js"; export * from "./anchored-region-config.js"; +export * from "./anchored-region.js"; +export * from "./anchored-region.options.js"; +export * from "./anchored-region.template.js"; diff --git a/packages/web-components/fast-foundation/src/anchored-region/stories/anchored-region.stories.ts b/packages/web-components/fast-foundation/src/anchored-region/stories/anchored-region.stories.ts index 30433ef648e..e6e655c8a87 100644 --- a/packages/web-components/fast-foundation/src/anchored-region/stories/anchored-region.stories.ts +++ b/packages/web-components/fast-foundation/src/anchored-region/stories/anchored-region.stories.ts @@ -1,38 +1,39 @@ import { html } from "@microsoft/fast-element"; -import type { Args, Meta } from "@storybook/html"; +import { uniqueId } from "@microsoft/fast-web-utilities"; +import type { Meta, Story, StoryArgs } from "../../__test__/helpers.js"; +import { renderComponent } from "../../__test__/helpers.js"; import type { FASTAnchoredRegion } from "../anchored-region.js"; +import { + AutoUpdateMode, + AxisPositioningMode, + AxisScalingMode, + HorizontalPosition, + VerticalPosition, +} from "../anchored-region.options.js"; -type AnchoredRegionArgs = Args & FASTAnchoredRegion; -type AnchoredRegionMeta = Meta
-
- Anchor
-
+const storyTemplate = html>`
+ `
export default {
title: "Anchored Region",
args: {
- autoUpdateMode: "auto",
- verticalPositioningMode: "locktodefault",
- horizontalPositioningMode: "locktodefault",
- verticalDefaultPosition: "top",
- horizontalDefaultPosition: "left",
- content: html`
-
+ Anchor
- ${x => x?.content}
+ ${x => x.storyContent}
`;
@@ -40,56 +41,83 @@ const storyTemplate = html
- anchored-region
+ storyContent: html`
+ ;
+
+export const AnchoredRegion: Story = renderComponent(
+ storyTemplate
+).bind({});
-export const AnchoredRegion = (args: AnchoredRegionArgs) => {
- const storyFragment = new DocumentFragment();
- storyTemplate.render(args, storyFragment);
- return storyFragment.firstElementChild;
+export const LockToDefault: Story = AnchoredRegion.bind({});
+LockToDefault.args = {
+ horizontalDefaultPosition: HorizontalPosition.right,
+ horizontalPositioningMode: AxisPositioningMode.locktodefault,
+ verticalDefaultPosition: VerticalPosition.bottom,
+ verticalPositioningMode: AxisPositioningMode.locktodefault,
};
diff --git a/packages/web-components/fast-foundation/src/avatar/stories/avatar.stories.ts b/packages/web-components/fast-foundation/src/avatar/stories/avatar.stories.ts
index 16a02442856..a59c9891a5f 100644
--- a/packages/web-components/fast-foundation/src/avatar/stories/avatar.stories.ts
+++ b/packages/web-components/fast-foundation/src/avatar/stories/avatar.stories.ts
@@ -1,30 +1,25 @@
import { css, html } from "@microsoft/fast-element";
-import type { Args, Meta } from "@storybook/html";
+import type { Meta, Story, StoryArgs } from "../../__test__/helpers.js";
+import { renderComponent } from "../../__test__/helpers.js";
import type { FASTAvatar } from "../avatar.js";
-type AvatarStoryArgs = Args & FASTAvatar;
-type AvatarStoryMeta = Meta;
-
-const storyTemplate = html`
-
- ${x => x.content}
+const storyTemplate = html>`
+
+ ${x => x.storyContent}
`;
export default {
title: "Avatar",
- args: {
- content: html`
- 
- `,
- alt: "Annie's profile image",
- link: "#",
+ argTypes: {
+ link: { control: "text" },
+ storyContent: { table: { disable: true } },
},
decorators: [
Story => {
const renderedStory = Story() as FASTAvatar;
- const storyStyles = css`
+ renderedStory.$fastController.addStyles(css`
::slotted(fast-badge) {
bottom: 0;
right: 0;
@@ -38,26 +33,26 @@ export default {
::slotted(.container) {
padding: 1em;
}
- `;
-
- renderedStory.$fastController.addStyles(storyStyles);
+ `);
return renderedStory;
},
],
-} as AvatarStoryMeta;
-
-export const Avatar = (args: AvatarStoryArgs) => {
- const storyFragment = new DocumentFragment();
- storyTemplate.render(args, storyFragment);
- return storyFragment.firstElementChild;
+} as Meta;
+
+export const Avatar: Story = renderComponent(storyTemplate).bind({});
+Avatar.args = {
+ storyContent: html`
+
+ `,
};
-export const CircleWithTextContent: AvatarStoryMeta = Avatar.bind({});
-CircleWithTextContent.args = {
- alt: "Carlos's profile image",
- content: html`
- CR
- `,
- link: "#",
+export const AvatarCircleWithTextContent: Story = Avatar.bind({});
+AvatarCircleWithTextContent.args = {
+ storyContent: "CR",
};
diff --git a/packages/web-components/fast-foundation/src/badge/stories/badge.stories.ts b/packages/web-components/fast-foundation/src/badge/stories/badge.stories.ts
index 83c9d095aa3..dc1acb44b75 100644
--- a/packages/web-components/fast-foundation/src/badge/stories/badge.stories.ts
+++ b/packages/web-components/fast-foundation/src/badge/stories/badge.stories.ts
@@ -1,23 +1,20 @@
import { html } from "@microsoft/fast-element";
-import type { Args, Meta } from "@storybook/html";
+import type { Meta, Story, StoryArgs } from "../../__test__/helpers.js";
+import { renderComponent } from "../../__test__/helpers.js";
import type { FASTBadge } from "../badge.js";
-type BadgeStoryArgs = Args & FASTBadge;
-type BadgeStoryMeta = Meta;
-
-const storyTemplate = html`
- ${x => x.content}
+const storyTemplate = html>`
+ ${x => x.storyContent}
`;
export default {
title: "Badge",
args: {
- content: "Badge",
+ storyContent: "Badge",
+ },
+ argTypes: {
+ storyContent: { table: { disable: true } },
},
-} as BadgeStoryMeta;
+} as Meta;
-export const Badge = (args: BadgeStoryArgs) => {
- const storyFragment = new DocumentFragment();
- storyTemplate.render(args, storyFragment);
- return storyFragment.firstElementChild;
-};
+export const Badge: Story = renderComponent(storyTemplate).bind({});
diff --git a/packages/web-components/fast-foundation/src/breadcrumb-item/stories/breadcrumb-item.stories.ts b/packages/web-components/fast-foundation/src/breadcrumb-item/stories/breadcrumb-item.stories.ts
index 05c2028689e..ed7b161826c 100644
--- a/packages/web-components/fast-foundation/src/breadcrumb-item/stories/breadcrumb-item.stories.ts
+++ b/packages/web-components/fast-foundation/src/breadcrumb-item/stories/breadcrumb-item.stories.ts
@@ -1,57 +1,118 @@
import { html } from "@microsoft/fast-element";
-import type { Args, Meta } from "@storybook/html";
+import type { Meta, Story, StoryArgs } from "../../__test__/helpers.js";
+import { renderComponent } from "../../__test__/helpers.js";
import type { FASTBreadcrumbItem } from "../breadcrumb-item.js";
-type BreadcrumbItemStoryArgs = Args & FASTBreadcrumbItem;
-type BreadcrumbItemStoryMeta = Meta;
-
-const storyTemplate = html`
-
- ${x => x.content}
+const storyTemplate = html>`
+
+ ${x => x.storyContent}
`;
export default {
- title: "Breadcrumb/Breadcrumb Item",
- args: {
- content: "Breadcrumb item",
- },
+ title: "Breadcrumb Item",
argTypes: {
- href: { control: { type: "text" } },
+ download: { control: "text" },
+ href: { control: "text" },
+ hreflang: { control: "text" },
+ ping: { control: "text" },
+ referrerpolicy: { control: "text" },
+ rel: { control: "text" },
+ separator: { control: "boolean" },
+ target: { control: "text" },
+ type: { control: "text" },
+ ariaAtomic: { control: "boolean" },
+ ariaBusy: { control: "boolean" },
+ ariaControls: { control: "text" },
+ ariaCurrent: { control: "text" },
+ ariaDescribedby: { control: "text" },
+ ariaDetails: { control: "text" },
+ ariaDisabled: { control: "boolean" },
+ ariaErrormessage: { control: "text" },
+ ariaExpanded: { control: "boolean" },
+ ariaFlowto: { control: "text" },
+ ariaHaspopup: { control: "boolean" },
+ ariaHidden: { control: "boolean" },
+ ariaInvalid: { control: "text" },
+ ariaKeyshortcuts: { control: "text" },
+ ariaLabel: { control: "text" },
+ ariaLabelledby: { control: "text" },
+ ariaLive: { control: "text" },
+ ariaOwns: { control: "text" },
+ ariaRelevant: { control: "text" },
+ ariaRoledescription: { control: "text" },
+ storyContent: { table: { disable: true } },
},
-} as BreadcrumbItemStoryMeta;
+} as Meta;
-export const BreadcrumbItem = (args: BreadcrumbItemStoryArgs) => {
- const storyFragment = new DocumentFragment();
- storyTemplate.render(args, storyFragment);
- return storyFragment.firstElementChild;
+export const BreadcrumbItem: Story = renderComponent(
+ storyTemplate
+).bind({});
+BreadcrumbItem.args = {
+ storyContent: "Breadcrumb Item",
};
-export const WithHref: BreadcrumbItemStoryMeta = BreadcrumbItem.bind({});
-WithHref.args = {
- content: "Breadcrumb item with href attribute",
+export const BreadcrumbItemWithHref: Story = BreadcrumbItem.bind({});
+BreadcrumbItemWithHref.args = {
+ storyContent: "Breadcrumb item with href attribute",
href: "https://www.fast.design/",
};
-export const WithSlottedStart: BreadcrumbItemStoryMeta = BreadcrumbItem.bind({});
-WithSlottedStart.args = {
- content: html`
+export const BreadcrumbItemWithSlottedStart: Story = BreadcrumbItem.bind(
+ {}
+);
+BreadcrumbItemWithSlottedStart.args = {
+ storyContent: html`
Breadcrumb Item with slotted start icon
`,
};
-export const WithSlottedEnd: BreadcrumbItemStoryMeta = BreadcrumbItem.bind({});
-WithSlottedEnd.args = {
- content: html`
+export const BreadcrumbItemWithSlottedEnd: Story = BreadcrumbItem.bind(
+ {}
+);
+BreadcrumbItemWithSlottedEnd.args = {
+ storyContent: html`
Breadcrumb item with slotted end icon
`,
};
-export const WithSlottedSeparator: BreadcrumbItemStoryMeta = BreadcrumbItem.bind({});
-WithSlottedSeparator.args = {
- content: html`
+export const BreadcrumbItemWithSlottedSeparator: Story = BreadcrumbItem.bind(
+ {}
+);
+BreadcrumbItemWithSlottedSeparator.args = {
+ storyContent: html`
Breadcrumb item with slotted separator icon
`,
diff --git a/packages/web-components/fast-foundation/src/breadcrumb/README.md b/packages/web-components/fast-foundation/src/breadcrumb/README.md
index 822ffd923ef..ae4e58d3257 100644
--- a/packages/web-components/fast-foundation/src/breadcrumb/README.md
+++ b/packages/web-components/fast-foundation/src/breadcrumb/README.md
@@ -140,17 +140,17 @@ This component is built with the expectation that focus is delegated to the anch
#### Fields
-| Name | Privacy | Type | Default | Description | Inherited From |
-| ---------------- | ------- | -------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `download` | public | `string` | | Prompts the user to save the linked URL. See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | FASTAnchor |
-| `href` | public | `string` | | The URL the hyperlink references. See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | FASTAnchor |
-| `hreflang` | public | `string` | | Hints at the language of the referenced resource. See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | FASTAnchor |
-| `ping` | public | `string` | | See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | FASTAnchor |
-| `referrerpolicy` | public | `string` | | See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | FASTAnchor |
-| `rel` | public | `string` | | See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | FASTAnchor |
-| `target` | public | `"_self" or "_blank" or "_parent" or "_top"` | | See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | FASTAnchor |
-| `type` | public | `string` | | See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | FASTAnchor |
-| `control` | public | `HTMLAnchorElement` | | References the root element | FASTAnchor |
+| Name | Privacy | Type | Default | Description | Inherited From |
+| ---------------- | ------- | ------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `download` | public | `string` | | Prompts the user to save the linked URL. See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | FASTAnchor |
+| `href` | public | `string` | | The URL the hyperlink references. See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | FASTAnchor |
+| `hreflang` | public | `string` | | Hints at the language of the referenced resource. See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | FASTAnchor |
+| `ping` | public | `string` | | See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | FASTAnchor |
+| `referrerpolicy` | public | `string` | | See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | FASTAnchor |
+| `rel` | public | `string` | | See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | FASTAnchor |
+| `target` | public | `AnchorTarget` | | See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | FASTAnchor |
+| `type` | public | `string` | | See [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information. | FASTAnchor |
+| `control` | public | `HTMLAnchorElement` | | References the root element | FASTAnchor |
#### Attributes
diff --git a/packages/web-components/fast-foundation/src/breadcrumb/stories/breadcrumb.stories.ts b/packages/web-components/fast-foundation/src/breadcrumb/stories/breadcrumb.stories.ts
index 96239078475..6ac2df76b8b 100644
--- a/packages/web-components/fast-foundation/src/breadcrumb/stories/breadcrumb.stories.ts
+++ b/packages/web-components/fast-foundation/src/breadcrumb/stories/breadcrumb.stories.ts
@@ -1,36 +1,31 @@
import { html } from "@microsoft/fast-element";
-import type { Args, Meta } from "@storybook/html";
+import type { Meta, Story, StoryArgs } from "../../__test__/helpers.js";
+import { renderComponent } from "../../__test__/helpers.js";
import type { FASTBreadcrumb } from "../breadcrumb.js";
-type BreadcrumbStoryArgs = Args & FASTBreadcrumb;
-type BreadcrumbStoryMeta = Meta;
-
-const storyTemplate = html`
-
- ${x => x.content}
-
+const storyTemplate = html>`
+ ${x => x.storyContent}
`;
export default {
title: "Breadcrumb",
- args: {
- content: html`
- Breadcrumb Item 1
- Breadcrumb Item 2
- Breadcrumb Item 3
- `,
+ argTypes: {
+ storyContent: { table: { disable: true } },
},
-} as BreadcrumbStoryMeta;
+} as Meta;
-export const Breadcrumb = (args: BreadcrumbStoryArgs) => {
- const storyFragment = new DocumentFragment();
- storyTemplate.render(args, storyFragment);
- return storyFragment.firstElementChild;
+export const Breadcrumb: Story = renderComponent(storyTemplate).bind({});
+Breadcrumb.args = {
+ storyContent: html`
+ Breadcrumb Item 1
+ Breadcrumb Item 2
+ Breadcrumb Item 3
+ `,
};
-export const BreadcrumbsWithSeparators: BreadcrumbStoryMeta = Breadcrumb.bind({});
-BreadcrumbsWithSeparators.args = {
- content: html`
+export const BreadcrumbWithSeparators: Story = Breadcrumb.bind({});
+BreadcrumbWithSeparators.args = {
+ storyContent: html`
Breadcrumb Item 1
@@ -39,18 +34,18 @@ BreadcrumbsWithSeparators.args = {
Breadcrumb Item 2
-
+
Breadcrumb Item 3
`,
};
-export const BreadcrumbsWithAnchors: BreadcrumbStoryMeta = Breadcrumb.bind({});
-BreadcrumbsWithAnchors.args = {
- content: html`
- Breadcrumb Item 1
- Breadcrumb Item 2
- Breadcrumb Item 3
+export const BreadcrumbWithAnchors: Story = Breadcrumb.bind({});
+BreadcrumbWithAnchors.args = {
+ storyContent: html`
+ Anchor 1
+ Anchor 2
+ Anchor 3
`,
};
diff --git a/packages/web-components/fast-foundation/src/button/README.md b/packages/web-components/fast-foundation/src/button/README.md
index ab297d5a818..f216240816c 100644
--- a/packages/web-components/fast-foundation/src/button/README.md
+++ b/packages/web-components/fast-foundation/src/button/README.md
@@ -83,6 +83,16 @@ This component is built with the expectation that focus is delegated to the butt
+### Variables
+
+| Name | Description | Type |
+| ------------ | ------------------- | --------------------------------------------------------- |
+| `ButtonType` | Button type values. | `{ submit: "submit", reset: "reset", button: "button", }` |
+
+
+ + + ### class: `FASTButton` #### Superclass @@ -102,22 +112,22 @@ This component is built with the expectation that focus is delegated to the butt | `formmethod` | public | `string` | | See [`
+ anchored region
`,
+ fixedPlacement: false,
+ horizontalInset: false,
+ horizontalViewportLock: false,
+ verticalInset: false,
+ verticalViewportLock: false,
},
argTypes: {
- fixedPlacement: { control: { type: "boolean" } },
- verticalPositioningMode: {
- options: ["uncontrolled", "locktodefault", "dynamic"],
- control: { type: "select" },
- },
- verticalDefaultPosition: {
- options: ["top", "bottom", "center", "unset"],
- control: { type: "select" },
+ anchor: { control: "text" },
+ anchorId: { table: { disable: true } },
+ autoUpdateMode: {
+ control: "select",
+ options: Object.values(AutoUpdateMode),
},
- verticalInset: { control: { type: "boolean" } },
- verticalScaling: {
- options: ["anchor", "fill", "content"],
- control: { type: "select" },
+ fixedPlacement: { control: "boolean" },
+ horizontalDefaultPosition: {
+ control: "select",
+ options: Object.values(HorizontalPosition),
},
- verticalViewportLock: { control: { type: "boolean" } },
+ horizontalInset: { control: "boolean" },
horizontalPositioningMode: {
- options: ["uncontrolled", "locktodefault", "dynamic"],
- control: { type: "select" },
- },
- horizontalDefaultPosition: {
- options: ["start", "end", "left", "right", "center", "unset"],
- control: { type: "select" },
+ control: "select",
+ options: Object.values(AxisPositioningMode),
},
horizontalScaling: {
- options: ["anchor", "fill", "content"],
- control: { type: "select" },
+ control: "select",
+ options: Object.values(AxisScalingMode),
},
- horizontalInset: { control: { type: "boolean" } },
- horizontalViewportLock: { control: { type: "boolean" } },
- autoUpdateMode: {
- options: ["anchor", "auto"],
- control: { type: "select" },
+ horizontalThreshold: { control: "number" },
+ horizontalViewportLock: { control: "boolean" },
+ storyContent: { table: { disable: true } },
+ verticalDefaultPosition: {
+ control: "select",
+ options: Object.values(VerticalPosition),
},
+ verticalInset: { control: "boolean" },
+ verticalPositioningMode: {
+ control: "select",
+ options: Object.values(AxisPositioningMode),
+ },
+ verticalScaling: {
+ control: "select",
+ options: Object.values(AxisScalingMode),
+ },
+ verticalThreshold: { control: "number" },
+ verticalViewportLock: { control: "boolean" },
+ viewport: { control: "text" },
},
-} as AnchoredRegionMeta;
+ decorators: [
+ (Story, { args }) => {
+ // IDs are generated to ensure that they're unique for the docs page
+ const renderedStory = Story() as DocumentFragment;
+ const anchor = renderedStory.querySelector(".anchor") as HTMLElement;
+ const region = renderedStory.querySelector(".region") as HTMLElement;
+
+ const anchorId = args.anchorId ?? uniqueId("anchor");
+
+ anchor.id = anchorId;
+ region.id = uniqueId("region");
+ region.setAttribute("anchor", anchorId);
+ return renderedStory;
+ },
+ ],
+} as Meta+ + + ### class: `FASTButton` #### Superclass @@ -102,22 +112,22 @@ This component is built with the expectation that focus is delegated to the butt | `formmethod` | public | `string` | | See [`