Add storybooks

apps/web/src/app/shared/components/integrations/integration-card/integration-card.stories.ts

@@ -0,0 +1,61 @@
+import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+
+import { SYSTEM_THEME_OBSERVABLE } from "@bitwarden/angular/services/injection-tokens";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
+import { I18nMockService } from "@bitwarden/components";
+
+import { SharedModule } from "../../../shared.module";
+
+import { IntegrationCardComponent } from "./integration-card.component";
+
+class MockThemeService implements Partial<ThemeStateService> {}
+
+export default {
+  title: "Web/Integration Card",
+  component: IntegrationCardComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [SharedModule],
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({});
+          },
+        },
+        {
+          provide: ThemeStateService,
+          useClass: MockThemeService,
+        },
+        {
+          provide: SYSTEM_THEME_OBSERVABLE,
+          useValue: null,
+        },
+      ],
+    }),
+  ],
+  args: {
+    integrations: [],
+  },
+} as Meta;
+
+type Story = StoryObj<IntegrationCardComponent>;
+
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+    <app-integration-card
+      [name]="name"
+      [image]="image"
+      [linkURL]="linkURL"
+    ></app-integration-card>
+      `,
+  }),
+  args: {
+    name: "test",
+    image: "",
+    linkURL: "",
+  },
+};

apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.stories.ts

@@ -0,0 +1,80 @@
+import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+import { Observable } from "rxjs";
+
+import {
+  SYSTEM_THEME_OBSERVABLE,
+  SafeInjectionToken,
+} from "@bitwarden/angular/services/injection-tokens";
+import { IntegrationType } from "@bitwarden/common/enums";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { Theme } from "@bitwarden/common/platform/enums";
+import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
+import { I18nMockService } from "@bitwarden/components";
+
+import { SharedModule } from "../../../shared.module";
+import { IntegrationCardComponent } from "../integration-card/integration-card.component";
+import { IntegrationGridComponent } from "../integration-grid/integration-grid.component";
+
+class MockThemeService implements Partial<ThemeStateService> {}
+
+export default {
+  title: "Web/Integration Grid",
+  component: IntegrationGridComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [IntegrationCardComponent, SharedModule],
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({
+              integrationCardAriaLabel: "Go to integration",
+              integrationCardTooltip: "Go to integration",
+            });
+          },
+        },
+        {
+          provide: ThemeStateService,
+          useClass: MockThemeService,
+        },
+        {
+          provide: SYSTEM_THEME_OBSERVABLE,
+          useValue: new SafeInjectionToken<Observable<Theme>>("SYSTEM_THEME_OBSERVABLE"),
+        },
+      ],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<IntegrationGridComponent>;
+
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+      <app-integration-grid [integrations]="integrations"></app-integration-grid>
+      `,
+  }),
+  args: {
+    integrations: [
+      {
+        name: "Card 1",
+        linkURL: "",
+        image: "",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "Card 2",
+        linkURL: "",
+        image: "",
+        type: IntegrationType.SDK,
+      },
+      {
+        name: "Card 3",
+        linkURL: "",
+        image: "",
+        type: IntegrationType.SCIM,
+      },
+    ],
+  },
+};