diff --git a/apps/web/src/app/vault/components/vault-items/vault-items.stories.ts b/apps/web/src/app/vault/components/vault-items/vault-items.stories.ts index 55807ed855f..cb86bf15c52 100644 --- a/apps/web/src/app/vault/components/vault-items/vault-items.stories.ts +++ b/apps/web/src/app/vault/components/vault-items/vault-items.stories.ts @@ -2,7 +2,13 @@ // @ts-strict-ignore import { importProvidersFrom } from "@angular/core"; import { RouterModule } from "@angular/router"; -import { applicationConfig, Meta, moduleMetadata, StoryObj } from "@storybook/angular"; +import { + applicationConfig, + componentWrapperDecorator, + Meta, + moduleMetadata, + StoryObj, +} from "@storybook/angular"; import { BehaviorSubject, of } from "rxjs"; import { @@ -29,6 +35,7 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view"; import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view"; import { LoginView } from "@bitwarden/common/vault/models/view/login.view"; import { CipherAuthorizationService } from "@bitwarden/common/vault/services/cipher-authorization.service"; +import { LayoutComponent, positionFixedWrapperDecorator } from "@bitwarden/components"; import { GroupView } from "../../../admin-console/organizations/core"; import { PreloadedEnglishI18nModule } from "../../../core/tests"; @@ -48,8 +55,10 @@ export default { title: "Web/Vault/Items", component: VaultItemsComponent, decorators: [ + positionFixedWrapperDecorator(), + componentWrapperDecorator((story) => `${story}`), moduleMetadata({ - imports: [VaultItemsModule, RouterModule], + imports: [VaultItemsModule, RouterModule, LayoutComponent], providers: [ { provide: EnvironmentService, diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts index 319b60e6435..d120d980354 100644 --- a/libs/components/src/index.ts +++ b/libs/components/src/index.ts @@ -35,6 +35,7 @@ export * from "./search"; export * from "./section"; export * from "./select"; export * from "./shared/compact-mode.service"; +export * from "./stories/storybook-decorators"; export * from "./table"; export * from "./tabs"; export * from "./toast"; diff --git a/libs/components/src/layout/layout.component.html b/libs/components/src/layout/layout.component.html index 13462ec15ed..19280c99756 100644 --- a/libs/components/src/layout/layout.component.html +++ b/libs/components/src/layout/layout.component.html @@ -1,3 +1,4 @@ +@let mainContentId = "main-content";
>("main"); protected focusMainContent() { - this.getMainContent().focus(); + this.mainContent().nativeElement.focus(); } } diff --git a/libs/components/src/layout/scroll-layout.directive.ts b/libs/components/src/layout/scroll-layout.directive.ts index 4bdf0b4eae7..143db4d80ea 100644 --- a/libs/components/src/layout/scroll-layout.directive.ts +++ b/libs/components/src/layout/scroll-layout.directive.ts @@ -10,26 +10,25 @@ import { LayoutComponent } from "./layout.component"; providers: [{ provide: VIRTUAL_SCROLLABLE, useExisting: ScrollLayoutDirective }], }) export class ScrollLayoutDirective extends CdkVirtualScrollable { - private mainEl: ElementRef; - constructor( - layout: LayoutComponent, + private layout: LayoutComponent, scrollDispatcher: ScrollDispatcher, ngZone: NgZone, @Optional() dir: Directionality, ) { - const mainEl = new ElementRef(layout.getMainContent()); - super(mainEl, scrollDispatcher, ngZone, dir); - this.mainEl = mainEl; + super(layout.mainContent(), scrollDispatcher, ngZone, dir); } override getElementRef(): ElementRef { - return this.mainEl; + return this.layout.mainContent(); } override measureBoundingClientRectWithScrollOffset( from: "left" | "top" | "right" | "bottom", ): number { - return this.mainEl.nativeElement.getBoundingClientRect()[from] - this.measureScrollOffset(from); + return ( + this.layout.mainContent().nativeElement.getBoundingClientRect()[from] - + this.measureScrollOffset(from) + ); } } diff --git a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts index bee9c910963..ecbf7892f38 100644 --- a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts +++ b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts @@ -12,7 +12,7 @@ import { KitchenSinkToggleList } from "./kitchen-sink-toggle-list.component"; standalone: true, imports: [KitchenSinkSharedModule], template: ` - +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt diff --git a/libs/components/src/table/table.stories.ts b/libs/components/src/table/table.stories.ts index e8ab24ee8b7..d696e6077dd 100644 --- a/libs/components/src/table/table.stories.ts +++ b/libs/components/src/table/table.stories.ts @@ -1,6 +1,13 @@ +import { RouterTestingModule } from "@angular/router/testing"; import { Meta, moduleMetadata, StoryObj } from "@storybook/angular"; +import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; + import { countries } from "../form/countries"; +import { LayoutComponent } from "../layout"; +import { mockLayoutI18n } from "../layout/mocks"; +import { positionFixedWrapperDecorator } from "../stories/storybook-decorators"; +import { I18nMockService } from "../utils"; import { TableDataSource } from "./table-data-source"; import { TableModule } from "./table.module"; @@ -8,8 +15,17 @@ import { TableModule } from "./table.module"; export default { title: "Component Library/Table", decorators: [ + positionFixedWrapperDecorator(), moduleMetadata({ - imports: [TableModule], + imports: [TableModule, LayoutComponent, RouterTestingModule], + providers: [ + { + provide: I18nService, + useFactory: () => { + return new I18nMockService(mockLayoutI18n); + }, + }, + ], }), ], argTypes: { @@ -116,18 +132,20 @@ export const Scrollable: Story = { trackBy: (index: number, item: any) => item.id, }, template: ` - - - Id - Name - Other - - - {{ row.id }} - {{ row.name }} - {{ row.other }} - - + + + + Id + Name + Other + + + {{ row.id }} + {{ row.name }} + {{ row.other }} + + + `, }), }; @@ -144,17 +162,19 @@ export const Filterable: Story = { sortFn: (a: any, b: any) => a.id - b.id, }, template: ` - - - - Name - Value - - - {{ row.name }} - {{ row.value }} - - + + + + + Name + Value + + + {{ row.name }} + {{ row.value }} + + + `, }), };