[PM-7343] AnonLayoutComponent Implementation Groundwork (#8585)

* test implementation

* move files

* adjust import and sample router comments

* add storybook docs to anon-layout

* rename to AnonLayoutWrapperComponent

* update storybook docs

* remove references to CL and replace with 'Auth-owned'

* move AnonLayoutWrapperComponent to libs

* add pageTitle input

* add subTitle input

* translate page title/subtitle, and refactor how icon is added

* update tailwind.config and component styles

* adjust spacing between primary and secondary content

* move switch statement to wrapper

* move icon to router file

* update storybook documentation

* fix storybook text color in normal code blocks

* remove sample route

* move wrapper component back to web

* remove sample route

* update storybook docs

apps/web/src/app/auth/anon-layout-wrapper.component.html

@@ -0,0 +1,4 @@
+<auth-anon-layout [title]="pageTitle" [subtitle]="pageSubtitle" [icon]="pageIcon">
+  <router-outlet></router-outlet>
+  <router-outlet slot="secondary" name="secondary"></router-outlet>
+</auth-anon-layout>

apps/web/src/app/auth/anon-layout-wrapper.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import { ActivatedRoute, RouterModule } from "@angular/router";
+
+import { AnonLayoutComponent } from "@bitwarden/auth/angular";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { Icon } from "@bitwarden/components";
+
+@Component({
+  standalone: true,
+  templateUrl: "anon-layout-wrapper.component.html",
+  imports: [AnonLayoutComponent, RouterModule],
+})
+export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
+  protected pageTitle: string;
+  protected pageSubtitle: string;
+  protected pageIcon: Icon;
+
+  constructor(
+    private route: ActivatedRoute,
+    private i18nService: I18nService,
+  ) {
+    this.pageTitle = this.i18nService.t(this.route.snapshot.firstChild.data["pageTitle"]);
+    this.pageSubtitle = this.i18nService.t(this.route.snapshot.firstChild.data["pageSubtitle"]);
+    this.pageIcon = this.route.snapshot.firstChild.data["pageIcon"]; // don't translate
+  }
+
+  ngOnInit() {
+    document.body.classList.add("layout_frontend");
+  }
+
+  ngOnDestroy() {
+    document.body.classList.remove("layout_frontend");
+  }
+}

apps/web/tailwind.config.js

@@ -4,6 +4,7 @@ const config = require("../../libs/components/tailwind.config.base");
 config.content = [
   "./src/**/*.{html,ts}",
   "../../libs/components/src/**/*.{html,ts}",
+  "../../libs/auth/src/**/*.{html,ts}",
   "../../bitwarden_license/bit-web/src/**/*.{html,ts}",
 ];