mirror of
https://github.com/bitwarden/browser.git
synced 2024-09-27 04:03:00 +02:00
[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
This commit is contained in:
parent
197e0b7d5a
commit
e19216f031
@ -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() {
|
||||
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: `
|
||||
<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({});
|
||||
|
Loading…
Reference in New Issue
Block a user