diff --git a/packages/web-components/fast-foundation/src/toolbar/stories/toolbar.stories.ts b/packages/web-components/fast-foundation/src/toolbar/stories/toolbar.stories.ts index d2a9faef71c..ca443510edc 100644 --- a/packages/web-components/fast-foundation/src/toolbar/stories/toolbar.stories.ts +++ b/packages/web-components/fast-foundation/src/toolbar/stories/toolbar.stories.ts @@ -1,37 +1,32 @@ import { html } from "@microsoft/fast-element"; import { Orientation } from "@microsoft/fast-web-utilities"; -import type { Args, Meta } from "@storybook/html"; +import type { Meta, Story, StoryArgs } from "../../__test__/helpers.js"; +import { renderComponent } from "../../__test__/helpers.js"; import type { FASTToolbar } from "../toolbar.js"; -type ToolbarStoryArgs = Args & FASTToolbar; -type ToolbarStoryMeta = Meta; - -const componentTemplate = html` - - ${x => x.content} +const storyTemplate = html>` + + ${x => x.storyContent} `; export default { title: "Toolbar", argTypes: { - content: { control: { type: "string" } }, - orientation: { options: Object.values(Orientation), control: { type: "radio" } }, + orientation: { control: "radio", options: Object.values(Orientation) }, + ariaLabel: { control: "text" }, + ariaLabelledby: { control: "text" }, + storyContent: { table: { disable: true } }, }, -} as ToolbarStoryMeta; - -export const Toolbar = (args: ToolbarStoryArgs) => { - const storyFragment = new DocumentFragment(); - componentTemplate.render(args, storyFragment); - return storyFragment.firstElementChild; -}; - -Toolbar.argTypes = { - content: { table: { disable: true } }, -}; +} as Meta; +export const Toolbar: Story = renderComponent(storyTemplate).bind({}); Toolbar.args = { - content: html` + storyContent: html` @@ -55,3 +50,16 @@ Toolbar.args = { `, }; + +export const ToolbarButtonFocusTest: Story = Toolbar.bind({}); +ToolbarButtonFocusTest.args = { + storyContent: html` + + + + + + + + `, +};