bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-12 14:23:32 +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

184
libs/components/src/link/link.stories.ts
View File

@@ -1,4 +1,4 @@
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { AnchorLinkDirective, ButtonLinkDirective } from "./link.directive";
import { LinkModule } from "./link.module";
@@ -24,97 +24,99 @@ export default {
},
} as Meta;
const ButtonTemplate: Story<ButtonLinkDirective> = (args: ButtonLinkDirective) => ({
props: args,
template: `
<div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-500': linkType === 'contrast' }">
<div class="tw-block tw-p-2">
<button bitLink [linkType]="linkType">Button</button>
</div>
<div class="tw-block tw-p-2">
<button bitLink [linkType]="linkType">
<i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
Add Icon Button
</button>
</div>
<div class="tw-block tw-p-2">
<button bitLink [linkType]="linkType">
<i class="bwi bwi-fw bwi-sm bwi-angle-right" aria-hidden="true"></i>
Chevron Icon Button
</button>
</div>
<div class="tw-block tw-p-2">
<button bitLink [linkType]="linkType" class="tw-text-sm">Small Button</button>
</div>
</div>
`,
});
type Story = StoryObj<ButtonLinkDirective>;
const AnchorTemplate: Story<AnchorLinkDirective> = (args: AnchorLinkDirective) => ({
props: args,
template: `
<div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-500': linkType === 'contrast' }">
<div class="tw-block tw-p-2">
<a bitLink [linkType]="linkType" href="#">Anchor</a>
export const Buttons: Story = {
render: (args) => ({
props: args,
template: `
<div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-500': linkType === 'contrast' }">
<div class="tw-block tw-p-2">
<button bitLink [linkType]="linkType">Button</button>
</div>
<div class="tw-block tw-p-2">
<button bitLink [linkType]="linkType">
<i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
Add Icon Button
</button>
</div>
<div class="tw-block tw-p-2">
<button bitLink [linkType]="linkType">
<i class="bwi bwi-fw bwi-sm bwi-angle-right" aria-hidden="true"></i>
Chevron Icon Button
</button>
</div>
<div class="tw-block tw-p-2">
<button bitLink [linkType]="linkType" class="tw-text-sm">Small Button</button>
</div>
</div>
<div class="tw-block tw-p-2">
<a bitLink [linkType]="linkType" href="#">
<i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
Add Icon Anchor
</a>
</div>
<div class="tw-block tw-p-2">
<a bitLink [linkType]="linkType" href="#">
<i class="bwi bwi-fw bwi-sm bwi-angle-right" aria-hidden="true"></i>
Chevron Icon Anchor
</a>
</div>
<div class="tw-block tw-p-2">
<a bitLink [linkType]="linkType" class="tw-text-sm" href="#">Small Anchor</a>
</div>
</div>
`,
});
export const Buttons = ButtonTemplate.bind({});
Buttons.args = {
linkType: "primary",
};
export const Anchors = AnchorTemplate.bind({});
Anchors.args = {
linkType: "primary",
};
const InlineTemplate: Story = (args) => ({
props: args,
template: `
<span class="tw-text-main">
On the internet paragraphs often contain <a bitLink href="#">inline links</a>, but few know that <button bitLink>buttons</button> can be used for similar purposes.
</span>
`,
});
export const Inline = InlineTemplate.bind({});
Inline.args = {
linkType: "primary",
};
const DisabledTemplate: Story = (args) => ({
props: args,
template: `
<button bitLink disabled linkType="primary" class="tw-mr-2">Primary</button>
<button bitLink disabled linkType="secondary" class="tw-mr-2">Secondary</button>
<div class="tw-bg-primary-500 tw-p-2 tw-inline-block">
<button bitLink disabled linkType="contrast" class="tw-mr-2">Contrast</button>
</div>
`,
});
export const Disabled = DisabledTemplate.bind({});
Disabled.parameters = {
controls: {
exclude: ["linkType"],
hideNoControlsWarning: true,
`,
}),
args: {
linkType: "primary",
},
};
export const Anchors: StoryObj<AnchorLinkDirective> = {
render: (args) => ({
props: args,
template: `
<div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-500': linkType === 'contrast' }">
<div class="tw-block tw-p-2">
<a bitLink [linkType]="linkType" href="#">Anchor</a>
</div>
<div class="tw-block tw-p-2">
<a bitLink [linkType]="linkType" href="#">
<i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
Add Icon Anchor
</a>
</div>
<div class="tw-block tw-p-2">
<a bitLink [linkType]="linkType" href="#">
<i class="bwi bwi-fw bwi-sm bwi-angle-right" aria-hidden="true"></i>
Chevron Icon Anchor
</a>
</div>
<div class="tw-block tw-p-2">
<a bitLink [linkType]="linkType" class="tw-text-sm" href="#">Small Anchor</a>
</div>
</div>
`,
}),
args: {
linkType: "primary",
},
};
export const Inline: Story = {
render: (args) => ({
props: args,
template: `
<span class="tw-text-main">
On the internet paragraphs often contain <a bitLink href="#">inline links</a>, but few know that <button bitLink>buttons</button> can be used for similar purposes.
</span>
`,
}),
args: {
linkType: "primary",
},
};
export const Disabled: Story = {
render: (args) => ({
props: args,
template: `
<button bitLink disabled linkType="primary" class="tw-mr-2">Primary</button>
<button bitLink disabled linkType="secondary" class="tw-mr-2">Secondary</button>
<div class="tw-bg-primary-500 tw-p-2 tw-inline-block">
<button bitLink disabled linkType="contrast" class="tw-mr-2">Contrast</button>
</div>
`,
}),
parameters: {
controls: {
exclude: ["linkType"],
hideNoControlsWarning: true,
},
},
};