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>