From 03c6037a9c9b40f8584f34071bbf8eb7dec20ed1 Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Thu, 18 Jan 2024 11:45:48 +0100
Subject: [PATCH] [CL-167] Replace title slot with title-suffix for web header
 (#7571)

---
 apps/web/src/app/layouts/header/web-header.component.html | 5 +----
 apps/web/src/app/layouts/header/web-header.stories.ts     | 4 ++--
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/app/layouts/header/web-header.component.html b/apps/web/src/app/layouts/header/web-header.component.html
index b736a46d5a9..d2eb43a6969 100644
--- a/apps/web/src/app/layouts/header/web-header.component.html
+++ b/apps/web/src/app/layouts/header/web-header.component.html
@@ -9,11 +9,7 @@
   <div class="tw-flex">
     <div class="tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-gap-2">
       <ng-content select="[slot=breadcrumbs]"></ng-content>
-      <div #titleContainer [ngClass]="{ 'tw-hidden': titleContainer.childElementCount === 0 }">
-        <ng-content select="[slot=title]"></ng-content>
-      </div>
       <h1
-        *ngIf="titleContainer.childElementCount === 0"
         bitTypography="h1"
         noMargin
         class="tw-m-0 tw-mr-2 tw-truncate tw-leading-10"
@@ -21,6 +17,7 @@
       >
         <i *ngIf="icon" class="bwi {{ icon }}" aria-hidden="true"></i>
         {{ title || (routeData.titleId | i18n) }}
+        <ng-content select="[slot=title-suffix]"></ng-content>
       </h1>
     </div>
     <div class="tw-ml-auto tw-flex tw-flex-col tw-gap-4">
diff --git a/apps/web/src/app/layouts/header/web-header.stories.ts b/apps/web/src/app/layouts/header/web-header.stories.ts
index d3efe22cf95..3351a81bff4 100644
--- a/apps/web/src/app/layouts/header/web-header.stories.ts
+++ b/apps/web/src/app/layouts/header/web-header.stories.ts
@@ -209,11 +209,11 @@ export const WithTabs: Story = (args) => ({
   `,
 });
 
-export const WithCustomTitleComponent: Story = (args) => ({
+export const WithTitleSuffixComponent: Story = (args) => ({
   props: args,
   template: `
     <app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
-      <h1 slot="title" class="tw-text-3xl tw-font-semibold" style="font-family: 'Comic Sans MS'">Bitwarden</h1>
+      <ng-container slot="title-suffix"><i class="bwi bwi-spinner bwi-spin"></i></ng-container>
     </app-header>
   `,
 });