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/BreadcrumbsSkeleton/index.tsx

@@ -1,17 +1,25 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import styles from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css"
-import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 
-export default function BreadcrumbsSkeleton() {
+import { breadcrumbsVariants } from "../variants"
+
+import type { BreadcrumbsProps } from "../breadcrumbs"
+
+export default function BreadcrumbsSkeleton({
+  color,
+  size,
+}: Pick<BreadcrumbsProps, "color" | "size">) {
+  const classNames = breadcrumbsVariants({ color, size })
   return (
-    <nav className={styles.breadcrumbs}>
+    <nav className={classNames}>
       <ul className={styles.list}>
         <li className={styles.listItem}>
           <MaterialIcon
             icon="home"
-            size={16}
+            size={20}
             color="Icon/Interactive/Secondary"
           />
           <MaterialIcon
@@ -23,9 +31,9 @@ export default function BreadcrumbsSkeleton() {
         </li>
 
         <li className={styles.listItem}>
-          <Footnote color="burgundy" type="bold">
-            <SkeletonShimmer width={"12ch"} />
-          </Footnote>
+          <Typography variant="Label/xsBold">
+            <SkeletonShimmer width="20ch" />
+          </Typography>
         </li>
       </ul>
     </nav>