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

libs/components/src/dialog/dialog.service.stories.ts

@@ -1,6 +1,6 @@
 import { DIALOG_DATA, DialogModule, DialogRef } from "@angular/cdk/dialog";
 import { Component, Inject } from "@angular/core";
-import { Meta, moduleMetadata, Story } from "@storybook/angular";
+import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 
@@ -90,8 +90,6 @@ export default {
   },
 } as Meta;
 
-const Template: Story<StoryDialogComponent> = (args: StoryDialogComponent) => ({
-  props: args,
-});
+type Story = StoryObj<StoryDialogComponent>;
 
-export const Default = Template.bind({});
+export const Default: Story = {};

libs/components/src/dialog/dialog/dialog.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, moduleMetadata, Story } from "@storybook/angular";
+import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 
@@ -50,110 +50,118 @@ export default {
   },
 } as Meta;
 
-const Template: Story<DialogComponent> = (args: DialogComponent) => ({
-  props: args,
-  template: `
-    <bit-dialog [dialogSize]="dialogSize" [loading]="loading" [disablePadding]="disablePadding">
-      <span bitDialogTitle>{{title}}</span>
-      <ng-container bitDialogContent>Dialog body text goes here.</ng-container>
-      <ng-container bitDialogFooter>
-        <button bitButton buttonType="primary" [disabled]="loading">Save</button>
-        <button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
-        <button
-          [disabled]="loading"
-          class="tw-ml-auto"
-          bitIconButton="bwi-trash"
-          buttonType="danger"
-          size="default"
-          title="Delete"
-          aria-label="Delete"></button>
-      </ng-container>
-    </bit-dialog>
-  `,
-});
+type Story = StoryObj<DialogComponent & { title: string }>;
 
-export const Default = Template.bind({});
-Default.args = {
-  dialogSize: "default",
-  title: "Default",
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  dialogSize: "small",
-  title: "Small",
-};
-
-export const LongTitle = Template.bind({});
-LongTitle.args = {
-  dialogSize: "small",
-  title: "Long_Title_That_Should_Be_Truncated",
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  dialogSize: "large",
-  title: "Large",
-};
-
-export const Loading = Template.bind({});
-Loading.args = {
-  dialogSize: "large",
-  loading: true,
-  title: "Loading",
-};
-
-const TemplateScrolling: Story<DialogComponent> = (args: DialogComponent) => ({
-  props: args,
-  template: `
-    <bit-dialog [dialogSize]="dialogSize" [loading]="loading" [disablePadding]="disablePadding">
-      <span bitDialogTitle>Scrolling Example</span>
-      <span bitDialogContent>
-        Dialog body text goes here.<br>
-        <ng-container *ngFor="let _ of [].constructor(100)">
-          repeating lines of characters <br>
+export const Default: Story = {
+  render: (args: DialogComponent) => ({
+    props: args,
+    template: `
+      <bit-dialog [dialogSize]="dialogSize" [loading]="loading" [disablePadding]="disablePadding">
+        <span bitDialogTitle>{{title}}</span>
+        <ng-container bitDialogContent>Dialog body text goes here.</ng-container>
+        <ng-container bitDialogFooter>
+          <button bitButton buttonType="primary" [disabled]="loading">Save</button>
+          <button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
+          <button
+            [disabled]="loading"
+            class="tw-ml-auto"
+            bitIconButton="bwi-trash"
+            buttonType="danger"
+            size="default"
+            title="Delete"
+            aria-label="Delete"></button>
         </ng-container>
-        end of sequence!
-      </span>
-      <ng-container bitDialogFooter>
-        <button bitButton buttonType="primary" [disabled]="loading">Save</button>
-        <button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
-      </ng-container>
-    </bit-dialog>
-  `,
-});
-
-export const ScrollingContent = TemplateScrolling.bind({});
-ScrollingContent.args = {
-  dialogSize: "small",
+      </bit-dialog>
+    `,
+  }),
+  args: {
+    dialogSize: "default",
+    title: "Default",
+  },
 };
 
