bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-16 08:13:42 +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

74
libs/components/src/menu/menu.stories.ts
View File

@@ -1,5 +1,5 @@
import { OverlayModule } from "@angular/cdk/overlay";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { ButtonModule } from "../button/button.module";
@@ -30,40 +30,42 @@ export default {
},
} as Meta;
const Template: Story<MenuTriggerForDirective> = (args: MenuTriggerForDirective) => ({
props: args,
template: `
<bit-menu #myMenu="menuComponent">
<a href="#" bitMenuItem>Anchor link</a>
<a href="#" bitMenuItem>Another link</a>
<button type="button" bitMenuItem>Button</button>
<bit-menu-divider></bit-menu-divider>
<button type="button" bitMenuItem>Button after divider</button>
</bit-menu>
type Story = StoryObj<MenuTriggerForDirective>;
<div class="tw-h-40">
<div class="cdk-overlay-pane bit-menu-panel">
<ng-container *ngTemplateOutlet="myMenu.templateRef"></ng-container>
export const OpenMenu: Story = {
render: (args) => ({
props: args,
template: `
<bit-menu #myMenu="menuComponent">
<a href="#" bitMenuItem>Anchor link</a>
<a href="#" bitMenuItem>Another link</a>
<button type="button" bitMenuItem>Button</button>
<bit-menu-divider></bit-menu-divider>
<button type="button" bitMenuItem>Button after divider</button>
</bit-menu>
<div class="tw-h-40">
<div class="cdk-overlay-pane bit-menu-panel">
<ng-container *ngTemplateOutlet="myMenu.templateRef"></ng-container>
</div>
</div>
</div>
`,
});
const TemplateWithButton: Story<MenuTriggerForDirective> = (args: MenuTriggerForDirective) => ({
props: args,
template: `
<div class="tw-h-40">
<button bitButton buttonType="secondary" [bitMenuTriggerFor]="myMenu">Open menu</button>
</div>
<bit-menu #myMenu>
<a href="#" bitMenuItem>Anchor link</a>
<a href="#" bitMenuItem>Another link</a>
<button type="button" bitMenuItem>Button</button>
<bit-menu-divider></bit-menu-divider>
<button type="button" bitMenuItem>Button after divider</button>
</bit-menu>`,
});
export const OpenMenu = Template.bind({});
export const ClosedMenu = TemplateWithButton.bind({});
`,
}),
};
export const ClosedMenu: Story = {
render: (args) => ({
props: args,
template: `
<div class="tw-h-40">
<button bitButton buttonType="secondary" [bitMenuTriggerFor]="myMenu">Open menu</button>
</div>
<bit-menu #myMenu>
<a href="#" bitMenuItem>Anchor link</a>
<a href="#" bitMenuItem>Another link</a>
<button type="button" bitMenuItem>Button</button>
<bit-menu-divider></bit-menu-divider>
<button type="button" bitMenuItem>Button after divider</button>
</bit-menu>`,
}),
};