diff --git a/src/stories/BaseButton.stories.ts b/src/stories/BaseButton.stories.ts index 711e08a..0658438 100644 --- a/src/stories/BaseButton.stories.ts +++ b/src/stories/BaseButton.stories.ts @@ -17,7 +17,12 @@ const meta: Meta = { table: { category: "Links" }, description: "The URL to link to. Use this if you are linking to external sites. Otherwise, you should use the `to` prop instead.", - type: { required: false }, + }, + to: { + control: "text", + table: { category: "Links" }, + description: + "The path to link to. Use this if you are linking to internal sites. Otherwise, you should use the `href` prop instead.", }, ariaBusy: { control: "boolean", @@ -30,6 +35,19 @@ const meta: Meta = { table: { category: "Accessibility" }, description: "If the button is disabled", }, + class: { + // Is an enum of undefined, primary, or secondary + options: [ + undefined, + "secondary", + "contrast", + "outline", + "outline secondary", + "outline contrast", + ], + control: { type: "select" }, + table: { category: "Styles" }, + }, }, args: { default: "Button", @@ -74,3 +92,42 @@ export const WithOverflowingText: Story = { default: overflowFixture.text, }, }; + +export const Secondary: Story = { + args: { + class: "secondary", + }, +}; + +export const Contrast: Story = { + args: { + class: "contrast", + }, +}; + +export const Outline: Story = { + args: { + class: "outline", + }, +}; + +export const OutlineSecondary: Story = { + args: { + class: "outline secondary", + }, +}; + +export const OutlineContrast: Story = { + args: { + class: "outline contrast", + }, +}; + +// Use a decorator to show a grouped +export const Grouped: Story = { + decorators: [ + (story: any) => ({ + template: `
`, + }), + ], +};