bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-06 00:13:28 +00:00
Code Issues Releases Wiki Activity

[CL-444] Use Canvas story wrapper properly (#13375)

Browse Source
This commit is contained in:
Vicki League
2025-02-12 11:26:21 -05:00
committed by GitHub
parent 9dd47a15ce
commit 2284fe32be
24 changed files with 120 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
libs/components/src/avatar/avatar.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./avatar.stories";
@@ -18,15 +18,15 @@ visual indicator to recognize which of a personal or work account a user is logg
### Large: 64px
<Story of={stories.Large} />
<Canvas of={stories.Large} />
### Default: 48px
<Story of={stories.Default} />
<Canvas of={stories.Default} />
### Small 28px
<Story of={stories.Small} />
<Canvas of={stories.Small} />
## Background color
@@ -37,9 +37,9 @@ priority:
- ID
- Text, usually set to the user's Name field
<Story of={stories.ColorByText} />
<Canvas of={stories.ColorByText} />
Use the user 'ID' field if `Name` is not defined.
<Story of={stories.ColorByID} />
<Canvas of={stories.ColorByID} />
## Outline
@@ -47,7 +47,7 @@ If the avatar is displayed on one of the theme's `background` color variables or
display the avatar with a 1 pixel `secondary-600` border to meet WCAG AA graphic contrast guidelines
for interactive elements.
<Story of={stories.Border} />
<Canvas of={stories.Border} />
## Avatar as a button

14
libs/components/src/badge/badge.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./badge.stories";
@@ -31,39 +31,39 @@ The story below uses the `<button>` element to demonstrate all the possible stat
The primary badge is used to indicate an active status (example: device management page) or provide
additional information (example: type of emergency access granted).
<Story of={stories.Primary} />
<Canvas of={stories.Primary} />
### Secondary
The secondary badge style is typically is a default badge style. It is often used to indicate
neutral information.
<Story of={stories.Secondary} />
<Canvas of={stories.Secondary} />
### Success
The success badge is used to indicate a positive status, OR to indicate a feature requires a Premium
subscription. See [Premium Badge](?path=/docs/web-premium-badge--docs)
<Story of={stories.Success} />
<Canvas of={stories.Success} />
### Danger
The danger badge is used to indicate a negative status.
<Story of={stories.Danger} />
<Canvas of={stories.Danger} />
### Warning
The warning badge is used to indicate a status waiting on an additional action from the active user.
<Story of={stories.Warning} />
<Canvas of={stories.Warning} />
### Info
The info badge is used to indicate a low emphasis informative information.
<Story of={stories.Info} />
<Canvas of={stories.Info} />
## Badges as counters

10
libs/components/src/banner/banner.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Controls, Canvas, Primary } from "@storybook/addon-docs";
import { Meta, Controls, Canvas, Primary } from "@storybook/addon-docs";
import * as stories from "./banner.stories";
@@ -31,25 +31,25 @@ Use the following guidelines to help choose the correct type of banner.
### Premium
<Story of={stories.Premium} />
<Canvas of={stories.Premium} />
Used primarily to encourage user to upgrade to premium.
### Info
<Story of={stories.Info} />
<Canvas of={stories.Info} />
Used to communicate release notes, server maintenance or other informative event.
### Warning
<Story of={stories.Warning} />
<Canvas of={stories.Warning} />
Used to alert the user of outdated info or versions.
### Danger
<Story of={stories.Danger} />
<Canvas of={stories.Danger} />
Rarely used, but may be used to alert users over critical messages or very outdated versions.

8
libs/components/src/breadcrumbs/breadcrumbs.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./breadcrumbs.stories";
@@ -23,7 +23,7 @@ See [Header with Breadcrumbs](?path=/story/web-header--with-breadcrumbs).
When a user is 1 level deep into a tree, the top level is displayed as a single link above the page
title.
<Story of={stories.TopLevel} />
<Canvas of={stories.TopLevel} />
### Second Level
@@ -31,7 +31,7 @@ When a user is 2 or more levels deep into a tree, the top level is displayed fol
<i class="bwi bwi-angle-right"></i> icon, and the following pages.
<Story of={stories.SecondLevel} />
<Canvas of={stories.SecondLevel} />
### Overflow
@@ -42,7 +42,7 @@ When a user is several levels deep into a tree, the top level or 2 are displayed
When the user selects the <i class="bwi bwi-ellipsis-h"></i> icon button, a menu opens displaying
the pages between the top level and the previous page.
<Story of={stories.Overflow} />
<Canvas of={stories.Overflow} />
### Small screens

