Merged in fix/SW-2118-breadcrumbs (pull request #1721)

fix(SW-2118): changed variants for breadcrumbs to handle different background-colors and widths

* fix(SW-2118): changed variants for breadcrumbs to handle different background-colors and widths


Approved-by: Christian Andolf
Approved-by: Linus Flood

apps/scandic-web/components/TempDesignSystem/Breadcrumbs/index.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { cx } from "class-variance-authority"
+import Link from "next/link"
 import { useEffect, useState } from "react"
 import {
   Breadcrumbs as AriaBreadcrumbs,
@@ -16,9 +17,7 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { debounce } from "@/utils/debounce"
 
-import Link from "../Link"
 import { Arrow } from "../Popover/Arrow"
-import Footnote from "../Text/Footnote"
 import { Breadcrumb } from "./Breadcrumb"
 import { splitBreadcrumbs } from "./utils"
 import { breadcrumbsVariants } from "./variants"
@@ -29,7 +28,8 @@ import type { BreadcrumbsProps } from "./breadcrumbs"
 
 export default function Breadcrumbs({
   breadcrumbs,
-  variant,
+  color,
+  size,
 }: BreadcrumbsProps) {
   // using a ref instead to detect when the element is available and forcing a render
   const [element, attachRef] = useState<HTMLButtonElement | null>(null)
@@ -59,7 +59,8 @@ export default function Breadcrumbs({
   }
 
   const classNames = breadcrumbsVariants({
-    variant,
+    color,
+    size,
   })
 
   const [homeBreadcrumb, remainingBreadcrumbs, lastBreadcrumb] =
@@ -72,9 +73,14 @@ export default function Breadcrumbs({
           href={homeBreadcrumb.href}
           aria-label={homeBreadcrumb.title}
         >
-          <MaterialIcon icon="home" size={16} color="CurrentColor" />
+          <MaterialIcon
+            icon="home"
+            size={20}
+            color="Icon/Interactive/Secondary"
+          />
         </Breadcrumb>
 
+        {/* These breadcrumbs are visible on mobile only */}
         {remainingBreadcrumbs.length >= 3 ? (
           <>
             <Breadcrumb
@@ -85,20 +91,24 @@ export default function Breadcrumbs({
             </Breadcrumb>
             <Breadcrumb className={styles.mobile}>
               <DialogTrigger>
-                <Footnote color="burgundy" type="bold" asChild>
+                <Typography variant="Label/xsRegular">
                   <Button className={styles.button}>…</Button>
-                </Footnote>
+                </Typography>
                 <Popover>
                   <Dialog className={styles.dialog}>
                     {remainingBreadcrumbs.slice(1).map((breadcrumb) => (
-                      <Link
-                        href={breadcrumb.href!}
-                        size="tiny"
+                      <Typography
                         key={breadcrumb.uid}
-                        className={styles.dialogLink}
+                        variant="Label/xsRegular"
+                        className={styles.dialogItem}
                       >
-                        {breadcrumb.title}
-                      </Link>
+                        <Link
+                          href={breadcrumb.href!}
+                          className={styles.dialogLink}
+                        >
+                          {breadcrumb.title}
+                        </Link>
+                      </Typography>
                     ))}
                   </Dialog>
                 </Popover>
@@ -122,6 +132,8 @@ export default function Breadcrumbs({
             </Breadcrumb>
           ))
         )}
+
+        {/* These breadcrumbs are visible on desktop only */}
         {remainingBreadcrumbs.map((breadcrumb) => (
           <Breadcrumb
             key={breadcrumb.uid}
@@ -131,9 +143,11 @@ export default function Breadcrumbs({
             {breadcrumb.title}
           </Breadcrumb>
         ))}
+
+        {/* Current page breadcrumb */}
         <Breadcrumb>
           <DialogTrigger>
-            <Footnote color="burgundy" type="bold" asChild>
+            <Typography variant="Label/xsBold">
               <Button
                 className={cx(styles.button, styles.tooltipTrigger)}
                 ref={attachRef}
@@ -141,7 +155,7 @@ export default function Breadcrumbs({
               >
                 {lastBreadcrumb.title}
               </Button>
-            </Footnote>
+            </Typography>
             <Popover placement="bottom" offset={16}>
               <Dialog className={styles.tooltip}>
                 <OverlayArrow>