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

137
libs/components/src/tabs/tabs.stories.ts
View File

@@ -1,7 +1,7 @@
import { CommonModule } from "@angular/common";
import { Component } from "@angular/core";
import { Component, importProvidersFrom } from "@angular/core";
import { RouterModule } from "@angular/router";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { applicationConfig, Meta, moduleMetadata, StoryObj } from "@storybook/angular";
import { ButtonModule } from "../button";
import { FormFieldModule } from "../form-field";
@@ -44,20 +44,21 @@ export default {
ItemThreeDummyComponent,
DisabledDummyComponent,
],
imports: [
CommonModule,
TabsModule,
ButtonModule,
FormFieldModule,
RouterModule.forRoot(
[
{ path: "", redirectTo: "active", pathMatch: "full" },
{ path: "active", component: ActiveDummyComponent },
{ path: "item-2", component: ItemTwoDummyComponent },
{ path: "item-3", component: ItemThreeDummyComponent },
{ path: "disabled", component: DisabledDummyComponent },
],
{ useHash: true }
imports: [CommonModule, TabsModule, ButtonModule, FormFieldModule, RouterModule],
}),
applicationConfig({
providers: [
importProvidersFrom(
RouterModule.forRoot(
[
{ path: "", redirectTo: "active", pathMatch: "full" },
{ path: "active", component: ActiveDummyComponent },
{ path: "item-2", component: ItemTwoDummyComponent },
{ path: "item-3", component: ItemThreeDummyComponent },
{ path: "disabled", component: DisabledDummyComponent },
],
{ useHash: true }
)
),
],
}),
@@ -70,10 +71,13 @@ export default {
},
} as Meta;
const ContentTabGroupTemplate: Story<TabGroupComponent> = (args: any) => ({
props: args,
template: `
<bit-tab-group label="Main Content Tabs" class="tw-text-main">
type Story = StoryObj<TabGroupComponent>;
export const ContentTabs: Story = {
render: (args: any) => ({
props: args,
template: `
<bit-tab-group label="Main Content Tabs" class="tw-text-main">
<bit-tab label="First Tab">First Tab Content</bit-tab>
<bit-tab label="Second Tab">Second Tab Content</bit-tab>
<bit-tab>
@@ -85,56 +89,54 @@ const ContentTabGroupTemplate: Story<TabGroupComponent> = (args: any) => ({
<bit-tab [disabled]="true" label="Disabled">
Disabled Content
</bit-tab>
</bit-tab-group>
`,
});
</bit-tab-group>
`,
}),
};
export const ContentTabs = ContentTabGroupTemplate.bind({});
export const NavigationTabs: Story = {
render: (args: TabGroupComponent) => ({
props: args,
template: `
<bit-tab-nav-bar label="Main">
<bit-tab-link [route]="['active']">Active</bit-tab-link>
<bit-tab-link [route]="['item-2']">Item 2</bit-tab-link>
<bit-tab-link [route]="['item-3']">Item 3</bit-tab-link>
<bit-tab-link [route]="['disable']" [disabled]="true">Disabled</bit-tab-link>
</bit-tab-nav-bar>
<div class="tw-bg-transparent tw-text-semibold tw-text-center tw-text-main tw-py-10">
<router-outlet></router-outlet>
</div>
`,
}),
};
const NavTabGroupTemplate: Story<TabGroupComponent> = (args: TabGroupComponent) => ({
props: args,
template: `
<bit-tab-nav-bar label="Main">
<bit-tab-link [route]="['active']">Active</bit-tab-link>
<bit-tab-link [route]="['item-2']">Item 2</bit-tab-link>
<bit-tab-link [route]="['item-3']">Item 3</bit-tab-link>
<bit-tab-link [route]="['disable']" [disabled]="true">Disabled</bit-tab-link>
</bit-tab-nav-bar>
<div class="tw-bg-transparent tw-text-semibold tw-text-center tw-text-main tw-py-10">
<router-outlet></router-outlet>
</div>
`,
});
export const NavigationTabs = NavTabGroupTemplate.bind({});
const PreserveContentTabGroupTemplate: Story<TabGroupComponent> = (args: any) => ({
props: args,
template: `
<bit-tab-group label="Preserve Content Tabs" [preserveContent]="true" class="tw-text-main">
export const PreserveContentTabs: Story = {
render: (args: any) => ({
props: args,
template: `
<bit-tab-group label="Preserve Content Tabs" [preserveContent]="true" class="tw-text-main">
<bit-tab label="Text Tab">
<p>
Play the video in the other tab and switch back to hear the video is still playing.
</p>
<p>Play the video in the other tab and switch back to hear the video is still playing.</p>
</bit-tab>
<bit-tab label="Video Tab">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/H0-yWbe5XG4"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
width="560"
height="315"
src="https://www.youtube.com/embed/H0-yWbe5XG4"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</bit-tab>
</bit-tab-group>
`,
});
</bit-tab-group>
`,
}),
};
export const PreserveContentTabs = PreserveContentTabGroupTemplate.bind({});
const KeyboardNavTabGroupTemplate: Story<TabGroupComponent> = (args: any) => ({
props: args,
template: `
<bit-tab-group label="Keyboard Navigation Tabs" class="tw-text-main">
export const KeyboardNavigation: Story = {
render: (args: any) => ({
props: args,
template: `
<bit-tab-group label="Keyboard Navigation Tabs" class="tw-text-main">
<bit-tab label="Form Tab">
<p>
You can navigate through all tab labels, form inputs, and the button that is outside the tab group via
@@ -153,9 +155,8 @@ const KeyboardNavTabGroupTemplate: Story<TabGroupComponent> = (args: any) => ({
<bit-tab label="No Focusable Content Tab" [contentTabIndex]="0">
<p>This tab has no focusable content, but the panel should still be focusable</p>
</bit-tab>
</bit-tab-group>
<button bitButton buttonType="primary" class="tw-mt-5">External Button</button>
`,
});
export const KeyboardNavigation = KeyboardNavTabGroupTemplate.bind({});
</bit-tab-group>
<button bitButton buttonType="primary" class="tw-mt-5">External Button</button>
`,
}),
};