[CL-927] anon layout header actions slot (#17796)

* add a slot for consumers to show user actions in anon layout header

* remove commented code

* ensure logo stays top aligned

* switch to dashed naming

* fix ngif statements

* remove empty selector

* remove unnecessary containers

* use smaller logo on smaller screens

* remove commented code from extension layout

* remove dupe slot

* only take extension screenshots on small screens

* take screenshot at 380

* take large and small screenshot

* update story to use new control flow

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

@@ -8,6 +8,7 @@ import { EnvironmentService } from "@bitwarden/common/platform/abstractions/envi
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 
+import { AvatarModule } from "../avatar";
 import { ButtonModule } from "../button";
 import { I18nMockService } from "../utils/i18n-mock.service";
 
@@ -23,6 +24,7 @@ type StoryArgs = AnonLayoutComponent & {
   showSecondary: boolean;
   useDefaultIcon: boolean;
   icon: Icon;
+  includeHeaderActions: boolean;
 };
 
 export default {
@@ -30,7 +32,7 @@ export default {
   component: AnonLayoutComponent,
   decorators: [
     moduleMetadata({
-      imports: [ButtonModule, RouterModule],
+      imports: [ButtonModule, RouterModule, AvatarModule],
       providers: [
         {
           provide: PlatformUtilsService,
@@ -76,6 +78,14 @@ export default {
           [hideFooter]="hideFooter"
           [hideBackgroundIllustration]="hideBackgroundIllustration"
         >
+          @if (includeHeaderActions) {
+            <div slot="header-actions" class="tw-flex tw-items-center tw-gap-2">
+              <bit-avatar
+                size="small"
+                text="Bob Loblaw"
+              ></bit-avatar>
+            </div>
+          }
           <ng-container [ngSwitch]="contentLength">
             <div *ngSwitchCase="'thin'" class="tw-text-center">  <div class="tw-font-medium">Thin Content</div></div>
             <div *ngSwitchCase="'long'">
@@ -116,7 +126,7 @@ export default {
     hideLogo: { control: "boolean" },
     hideFooter: { control: "boolean" },
     hideBackgroundIllustration: { control: "boolean" },
-
+    includeHeaderActions: { control: "boolean" },
     contentLength: {
       control: "radio",
       options: ["normal", "long", "thin"],
@@ -138,6 +148,7 @@ export default {
     hideBackgroundIllustration: false,
     contentLength: "normal",
     showSecondary: false,
+    includeHeaderActions: false,
   },
 } satisfies Meta<StoryArgs>;
 
@@ -188,6 +199,12 @@ export const SecondaryContent: Story = {
   },
 };
 
+export const WithHeaderActions: Story = {
+  args: {
+    includeHeaderActions: true,
+  },
+};
+
 export const NoTitle: Story = { args: { title: undefined } };
 
 export const NoSubtitle: Story = { args: { subtitle: undefined } };