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/Breadcrumb.tsx

@@ -1,6 +1,6 @@
 import { cx } from "class-variance-authority"
 import Link from "next/link"
-import { Breadcrumb as AriaBreadcrumb } from "react-aria-components"
+import { Breadcrumb as BreadcrumbRAC } from "react-aria-components"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -16,7 +16,7 @@ export function Breadcrumb({
   ...props
 }: BreadcrumbProps) {
   return (
-    <AriaBreadcrumb className={cx(styles.listItem, className)} {...props}>
+    <BreadcrumbRAC className={cx(styles.listItem, className)} {...props}>
       {href ? (
         <>
           <Typography variant="Label/xsRegular">
@@ -28,12 +28,12 @@ export function Breadcrumb({
             icon="chevron_right"
             size={20}
             aria-hidden="true"
-            color="Icon/Interactive/Secondary"
+            color="CurrentColor"
           />
         </>
       ) : (
         children
       )}
-    </AriaBreadcrumb>
+    </BreadcrumbRAC>
   )
 }

apps/scandic-web/components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css

@@ -1,7 +1,8 @@
 .breadcrumbs {
-  padding: var(--Spacing-x4) 0 var(--Spacing-x3);
+  padding: var(--Space-x4) 0 var(--Space-x3);
   margin: 0 auto;
   width: 100%;
+  color: var(--Text-Interactive-Secondary);
 }
 
 .breadcrumbs.transparent {
@@ -19,7 +20,7 @@
 
 .breadcrumbs .list {
   display: flex;
-  gap: var(--Spacing-x-quarter);
+  gap: var(--Space-x025);
   padding-inline-start: 0;
   margin: 0 auto;
 }
@@ -43,7 +44,7 @@
 .listItem {
   align-items: center;
   display: flex;
-  gap: var(--Spacing-x-quarter);
+  gap: var(--Space-x025);
   flex-shrink: 0;
   flex-grow: 0;
 }
@@ -64,24 +65,31 @@
   /* this increases the width of the button for tapping */
   padding: 0 5px;
   margin: 0 -5px;
-  color: var(--Base-Text-High-contrast);
+  color: var(--Text-Interactive-Default);
+
+  &.button:not(.lastBreadcrumb) {
+    cursor: pointer;
+
+    &:hover {
+      color: var(--Text-Interactive-Default-Hover);
+    }
+  }
 }
 
 .link {
   color: var(--Text-Interactive-Secondary);
-}
 
-.link:hover,
-.button:hover {
-  color: var(--Text-Interactive-Secondary-Hover);
+  &:hover {
+    color: var(--Text-Interactive-Secondary-Hover);
+  }
 }
 
 .dialog {
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  padding: var(--Spacing-x1);
+  background-color: var(--Surface-Primary-Default);
+  padding: var(--Space-x1);
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
   border-radius: var(--Corner-radius-md);
   min-width: 169px;
   outline: none;
@@ -91,16 +99,16 @@
 .dialogLink {
   display: block;
   border-radius: var(--Corner-radius-md);
-  padding: var(--Spacing-x1);
+  padding: var(--Space-x1);
   color: var(--Text-Default);
+
+  &:hover,
+  &:focus {
+    background-color: var(--Surface-Primary-Hover);
+  }
 }
 
-.dialogLink:focus,
-.dialogLink:hover {
-  background-color: var(--Base-Surface-Primary-light-Hover);
-}
-
-.tooltipTrigger {
+.lastBreadcrumb {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -109,23 +117,57 @@
 
 .tooltip {
   background-color: var(--Surface-UI-Fill-Intense);
-  padding: var(--Spacing-x-half) var(--Spacing-x1);
+  padding: var(--Space-x05) var(--Space-x1);
   border-radius: var(--Corner-radius-sm);
   color: var(--Text-Inverted);
   outline: none;
 }
 
-@media screen and (width <= 767px) {
+@media screen and (max-width: 767px) {
   .desktop {
     display: none;
   }
+
+  .breadcrumbs.isThemedMobile {
+    background-color: var(--Surface-Brand-Primary-1-Default);
+    color: var(--Text-Brand-OnPrimary-1-Default);
+
+    .link,
+    .button {
+      color: var(--Text-Brand-OnPrimary-1-Default);
+    }
+
+    .link:hover,
+    .button:not(.lastBreadcrumb):hover {
+      color: var(
+        --Text-Brand-OnPrimary-1-Default
+      ); /* In need of a different variable for this */
+    }
+  }
 }
 
-@media screen and (width >= 768px) {
+@media screen and (min-width: 768px) {
   .mobile {
     display: none;
   }
   .desktop {
     display: flex;
   }
+
+  .breadcrumbs.isThemedDesktop {
+    background-color: var(--Surface-Brand-Primary-1-Default);
+    color: var(--Text-Brand-OnPrimary-1-Default);
+
+    .link,
+    .button {
+      color: var(--Text-Brand-OnPrimary-1-Default);
+    }
+
+    .link:hover,
+    .button:not(.lastBreadcrumb):hover {
+      color: var(
+        --Text-Brand-OnPrimary-1-Default
+      ); /* In need of a different variable for this */
+    }
+  }
 }

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>
   )
 }

apps/scandic-web/components/TempDesignSystem/Breadcrumbs/variants.ts

@@ -16,9 +16,16 @@ export const breadcrumbsVariants = cva(styles.breadcrumbs, {
       headerWidth: styles.headerWidth,
       contentWidth: styles.contentWidth,
     },
+    isThemed: {
+      mobileOnly: styles.isThemedMobile,
+      desktopOnly: styles.isThemedDesktop,
+      true: [styles.isThemedMobile, styles.isThemedDesktop],
+      false: "",
+    },
   },
   defaultVariants: {
     color: "transparent",
     size: "pageWidth",
+    isThemed: false,
   },
 })