14
libs/components/src/button/button.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./button.stories";
@@ -43,14 +43,14 @@ There are 3 main styles for the button: Primary, Secondary, and Danger.
### Primary
<Story of={stories.Primary} />
<Canvas of={stories.Primary} />
Use the primary button styling for all Primary call to actions. An action is "primary" if it relates
to the main purpose of a page. There should never be 2 primary styled buttons next to each other.
### Secondary
<Story of={stories.Secondary} />
<Canvas of={stories.Secondary} />
The secondary styling should be used for secondary calls to action. An action is "secondary" if it
relates indirectly to the purpose of a page. There may be multiple secondary buttons next to each
@@ -58,20 +58,20 @@ other; however, generally there should only be 1 or 2 calls to action per page.
### Danger
<Story of={stories.Danger} />
<Canvas of={stories.Danger} />
Use the danger styling only in settings when the user may preform a permanent action.
## Disabled UI
<Story of={stories.Disabled} />
<Canvas of={stories.Disabled} />
## Block
Typically button widths expand with their text. In some causes though buttons may need to be block
where the width is fixed and the text wraps to 2 lines if exceeding the button’s width.
<Story of={stories.Block} />
<Canvas of={stories.Block} />
## Accessibility
@@ -96,7 +96,7 @@ Both submit and async action buttons use a loading button state while an action
button is preforming a long running task in the background like a server API call, be sure to review
the [Async Actions Directive](?path=/story/component-library-async-actions-overview--page).
<Story of={stories.Loading} />
<Canvas of={stories.Loading} />
### appA11yTitle

10
libs/components/src/callout/callout.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./callout.stories";
@@ -28,7 +28,7 @@ Use the success callout to communicate a positive messaging to the user.
The success callout may also be used for the information related to a premium membership. In this
case, replace the icon with <i class="bwi bwi-star" title="bwi-star" aria-label="bwi-star"></i>
<Story of={stories.Success} />
<Canvas of={stories.Success} />
### Info
@@ -39,7 +39,7 @@ information.
**Example:** in the Domain Claiming modal, an info callout is used to tell the user the domain will
automatically be checked.
<Story of={stories.Info} />
<Canvas of={stories.Info} />
### Warning
@@ -49,7 +49,7 @@ irreversible results.
**Example:** the warning callout is used before the change master password and encryption key form
to alert the user that they will be logged out.
<Story of={stories.Warning} />
<Canvas of={stories.Warning} />
### Danger
@@ -59,7 +59,7 @@ not reversible.
The danger callout can also be used to alert the user of an error or errors, such as a server side
errors after form submit or failed communication request.
<Story of={stories.Danger} />
<Canvas of={stories.Danger} />
## Accessibility

