Merged in feat/BOOK-61-refactor-hotel-page-css-variables (pull request #3014)

Feat/BOOK-61 refactor hotel page css variables

* feat(BOOK-61): Breadcrumbs

* feat(BOOK-61): intro section

* feat(BOOK-61): show more button

* feat(BOOK-61): rooms section

* feat(BOOK-61): sidepeeks

* feat(BOOK-61): deprecated old Link component

* feat(BOOK-61): added new TextLink component to the design-system

* feat(BOOK-61): replaced deprecated links with new TextLink component

* feat(BOOK-61): miscellaneous changes


Approved-by: Bianca Widstam
Approved-by: Christel Westerberg

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

@@ -4,7 +4,7 @@ import { cx } from "class-variance-authority"
 import Link from "next/link"
 import { useEffect, useState } from "react"
 import {
-  Breadcrumbs as AriaBreadcrumbs,
+  Breadcrumbs as BreadcrumbsRAC,
   Button,
   Dialog,
   DialogTrigger,
@@ -30,6 +30,7 @@ export default function Breadcrumbs({
   breadcrumbs,
   color,
   size,
+  isThemed,
 }: BreadcrumbsProps) {
   const intl = useIntl()
 
@@ -63,6 +64,7 @@ export default function Breadcrumbs({
   const classNames = breadcrumbsVariants({
     color,
     size,
+    isThemed,
   })
 
   const [homeBreadcrumb, remainingBreadcrumbs, lastBreadcrumb] =
@@ -76,16 +78,12 @@ export default function Breadcrumbs({
       })}
       className={classNames}
     >
-      <AriaBreadcrumbs className={styles.list}>
+      <BreadcrumbsRAC className={styles.list}>
         <Breadcrumb
           href={homeBreadcrumb.href}
           aria-label={homeBreadcrumb.title}
         >
-          <MaterialIcon
-            icon="home"
-            size={20}
-            color="Icon/Interactive/Secondary"
-          />
+          <MaterialIcon icon="home" size={20} color="CurrentColor" />
         </Breadcrumb>
 
         {/* These breadcrumbs are visible on mobile only */}
@@ -125,7 +123,7 @@ export default function Breadcrumbs({
                 icon="chevron_right"
                 size={20}
                 aria-hidden="true"
-                color="Icon/Interactive/Secondary"
+                color="CurrentColor"
               />
             </Breadcrumb>
           </>
@@ -157,7 +155,7 @@ export default function Breadcrumbs({
           <DialogTrigger>
             <Typography variant="Label/xsBold">
               <Button
-                className={cx(styles.button, styles.tooltipTrigger)}
+                className={cx(styles.button, styles.lastBreadcrumb)}
                 ref={attachRef}
                 isDisabled={isTooltipDisabled}
               >
@@ -176,7 +174,7 @@ export default function Breadcrumbs({
             </Popover>
           </DialogTrigger>
         </Breadcrumb>
-      </AriaBreadcrumbs>
+      </BreadcrumbsRAC>
     </nav>
   )
 }