[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>

bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.component.html

@@ -1,10 +1,4 @@
-<div class="tw-flex tw-w-full">
-  <nav
-    class="tw-fixed tw-max-h-screen tw-min-h-screen tw-w-60 tw-overflow-auto tw-bg-background-alt3"
-  >
-    <router-outlet name="sidebar"></router-outlet>
-  </nav>
-  <main class="tw-ml-60 tw-min-h-screen tw-min-w-0 tw-flex-1 tw-p-6">
-    <router-outlet></router-outlet>
-  </main>
-</div>
+<bit-layout>
+  <router-outlet slot="sidebar" name="sidebar"></router-outlet>
+  <router-outlet></router-outlet>
+</bit-layout>

bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from "@angular/core";
 
-import { NavigationModule } from "@bitwarden/components";
+import { LayoutComponent as BitLayoutComponent, NavigationModule } from "@bitwarden/components";
 import { SharedModule } from "@bitwarden/web-vault/app/shared/shared.module";
 
 import { LayoutComponent } from "./layout.component";
@@ -8,7 +8,7 @@ import { NavigationComponent } from "./navigation.component";
 import { OrgSwitcherComponent } from "./org-switcher.component";
 
 @NgModule({
-  imports: [SharedModule, NavigationModule],
+  imports: [SharedModule, NavigationModule, BitLayoutComponent],
   declarations: [LayoutComponent, NavigationComponent, OrgSwitcherComponent],
 })
 export class LayoutModule {}

bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.stories.ts

@@ -1,81 +0,0 @@
-import { Component, importProvidersFrom } from "@angular/core";
-import { RouterModule } from "@angular/router";
-import { Meta, Story, applicationConfig, moduleMetadata } from "@storybook/angular";
-import { BehaviorSubject } from "rxjs";
-
-import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
-import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
-import { IconModule } from "@bitwarden/components";
-import { PreloadedEnglishI18nModule } from "@bitwarden/web-vault/app/core/tests";
-
-import { LayoutComponent } from "./layout.component";
-import { LayoutModule } from "./layout.module";
-import { NavigationComponent } from "./navigation.component";
-
-class MockOrganizationService implements Partial<OrganizationService> {
-  private static _orgs = new BehaviorSubject<Organization[]>([]);
-  organizations$ = MockOrganizationService._orgs; // eslint-disable-line rxjs/no-exposed-subjects
-}
-
-@Component({
-  selector: "story-content",
-  template: ` <p class="tw-text-main">Content</p> `,
-})
-class StoryContentComponent {}
-
-export default {
-  title: "Web/Layout",
-  component: LayoutComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [RouterModule, LayoutModule, IconModule],
-      declarations: [StoryContentComponent],
-      providers: [{ provide: OrganizationService, useClass: MockOrganizationService }],
-    }),
-    applicationConfig({
-      providers: [
-        importProvidersFrom(
-          RouterModule.forRoot(
-            [
-              {
-                path: "",
-                component: LayoutComponent,
-                children: [
-                  {
-                    path: "",
-                    redirectTo: "secrets",
-                    pathMatch: "full",
-                  },
-                  {
-                    path: "secrets",
-                    component: StoryContentComponent,
-                    data: {
-                      title: "secrets",
-                      searchTitle: "searchSecrets",
-                    },
-                  },
-                  {
-                    outlet: "sidebar",
-                    path: "",
-                    component: NavigationComponent,
-                  },
-                ],
-              },
-            ],
-            { useHash: true }
-          )
-        ),
-        importProvidersFrom(PreloadedEnglishI18nModule),
-      ],
-    }),
-  ],
-} as Meta;
-
-const Template: Story = (args) => ({
-  props: args,
-  template: `
-    <router-outlet></router-outlet>
-  `,
-});
-
-export const Default = Template.bind({});

bitwarden_license/bit-web/src/app/secrets-manager/layout/navigation.component.html

@@ -1,22 +1,24 @@
-<a routerLink="." class="tw-m-5 tw-mt-7 tw-block">
-  <bit-icon [icon]="logo"></bit-icon>
-</a>
+<nav>
+  <a routerLink="." class="tw-m-5 tw-mt-7 tw-block">
+    <bit-icon [icon]="logo"></bit-icon>
+  </a>
 
-<org-switcher [filter]="orgFilter" [hideNewButton]="true"></org-switcher>
-<bit-nav-item icon="bwi-collection" [text]="'projects' | i18n" route="projects"></bit-nav-item>
-<bit-nav-item icon="bwi-key" [text]="'secrets' | i18n" route="secrets"></bit-nav-item>
-<bit-nav-item
-  icon="bwi-wrench"
-  [text]="'serviceAccounts' | i18n"
-  route="service-accounts"
-></bit-nav-item>
-<bit-nav-item
-  icon="bwi-trash"
-  [text]="'trash' | i18n"
-  route="trash"
-  *ngIf="isAdmin$ | async"
-></bit-nav-item>
-<bit-nav-group icon="bwi-cog" [text]="'settings' | i18n" *ngIf="isAdmin$ | async">
-  <bit-nav-item [text]="'importData' | i18n" route="settings/import"></bit-nav-item>
-  <bit-nav-item [text]="'exportData' | i18n" route="settings/export"></bit-nav-item>
-</bit-nav-group>
+  <org-switcher [filter]="orgFilter" [hideNewButton]="true"></org-switcher>
+  <bit-nav-item icon="bwi-collection" [text]="'projects' | i18n" route="projects"></bit-nav-item>
+  <bit-nav-item icon="bwi-key" [text]="'secrets' | i18n" route="secrets"></bit-nav-item>
+  <bit-nav-item
+    icon="bwi-wrench"
+    [text]="'serviceAccounts' | i18n"
+    route="service-accounts"
+  ></bit-nav-item>
+  <bit-nav-item
+    icon="bwi-trash"
+    [text]="'trash' | i18n"
+    route="trash"
+    *ngIf="isAdmin$ | async"
+  ></bit-nav-item>
+  <bit-nav-group icon="bwi-cog" [text]="'settings' | i18n" *ngIf="isAdmin$ | async">
+    <bit-nav-item [text]="'importData' | i18n" route="settings/import"></bit-nav-item>
+    <bit-nav-item [text]="'exportData' | i18n" route="settings/export"></bit-nav-item>
+  </bit-nav-group>
+</nav>