feat(anon-layout): [Auth/PM-17737] AnonLayout - Consolidate and extend max width control (#15362)

* PM-17737 - feat(anon-layout-width) - consolidate width setting to control title, subtitle, and content together for a unified UX. Removes all titleAreaMaxWidth usages and the titleAreaMaxWidth property entirely.

* PM-17737 - AnonLayout - consolidate stories into playground (w/ the exception of default icon story b/c I can't figure how to omit the icon conditionally).

* PM-17737 - AnonLayoutStories - show secondary content by default

* PM-17737 - Per PR feedback, adjust maxWidthClass logic to remove string concatenation as it can result in tailwind classes not being compiled and available at run time.

* PM-17737 - Per PR feedback, refactor stories to use configuration to generate all the scenarios so we can still track them via snapshots

* PM-17737 - Fix anon layout mdx reference

* PM-17737 - Make AnonLayoutMaxWidths singular

* PM-17737 - When inside of a max width container, the icon container needs explicit width to be able to scale viewbox icons that don't have defined heights / widths

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

@@ -4,7 +4,6 @@
   [icon]="pageIcon"
   [showReadonlyHostname]="showReadonlyHostname"
   [maxWidth]="maxWidth"
-  [titleAreaMaxWidth]="titleAreaMaxWidth"
   [hideCardWrapper]="hideCardWrapper"
 >
   <router-outlet></router-outlet>

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

@@ -10,7 +10,7 @@ import { Translation } from "../dialog";
 import { Icon } from "../icon";
 
 import { AnonLayoutWrapperDataService } from "./anon-layout-wrapper-data.service";
-import { AnonLayoutComponent } from "./anon-layout.component";
+import { AnonLayoutComponent, AnonLayoutMaxWidth } from "./anon-layout.component";
 
 export interface AnonLayoutWrapperData {
   /**
@@ -36,11 +36,7 @@ export interface AnonLayoutWrapperData {
   /**
    * Optional flag to set the max-width of the page. Defaults to 'md' if not provided.
    */
-  maxWidth?: "md" | "3xl";
-  /**
-   * Optional flag to set the max-width of the title area. Defaults to null if not provided.
-   */
-  titleAreaMaxWidth?: "md";
+  maxWidth?: AnonLayoutMaxWidth;
   /**
    * Hide the card that wraps the default content. Defaults to false.
    */
@@ -58,8 +54,7 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
   protected pageSubtitle: string;
   protected pageIcon: Icon;
   protected showReadonlyHostname: boolean;
-  protected maxWidth: "md" | "3xl";
-  protected titleAreaMaxWidth: "md";
+  protected maxWidth: AnonLayoutMaxWidth;
   protected hideCardWrapper: boolean;
 
   constructor(
@@ -111,7 +106,6 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
 
     this.showReadonlyHostname = Boolean(firstChildRouteData["showReadonlyHostname"]);
     this.maxWidth = firstChildRouteData["maxWidth"];
-    this.titleAreaMaxWidth = firstChildRouteData["titleAreaMaxWidth"];
     this.hideCardWrapper = Boolean(firstChildRouteData["hideCardWrapper"]);
   }
 
@@ -174,7 +168,6 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
     this.pageIcon = null;
     this.showReadonlyHostname = null;
     this.maxWidth = null;
-    this.titleAreaMaxWidth = null;
     this.hideCardWrapper = null;
   }
 

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

@@ -13,11 +13,8 @@
     <bit-icon [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-icon>
   </a>
 
-  <div
-    class="tw-text-center tw-mb-4 sm:tw-mb-6"
-    [ngClass]="{ 'tw-max-w-md tw-mx-auto': titleAreaMaxWidth === 'md' }"
-  >
-    <div *ngIf="!hideIcon" class="tw-mx-auto tw-max-w-24 sm:tw-max-w-28 md:tw-max-w-32">
+  <div class="tw-text-center tw-mb-4 sm:tw-mb-6 tw-mx-auto" [ngClass]="maxWidthClass">
+    <div *ngIf="!hideIcon" class="tw-w-24 sm:tw-w-28 md:tw-w-32 tw-mx-auto">
       <bit-icon [icon]="icon"></bit-icon>
     </div>
 
@@ -36,8 +33,8 @@
   </div>
 
   <div
-    class="tw-grow tw-w-full tw-max-w-md tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
-    [ngClass]="{ 'tw-max-w-md': maxWidth === 'md', 'tw-max-w-3xl': maxWidth === '3xl' }"
+    class="tw-grow tw-w-full tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
+    [ngClass]="maxWidthClass"
   >
     @if (hideCardWrapper) {
       <div class="tw-mb-6 sm:tw-mb-10">

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

@@ -14,6 +14,8 @@ import { BitwardenLogo, BitwardenShield } from "../icon/icons";
 import { SharedModule } from "../shared";
 import { TypographyModule } from "../typography";
 
+export type AnonLayoutMaxWidth = "md" | "lg" | "xl" | "2xl" | "3xl";
+
 @Component({
   selector: "auth-anon-layout",
   templateUrl: "./anon-layout.component.html",
@@ -36,27 +38,35 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
   @Input() hideCardWrapper: boolean = false;
 
   /**
-   * Max width of the title area content
-   *
-   * @default null
-   */
-  @Input() titleAreaMaxWidth?: "md";
-
-  /**
-   * Max width of the layout content
+   * Max width of the anon layout title, subtitle, and content areas.
    *
    * @default 'md'
    */
-  @Input() maxWidth: "md" | "3xl" = "md";
+  @Input() maxWidth: AnonLayoutMaxWidth = "md";
 
   protected logo = BitwardenLogo;
-  protected year = "2024";
+  protected year: string;
   protected clientType: ClientType;
   protected hostname: string;
   protected version: string;
 
   protected hideYearAndVersion = false;
 
+  get maxWidthClass(): string {
+    switch (this.maxWidth) {
+      case "md":
+        return "tw-max-w-md";
+      case "lg":
+        return "tw-max-w-lg";
+      case "xl":
+        return "tw-max-w-xl";
+      case "2xl":
+        return "tw-max-w-2xl";
+      case "3xl":
+        return "tw-max-w-3xl";
+    }
+  }
+
   constructor(
     private environmentService: EnvironmentService,
     private platformUtilsService: PlatformUtilsService,
@@ -68,7 +78,6 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
 
   async ngOnInit() {
     this.maxWidth = this.maxWidth ?? "md";
-    this.titleAreaMaxWidth = this.titleAreaMaxWidth ?? null;
     this.hostname = (await firstValueFrom(this.environmentService.environment$)).getHostname();
     this.version = await this.platformUtilsService.getApplicationVersion();
 

libs/components/src/anon-layout/anon-layout.mdx

@@ -165,4 +165,4 @@ import { EnvironmentSelectorComponent } from "./components/environment-selector/
 
 ---
 
-<Story of={stories.WithSecondaryContent} />
+<Story of={stories.SecondaryContent} />

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

@@ -8,6 +8,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 
 import { ButtonModule } from "../button";
+import { Icon } from "../icon";
 import { LockIcon } from "../icon/icons";
 import { I18nMockService } from "../utils/i18n-mock.service";
 
@@ -18,6 +19,23 @@ class MockPlatformUtilsService implements Partial<PlatformUtilsService> {
   getClientType = () => ClientType.Web;
 }
 
+type StoryArgs = Pick<
+  AnonLayoutComponent,
+  | "title"
+  | "subtitle"
+  | "showReadonlyHostname"
+  | "hideCardWrapper"
+  | "hideIcon"
+  | "hideLogo"
+  | "hideFooter"
+  | "maxWidth"
+> & {
+  contentLength: "normal" | "long" | "thin";
+  showSecondary: boolean;
+  useDefaultIcon: boolean;
+  icon: Icon;
+};
+
 export default {
   title: "Component Library/Anon Layout",
   component: AnonLayoutComponent,
@@ -31,12 +49,11 @@ export default {
         },
         {
           provide: I18nService,
-          useFactory: () => {
-            return new I18nMockService({
+          useFactory: () =>
+            new I18nMockService({
               accessing: "Accessing",
               appLogoLabel: "app logo label",
-            });
-          },
+            }),
         },
         {
           provide: EnvironmentService,
@@ -55,196 +72,179 @@ export default {
       ],
     }),
   ],
+
+  render: (args: StoryArgs) => {
+    const { useDefaultIcon, icon, ...rest } = args;
+    return {
+      props: {
+        ...rest,
+        icon: useDefaultIcon ? null : icon,
+      },
+      template: `
+        <auth-anon-layout
+          [title]="title"
+          [subtitle]="subtitle"
+          [icon]="icon"
+          [showReadonlyHostname]="showReadonlyHostname"
+          [maxWidth]="maxWidth"
+          [hideCardWrapper]="hideCardWrapper"
+          [hideIcon]="hideIcon"
+          [hideLogo]="hideLogo"
+          [hideFooter]="hideFooter"
+        >
+          <ng-container [ngSwitch]="contentLength">
+            <div *ngSwitchCase="'thin'" class="tw-text-center">  <div class="tw-font-bold">Thin Content</div></div>
+            <div *ngSwitchCase="'long'">
+              <div class="tw-font-bold">Long Content</div>
+              <div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
+              <div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
+            </div>
+            <div *ngSwitchDefault>
+              <div class="tw-font-bold">Normal Content</div>
+              <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
+            </div>
+          </ng-container>
+
+          <div *ngIf="showSecondary" slot="secondary" class="tw-text-center">
+            <div class="tw-font-bold tw-mb-2">
+              Secondary Projected Content (optional)
+            </div>
+            <button bitButton>Perform Action</button>
+          </div>
+        </auth-anon-layout>
+      `,
+    };
+  },
+
+  argTypes: {
+    title: { control: "text" },
+    subtitle: { control: "text" },
+
+    icon: { control: false, table: { disable: true } },
+    useDefaultIcon: {
+      control: false,
+      table: { disable: true },
+      description: "If true, passes null so component falls back to its built-in icon",
+    },
+
+    showReadonlyHostname: { control: "boolean" },
+    maxWidth: {
+      control: "select",
+      options: ["md", "lg", "xl", "2xl", "3xl"],
+    },
+
+    hideCardWrapper: { control: "boolean" },
+    hideIcon: { control: "boolean" },
+    hideLogo: { control: "boolean" },
+    hideFooter: { control: "boolean" },
+
+    contentLength: {
+      control: "radio",
+      options: ["normal", "long", "thin"],
+    },
+
+    showSecondary: { control: "boolean" },
+  },
+
   args: {
     title: "The Page Title",
     subtitle: "The subtitle (optional)",
-    showReadonlyHostname: true,
     icon: LockIcon,
-    hideLogo: false,
+    useDefaultIcon: false,
+    showReadonlyHostname: false,
+    maxWidth: "md",
     hideCardWrapper: false,
+    hideIcon: false,
+    hideLogo: false,
+    hideFooter: false,
+    contentLength: "normal",
+    showSecondary: false,
   },
-} as Meta;
+} as Meta<StoryArgs>;
 
-type Story = StoryObj<AnonLayoutComponent>;
+type Story = StoryObj<StoryArgs>;
 
-export const WithPrimaryContent: 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" [hideLogo]="hideLogo" >
-        <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 NormalPrimaryContent: Story = {
+  args: {
+    contentLength: "normal",
+  },
 };
 
-export const WithSecondaryContent: Story = {
-  render: (args) => ({
-    props: args,
-    template:
-      // Projected content (the <div>'s) and styling is just a sample and can be replaced with any content/styling.
-      // Notice that slot="secondary" is requred to project any secondary content.
-      `
-      <auth-anon-layout [title]="title" [subtitle]="subtitle" [showReadonlyHostname]="showReadonlyHostname" [hideLogo]="hideLogo" >
-        <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>
-
-        <div slot="secondary" class="tw-text-center">
-          <div class="tw-font-bold tw-mb-2">Secondary Projected Content (optional)</div>
-          <button bitButton>Perform Action</button>
-        </div>
-      </auth-anon-layout>
-    `,
-  }),
+export const LongPrimaryContent: Story = {
+  args: {
+    contentLength: "long",
+  },
 };
 
-export const WithLongContent: Story = {
-  render: (args) => ({
-    props: args,
-    template:
-      // Projected content (the <div>'s) and styling is just a sample and can be replaced with any content/styling.
-      `
-      <auth-anon-layout title="Page Title lorem ipsum dolor consectetur sit amet expedita quod est" subtitle="Subtitle here Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, quod est?" [showReadonlyHostname]="showReadonlyHostname" [hideLogo]="hideLogo" >
-        <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? Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
-        </div>
-
-        <div slot="secondary" class="tw-text-center">
-          <div class="tw-font-bold tw-mb-2">Secondary Projected Content (optional)</div>
-          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias laborum nostrum natus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias laborum nostrum natus. Expedita, quod est?          </p>
-          <button bitButton>Perform Action</button>
-        </div>
-      </auth-anon-layout>
-    `,
-  }),
+export const ThinPrimaryContent: Story = {
+  args: {
+    contentLength: "thin",
+  },
 };
 
-export const WithThinPrimaryContent: Story = {
-  render: (args) => ({
-    props: args,
-    template:
-      // Projected content (the <div>'s) and styling is just a sample and can be replaced with any content/styling.
-      `
-      <auth-anon-layout [title]="title" [subtitle]="subtitle" [showReadonlyHostname]="showReadonlyHostname" [hideLogo]="hideLogo" >
-        <div class="tw-text-center">Lorem ipsum</div>
-
-        <div slot="secondary" class="tw-text-center">
-          <div class="tw-font-bold tw-mb-2">Secondary Projected Content (optional)</div>
-          <button bitButton>Perform Action</button>
-        </div>
-      </auth-anon-layout>
-    `,
-  }),
+export const LongContentAndTitlesAndDefaultWidth: Story = {
+  args: {
+    title:
+      "This is a very long title that might not fit in the default width. It's really long and descriptive, so it might take up more space than usual.",
+    subtitle:
+      "This is a very long subtitle that might not fit in the default width. It's really long and descriptive, so it might take up more space than usual.",
+    contentLength: "long",
+  },
 };
 
-export const WithCustomIcon: 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" [icon]="icon" [showReadonlyHostname]="showReadonlyHostname">
-        <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 LongContentAndTitlesAndLargestWidth: Story = {
+  args: {
+    title:
+      "This is a very long title that might not fit in the default width. It's really long and descriptive, so it might take up more space than usual.",
+    subtitle:
+      "This is a very long subtitle that might not fit in the default width. It's really long and descriptive, so it might take up more space than usual.",
+    contentLength: "long",
+    maxWidth: "3xl",
+  },
 };
 
-export const HideCardWrapper: Story = {
-  render: (args) => ({
-    props: {
-      ...args,
-      hideCardWrapper: true,
-    },
-    template: `
-      <auth-anon-layout [title]="title" [subtitle]="subtitle" [showReadonlyHostname]="showReadonlyHostname" [hideLogo]="hideLogo" [hideCardWrapper]="hideCardWrapper">
-        <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>
-        <div slot="secondary" class="tw-text-center">
-          <div class="tw-font-bold tw-mb-2">Secondary Projected Content (optional)</div>
-          <button bitButton>Perform Action</button>
-        </div>
-      </auth-anon-layout>
-    `,
-  }),
+export const SecondaryContent: Story = {
+  args: {
+    showSecondary: true,
+  },
 };
 
-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 NoTitle: Story = { args: { title: undefined } };
+
+export const NoSubtitle: Story = { args: { subtitle: undefined } };
+
+export const NoWrapper: Story = {
+  args: { hideCardWrapper: true },
 };
 
-export const HideLogo: 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" [hideLogo]="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 DefaultIcon: Story = {
+  args: { useDefaultIcon: true },
 };
 
-export const HideFooter: 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" [hideFooter]="true" [hideLogo]="hideLogo" >
-        <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 NoIcon: Story = {
+  args: { hideIcon: true },
 };
 
-export const WithTitleAreaMaxWidth: Story = {
-  render: (args) => ({
-    props: {
-      ...args,
-      title: "This is a very long long title to demonstrate titleAreaMaxWidth set to 'md'",
-      subtitle:
-        "This is a very long subtitle that demonstrates how the max width container handles longer text content with the titleAreaMaxWidth input set to 'md'. Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, quod est?",
-    },
-    template: `
-      <auth-anon-layout [title]="title" [subtitle]="subtitle" [showReadonlyHostname]="showReadonlyHostname" [hideLogo]="hideLogo" [titleAreaMaxWidth]="'md'">
-        <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 NoLogo: Story = {
+  args: { hideLogo: true },
+};
+
+export const NoFooter: Story = {
+  args: { hideFooter: true },
+};
+
+export const ReadonlyHostname: Story = {
+  args: { showReadonlyHostname: true },
+};
+
+export const MinimalState: Story = {
+  args: {
+    title: undefined,
+    subtitle: undefined,
+    contentLength: "normal",
+    hideCardWrapper: true,
+    hideIcon: true,
+    hideLogo: true,
+    hideFooter: true,
+  },
 };