mirror of
https://github.com/bitwarden/browser.git
synced 2025-01-02 18:17:46 +01:00
temporarily disable web-header stories (#8105)
This commit is contained in:
Will Martin
GitHub
parent
52059bfcf6
commit
5bfa612544
232
apps/web/src/app/layouts/header/web-header.skip-stories.ts
Normal file
232
apps/web/src/app/layouts/header/web-header.skip-stories.ts
Normal file
@ -0,0 +1,232 @@
|
|||||||
|
// import { CommonModule } from "@angular/common";
|
||||||
|
// import { Component, importProvidersFrom, Injectable, Input } from "@angular/core";
|
||||||
|
// import { RouterModule } from "@angular/router";
|
||||||
|
// import {
|
||||||
|
// applicationConfig,
|
||||||
|
// componentWrapperDecorator,
|
||||||
|
// Meta,
|
||||||
|
// moduleMetadata,
|
||||||
|
// Story,
|
||||||
|
// } from "@storybook/angular";
|
||||||
|
// import { BehaviorSubject, combineLatest, map, of } from "rxjs";
|
||||||
|
|
||||||
|
// import { JslibModule } from "@bitwarden/angular/jslib.module";
|
||||||
|
// import { VaultTimeoutSettingsService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout-settings.service";
|
||||||
|
// import { VaultTimeoutAction } from "@bitwarden/common/enums/vault-timeout-action.enum";
|
||||||
|
// import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
|
||||||
|
// import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
|
||||||
|
// import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
|
||||||
|
// import {
|
||||||
|
// AvatarModule,
|
||||||
|
// BreadcrumbsModule,
|
||||||
|
// ButtonModule,
|
||||||
|
// IconButtonModule,
|
||||||
|
// IconModule,
|
||||||
|
// InputModule,
|
||||||
|
// MenuModule,
|
||||||
|
// NavigationModule,
|
||||||
|
// TabsModule,
|
||||||
|
// TypographyModule,
|
||||||
|
// } from "@bitwarden/components";
|
||||||
|
|
||||||
|
// import { DynamicAvatarComponent } from "../../components/dynamic-avatar.component";
|
||||||
|
// import { PreloadedEnglishI18nModule } from "../../core/tests";
|
||||||
|
// import { WebHeaderComponent } from "../header/web-header.component";
|
||||||
|
|
||||||
|
// import { WebLayoutMigrationBannerService } from "./web-layout-migration-banner.service";
|
||||||
|
|
||||||
|
// @Injectable({
|
||||||
|
// providedIn: "root",
|
||||||
|
// })
|
||||||
|
// class MockStateService {
|
||||||
|
// activeAccount$ = new BehaviorSubject("1").asObservable();
|
||||||
|
// accounts$ = new BehaviorSubject({ "1": { profile: { name: "Foo" } } }).asObservable();
|
||||||
|
// }
|
||||||
|
|
||||||
|
// class MockMessagingService implements MessagingService {
|
||||||
|
// send(subscriber: string, arg?: any) {
|
||||||
|
// alert(subscriber);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// class MockVaultTimeoutService {
|
||||||
|
// availableVaultTimeoutActions$() {
|
||||||
|
// return new BehaviorSubject([VaultTimeoutAction.Lock]).asObservable();
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// class MockPlatformUtilsService {
|
||||||
|
// isSelfHost() {
|
||||||
|
// return false;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// @Component({
|
||||||
|
// selector: "product-switcher",
|
||||||
|
// template: `<button bitIconButton="bwi-filter"></button>`,
|
||||||
|
// })
|
||||||
|
// class MockProductSwitcher {}
|
||||||
|
|
||||||
|
// @Component({
|
||||||
|
// selector: "dynamic-avatar",
|
||||||
|
// template: `<bit-avatar [text]="name$ | async"></bit-avatar>`,
|
||||||
|
// standalone: true,
|
||||||
|
// imports: [CommonModule, AvatarModule],
|
||||||
|
// })
|
||||||
|
// class MockDynamicAvatar implements Partial<DynamicAvatarComponent> {
|
||||||
|
// protected name$ = combineLatest([
|
||||||
|
// this.stateService.accounts$,
|
||||||
|
// this.stateService.activeAccount$,
|
||||||
|
// ]).pipe(
|
||||||
|
// map(
|
||||||
|
// ([accounts, activeAccount]) => accounts[activeAccount as keyof typeof accounts].profile.name,
|
||||||
|
// ),
|
||||||
|
// );
|
||||||
|
|
||||||
|
// @Input()
|
||||||
|
// text: string;
|
||||||
|
|
||||||
|
// constructor(private stateService: MockStateService) {}
|
||||||
|
// }
|
||||||
|
|
||||||
|
// export default {
|
||||||
|
// title: "Web/Header",
|
||||||
|
// component: WebHeaderComponent,
|
||||||
|
// decorators: [
|
||||||
|
// componentWrapperDecorator(
|
||||||
|
// (story) => `<div class="tw-min-h-screen tw-flex-1 tw-p-6 tw-text-main">${story}</div>`,
|
||||||
|
// ),
|
||||||
|
// moduleMetadata({
|
||||||
|
// imports: [
|
||||||
|
// JslibModule,
|
||||||
|
// AvatarModule,
|
||||||
|
// BreadcrumbsModule,
|
||||||
|
// ButtonModule,
|
||||||
|
// IconButtonModule,
|
||||||
|
// IconModule,
|
||||||
|
// InputModule,
|
||||||
|
// MenuModule,
|
||||||
|
// TabsModule,
|
||||||
|
// TypographyModule,
|
||||||
|
// NavigationModule,
|
||||||
|
// MockDynamicAvatar,
|
||||||
|
// ],
|
||||||
|
// declarations: [WebHeaderComponent, MockProductSwitcher],
|
||||||
|
// providers: [
|
||||||
|
// { provide: StateService, useClass: MockStateService },
|
||||||
|
// {
|
||||||
|
// provide: WebLayoutMigrationBannerService,
|
||||||
|
// useValue: {
|
||||||
|
// showBanner$: of(false),
|
||||||
|
// } as Partial<WebLayoutMigrationBannerService>,
|
||||||
|
// },
|
||||||
|
// { provide: PlatformUtilsService, useClass: MockPlatformUtilsService },
|
||||||
|
// { provide: VaultTimeoutSettingsService, useClass: MockVaultTimeoutService },
|
||||||
|
// {
|
||||||
|
// provide: MessagingService,
|
||||||
|
// useFactory: () => {
|
||||||
|
// return new MockMessagingService();
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// }),
|
||||||
|
// applicationConfig({
|
||||||
|
// providers: [
|
||||||
|
// importProvidersFrom(RouterModule.forRoot([], { useHash: true })),
|
||||||
|
// importProvidersFrom(PreloadedEnglishI18nModule),
|
||||||
|
// ],
|
||||||
|
// }),
|
||||||
|
// ],
|
||||||
|
// } as Meta;
|
||||||
|
|
||||||
|
// export const KitchenSink: Story = (args) => ({
|
||||||
|
// props: args,
|
||||||
|
// template: `
|
||||||
|
// <app-header title="LongTitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" icon="bwi-bug">
|
||||||
|
// <bit-breadcrumbs slot="breadcrumbs">
|
||||||
|
// <bit-breadcrumb>Foo</bit-breadcrumb>
|
||||||
|
// <bit-breadcrumb>Bar</bit-breadcrumb>
|
||||||
|
// </bit-breadcrumbs>
|
||||||
|
// <input
|
||||||
|
// bitInput
|
||||||
|
// placeholder="Ask Jeeves"
|
||||||
|
// type="text"
|
||||||
|
// />
|
||||||
|
// <button bitButton buttonType="primary">New</button>
|
||||||
|
// <button bitButton slot="secondary">Click Me 🎉</button>
|
||||||
|
// <bit-tab-nav-bar slot="tabs">
|
||||||
|
// <bit-tab-link route="">Foo</bit-tab-link>
|
||||||
|
// <bit-tab-link route="#bar">Bar</bit-tab-link>
|
||||||
|
// </bit-tab-nav-bar>
|
||||||
|
// </app-header>
|
||||||
|
// `,
|
||||||
|
// });
|
||||||
|
|
||||||
|
// export const Basic: Story = (args) => ({
|
||||||
|
// props: args,
|
||||||
|
// template: `
|
||||||
|
// <app-header title="Foobar" icon="bwi-bug"></app-header>
|
||||||
|
// `,
|
||||||
|
// });
|
||||||
|
|
||||||
|
// export const WithLongTitle: Story = (args) => ({
|
||||||
|
// props: args,
|
||||||
|
// template: `
|
||||||
|
// <app-header title="LongTitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" icon="bwi-bug"></app-header>
|
||||||
|
// `,
|
||||||
|
// });
|
||||||
|
|
||||||
|
// export const WithBreadcrumbs: Story = (args) => ({
|
||||||
|
// props: args,
|
||||||
|
// template: `
|
||||||
|
// <app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
||||||
|
// <bit-breadcrumbs slot="breadcrumbs">
|
||||||
|
// <bit-breadcrumb>Foo</bit-breadcrumb>
|
||||||
|
// <bit-breadcrumb>Bar</bit-breadcrumb>
|
||||||
|
// </bit-breadcrumbs>
|
||||||
|
// </app-header>
|
||||||
|
// `,
|
||||||
|
// });
|
||||||
|
|
||||||
|
// export const WithSearch: Story = (args) => ({
|
||||||
|
// props: args,
|
||||||
|
// template: `
|
||||||
|
// <app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
||||||
|
// <input
|
||||||
|
// bitInput
|
||||||
|
// placeholder="Ask Jeeves"
|
||||||
|
// type="text"
|
||||||
|
// />
|
||||||
|
// </app-header>
|
||||||
|
// `,
|
||||||
|
// });
|
||||||
|
|
||||||
|
// export const WithSecondaryContent: Story = (args) => ({
|
||||||
|
// props: args,
|
||||||
|
// template: `
|
||||||
|
// <app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
||||||
|
// <button bitButton slot="secondary">Click Me 🎉</button>
|
||||||
|
// </app-header>
|
||||||
|
// `,
|
||||||
|
// });
|
||||||
|
|
||||||
|
// export const WithTabs: Story = (args) => ({
|
||||||
|
// props: args,
|
||||||
|
// template: `
|
||||||
|
// <app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
||||||
|
// <bit-tab-nav-bar slot="tabs">
|
||||||
|
// <bit-tab-link route="">Foo</bit-tab-link>
|
||||||
|
// <bit-tab-link route="#bar">Bar</bit-tab-link>
|
||||||
|
// </bit-tab-nav-bar>
|
||||||
|
// </app-header>
|
||||||
|
// `,
|
||||||
|
// });
|
||||||
|
|
||||||
|
// export const WithTitleSuffixComponent: Story = (args) => ({
|
||||||
|
// props: args,
|
||||||
|
// template: `
|
||||||
|
// <app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
||||||
|
// <ng-container slot="title-suffix"><i class="bwi bwi-spinner bwi-spin"></i></ng-container>
|
||||||
|
// </app-header>
|
||||||
|
// `,
|
||||||
|
// });
|
||||||
@ -1,232 +0,0 @@
|
|||||||
import { CommonModule } from "@angular/common";
|
|
||||||
import { Component, importProvidersFrom, Injectable, Input } from "@angular/core";
|
|
||||||
import { RouterModule } from "@angular/router";
|
|
||||||
import {
|
|
||||||
applicationConfig,
|
|
||||||
componentWrapperDecorator,
|
|
||||||
Meta,
|
|
||||||
moduleMetadata,
|
|
||||||
Story,
|
|
||||||
} from "@storybook/angular";
|
|
||||||
import { BehaviorSubject, combineLatest, map, of } from "rxjs";
|
|
||||||
|
|
||||||
import { JslibModule } from "@bitwarden/angular/jslib.module";
|
|
||||||
import { VaultTimeoutSettingsService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout-settings.service";
|
|
||||||
import { VaultTimeoutAction } from "@bitwarden/common/enums/vault-timeout-action.enum";
|
|
||||||
import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
|
|
||||||
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
|
|
||||||
import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
|
|
||||||
import {
|
|
||||||
AvatarModule,
|
|
||||||
BreadcrumbsModule,
|
|
||||||
ButtonModule,
|
|
||||||
IconButtonModule,
|
|
||||||
IconModule,
|
|
||||||
InputModule,
|
|
||||||
MenuModule,
|
|
||||||
NavigationModule,
|
|
||||||
TabsModule,
|
|
||||||
TypographyModule,
|
|
||||||
} from "@bitwarden/components";
|
|
||||||
|
|
||||||
import { DynamicAvatarComponent } from "../../components/dynamic-avatar.component";
|
|
||||||
import { PreloadedEnglishI18nModule } from "../../core/tests";
|
|
||||||
import { WebHeaderComponent } from "../header/web-header.component";
|
|
||||||
|
|
||||||
import { WebLayoutMigrationBannerService } from "./web-layout-migration-banner.service";
|
|
||||||
|
|
||||||
@Injectable({
|
|
||||||
providedIn: "root",
|
|
||||||
})
|
|
||||||
class MockStateService {
|
|
||||||
activeAccount$ = new BehaviorSubject("1").asObservable();
|
|
||||||
accounts$ = new BehaviorSubject({ "1": { profile: { name: "Foo" } } }).asObservable();
|
|
||||||
}
|
|
||||||
|
|
||||||
class MockMessagingService implements MessagingService {
|
|
||||||
send(subscriber: string, arg?: any) {
|
|
||||||
alert(subscriber);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class MockVaultTimeoutService {
|
|
||||||
availableVaultTimeoutActions$() {
|
|
||||||
return new BehaviorSubject([VaultTimeoutAction.Lock]).asObservable();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class MockPlatformUtilsService {
|
|
||||||
isSelfHost() {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: "product-switcher",
|
|
||||||
template: `<button bitIconButton="bwi-filter"></button>`,
|
|
||||||
})
|
|
||||||
class MockProductSwitcher {}
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: "dynamic-avatar",
|
|
||||||
template: `<bit-avatar [text]="name$ | async"></bit-avatar>`,
|
|
||||||
standalone: true,
|
|
||||||
imports: [CommonModule, AvatarModule],
|
|
||||||
})
|
|
||||||
class MockDynamicAvatar implements Partial<DynamicAvatarComponent> {
|
|
||||||
protected name$ = combineLatest([
|
|
||||||
this.stateService.accounts$,
|
|
||||||
this.stateService.activeAccount$,
|
|
||||||
]).pipe(
|
|
||||||
map(
|
|
||||||
([accounts, activeAccount]) => accounts[activeAccount as keyof typeof accounts].profile.name,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
@Input()
|
|
||||||
text: string;
|
|
||||||
|
|
||||||
constructor(private stateService: MockStateService) {}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: "Web/Header",
|
|
||||||
component: WebHeaderComponent,
|
|
||||||
decorators: [
|
|
||||||
componentWrapperDecorator(
|
|
||||||
(story) => `<div class="tw-min-h-screen tw-flex-1 tw-p-6 tw-text-main">${story}</div>`,
|
|
||||||
),
|
|
||||||
moduleMetadata({
|
|
||||||
imports: [
|
|
||||||
JslibModule,
|
|
||||||
AvatarModule,
|
|
||||||
BreadcrumbsModule,
|
|
||||||
ButtonModule,
|
|
||||||
IconButtonModule,
|
|
||||||
IconModule,
|
|
||||||
InputModule,
|
|
||||||
MenuModule,
|
|
||||||
TabsModule,
|
|
||||||
TypographyModule,
|
|
||||||
NavigationModule,
|
|
||||||
MockDynamicAvatar,
|
|
||||||
],
|
|
||||||
declarations: [WebHeaderComponent, MockProductSwitcher],
|
|
||||||
providers: [
|
|
||||||
{ provide: StateService, useClass: MockStateService },
|
|
||||||
{
|
|
||||||
provide: WebLayoutMigrationBannerService,
|
|
||||||
useValue: {
|
|
||||||
showBanner$: of(false),
|
|
||||||
} as Partial<WebLayoutMigrationBannerService>,
|
|
||||||
},
|
|
||||||
{ provide: PlatformUtilsService, useClass: MockPlatformUtilsService },
|
|
||||||
{ provide: VaultTimeoutSettingsService, useClass: MockVaultTimeoutService },
|
|
||||||
{
|
|
||||||
provide: MessagingService,
|
|
||||||
useFactory: () => {
|
|
||||||
return new MockMessagingService();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}),
|
|
||||||
applicationConfig({
|
|
||||||
providers: [
|
|
||||||
importProvidersFrom(RouterModule.forRoot([], { useHash: true })),
|
|
||||||
importProvidersFrom(PreloadedEnglishI18nModule),
|
|
||||||
],
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
} as Meta;
|
|
||||||
|
|
||||||
export const KitchenSink: Story = (args) => ({
|
|
||||||
props: args,
|
|
||||||
template: `
|
|
||||||
<app-header title="LongTitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" icon="bwi-bug">
|
|
||||||
<bit-breadcrumbs slot="breadcrumbs">
|
|
||||||
<bit-breadcrumb>Foo</bit-breadcrumb>
|
|
||||||
<bit-breadcrumb>Bar</bit-breadcrumb>
|
|
||||||
</bit-breadcrumbs>
|
|
||||||
<input
|
|
||||||
bitInput
|
|
||||||
placeholder="Ask Jeeves"
|
|
||||||
type="text"
|
|
||||||
/>
|
|
||||||
<button bitButton buttonType="primary">New</button>
|
|
||||||
<button bitButton slot="secondary">Click Me 🎉</button>
|
|
||||||
<bit-tab-nav-bar slot="tabs">
|
|
||||||
<bit-tab-link route="">Foo</bit-tab-link>
|
|
||||||
<bit-tab-link route="#bar">Bar</bit-tab-link>
|
|
||||||
</bit-tab-nav-bar>
|
|
||||||
</app-header>
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const Basic: Story = (args) => ({
|
|
||||||
props: args,
|
|
||||||
template: `
|
|
||||||
<app-header title="Foobar" icon="bwi-bug"></app-header>
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const WithLongTitle: Story = (args) => ({
|
|
||||||
props: args,
|
|
||||||
template: `
|
|
||||||
<app-header title="LongTitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" icon="bwi-bug"></app-header>
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const WithBreadcrumbs: Story = (args) => ({
|
|
||||||
props: args,
|
|
||||||
template: `
|
|
||||||
<app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
|
||||||
<bit-breadcrumbs slot="breadcrumbs">
|
|
||||||
<bit-breadcrumb>Foo</bit-breadcrumb>
|
|
||||||
<bit-breadcrumb>Bar</bit-breadcrumb>
|
|
||||||
</bit-breadcrumbs>
|
|
||||||
</app-header>
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const WithSearch: Story = (args) => ({
|
|
||||||
props: args,
|
|
||||||
template: `
|
|
||||||
<app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
|
||||||
<input
|
|
||||||
bitInput
|
|
||||||
placeholder="Ask Jeeves"
|
|
||||||
type="text"
|
|
||||||
/>
|
|
||||||
</app-header>
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const WithSecondaryContent: Story = (args) => ({
|
|
||||||
props: args,
|
|
||||||
template: `
|
|
||||||
<app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
|
||||||
<button bitButton slot="secondary">Click Me 🎉</button>
|
|
||||||
</app-header>
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const WithTabs: Story = (args) => ({
|
|
||||||
props: args,
|
|
||||||
template: `
|
|
||||||
<app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
|
||||||
<bit-tab-nav-bar slot="tabs">
|
|
||||||
<bit-tab-link route="">Foo</bit-tab-link>
|
|
||||||
<bit-tab-link route="#bar">Bar</bit-tab-link>
|
|
||||||
</bit-tab-nav-bar>
|
|
||||||
</app-header>
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const WithTitleSuffixComponent: Story = (args) => ({
|
|
||||||
props: args,
|
|
||||||
template: `
|
|
||||||
<app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
|
||||||
<ng-container slot="title-suffix"><i class="bwi bwi-spinner bwi-spin"></i></ng-container>
|
|
||||||
</app-header>
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue
Block a user