fix: refactor breadcrumbs to take page type variants to better match margins

components/TempDesignSystem/Alert/alert.module.css

@@ -11,7 +11,7 @@
 
 .content {
   width: 100%;
-  max-width: var(--max-width-navigation);
+  max-width: var(--max-width-page);
   margin: 0 auto;
   display: flex;
   gap: var(--Spacing-x2);
@@ -60,7 +60,6 @@
 
 /* Intent: banner */
 .banner {
-  padding: 0 var(--Spacing-x3);
   border-left-width: 6px;
   border-left-style: solid;
 }
@@ -90,9 +89,6 @@
 }
 
 @media screen and (min-width: 768px) {
-  .banner {
-    padding: 0 var(--Spacing-x5);
-  }
   .innerContent {
     flex-direction: row;
     align-items: center;

components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css

@@ -1,17 +1,35 @@
 .breadcrumbs {
   display: block;
-  padding: var(--Spacing-x2) var(--Spacing-x2) 0;
-  max-width: var(--max-width);
+  padding: var(--Spacing-x4) 0 var(--Spacing-x3);
   margin: 0 auto;
   width: 100%;
 }
 
+.contentWidth.breadcrumbs {
+  background-color: var(--Base-Surface-Subtle-Normal);
+  padding-bottom: 0;
+}
+
+.hotelHeaderWidth.breadcrumbs {
+  max-width: min(var(--max-width-page), calc(100% - var(--max-width-spacing)));
+}
+
+.fullWidth .list {
+  max-width: var(--max-width-navigation);
+}
+
+.contentWidth .list {
+  max-width: var(--max-width-content);
+}
+
 .list {
   align-items: center;
   display: flex;
   gap: var(--Spacing-x-quarter);
   justify-content: flex-start;
   list-style: none;
+  margin: 0 auto;
+  max-width: var(--max-width-page);
 }
 
 .listItem {
@@ -23,10 +41,3 @@
 .homeLink {
   display: flex;
 }
-
-@media screen and (min-width: 1367px) {
-  .breadcrumbs {
-    padding-left: var(--Spacing-x5);
-    padding-right: var(--Spacing-x5);
-  }
-}

components/TempDesignSystem/Breadcrumbs/breadcrumbs.ts

@@ -1,9 +1,14 @@
+import type { VariantProps } from "class-variance-authority"
+
+import type { breadcrumbsVariants } from "./variants"
+
 type Breadcrumb = {
   title: string
   uid: string
   href?: string
 }
 
-export interface BreadcrumbsProps {
+export interface BreadcrumbsProps
+  extends VariantProps<typeof breadcrumbsVariants> {
   breadcrumbs: Breadcrumb[]
 }

components/TempDesignSystem/Breadcrumbs/index.tsx

@@ -3,18 +3,27 @@ import ChevronRightSmallIcon from "@/components/Icons/ChevronRightSmall"
 import Link from "@/components/TempDesignSystem/Link"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 
+import { breadcrumbsVariants } from "./variants"
+
 import styles from "./breadcrumbs.module.css"
 
 import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
 
-export default function Breadcrumbs({ breadcrumbs }: BreadcrumbsProps) {
+export default function Breadcrumbs({
+  breadcrumbs,
+  variant,
+}: BreadcrumbsProps) {
   if (!breadcrumbs?.length) {
     return null
   }
 
+  const classNames = breadcrumbsVariants({
+    variant,
+  })
+
   const homeBreadcrumb = breadcrumbs.shift()
   return (
-    <nav className={styles.breadcrumbs}>
+    <nav className={classNames}>
       <ul className={styles.list}>
         {homeBreadcrumb ? (
           <li className={styles.listItem}>

components/TempDesignSystem/Breadcrumbs/variants.ts

@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./breadcrumbs.module.css"
+
+import { PageContentTypeEnum } from "@/types/requests/contentType"
+
+export const breadcrumbsVariants = cva(styles.breadcrumbs, {
+  variants: {
+    variant: {
+      [PageContentTypeEnum.accountPage]: styles.fullWidth,
+      [PageContentTypeEnum.contentPage]: styles.contentWidth,
+      [PageContentTypeEnum.collectionPage]: styles.contentWidth,
+      [PageContentTypeEnum.hotelPage]: styles.hotelHeaderWidth,
+      [PageContentTypeEnum.loyaltyPage]: styles.fullWidth,
+      default: styles.fullWidth,
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})