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

bitwarden · Feb 12, 2025 · 2284fe3 · 2284fe3
1 parent 9dd47a1
commit 2284fe3
Show file tree

Hide file tree

Showing 24 changed files with 120 additions and 149 deletions.
diff --git a/apps/browser/src/platform/popup/layout/popup-layout.mdx b/apps/browser/src/platform/popup/layout/popup-layout.mdx
@@ -100,9 +100,7 @@ Usage example:
 
 ### Transparent header
 
-<Canvas>
-  <Story of={stories.TransparentHeader} />
-</Canvas>
+<Canvas of={stories.TransparentHeader} />
 
 Common interactive elements to insert into the `end` slot are:
 
@@ -113,9 +111,7 @@ Common interactive elements to insert into the `end` slot are:
 
 ### Notice
 
-<Canvas>
-  <Story of={stories.Notice} />
-</Canvas>
+<Canvas of={stories.Notice} />
 
 Common interactive elements to insert into the `full-width-notice` slot are:
 
@@ -160,44 +156,32 @@ View the story source code to see examples of how to construct these types of pa
 
 Example of wrapping an extension page in the `popup-tab-navigation` component.
 
-<Canvas>
-  <Story of={stories.PopupTabNavigation} />
-</Canvas>
+<Canvas of={stories.PopupTabNavigation} />
 
 ## Extension Page
 
 Examples of using just the `popup-page` component, without and with a footer.
 
-<Canvas>
-  <Story of={stories.PopupPage} />
-</Canvas>
+<Canvas of={stories.PopupPage} />
 
-<Canvas>
-  <Story of={stories.PopupPageWithFooter} />
-</Canvas>
+<Canvas of={stories.PopupPageWithFooter} />
 
 ## Popped out
 
 When the browser extension is popped out, the "popout" button should not be passed to the header.
 
-<Canvas>
-  <Story of={stories.PoppedOut} />
-</Canvas>
+<Canvas of={stories.PoppedOut} />
 
 # Other stories
 
 ## Centered Content
 
 An example of how to center the default content.
 
-<Canvas>
-  <Story of={stories.CenteredContent} />
-</Canvas>
+<Canvas of={stories.CenteredContent} />
 
 ## Loading
 
 An example of what the loading state looks like.
 
-<Canvas>
-  <Story of={stories.Loading} />
-</Canvas>
+<Canvas of={stories.Loading} />
diff --git a/libs/components/src/avatar/avatar.mdx b/libs/components/src/avatar/avatar.mdx
@@ -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,17 +37,17 @@ 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
 
 If the avatar is displayed on one of the theme's `background` color variables or is interactive,
 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
 

diff --git a/libs/components/src/badge/badge.mdx b/libs/components/src/badge/badge.mdx
@@ -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
 

diff --git a/libs/components/src/banner/banner.mdx b/libs/components/src/banner/banner.mdx
@@ -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.
 

diff --git a/libs/components/src/breadcrumbs/breadcrumbs.mdx b/libs/components/src/breadcrumbs/breadcrumbs.mdx
@@ -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,15 +23,15 @@ 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
 
 When a user is 2 or more levels deep into a tree, the top level is displayed followed by an
 
 <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
 

diff --git a/libs/components/src/button/button.mdx b/libs/components/src/button/button.mdx
@@ -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,35 +43,35 @@ 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
 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
 

diff --git a/libs/components/src/callout/callout.mdx b/libs/components/src/callout/callout.mdx
@@ -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
 

diff --git a/libs/components/src/chip-select/chip-select.mdx b/libs/components/src/chip-select/chip-select.mdx
@@ -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
 

diff --git a/libs/components/src/color-password/color-password.mdx b/libs/components/src/color-password/color-password.mdx
@@ -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