10
libs/components/src/chip-select/chip-select.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls, Canvas } from "@storybook/addon-docs";
import { Meta, Primary, Controls, Canvas } from "@storybook/addon-docs";
import * as stories from "./chip-select.stories";
@@ -12,9 +12,7 @@ import { ChipSelectComponent } from "@bitwarden/components";
`<bit-chip-select>` is a select element that is commonly used to filter items in lists or tables.
<Canvas>
<Story of={stories.Default} />
</Canvas>
<Canvas of={stories.Default} />
## Options
@@ -91,9 +89,7 @@ const options = [
];
```
<Canvas>
<Story of={stories.NestedOptions} />
</Canvas>
<Canvas of={stories.NestedOptions} />
## Placeholder Content

8
libs/components/src/color-password/color-password.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./color-password.stories";
@@ -18,15 +18,15 @@ the logic for displaying letters as `text-main`, numbers as `primary`, and speci
The password count option is used in the Login type form. It is used to highlight each character's
position in the password string.
<Story of={stories.ColorPasswordCount} />
<Canvas of={stories.ColorPasswordCount} />
## Wrapped Password
When the password length is longer than the container's width, it should wrap as shown below.
<Story of={stories.WrappedColorPassword} />
<Canvas of={stories.WrappedColorPassword} />
<Story of={stories.WrappedColorPasswordCount} />
<Canvas of={stories.WrappedColorPasswordCount} />
## Accessibility

16
libs/components/src/dialog/dialog/dialog.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./dialog.stories";
@@ -35,7 +35,7 @@ Use the large size for dialogs that have many interactive elements or tabbed con
`max-w-3xl` 48rem
<Story of={stories.Large} />
<Canvas of={stories.Large} />
### Default
@@ -46,7 +46,7 @@ Use the Default size for most dialogs that require some content and a few intera
`max-w-xl` 36rem
<Story of={stories.Default} />
<Canvas of={stories.Default} />
### Small
@@ -54,31 +54,31 @@ Use the Default size for most dialogs that require some content and a few intera
`max-w-sm` 24rem
<Story of={stories.Small} />
<Canvas of={stories.Small} />
## Long Title
If a dialog's title is too long to fully display. It should be truncated and on hover shown in a
tooltip.
<Story of={stories.LongTitle} />
<Canvas of={stories.LongTitle} />
## Loading
Similar to a page loading state, a Dialog that takes more than a few seconds to load should use a
loading state.
<Story of={stories.Loading} />
<Canvas of={stories.Loading} />
## Tab Content
Use tabs to separate related content within a dialog.
<Story of={stories.TabContent} />
<Canvas of={stories.TabContent} />
## Background Color
The `background` input can be set to `alt` to change the background color. This is useful for
dialogs that contain multiple card sections.
<Story of={stories.WithCards} />
<Canvas of={stories.WithCards} />

4
libs/components/src/dialog/dialogs.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Source } from "@storybook/addon-docs";
import { Meta, Canvas, Source } from "@storybook/addon-docs";
import * as stories from "./dialog.service.stories";
@@ -30,7 +30,7 @@ dialog should become scrollable.
A backdrop should be used to hide the content below the dialog. Use `#000000` with `30% opacity`.
<Story of={stories.Default} />
<Canvas of={stories.Default} />
## Accessibility

4
libs/components/src/dialog/simple-dialog/simple-dialog.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./simple-dialog.stories";
@@ -48,4 +48,4 @@ the simple dialog's type is specified.
Simple dialogs can support scrolling content if necessary, but typically with larger quantities of
content a [Dialog component](?path=/docs/component-library-dialogs-dialog--docs).
<Story of={stories.ScrollingContent} />
<Canvas of={stories.ScrollingContent} />

