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

packages/design-system/lib/components/SidePeek/index.tsx

@@ -4,13 +4,13 @@ import { useContext, useRef } from 'react'
 import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
 
 import { MaterialIcon } from '../Icons/MaterialIcon'
-import { OldDSButton as Button } from '../OldDSButton'
 import { Typography } from '../Typography'
 
 import { SidePeekContext } from './SidePeekContext'
 
 import SidePeekSEO from './SidePeekSEO'
 
+import { IconButton } from '../IconButton'
 import styles from './sidePeek.module.css'
 
 interface SidePeekProps {
@@ -53,24 +53,24 @@ export default function SidePeek({
         >
           <Modal className={styles.modal}>
             <Dialog className={styles.dialog} aria-label={title}>
-              <aside className={styles.sidePeek}>
+              <aside className={styles.aside}>
                 <header className={styles.header}>
                   {title ? (
                     <Typography variant="Title/md">
                       <h2 className={styles.heading}>{title}</h2>
                     </Typography>
                   ) : null}
-                  <Button
-                    aria-label={closeLabel}
-                    className={styles.closeButton}
-                    intent="text"
+                  <IconButton
+                    theme="Black"
+                    style="Muted"
                     onPress={onClose}
+                    aria-label={closeLabel}
                   >
                     <MaterialIcon
                       icon="close"
                       color="Icon/Interactive/Default"
                     />
-                  </Button>
+                  </IconButton>
                 </header>
                 <div className={styles.sidePeekContent}>{children}</div>
               </aside>

packages/design-system/lib/components/SidePeek/sidePeek.module.css

@@ -1,18 +1,5 @@
-.modal {
-  --sidepeek-desktop-width: 560px;
-}
-
-@keyframes slide-in {
-  from {
-    right: calc(-1 * var(--sidepeek-desktop-width));
-  }
-
-  to {
-    right: 0;
-  }
-}
-
 .overlay {
+  --sidepeek-desktop-width: 560px;
   position: fixed;
   top: 0;
   bottom: 0;
@@ -47,7 +34,7 @@
   outline: none;
 }
 
-.sidePeek {
+.aside {
   position: relative;
   display: grid;
   grid-template-rows: min-content auto;
@@ -62,14 +49,10 @@
   padding: var(--Spacing-x4);
 }
 
-.header:has(> h2) {
+.header:has(.heading) {
   justify-content: space-between;
 }
 
-.closeButton {
-  padding: 0;
-}
-
 .heading {
   color: var(--Text-Heading);
   text-wrap: balance;
@@ -89,3 +72,13 @@
     height: 100vh;
   }
 }
+
+@keyframes slide-in {
+  from {
+    right: calc(-1 * var(--sidepeek-desktop-width));
+  }
+
+  to {
+    right: 0;
+  }
+}