-const TemplateTabbed: Story<DialogComponent> = (args: DialogComponent) => ({
-  props: args,
-  template: `
-    <bit-dialog [dialogSize]="dialogSize" [disablePadding]="disablePadding">
-      <span bitDialogTitle>Tab Content Example</span>
-      <span bitDialogContent>
-        <bit-tab-group>
-            <bit-tab label="First Tab">First Tab Content</bit-tab>
-            <bit-tab label="Second Tab">Second Tab Content</bit-tab>
-            <bit-tab label="Third Tab">Third Tab Content</bit-tab>
-        </bit-tab-group>
-      </span>
-      <ng-container bitDialogFooter>
-        <button bitButton buttonType="primary" [disabled]="loading">Save</button>
-        <button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
-      </ng-container>
-    </bit-dialog>
-  `,
-});
-
-export const TabContent = TemplateTabbed.bind({});
-TabContent.args = {
-  dialogSize: "large",
-  disablePadding: true,
+export const Small: Story = {
+  ...Default,
+  args: {
+    dialogSize: "small",
+    title: "Small",
+  },
 };
-TabContent.story = {
+
+export const LongTitle: Story = {
+  ...Default,
+  args: {
+    dialogSize: "small",
+    title: "Long_Title_That_Should_Be_Truncated",
+  },
+};
+
+export const Large: Story = {
+  ...Default,
+  args: {
+    dialogSize: "large",
+    title: "Large",
+  },
+};
+
+export const Loading: Story = {
+  ...Default,
+  args: {
+    dialogSize: "large",
+    loading: true,
+    title: "Loading",
+  },
+};
+
+export const ScrollingContent: Story = {
+  render: (args: DialogComponent) => ({
+    props: args,
+    template: `
+      <bit-dialog [dialogSize]="dialogSize" [loading]="loading" [disablePadding]="disablePadding">
+        <span bitDialogTitle>Scrolling Example</span>
+        <span bitDialogContent>
+          Dialog body text goes here.<br>
+          <ng-container *ngFor="let _ of [].constructor(100)">
+            repeating lines of characters <br>
+          </ng-container>
+          end of sequence!
+        </span>
+        <ng-container bitDialogFooter>
+          <button bitButton buttonType="primary" [disabled]="loading">Save</button>
+          <button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
+        </ng-container>
+      </bit-dialog>
+    `,
+  }),
+  args: {
+    dialogSize: "small",
+  },
+};
+
+export const TabContent: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <bit-dialog [dialogSize]="dialogSize" [disablePadding]="disablePadding">
+        <span bitDialogTitle>Tab Content Example</span>
+        <span bitDialogContent>
+          <bit-tab-group>
+              <bit-tab label="First Tab">First Tab Content</bit-tab>
+              <bit-tab label="Second Tab">Second Tab Content</bit-tab>
+              <bit-tab label="Third Tab">Third Tab Content</bit-tab>
+          </bit-tab-group>
+        </span>
+        <ng-container bitDialogFooter>
+          <button bitButton buttonType="primary" [disabled]="loading">Save</button>
+          <button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
+        </ng-container>
+      </bit-dialog>
+    `,
+  }),
+  args: {
+    dialogSize: "large",
+    disablePadding: true,
+  },
   parameters: {
     docs: {
       storyDescription: `An example of using the \`bitTabGroup\` component within the Dialog. The content padding should be

libs/components/src/dialog/simple-configurable-dialog/simple-configurable-dialog.service.stories.ts

@@ -1,6 +1,6 @@
 import { DialogModule } from "@angular/cdk/dialog";
 import { Component } from "@angular/core";
-import { Meta, moduleMetadata, Story } from "@storybook/angular";
+import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
 import { SimpleDialogType, SimpleDialogOptions } from "@bitwarden/angular/services/dialog";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -239,8 +239,6 @@ export default {
   },
 } as Meta;
 
-const Template: Story<StoryDialogComponent> = (args: StoryDialogComponent) => ({
-  props: args,
-});
+type Story = StoryObj<StoryDialogComponent>;
 
-export const Default = Template.bind({});
+export const Default: Story = {};

libs/components/src/dialog/simple-dialog.service.stories.ts

@@ -1,6 +1,6 @@
 import { DialogModule, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
 import { Component, Inject } from "@angular/core";
-import { Meta, moduleMetadata, Story } from "@storybook/angular";
+import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 
@@ -90,8 +90,6 @@ export default {
   },
 } as Meta;
 
-const Template: Story<StoryDialogComponent> = (args: StoryDialogComponent) => ({
-  props: args,
-});
+type Story = StoryObj<StoryDialogComponent>;
 
-export const Default = Template.bind({});
+export const Default: Story = {};

libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, moduleMetadata, Story } from "@storybook/angular";
+import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
 import { ButtonModule } from "../../button";
 import { DialogTitleContainerDirective } from "../directives/dialog-title-container.directive";
@@ -22,61 +22,63 @@ export default {
   },
 } as Meta;
 
-const Template: Story<SimpleDialogComponent> = (args: SimpleDialogComponent) => ({
-  props: args,
-  template: `
-  <bit-simple-dialog>
-    <span bitDialogTitle>Alert Dialog</span>
-    <span bitDialogContent>Message Content</span>
-    <ng-container bitDialogFooter>
-      <button bitButton buttonType="primary">Yes</button>
-      <button bitButton buttonType="secondary">No</button>
-    </ng-container>
-  </bit-simple-dialog>
-  `,
-});
+type Story = StoryObj<SimpleDialogComponent & { useDefaultIcon: boolean }>;
 
-export const Default = Template.bind({});
-
-const TemplateWithIcon: Story<SimpleDialogComponent> = (args: SimpleDialogComponent) => ({
-  props: args,
-  template: `
-  <bit-simple-dialog>
-    <i bitDialogIcon class="bwi bwi-star tw-text-3xl tw-text-success" aria-hidden="true"></i>
-    <span bitDialogTitle>Premium Subscription Available</span>
-    <span bitDialogContent> Message Content</span>
-    <ng-container bitDialogFooter>
-      <button bitButton buttonType="primary">Yes</button>
-      <button bitButton buttonType="secondary">No</button>
-    </ng-container>
-  </bit-simple-dialog>
-  `,
-});
-
-export const CustomIcon = TemplateWithIcon.bind({});
-
-const TemplateScroll: Story<SimpleDialogComponent> = (args: SimpleDialogComponent) => ({
-  props: args,
-  template: `
-  <bit-simple-dialog>
-    <span bitDialogTitle>Alert Dialog</span>
-    <span bitDialogContent>
-      Message Content
-      Message text goes here.<br>
-      <ng-container *ngFor="let _ of [].constructor(100)">
-        repeating lines of characters <br>
-      </ng-container>
-      end of sequence!
-    </span>
-    <ng-container bitDialogFooter>
-      <button bitButton buttonType="primary">Yes</button>
-      <button bitButton buttonType="secondary">No</button>
-    </ng-container>
-  </bit-simple-dialog>
-  `,
-});
-
-export const ScrollingContent = TemplateScroll.bind({});
-ScrollingContent.args = {
-  useDefaultIcon: true,
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <bit-simple-dialog>
+        <span bitDialogTitle>Alert Dialog</span>
+        <span bitDialogContent>Message Content</span>
+        <ng-container bitDialogFooter>
+          <button bitButton buttonType="primary">Yes</button>
+          <button bitButton buttonType="secondary">No</button>
+        </ng-container>
+      </bit-simple-dialog>
+    `,
+  }),
+};
+
+export const CustomIcon: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <bit-simple-dialog>
+        <i bitDialogIcon class="bwi bwi-star tw-text-3xl tw-text-success" aria-hidden="true"></i>
+        <span bitDialogTitle>Premium Subscription Available</span>
+        <span bitDialogContent> Message Content</span>
+        <ng-container bitDialogFooter>
+          <button bitButton buttonType="primary">Yes</button>
+          <button bitButton buttonType="secondary">No</button>
+        </ng-container>
+      </bit-simple-dialog>
+    `,
+  }),
+};
+
+export const ScrollingContent: Story = {
+  render: (args: SimpleDialogComponent) => ({
+    props: args,
+    template: `
+      <bit-simple-dialog>
+        <span bitDialogTitle>Alert Dialog</span>
+        <span bitDialogContent>
+          Message Content
+          Message text goes here.<br>
+          <ng-container *ngFor="let _ of [].constructor(100)">
+            repeating lines of characters <br>
+          </ng-container>
+          end of sequence!
+        </span>
+        <ng-container bitDialogFooter>
+          <button bitButton buttonType="primary">Yes</button>
+          <button bitButton buttonType="secondary">No</button>
+        </ng-container>
+      </bit-simple-dialog>
+    `,
+  }),
+  args: {
+    useDefaultIcon: true,
+  },
 };