[CL-62] Add new tabbed dialog service story

- Update StoryDialogComponent to support different content components and button text for re-use in multiple stories
- Update the story module metadata to include Tabs and FormsField modules for the new tab story
- Add StoryTabbedDialogComponent that has tabbed content with input fields which provide tabbing targets
- Add storybook actions to provide an example of getting a result from the dialog service

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

@@ -1,12 +1,17 @@
 import { DIALOG_DATA, DialogModule, DialogRef } from "@angular/cdk/dialog";
-import { Component, Inject } from "@angular/core";
+import { ComponentType } from "@angular/cdk/overlay";
+import { Component, Inject, Input } from "@angular/core";
+import { action } from "@storybook/addon-actions";
 import { Meta, moduleMetadata, Story } from "@storybook/angular";
+import { firstValueFrom } from "rxjs";
 
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 
 import { ButtonModule } from "../button";
+import { FormFieldModule } from "../form-field";
 import { IconButtonModule } from "../icon-button";
 import { SharedModule } from "../shared";
+import { TabsModule } from "../tabs";
 import { I18nMockService } from "../utils/i18n-mock.service";
 
 import { DialogService } from "./dialog.service";
@@ -18,19 +23,28 @@ interface Animal {
   animal: string;
 }
 
+const actionsData = {
+  onDialogClosed: action("onDialogClosed"),
+};
+
 @Component({
   selector: "app-story-dialog",
-  template: `<button bitButton (click)="openDialog()">Open Dialog</button>`,
+  template: `<button bitButton (click)="openDialog()">{{ buttonText }}</button>`,
 })
 class StoryDialogComponent {
+  @Input() dialogContentComponent: ComponentType<unknown> = StoryDialogContentComponent;
+  @Input() buttonText = "Open Dialog";
+
   constructor(public dialogService: DialogService) {}
 
-  openDialog() {
+  async openDialog() {
-    this.dialogService.open(StoryDialogContentComponent, {
+    const ref = this.dialogService.open(this.dialogContentComponent, {
       data: {
         animal: "panda",
       },
     });
+    const result = await firstValueFrom(ref.closed);
+    actionsData.onDialogClosed(result);
   }
 }
 
@@ -59,6 +73,41 @@ class StoryDialogContentComponent {
   }
 }
 
+@Component({
+  selector: "story-tabbed-dialog-content",
+  template: `
+    <bit-dialog dialogSize="large" disablePadding>
+      <span bitDialogTitle>Tabbed Dialog Title</span>
+      <span bitDialogContent>
+        <bit-tab-group>
+          <bit-tab label="First Tab">
+            <p>
+              You can navigate through all tab labels, form inputs, and the dialog controls via the
+              keyboard.
+            </p>
+            <bit-form-field>
+              <bit-label>First Input</bit-label>
+              <input type="text" bitInput />
+            </bit-form-field>
+            <bit-form-field>
+              <bit-label>Second Input</bit-label>
+              <input type="text" bitInput />
+            </bit-form-field>
+          </bit-tab>
+          <bit-tab label="Second Tab">Second Tab Content</bit-tab>
+        </bit-tab-group>
+      </span>
+      <div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
+        <button bitButton buttonType="primary" (click)="dialogRef.close()">Save</button>
+        <button bitButton buttonType="secondary" bitDialogClose>Cancel</button>
+      </div>
+    </bit-dialog>
+  `,
+})
+class StoryTabbedDialogContentComponent {
+  constructor(public dialogRef: DialogRef) {}
+}
+
 export default {
   title: "Component Library/Dialogs/Service",
   component: StoryDialogComponent,
@@ -69,8 +118,16 @@ export default {
         DialogComponent,
         DialogTitleContainerDirective,
         StoryDialogContentComponent,
+        StoryTabbedDialogContentComponent,
+      ],
+      imports: [
+        SharedModule,
+        ButtonModule,
+        DialogModule,
+        IconButtonModule,
+        TabsModule,
+        FormFieldModule,
       ],
-      imports: [SharedModule, ButtonModule, DialogModule, IconButtonModule],
       providers: [
         DialogService,
         {
@@ -97,3 +154,13 @@ const Template: Story<StoryDialogComponent> = (args: StoryDialogComponent) => ({
 });
 
 export const Default = Template.bind({});
+
+const TabbedTemplate: Story<StoryDialogComponent> = (args: StoryDialogComponent) => ({
+  props: {
+    ...args,
+    dialogContentComponent: StoryTabbedDialogContentComponent,
+    buttonText: "Open Tabbed Dialog",
+  },
+});
+
+export const TabbedDialogService = TabbedTemplate.bind({});