mirror of
https://github.com/bitwarden/browser
synced 2025-12-20 18:23:31 +00:00
b4d87007ba
* add basic new nav item styling * update alt-3 bg color * add x padding to item * remove copy left in error * style app switcher to match nav items * adding new button hover colors * add new logo lockups * use new logos in web vault * fix color and svg fills * use set height for nav items * optimize SVGs * move if logic * use rem for icon size * move shield logo * use shield svg for collapsed icon * remove unused eslint disable directive * run prettier * remove variables * update logo hover styles * use more standard flow control syntax * update admin console logo svg * add new hover variables * use class instead of fill * use variable for logo hover * remove unnecessary container * use hover variable for nav switcher * use correct variables for fill colors * update hover state to use variable left in error * give icon width to preserve text alignment * remove tree story as functionality no longer supported * remove nested styles helper * remove obsolete afterContentInit * remove tree example from layout story * remove tree example from secondary layout story * remove tree example from kitchen sink story * Fix interaction test * remove remaining references to tree variant
104 lines
3.4 KiB
TypeScript
104 lines
3.4 KiB
TypeScript
import { RouterTestingModule } from "@angular/router/testing";
|
|
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
|
|
import { userEvent } from "@storybook/test";
|
|
|
|
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
|
|
|
import { CalloutModule } from "../callout";
|
|
import { NavigationModule } from "../navigation";
|
|
import { positionFixedWrapperDecorator } from "../stories/storybook-decorators";
|
|
import { I18nMockService } from "../utils/i18n-mock.service";
|
|
|
|
import { LayoutComponent } from "./layout.component";
|
|
import { mockLayoutI18n } from "./mocks";
|
|
|
|
export default {
|
|
title: "Component Library/Layout",
|
|
component: LayoutComponent,
|
|
decorators: [
|
|
positionFixedWrapperDecorator(),
|
|
moduleMetadata({
|
|
imports: [NavigationModule, RouterTestingModule, CalloutModule],
|
|
providers: [
|
|
{
|
|
provide: I18nService,
|
|
useFactory: () => {
|
|
return new I18nMockService(mockLayoutI18n);
|
|
},
|
|
},
|
|
],
|
|
}),
|
|
],
|
|
parameters: {
|
|
chromatic: { viewports: [640, 1280] },
|
|
design: {
|
|
type: "figma",
|
|
url: "https://www.figma.com/design/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=21662-51009&t=k6OTDDPZOTtypRqo-11",
|
|
},
|
|
},
|
|
} as Meta;
|
|
|
|
type Story = StoryObj<LayoutComponent>;
|
|
|
|
export const Empty: Story = {
|
|
render: (args) => ({
|
|
props: args,
|
|
template: /* HTML */ `<bit-layout>
|
|
<bit-side-nav></bit-side-nav>
|
|
</bit-layout>`,
|
|
}),
|
|
};
|
|
|
|
export const WithContent: Story = {
|
|
render: (args) => ({
|
|
props: args,
|
|
template: /* HTML */ `
|
|
<bit-layout>
|
|
<bit-side-nav>
|
|
<bit-nav-group text="Hello World (Anchor)" [route]="['a']" icon="bwi-filter">
|
|
<bit-nav-item text="Child A" route="a" icon="bwi-filter"></bit-nav-item>
|
|
<bit-nav-item text="Child B" route="b"></bit-nav-item>
|
|
<bit-nav-item text="Child C" route="c" icon="bwi-filter"></bit-nav-item>
|
|
</bit-nav-group>
|
|
<bit-nav-group text="Lorem Ipsum (Button)" icon="bwi-filter">
|
|
<bit-nav-item text="Child A" icon="bwi-filter"></bit-nav-item>
|
|
<bit-nav-item text="Child B"></bit-nav-item>
|
|
<bit-nav-item text="Child C" icon="bwi-filter"></bit-nav-item>
|
|
</bit-nav-group>
|
|
</bit-side-nav>
|
|
<bit-callout title="Foobar"> Hello world! </bit-callout>
|
|
</bit-layout>
|
|
`,
|
|
}),
|
|
};
|
|
|
|
export const SkipLinks: Story = {
|
|
...WithContent,
|
|
play: async () => {
|
|
await userEvent.tab();
|
|
},
|
|
};
|
|
|
|
export const Secondary: Story = {
|
|
render: (args) => ({
|
|
props: args,
|
|
template: /* HTML */ `
|
|
<bit-layout>
|
|
<bit-side-nav variant="secondary">
|
|
<bit-nav-group text="Hello World (Anchor)" [route]="['a']" icon="bwi-filter">
|
|
<bit-nav-item text="Child A" route="a" icon="bwi-filter"></bit-nav-item>
|
|
<bit-nav-item text="Child B" route="b"></bit-nav-item>
|
|
<bit-nav-item text="Child C" route="c" icon="bwi-filter"></bit-nav-item>
|
|
</bit-nav-group>
|
|
<bit-nav-group text="Lorem Ipsum (Button)" icon="bwi-filter">
|
|
<bit-nav-item text="Child A" icon="bwi-filter"></bit-nav-item>
|
|
<bit-nav-item text="Child B"></bit-nav-item>
|
|
<bit-nav-item text="Child C" icon="bwi-filter"></bit-nav-item>
|
|
</bit-nav-group>
|
|
</bit-side-nav>
|
|
<bit-callout title="Foobar"> Hello world! </bit-callout>
|
|
</bit-layout>
|
|
`,
|
|
}),
|
|
};
|