[CL-107] add bit-layout component (#6016)

* add bit-layout component

* update bit-layout semantics

* use bit-layout in sm-layout

* remove redundant sm-layout story

* move nav el inside of navigation component

* Apply suggestions from code review

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* remove reference to layout_frontend in bit-layout

* update stories

* Update libs/components/src/layout/layout.stories.ts

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* run prettier

---------

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

libs/components/src/index.ts

@@ -13,6 +13,7 @@ export * from "./form-field";
 export * from "./icon-button";
 export * from "./icon";
 export * from "./input";
+export * from "./layout";
 export * from "./link";
 export * from "./menu";
 export * from "./multi-select";

libs/components/src/layout/index.ts

@@ -0,0 +1 @@
+export * from "./layout.component";

libs/components/src/layout/layout.component.html

@@ -0,0 +1,10 @@
+<div class="tw-flex tw-w-full">
+  <aside
+    class="tw-fixed tw-inset-y-0 tw-left-0 tw-h-screen tw-w-60 tw-overflow-auto tw-bg-background-alt3"
+  >
+    <ng-content select="[slot=sidebar]"></ng-content>
+  </aside>
+  <main class="tw-ml-60 tw-min-h-screen tw-min-w-0 tw-flex-1 tw-bg-background tw-p-6">
+    <ng-content></ng-content>
+  </main>
+</div>

libs/components/src/layout/layout.component.ts

@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "bit-layout",
+  templateUrl: "layout.component.html",
+  standalone: true,
+  imports: [],
+})
+export class LayoutComponent {}

libs/components/src/layout/layout.stories.ts

@@ -0,0 +1,64 @@
+import { RouterTestingModule } from "@angular/router/testing";
+import { Meta, StoryObj, componentWrapperDecorator, moduleMetadata } from "@storybook/angular";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+
+import { CalloutModule } from "../callout";
+import { NavigationModule } from "../navigation";
+import { I18nMockService } from "../utils/i18n-mock.service";
+
+import { LayoutComponent } from "./layout.component";
+
+export default {
+  title: "Component Library/Layout",
+  component: LayoutComponent,
+  decorators: [
+    componentWrapperDecorator(
+      /**
+       * Applying a CSS transform makes a `position: fixed` element act like it is `position: relative`
+       * https://github.com/storybookjs/storybook/issues/8011#issue-490251969
+       */
+      (story) => /* HTML */ `<div class="tw-scale-100 tw-border-2 tw-border-solid tw-border-[red]">
+        ${story}
+      </div>`
+    ),
+    moduleMetadata({
+      imports: [NavigationModule, RouterTestingModule, CalloutModule],
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({});
+          },
+        },
+      ],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<LayoutComponent>;
+
+export const Empty: Story = {
+  render: (args) => ({
+    props: args,
+    template: /* HTML */ `<bit-layout></bit-layout>`,
+  }),
+};
+
+export const WithContent: Story = {
+  render: (args) => ({
+    props: args,
+    template: /* HTML */ `
+      <bit-layout>
+        <nav slot="sidebar">
+          <bit-nav-item text="Item A" icon="bwi-collection"></bit-nav-item>
+          <bit-nav-item text="Item B" icon="bwi-collection"></bit-nav-item>
+          <bit-nav-divider></bit-nav-divider>
+          <bit-nav-item text="Item C" icon="bwi-collection"></bit-nav-item>
+          <bit-nav-item text="Item D" icon="bwi-collection"></bit-nav-item>
+        </nav>
+        <bit-callout title="Foobar"> Hello world! </bit-callout>
+      </bit-layout>
+    `,
+  }),
+};