4
libs/components/src/disclosure/disclosure.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./disclosure.stories";
@@ -34,7 +34,7 @@ To compose a disclosure and trigger:
<bit-disclosure #disclosureRef open>click button to hide this content</bit-disclosure>
```
<Story of={stories.DisclosureWithIconButton} />
<Canvas of={stories.DisclosureWithIconButton} />
<br />
<br />

8
libs/components/src/drawer/drawer.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./drawer.stories";
@@ -83,13 +83,13 @@ directive:
Only one drawer can be open at a time, and they do not stack. If a drawer is already open, opening
another will close and replace the one already open.
<Story of={stories.MultipleDrawers} />
<Canvas of={stories.MultipleDrawers} />
## Headless
Omitting `bit-drawer-header` and `bit-drawer-body` allows for fully customizable content.
<Story of={stories.Headless} />
<Canvas of={stories.Headless} />
## Accessibility
@@ -117,4 +117,4 @@ Omitting `bit-drawer-header` and `bit-drawer-body` allows for fully customizable
## Kitchen Sink
<Story of={KitchenSink} autoplay />
<Canvas of={KitchenSink} autoplay />

20
libs/components/src/form/forms.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Source } from "@storybook/addon-docs";
import { Meta, Canvas, Source } from "@storybook/addon-docs";
import * as formStories from "./form.stories";
import * as fieldStories from "../form-field/form-field.stories";
@@ -17,7 +17,7 @@ Component Library forms should always be built using [Angular Reactive Forms][re
[ADR-0001][adr-0001] for a background to this decision. In practice this means that forms should
always use the native `form` element and bind a `formGroup`.
<Story of={formStories.FullExample} />
<Canvas of={formStories.FullExample} />
<br />
@@ -69,25 +69,25 @@ is too long, such as info link buttons or badges.
#### Default with required attribute
<Story of={fieldStories.Default} />
<Canvas of={fieldStories.Default} />
#### Password Toggle
<Story of={passwordToggleStories.Default} />
<Canvas of={passwordToggleStories.Default} />
### Search
<Story of={searchStories.Default} />
<Canvas of={searchStories.Default} />
### Selects
#### Searchable single select (default)
<Story of={selectStories.Default} />
<Canvas of={selectStories.Default} />
#### Multi-select
<Story of={multiSelectStories.Members} />
<Canvas of={multiSelectStories.Members} />
### Radio group
@@ -113,11 +113,11 @@ using a radio group for more than 5 options even if the options require addition
#### Block
<Story of={radioStories.Block} />
<Canvas of={radioStories.Block} />
#### Inline
<Story of={radioStories.Inline} />
<Canvas of={radioStories.Inline} />
### Checkbox
@@ -140,7 +140,7 @@ If a checkbox group has more than 4 options a
#### Single checkbox
<Story of={checkboxStories.Default} />
<Canvas of={checkboxStories.Default} />
## Accessibility

20
libs/components/src/icon-button/icon-button.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./icon-button.stories";
@@ -38,48 +38,48 @@ button component styles.
Used for general icon buttons appearing on the theme’s main `background`
<Story of={stories.Main} />
<Canvas of={stories.Main} />
### Muted
Used for low emphasis icon buttons appearing on the theme’s main `background`
<Story of={stories.Muted} />
<Canvas of={stories.Muted} />
### Contrast
Used on a theme’s colored or contrasting backgrounds such as in the navigation or on toasts and
banners.
<Story of={stories.Contrast} />
<Canvas of={stories.Contrast} />
### Danger
Danger is used for “trash” actions throughout the experience, most commonly in the bottom right of
the dialog component.
<Story of={stories.Danger} />
<Canvas of={stories.Danger} />
### Primary
Used in place of the main button component if no text is used. This allows the button to display
square.
<Story of={stories.Primary} />
<Canvas of={stories.Primary} />
### Secondary
Used in place of the main button component if no text is used. This allows the button to display
square.
<Story of={stories.Secondary} />
<Canvas of={stories.Secondary} />
### Light
Used on a background that is dark in both light theme and dark theme. Example: end user navigation
styles.
<Story of={stories.Light} />
<Canvas of={stories.Light} />
**Note:** Main and contrast styles appear on backgrounds where using `primary-700` as a focus
indicator does not meet WCAG graphic contrast guidelines.
@@ -93,11 +93,11 @@ with less padding around the icon, such as in the navigation component.
### Small
<Story of={stories.Small} />
<Canvas of={stories.Small} />
### Default
<Story of={stories.Default} />
<Canvas of={stories.Default} />
## Accessibility

20
libs/components/src/item/item.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./item.stories";
@@ -15,14 +15,14 @@ import { ItemModule } from "@bitwarden/components";
It is a generic container that can be used for either standalone content, an alternative to tables,
or to list nav links.
<Story of={stories.Default} />
<Canvas of={stories.Default} />
<br />
Items used within a parent `bit-layout` component will not have a border radius, since the
`bit-layout` background is white.
<Story of={stories.WithoutBorderRadius} />
<Canvas of={stories.WithoutBorderRadius} />
<br />
<br />
@@ -49,7 +49,7 @@ The content can be a button, anchor, or static container.
</bit-item>
```
<Story of={stories.ContentTypes} />
<Canvas of={stories.ContentTypes} />
### Content Slots
@@ -82,7 +82,7 @@ The content can be a button, anchor, or static container.
</bit-item>
```
<Story of={stories.ContentSlots} />
<Canvas of={stories.ContentSlots} />
## Secondary Actions
@@ -129,19 +129,19 @@ This can be changed by passing `[truncate]="false"` to the `bit-item-content`.
### Truncation (Default)
<Story of={stories.TextOverflowTruncate} />
<Canvas of={stories.TextOverflowTruncate} />
### Wrap
<Story of={stories.TextOverflowWrap} />
<Canvas of={stories.TextOverflowWrap} />
## Item Groups
Groups of items can be associated by wrapping them in the `<bit-item-group>`.
<Story of={stories.MultipleActionList} />
<Canvas of={stories.MultipleActionList} />
<Story of={stories.SingleActionList} />
<Canvas of={stories.SingleActionList} />
### A11y
@@ -162,4 +162,4 @@ Use `aria-label` or `aria-labelledby` to give groups an accessible name.
### Virtual Scrolling
<Story of={stories.VirtualScrolling} />
<Canvas of={stories.VirtualScrolling} />

4
libs/components/src/menu/menu.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./menu.stories";
@@ -9,7 +9,7 @@ import * as stories from "./menu.stories";
Menus are used to help organize related options. Menus are most often used for item options in
tables.
<Story of={stories.ClosedMenu} />
<Canvas of={stories.ClosedMenu} />
<br />

6
libs/components/src/popover/popover.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./popover.stories";
@@ -66,7 +66,7 @@ not work because there is not enough space to open the Popover to the right. The
The first position that "fits" is `left-start`, and therefore that is where the Popover will open.
<Story of={stories.LeftStart} />
<Canvas of={stories.LeftStart} />
### Manually Setting a Position
@@ -77,7 +77,7 @@ Popover's trigger element, such as:
<button [bitPopoverTriggerFor]="myPopover" [position]="'above-end'">Open Popover</button>
```
<Story of={stories.AboveEnd} />
<Canvas of={stories.AboveEnd} />
Note that if the user resizes the page and the Popover no longer fits in the viewport, the Popover
component will fall back to the list of default positions to find the best position.

