diff --git a/libs/components/src/dialog/dialog.service.stories.ts b/libs/components/src/dialog/dialog.service.stories.ts index 678494cd9f8..290c19e1c25 100644 --- a/libs/components/src/dialog/dialog.service.stories.ts +++ b/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: ``, + template: ``, }) class StoryDialogComponent { + @Input() dialogContentComponent: ComponentType = StoryDialogContentComponent; + @Input() buttonText = "Open Dialog"; + constructor(public dialogService: DialogService) {} - openDialog() { - this.dialogService.open(StoryDialogContentComponent, { + async openDialog() { + 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: ` + + Tabbed Dialog Title + + + +

+ You can navigate through all tab labels, form inputs, and the dialog controls via the + keyboard. +

+ + First Input + + + + Second Input + + +
+ Second Tab Content +
+
+
+ + +
+
+ `, +}) +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 = (args: StoryDialogComponent) => ({ }); export const Default = Template.bind({}); + +const TabbedTemplate: Story = (args: StoryDialogComponent) => ({ + props: { + ...args, + dialogContentComponent: StoryTabbedDialogContentComponent, + buttonText: "Open Tabbed Dialog", + }, +}); + +export const TabbedDialogService = TabbedTemplate.bind({});