[PM-25871] updated phishing warning UI (#16748)

* refactor phishing-warning.component

* add hideBackground input to anon-layout component

* add icon tile component to CL

* add storybook story; fix binding bug in template

* export icon-tile from CL

* update design of phishing warning page

* revert icon button to use string type; add comment to icon scss

* update callout to allow no icon/title on all variants

* update phishing warning styles

* fix defects

* crowdin messages cannot be changed, they must be replaced

* add global css override

* add phishing help link

* update icon used in tile

* tweak styles

libs/components/src/anon-layout/anon-layout-wrapper.component.html

@@ -6,6 +6,7 @@
   [maxWidth]="maxWidth"
   [hideCardWrapper]="hideCardWrapper"
   [hideIcon]="hideIcon"
+  [hideBackgroundIllustration]="hideBackgroundIllustration"
 >
   <router-outlet></router-outlet>
   <router-outlet slot="secondary" name="secondary"></router-outlet>

libs/components/src/anon-layout/anon-layout-wrapper.component.ts

@@ -44,6 +44,10 @@ export interface AnonLayoutWrapperData {
    * Hide the card that wraps the default content. Defaults to false.
    */
   hideCardWrapper?: boolean;
+  /**
+   * Hides the background illustration. Defaults to false.
+   */
+  hideBackgroundIllustration?: boolean;
 }
 
 @Component({
@@ -60,6 +64,7 @@ export class AnonLayoutWrapperComponent implements OnInit {
   protected maxWidth?: AnonLayoutMaxWidth | null;
   protected hideCardWrapper?: boolean | null;
   protected hideIcon?: boolean | null;
+  protected hideBackgroundIllustration?: boolean | null;
 
   constructor(
     private router: Router,
@@ -117,6 +122,7 @@ export class AnonLayoutWrapperComponent implements OnInit {
     this.showReadonlyHostname = Boolean(firstChildRouteData["showReadonlyHostname"]);
     this.maxWidth = firstChildRouteData["maxWidth"];
     this.hideCardWrapper = Boolean(firstChildRouteData["hideCardWrapper"]);
+    this.hideBackgroundIllustration = Boolean(firstChildRouteData["hideBackgroundIllustration"]);
   }
 
   private listenForServiceDataChanges() {
@@ -157,6 +163,10 @@ export class AnonLayoutWrapperComponent implements OnInit {
       this.hideCardWrapper = data.hideCardWrapper;
     }
 
+    if (data.hideBackgroundIllustration !== undefined) {
+      this.hideBackgroundIllustration = data.hideBackgroundIllustration;
+    }
+
     if (data.hideIcon !== undefined) {
       this.hideIcon = data.hideIcon;
     }
@@ -188,5 +198,6 @@ export class AnonLayoutWrapperComponent implements OnInit {
     this.maxWidth = null;
     this.hideCardWrapper = null;
     this.hideIcon = null;
+    this.hideBackgroundIllustration = null;
   }
 }

libs/components/src/anon-layout/anon-layout.component.html

@@ -68,16 +68,18 @@
     </ng-container>
   </footer>
 
-  <div
-    class="tw-hidden md:tw-block [&_svg]:tw-absolute tw-z-[1] tw-opacity-[.11] [&_svg]:tw-bottom-0 [&_svg]:tw-start-0 [&_svg]:tw-w-[35%] [&_svg]:tw-max-w-[450px]"
-  >
-    <bit-icon [icon]="leftIllustration"></bit-icon>
-  </div>
-  <div
-    class="tw-hidden md:tw-block [&_svg]:tw-absolute tw-z-[1] tw-opacity-[.11] [&_svg]:tw-bottom-0 [&_svg]:tw-end-0 [&_svg]:tw-w-[35%] [&_svg]:tw-max-w-[450px]"
-  >
-    <bit-icon [icon]="rightIllustration"></bit-icon>
-  </div>
+  @if (!hideBackgroundIllustration()) {
+    <div
+      class="tw-hidden md:tw-block [&_svg]:tw-absolute tw-z-[1] tw-opacity-[.11] [&_svg]:tw-bottom-0 [&_svg]:tw-start-0 [&_svg]:tw-w-[35%] [&_svg]:tw-max-w-[450px]"
+    >
+      <bit-icon [icon]="leftIllustration"></bit-icon>
+    </div>
+    <div
+      class="tw-hidden md:tw-block [&_svg]:tw-absolute tw-z-[1] tw-opacity-[.11] [&_svg]:tw-bottom-0 [&_svg]:tw-end-0 [&_svg]:tw-w-[35%] [&_svg]:tw-max-w-[450px]"
+    >
+      <bit-icon [icon]="rightIllustration"></bit-icon>
+    </div>
+  }
 </main>
 
 <ng-template #defaultContent>

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

@@ -51,6 +51,7 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
   readonly hideFooter = input<boolean>(false);
   readonly hideIcon = input<boolean>(false);
   readonly hideCardWrapper = input<boolean>(false);
+  readonly hideBackgroundIllustration = input<boolean>(false);
 
   /**
    * Max width of the anon layout title, subtitle, and content areas.

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

@@ -79,6 +79,7 @@ export default {
           [hideIcon]="hideIcon"
           [hideLogo]="hideLogo"
           [hideFooter]="hideFooter"
+          [hideBackgroundIllustration]="hideBackgroundIllustration"
         >
           <ng-container [ngSwitch]="contentLength">
             <div *ngSwitchCase="'thin'" class="tw-text-center">  <div class="tw-font-bold">Thin Content</div></div>
@@ -125,6 +126,7 @@ export default {
     hideIcon: { control: "boolean" },
     hideLogo: { control: "boolean" },
     hideFooter: { control: "boolean" },
+    hideBackgroundIllustration: { control: "boolean" },
 
     contentLength: {
       control: "radio",
@@ -145,6 +147,7 @@ export default {
     hideIcon: false,
     hideLogo: false,
     hideFooter: false,
+    hideBackgroundIllustration: false,
     contentLength: "normal",
     showSecondary: false,
   },
@@ -221,6 +224,10 @@ export const NoFooter: Story = {
   args: { hideFooter: true },
 };
 
+export const NoBackgroundIllustration: Story = {
+  args: { hideBackgroundIllustration: true },
+};
+
 export const ReadonlyHostname: Story = {
   args: { showReadonlyHostname: true },
 };
@@ -234,5 +241,6 @@ export const MinimalState: Story = {
     hideIcon: true,
     hideLogo: true,
     hideFooter: true,
+    hideBackgroundIllustration: true,
   },
 };