[PM-2276] Upgrade Storybook to v7 (#5258)

libs/components/src/banner/banner.mdx

@@ -0,0 +1,59 @@
+import { Meta, Story, Controls, Canvas, Primary } from "@storybook/addon-docs";
+
+import * as stories from "./banner.stories";
+
+<Meta of={stories} />
+
+# Banner
+
+Banners are used for important communication with the user that needs to be seen right away, but has
+little effect on the experience. Banners appear at the top of the user's screen on page load and
+persist across all pages a user navigates to.
+
+- They should always be dismissable and never use a timeout. If a user dismisses a banner, it should
+  not reappear during that same active session.
+- Use banners sparingly, as they can feel intrusive to the user if they appear unexpectedly. Their
+  effectiveness may decrease if too many are used.
+- Avoid stacking multiple banners.
+- Banners support a button link (text button).
+
+<Primary />
+
+<Controls />
+
+## Types
+
+Icons should remain consistent across these types. Do not change the icon without consulting
+designers.
+
+Use the following guidelines to help choose the correct type of banner.
+
+### Premium
+
+<Story of={stories.Premium} />
+
+Used primarily to encourage user to upgrade to premium.
+
+### Info
+
+<Story of={stories.Info} />
+
+Used to communicate release notes, server maintenance or other informative event.
+
+### Warning
+
+<Story of={stories.Warning} />
+
+Used to alert the user of outdated info or versions.
+
+### Danger
+
+<Story of={stories.Danger} />
+
+Rarely used, but may be used to alert users over critical messages or very outdated versions.
+
+## Accessibility
+
+Banners sets the `role="status"` and `aria-live="polite"` attributes to ensure screen readers
+announce the content prior to the test of the page. This behaviour can be disabled by setting
+`[useAlertRole]="false"`.

libs/components/src/banner/banner.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, moduleMetadata, Story } from "@storybook/angular";
+import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
 
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 
@@ -39,34 +39,46 @@ export default {
   argTypes: {
     onClose: { action: "onClose" },
   },
-} as Meta;
+} as Meta<BannerComponent>;
 
-const Template: Story<BannerComponent> = (args: BannerComponent) => ({
-  props: args,
-  template: `
-    <bit-banner [bannerType]="bannerType" (onClose)="onClose($event)">
+type Story = StoryObj<BannerComponent>;
+
+export const Premium: Story = {
+  args: {
+    bannerType: "premium",
+  },
+  render: (args: BannerComponent) => ({
+    props: args,
+    template: `
+      <bit-banner [bannerType]="bannerType" (onClose)="onClose($event)">
         Content Really Long Text Lorem Ipsum Ipsum Ipsum
         <button bitLink linkType="contrast">Button</button>
-    </bit-banner>
-  `,
-});
+      </bit-banner>
+      `,
+  }),
+};
 
-export const Premium = Template.bind({});
 Premium.args = {
   bannerType: "premium",
 };
 
-export const Info = Template.bind({});
-Info.args = {
-  bannerType: "info",
+export const Info: Story = {
+  ...Premium,
+  args: {
+    bannerType: "info",
+  },
 };
 
-export const Warning = Template.bind({});
-Warning.args = {
-  bannerType: "warning",
+export const Warning: Story = {
+  ...Premium,
+  args: {
+    bannerType: "warning",
+  },
 };
 
-export const Danger = Template.bind({});
-Danger.args = {
-  bannerType: "danger",
+export const Danger: Story = {
+  ...Premium,
+  args: {
+    bannerType: "danger",
+  },
 };