2022-08-05 17:45:36 +02:00
|
|
|
import { Meta, moduleMetadata, Story } from "@storybook/angular";
|
|
|
|
|
2022-09-08 10:37:23 +02:00
|
|
|
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
|
|
|
|
|
2022-08-05 17:45:36 +02:00
|
|
|
import { ButtonModule } from "../../button";
|
2022-09-15 07:38:29 +02:00
|
|
|
import { IconButtonModule } from "../../icon-button";
|
2022-09-08 10:37:23 +02:00
|
|
|
import { SharedModule } from "../../shared";
|
2022-09-28 18:05:35 +02:00
|
|
|
import { TabsModule } from "../../tabs";
|
2022-09-08 10:37:23 +02:00
|
|
|
import { I18nMockService } from "../../utils/i18n-mock.service";
|
|
|
|
import { DialogCloseDirective } from "../directives/dialog-close.directive";
|
|
|
|
import { DialogTitleContainerDirective } from "../directives/dialog-title-container.directive";
|
2022-08-05 17:45:36 +02:00
|
|
|
|
|
|
|
import { DialogComponent } from "./dialog.component";
|
|
|
|
|
|
|
|
export default {
|
|
|
|
title: "Component Library/Dialogs/Dialog",
|
|
|
|
component: DialogComponent,
|
|
|
|
decorators: [
|
|
|
|
moduleMetadata({
|
2022-09-28 18:05:35 +02:00
|
|
|
imports: [ButtonModule, SharedModule, IconButtonModule, TabsModule],
|
2022-09-08 10:37:23 +02:00
|
|
|
declarations: [DialogTitleContainerDirective, DialogCloseDirective],
|
|
|
|
providers: [
|
|
|
|
{
|
|
|
|
provide: I18nService,
|
|
|
|
useFactory: () => {
|
|
|
|
return new I18nMockService({
|
|
|
|
close: "Close",
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
2022-08-05 17:45:36 +02:00
|
|
|
}),
|
|
|
|
],
|
|
|
|
args: {
|
2023-05-09 11:26:13 +02:00
|
|
|
loading: false,
|
2022-08-05 17:45:36 +02:00
|
|
|
dialogSize: "small",
|
|
|
|
},
|
2022-09-28 18:05:35 +02:00
|
|
|
argTypes: {
|
|
|
|
_disablePadding: {
|
|
|
|
table: {
|
|
|
|
disable: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2022-08-05 17:45:36 +02:00
|
|
|
parameters: {
|
|
|
|
design: {
|
|
|
|
type: "figma",
|
|
|
|
url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
} as Meta;
|
|
|
|
|
|
|
|
const Template: Story<DialogComponent> = (args: DialogComponent) => ({
|
|
|
|
props: args,
|
|
|
|
template: `
|
2023-05-09 11:26:13 +02:00
|
|
|
<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>
|
2022-08-05 17:45:36 +02:00
|
|
|
`,
|
|
|
|
});
|
|
|
|
|
|
|
|
export const Default = Template.bind({});
|
|
|
|
Default.args = {
|
|
|
|
dialogSize: "default",
|
|
|
|
title: "Default",
|
|
|
|
};
|
|
|
|
|
|
|
|
export const Small = Template.bind({});
|
|
|
|
Small.args = {
|
|
|
|
dialogSize: "small",
|
|
|
|
title: "Small",
|
|
|
|
};
|
|
|
|
|
2023-02-24 17:29:49 +01:00
|
|
|
export const LongTitle = Template.bind({});
|
|
|
|
LongTitle.args = {
|
|
|
|
dialogSize: "small",
|
|
|
|
title: "Long_Title_That_Should_Be_Truncated",
|
|
|
|
};
|
|
|
|
|
2022-08-05 17:45:36 +02:00
|
|
|
export const Large = Template.bind({});
|
|
|
|
Large.args = {
|
|
|
|
dialogSize: "large",
|
|
|
|
title: "Large",
|
|
|
|
};
|
|
|
|
|
2023-05-09 11:26:13 +02:00
|
|
|
export const Loading = Template.bind({});
|
|
|
|
Loading.args = {
|
|
|
|
dialogSize: "large",
|
|
|
|
loading: true,
|
|
|
|
title: "Loading",
|
|
|
|
};
|
|
|
|
|
2022-08-05 17:45:36 +02:00
|
|
|
const TemplateScrolling: Story<DialogComponent> = (args: DialogComponent) => ({
|
|
|
|
props: args,
|
|
|
|
template: `
|
2023-05-09 11:26:13 +02:00
|
|
|
<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>
|
2023-05-01 11:11:39 +02:00
|
|
|
</ng-container>
|
2023-05-09 11:26:13 +02:00
|
|
|
</bit-dialog>
|
2022-08-05 17:45:36 +02:00
|
|
|
`,
|
|
|
|
});
|
|
|
|
|
|
|
|
export const ScrollingContent = TemplateScrolling.bind({});
|
|
|
|
ScrollingContent.args = {
|
|
|
|
dialogSize: "small",
|
|
|
|
};
|
2022-09-28 18:05:35 +02:00
|
|
|
|
|
|
|
const TemplateTabbed: Story<DialogComponent> = (args: DialogComponent) => ({
|
|
|
|
props: args,
|
|
|
|
template: `
|
2023-05-09 11:26:13 +02:00
|
|
|
<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>
|
2022-09-28 18:05:35 +02:00
|
|
|
`,
|
|
|
|
});
|
|
|
|
|
|
|
|
export const TabContent = TemplateTabbed.bind({});
|
|
|
|
TabContent.args = {
|
|
|
|
dialogSize: "large",
|
|
|
|
disablePadding: true,
|
|
|
|
};
|
|
|
|
TabContent.story = {
|
|
|
|
parameters: {
|
|
|
|
docs: {
|
|
|
|
storyDescription: `An example of using the \`bitTabGroup\` component within the Dialog. The content padding should be
|
|
|
|
disabled (via \`disablePadding\`) so that the tabs are flush against the dialog title.`,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|