[PM-19654] add hideIcon option to extension anon layout (#14045)

apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html

@@ -21,6 +21,7 @@
     [hideLogo]="true"
     [maxWidth]="maxWidth"
     [hideFooter]="hideFooter"
+    [hideIcon]="hideIcon"
   >
     <router-outlet></router-outlet>
     <router-outlet slot="secondary" name="secondary"></router-outlet>

apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts

@@ -26,6 +26,7 @@ export interface ExtensionAnonLayoutWrapperData extends AnonLayoutWrapperData {
   showBackButton?: boolean;
   showLogo?: boolean;
   hideFooter?: boolean;
+  hideIcon?: boolean;
 }
 
 @Component({
@@ -48,6 +49,7 @@ export class ExtensionAnonLayoutWrapperComponent implements OnInit, OnDestroy {
   protected showAcctSwitcher: boolean;
   protected showBackButton: boolean;
   protected showLogo: boolean = true;
+  protected hideIcon: boolean = false;
 
   protected pageTitle: string;
   protected pageSubtitle: string;
@@ -129,6 +131,10 @@ export class ExtensionAnonLayoutWrapperComponent implements OnInit, OnDestroy {
     if (firstChildRouteData["showLogo"] !== undefined) {
       this.showLogo = Boolean(firstChildRouteData["showLogo"]);
     }
+
+    if (firstChildRouteData["hideIcon"] !== undefined) {
+      this.hideIcon = Boolean(firstChildRouteData["hideIcon"]);
+    }
   }
 
   private listenForServiceDataChanges() {
@@ -180,6 +186,10 @@ export class ExtensionAnonLayoutWrapperComponent implements OnInit, OnDestroy {
     if (data.showLogo !== undefined) {
       this.showLogo = data.showLogo;
     }
+
+    if (data.hideIcon !== undefined) {
+      this.hideIcon = data.hideIcon;
+    }
   }
 
   private handleStringOrTranslation(value: string | Translation): string {

apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.stories.ts

@@ -242,6 +242,7 @@ const initialData: ExtensionAnonLayoutWrapperData = {
   showAcctSwitcher: true,
   showBackButton: true,
   showLogo: true,
+  hideIcon: false,
 };
 
 const changedData: ExtensionAnonLayoutWrapperData = {
@@ -255,6 +256,7 @@ const changedData: ExtensionAnonLayoutWrapperData = {
   showAcctSwitcher: false,
   showBackButton: false,
   showLogo: false,
+  hideIcon: false,
 };
 
 @Component({

libs/auth/src/angular/anon-layout/anon-layout.component.html

@@ -17,7 +17,7 @@
     class="tw-text-center tw-mb-4 sm:tw-mb-6"
     [ngClass]="{ 'tw-max-w-md tw-mx-auto': titleAreaMaxWidth === 'md' }"
   >
-    <div class="tw-mx-auto tw-max-w-24 sm:tw-max-w-28 md:tw-max-w-32">
+    <div *ngIf="!hideIcon" class="tw-mx-auto tw-max-w-24 sm:tw-max-w-28 md:tw-max-w-32">
       <bit-icon [icon]="icon"></bit-icon>
     </div>
 

libs/auth/src/angular/anon-layout/anon-layout.component.ts

@@ -39,6 +39,7 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
   @Input() showReadonlyHostname: boolean;
   @Input() hideLogo: boolean = false;
   @Input() hideFooter: boolean = false;
+  @Input() hideIcon: boolean = false;
 
   /**
    * Max width of the title area content

libs/auth/src/angular/anon-layout/anon-layout.stories.ts

@@ -163,6 +163,22 @@ export const WithCustomIcon: Story = {
   }),
 };
 
+export const HideIcon: Story = {
+  render: (args) => ({
+    props: args,
+    template:
+      // Projected content (the <div>) and styling is just a sample and can be replaced with any content/styling.
+      `
+      <auth-anon-layout [title]="title" [subtitle]="subtitle" [showReadonlyHostname]="showReadonlyHostname" [hideIcon]="true" >
+        <div>
+          <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
+          <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
+        </div>
+      </auth-anon-layout>
+    `,
+  }),
+};
+
 export const HideLogo: Story = {
   render: (args) => ({
     props: args,