From 159fea69621888281760c9fb46088312fcaae861 Mon Sep 17 00:00:00 2001 From: Danielle Flinn <43477473+danielleflinn@users.noreply.github.com> Date: Tue, 18 Jul 2023 08:28:43 -0700 Subject: [PATCH] [CL-99] Update icon-button.stories.ts (#5631) * Update icon-button.stories.ts separated out the icon-button stories by size, style, loading, and disabled * restructured icon button docs to use new stories --- .../src/icon-button/icon-button.mdx | 79 ++++++-- .../src/icon-button/icon-button.stories.ts | 180 +++++++++++------- 2 files changed, 175 insertions(+), 84 deletions(-) diff --git a/libs/components/src/icon-button/icon-button.mdx b/libs/components/src/icon-button/icon-button.mdx index 057437256b..817594a772 100644 --- a/libs/components/src/icon-button/icon-button.mdx +++ b/libs/components/src/icon-button/icon-button.mdx @@ -9,20 +9,76 @@ import * as stories from "./icon-button.stories"; Icon buttons are used when no text accompanies the button. It consists of an icon that may be updated to any icon in the `bwi-font`, a `title` attribute, and an `aria-label`. -There are 3 common styles for button main, contrast, and danger. The main style is used on the -theme’s main `background`; and the contrast style is used on a theme’s colored or contrasting -backgrounds; danger is used for “trash” actions throughout the experience. The other styles are used -sparingly. - The most common use of the icon button is in the banner, toast, and modal components as a close button. It can also be found in tables as the 3 dot option menu, or on navigation list items when there are options that need to be collapsed into a menu. -Similar to the main button components, spacing between icon buttons should be .5rem. +Similar to the main button components, spacing between multiple icon buttons should be .5rem. +## Usage + +Icon buttons can be found in other components such as: the +[banner](?path=/docs/component-library-banner--docs) +[dialog](?path=/docs/component-library-dialogs--docs), and +[table](?path=/docs/component-library-table--docs). + + + +## Styles + +There are 4 common styles for button main, muted, contrast, and danger. The other styles follow the +button component styles. + +### Main + +Used for general icon buttons appearing on the theme’s main `background` + + + +### Muted + +Used for low emphasis icon buttons appearing on the theme’s main `background` + + + +### Contrast + +Used on a theme’s colored or contrasting backgrounds such as in the navigation or on toasts and +banners. + + + +### Danger + +Danger is used for “trash” actions throughout the experience, most commonly in the bottom right of +the dialog component. + + + +### Primary + +Used in place of the main button component if no text is used. This allows the button to display +square. + + + +### Secondary + +Used in place of the main button component if no text is used. This allows the button to display +square. + + + +### Light + +Used on a background that is dark in both light theme and dark theme. Example: end user navigation +styles. + + + **Note:** Main and contrast styles appear on backgrounds where using `primary-700` as a focus indicator does not meet WCAG graphic contrast guidelines. @@ -33,14 +89,13 @@ There are 2 sizes for the icon button: `small` and `default`. Default is typically used for most instances. Small is used if the implementation needs a variant with less padding around the icon, such as in the navigation component. -## Usage +### Small -Icon buttons can be found in other components such as: the -[banner](?path=/docs/component-library-banner--docs) -[dialog](?path=/docs/component-library-dialogs--docs), and -[table](?path=/docs/component-library-table--docs). + - +### Default + + ## Accessibility diff --git a/libs/components/src/icon-button/icon-button.stories.ts b/libs/components/src/icon-button/icon-button.stories.ts index 4a0c56fbde..19bc972a70 100644 --- a/libs/components/src/icon-button/icon-button.stories.ts +++ b/libs/components/src/icon-button/icon-button.stories.ts @@ -1,96 +1,47 @@ import { Meta, StoryObj } from "@storybook/angular"; -import { BitIconButtonComponent, IconButtonType } from "./icon-button.component"; - -const buttonTypes: IconButtonType[] = [ - "contrast", - "main", - "muted", - "primary", - "secondary", - "danger", - "light", -]; +import { BitIconButtonComponent } from "./icon-button.component"; export default { title: "Component Library/Icon Button", component: BitIconButtonComponent, + args: { + bitIconButton: "bwi-plus", + size: "default", + disabled: false, + }, parameters: { design: { type: "figma", url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=4369%3A16686", }, }, - args: { - bitIconButton: "bwi-plus", - size: "default", - disabled: false, - }, - argTypes: { - buttonTypes: { table: { disable: true } }, - }, -} as Meta; +} as Meta; type Story = StoryObj; export const Default: Story = { - render: (args: BitIconButtonComponent) => ({ - props: { ...args, buttonTypes }, + render: (args) => ({ + props: args, template: ` - - - - - - - - - - - - - - - - - - - - - - - - -
{{buttonType}}
Default - -
Disabled - -
Loading - -
+
+ + + + + +
+ +
+
+ +
+
`, }), args: { size: "default", + buttonType: "primary", }, }; @@ -98,5 +49,90 @@ export const Small: Story = { ...Default, args: { size: "small", + buttonType: "primary", + }, +}; + +export const Primary: Story = { + render: (args) => ({ + props: args, + template: ` + + `, + }), + args: { + buttonType: "primary", + }, +}; + +export const Secondary: Story = { + ...Primary, + args: { + buttonType: "secondary", + }, +}; + +export const Danger: Story = { + ...Primary, + args: { + buttonType: "danger", + }, +}; + +export const Main: Story = { + ...Primary, + args: { + buttonType: "main", + }, +}; + +export const Muted: Story = { + ...Primary, + args: { + buttonType: "muted", + }, +}; + +export const Light: Story = { + render: (args) => ({ + props: args, + template: ` +
+ +
+ `, + }), + args: { + buttonType: "light", + }, +}; + +export const Contrast: Story = { + render: (args) => ({ + props: args, + template: ` +
+ +
+ `, + }), + args: { + buttonType: "contrast", + }, +}; + +export const Loading: Story = { + ...Default, + args: { + disabled: false, + loading: true, + }, +}; + +export const Disabled: Story = { + ...Default, + args: { + disabled: true, + loading: true, }, };