Merged in feat/SW-3289-replace-sidepeek-hotel-reservation (pull request #2686)

feat(SW-3289): replace sidepeek

* fix(SW-3289): replace sidepeek

* fix(SW-3289): add wrapping prop and change prop name to buttonVariant

* fix(SW-3289): replace body with typography

* fix(SW-3289): fix intl message


Approved-by: Joakim Jäderberg

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

@@ -4,8 +4,8 @@ import { useEffect } from "react"
 import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useSetOverflowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"
@@ -34,19 +34,20 @@ export default function SidePeekSelfControlled({
                       <h2>{title}</h2>
                     </Typography>
                   ) : null}
-                  <Button
+                  <IconButton
+                    theme="Black"
+                    style="Muted"
+                    onPress={close}
                     aria-label={intl.formatMessage({
                       defaultMessage: "Close",
                     })}
-                    className={styles.closeButton}
-                    intent="text"
-                    onPress={close}
                   >
                     <MaterialIcon
                       icon="close"
+                      size={24}
                       color="Icon/Interactive/Default"
                     />
-                  </Button>
+                  </IconButton>
                 </header>
                 <div className={styles.sidePeekContent}>{children}</div>
                 <KeepBodyVisible />

apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/sidePeekSelfControlled.module.css

@@ -72,10 +72,6 @@
   justify-content: space-between;
 }
 
-.closeButton {
-  padding: 0;
-}
-
 .heading {
   color: var(--Text-Heading);
 }