diff --git a/apps/web/src/app/layouts/header/web-header.stories.ts b/apps/web/src/app/layouts/header/web-header.stories.ts
deleted file mode 100644
index 88c98f01e6c..00000000000
--- a/apps/web/src/app/layouts/header/web-header.stories.ts
+++ /dev/null
@@ -1,268 +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,
- StoryObj,
-} from "@storybook/angular";
-import { BehaviorSubject, combineLatest, map, of } from "rxjs";
-
-import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
-import {
- VaultTimeoutAction,
- VaultTimeoutSettingsService,
-} from "@bitwarden/common/key-management/vault-timeout";
-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();
-}
-
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-@Component({
- selector: "product-switcher",
- template: ``,
- standalone: false,
-})
-class MockProductSwitcherComponent {}
-
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-@Component({
- selector: "dynamic-avatar",
- template: ``,
- imports: [CommonModule, AvatarModule],
-})
-class MockDynamicAvatarComponent implements Partial {
- protected name$ = combineLatest([
- this.stateService.accounts$,
- this.stateService.activeAccount$,
- ]).pipe(
- map(
- ([accounts, activeAccount]) => accounts[activeAccount as keyof typeof accounts].profile.name,
- ),
- );
-
- // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
- // eslint-disable-next-line @angular-eslint/prefer-signals
- @Input()
- text?: string;
-
- constructor(private stateService: MockStateService) {}
-}
-
-export default {
- title: "Web/Header",
- component: WebHeaderComponent,
- decorators: [
- componentWrapperDecorator(
- (story) => `${story}
`,
- ),
- moduleMetadata({
- imports: [
- JslibModule,
- AvatarModule,
- BreadcrumbsModule,
- ButtonModule,
- IconButtonModule,
- IconModule,
- InputModule,
- MenuModule,
- TabsModule,
- TypographyModule,
- NavigationModule,
- MockDynamicAvatarComponent,
- ],
- declarations: [WebHeaderComponent, MockProductSwitcherComponent],
- providers: [
- { provide: StateService, useClass: MockStateService },
- {
- provide: AccountService,
- useValue: {
- activeAccount$: of({
- name: "Foobar Warden",
- }),
- } as Partial,
- },
- {
- provide: WebLayoutMigrationBannerService,
- useValue: {
- showBanner$: of(false),
- } as Partial,
- },
- {
- provide: PlatformUtilsService,
- useValue: {
- isSelfHost() {
- return false;
- },
- } as Partial,
- },
- {
- provide: VaultTimeoutSettingsService,
- useValue: {
- availableVaultTimeoutActions$() {
- return new BehaviorSubject([VaultTimeoutAction.Lock]).asObservable();
- },
- } as Partial,
- },
- {
- provide: MessagingService,
- useValue: {
- send: (...args: any[]) => {
- // eslint-disable-next-line no-console
- console.log("MessagingService.send", args);
- },
- } as Partial,
- },
- ],
- }),
- applicationConfig({
- providers: [
- importProvidersFrom(RouterModule.forRoot([], { useHash: true })),
- importProvidersFrom(PreloadedEnglishI18nModule),
- ],
- }),
- ],
-} as Meta;
-
-type Story = StoryObj;
-
-export const KitchenSink: Story = {
- render: (args) => ({
- props: args,
- template: `
-
-
- Foo
- Bar
-
-
-
-
-
- Foo
- Bar
-
-
- `,
- }),
-};
-
-export const Basic: Story = {
- render: (args: any) => ({
- props: args,
- template: `
-
- `,
- }),
-};
-
-export const WithLongTitle: Story = {
- render: (arg: any) => ({
- props: arg,
- template: `
-
-
-
- `,
- }),
-};
-
-export const WithBreadcrumbs: Story = {
- render: (args: any) => ({
- props: args,
- template: `
-
-
- Foo
- Bar
-
-
- `,
- }),
-};
-
-export const WithSearch: Story = {
- render: (args: any) => ({
- props: args,
- template: `
-
-
-
- `,
- }),
-};
-
-export const WithSecondaryContent: Story = {
- render: (args) => ({
- props: args,
- template: `
-
-
-
- `,
- }),
-};
-
-export const WithTabs: Story = {
- render: (args) => ({
- props: args,
- template: `
-
-
- Foo
- Bar
-
-
- `,
- }),
-};
-
-export const WithTitleSuffixComponent: Story = {
- render: (args) => ({
- props: args,
- template: `
-
-
-
- `,
- }),
-};