6
libs/components/src/progress/progress.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./progress.stories";
@@ -19,14 +19,14 @@ allows those who may not be familiar with the pattern to be able to read and dig
It also allows assistive technology to accurately describe the indicator to those who may be unable
to see part or all of the indicator.
<Story of={stories.Full} />
<Canvas of={stories.Full} />
## Text label
When measuring something other than progress, such as password strength, update the label to fit the
context of the implementation.
<Story of={stories.CustomText} />
<Canvas of={stories.CustomText} />
### Strength indicator styles

22
libs/components/src/section/section.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls, Canvas } from "@storybook/addon-docs";
import { Meta, Primary, Controls, Canvas } from "@storybook/addon-docs";
import * as stories from "./section.stories";
@@ -26,9 +26,7 @@ the `disableMargin` input.
<bit-section disableMargin></bit-section>
```
<Canvas>
<Story of={stories.Default} />
</Canvas>
<Canvas of={stories.Default} />
## Section Header
@@ -61,16 +59,12 @@ padding to align the header with the border radius of the card/item.
</bit-section>
```
<Canvas>
<Story of={stories.HeaderWithPadding} />
</Canvas>
<Canvas of={stories.HeaderWithPadding} />
If placed inside of a section without a `bit-card` or `bit-item`, or with a `bit-card`/`bit-item`
that is not a descendant of the immediate next sibling, the padding is not applied.
<Canvas>
<Story of={stories.HeaderWithoutPadding} />
</Canvas>
<Canvas of={stories.HeaderWithoutPadding} />
### Section Header Content Slots
@@ -89,14 +83,10 @@ Anything passed to the default slot will display as part of the title. The title
Title suffixes (typically an icon or icon button) can be added as well. A gap is automatically
applied between the children of the default slot.
<Canvas>
<Story of={stories.HeaderVariants} />
</Canvas>
<Canvas of={stories.HeaderVariants} />
#### End slot
The `end` slot will typically be used for text or an icon button.
<Canvas>
<Story of={stories.HeaderEndSlotVariants} />
</Canvas>
<Canvas of={stories.HeaderEndSlotVariants} />

4
libs/components/src/stories/compact-mode.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story } from "@storybook/addon-docs";
import { Meta, Story, Canvas } from "@storybook/addon-docs";
import * as itemStories from "../item/item.stories";
import * as popupLayoutStories from "../../../../apps/browser/src/platform/popup/layout/popup-layout.stories";
@@ -42,4 +42,4 @@ However, styling with the Tailwind variant should be used when possible as it is
### [Item](?path=/story/component-library-item--compact-mode)
<Story of={itemStories.CompactMode} />
<Canvas of={itemStories.CompactMode} />

9
libs/components/src/tabs/tabs.mdx
View File

@@ -1,6 +1,7 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./tabs.stories";
import * as dialogStories from "../dialog/dialog/dialog.stories";
<Meta of={stories} />
@@ -17,17 +18,17 @@ and 1rem of padding on the left and right.
## Content Tabs
<Story of={stories.ContentTabs} />
<Canvas of={stories.ContentTabs} />
## Navigation Tabs
<Story of={stories.NavigationTabs} />
<Canvas of={stories.NavigationTabs} />
## Content tabs in dialogs
Tabs can be used in dialogs to separate related content.
<Story id="component-library-dialogs-dialog--tab-content" />
<Canvas of={dialogStories.TabContent} />
## Accessibility

2
libs/components/src/typography/typography.mdx
View File

@@ -22,4 +22,4 @@ For headings, note that the semantic element and the text style may not always b
<h2 bitTypography="h5">Semantically, I am an h2, but I use h5 styles.</h2>
```
<Canvas story={stories.Default} />
<Canvas of={stories.Default} />