bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-14 15:23:33 +00:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Oscar Hinton
2023-05-26 15:58:06 +02:00
committed by GitHub
parent 1638a1d6f5
commit f7b372a0b0
72 changed files with 6340 additions and 16409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
libs/components/src/icon-button/icon-button.stories.ts
View File

@@ -1,4 +1,4 @@
import { Meta, Story } from "@storybook/angular";
import { Meta, StoryObj } from "@storybook/angular";
import { BitIconButtonComponent, IconButtonType } from "./icon-button.component";
@@ -31,68 +31,72 @@ export default {
},
} as Meta;
const Template: Story<BitIconButtonComponent> = (args: BitIconButtonComponent) => ({
props: { ...args, buttonTypes },
template: `
<table class="tw-border-spacing-2 tw-text-center tw-text-main">
<thead>
<tr>
<td></td>
<td *ngFor="let buttonType of buttonTypes" class="tw-capitalize tw-font-bold tw-p-4"
[class.tw-text-contrast]="['contrast', 'light'].includes(buttonType)"
[class.tw-bg-primary-500]="['contrast', 'light'].includes(buttonType)">{{buttonType}}</td>
</tr>
</thead>
type Story = StoryObj<BitIconButtonComponent>;
<tbody>
<tr>
<td class="tw-font-bold tw-p-4 tw-text-left">Default</td>
<td *ngFor="let buttonType of buttonTypes" class="tw-p-2" [class.tw-bg-primary-500]="['contrast', 'light'].includes(buttonType)">
<button
[bitIconButton]="bitIconButton"
[buttonType]="buttonType"
[size]="size"
title="Example icon button"
aria-label="Example icon button"></button>
</td>
</tr>
<tr>
<td class="tw-font-bold tw-p-4 tw-text-left">Disabled</td>
<td *ngFor="let buttonType of buttonTypes" class="tw-p-2" [class.tw-bg-primary-500]="['contrast', 'light'].includes(buttonType)">
<button
[bitIconButton]="bitIconButton"
[buttonType]="buttonType"
[size]="size"
disabled
title="Example icon button"
aria-label="Example icon button"></button>
</td>
</tr>
<tr>
<td class="tw-font-bold tw-p-4 tw-text-left">Loading</td>
<td *ngFor="let buttonType of buttonTypes" class="tw-p-2" [class.tw-bg-primary-500]="['contrast', 'light'].includes(buttonType)">
<button
[bitIconButton]="bitIconButton"
[buttonType]="buttonType"
[size]="size"
loading="true"
title="Example icon button"
aria-label="Example icon button"></button>
</td>
</tr>
</tbody>
</table>
`,
});
export const Default = Template.bind({});
Default.args = {
size: "default",
export const Default: Story = {
render: (args: BitIconButtonComponent) => ({
props: { ...args, buttonTypes },
template: `
<table class="tw-border-spacing-2 tw-text-center tw-text-main">
<thead>
<tr>
<td></td>
<td *ngFor="let buttonType of buttonTypes" class="tw-capitalize tw-font-bold tw-p-4"
[class.tw-text-contrast]="['contrast', 'light'].includes(buttonType)"
[class.tw-bg-primary-500]="['contrast', 'light'].includes(buttonType)">{{buttonType}}</td>
</tr>
</thead>
<tbody>
<tr>
<td class="tw-font-bold tw-p-4 tw-text-left">Default</td>
<td *ngFor="let buttonType of buttonTypes" class="tw-p-2" [class.tw-bg-primary-500]="['contrast', 'light'].includes(buttonType)">
<button
[bitIconButton]="bitIconButton"
[buttonType]="buttonType"
[size]="size"
title="Example icon button"
aria-label="Example icon button"></button>
</td>
</tr>
<tr>
<td class="tw-font-bold tw-p-4 tw-text-left">Disabled</td>
<td *ngFor="let buttonType of buttonTypes" class="tw-p-2" [class.tw-bg-primary-500]="['contrast', 'light'].includes(buttonType)">
<button
[bitIconButton]="bitIconButton"
[buttonType]="buttonType"
[size]="size"
disabled
title="Example icon button"
aria-label="Example icon button"></button>
</td>
</tr>
<tr>
<td class="tw-font-bold tw-p-4 tw-text-left">Loading</td>
<td *ngFor="let buttonType of buttonTypes" class="tw-p-2" [class.tw-bg-primary-500]="['contrast', 'light'].includes(buttonType)">
<button
[bitIconButton]="bitIconButton"
[buttonType]="buttonType"
[size]="size"
loading="true"
title="Example icon button"
aria-label="Example icon button"></button>
</td>
</tr>
</tbody>
</table>
`,
}),
args: {
size: "default",
},
};
export const Small = Template.bind({});
Small.args = {
size: "small",
export const Small: Story = {
...Default,
args: {
size: "small",
},
};