fix(SW-2172): update sidepeek buttons to use new ones for accessibility

updated enter details header overlay to match design

updated change room button to use new one for accessibility

other minor fixes to match design

apps/scandic-web/components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx

@@ -1,38 +1,32 @@
 "use client"
+
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import useSidePeekStore from "@/stores/sidepeek"
 
-import Button from "@/components/TempDesignSystem/Button"
-
-import styles from "./header.module.css"
-
 import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
 import type { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
 
-export default function ToggleSidePeek({
-  hotelId,
-  intent = "textInverted",
-}: ToggleSidePeekProps) {
+export default function ToggleSidePeek({ hotelId }: ToggleSidePeekProps) {
   const intl = useIntl()
   const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
 
   return (
     <Button
-      onClick={() => openSidePeek({ key: SidePeekEnum.hotelDetails, hotelId })}
-      theme="base"
-      size="small"
-      variant="icon"
-      intent={intent}
+      onPress={() => openSidePeek({ key: SidePeekEnum.hotelDetails, hotelId })}
+      size="Small"
+      variant="Text"
+      color="Inverted"
       wrapping
-      className={styles.toggle}
+      typography="Body/Paragraph/mdBold"
     >
       {intl.formatMessage({
         defaultMessage: "See hotel details",
       })}
-      <MaterialIcon icon="chevron_right" size={14} color="Icon/Inverted" />
+      <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
     </Button>
   )
 }

apps/scandic-web/components/HotelReservation/EnterDetails/Header/header.module.css

@@ -15,7 +15,12 @@
 
 .wrapper {
   position: relative;
-  background-color: rgba(57, 57, 57, 0.5);
+  background: linear-gradient(
+    60deg,
+    rgb(0 0 0 / 25%) 0%,
+    rgb(0 0 0 / 50%) 50%,
+    rgb(0 0 0 / 75%) 100%
+  );
   width: 100dvw;
 }
 
@@ -25,15 +30,15 @@
   justify-content: center;
   align-items: flex-start;
   max-width: var(--max-width-page);
-  gap: var(--Spacing-x2);
-  padding: var(--Spacing-x3) 0;
+  gap: var(--Space-x05);
+  padding: var(--Space-x3) 0;
   margin: 0 auto;
 }
 
 .titleContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
 }
 
 .mobileTitle {
@@ -56,20 +61,16 @@
 .address {
   display: none;
   flex-wrap: wrap;
-  column-gap: var(--Spacing-x-one-and-half);
+  column-gap: var(--Space-x15);
   font-style: normal;
 }
 
-.toggle {
-  padding: 0px !important;
-}
-
 @media (min-width: 768px) {
   .address {
     display: flex;
   }
   .container {
-    padding: var(--Spacing-x3) 0;
+    padding: var(--Space-x3) 0;
   }
   .mobileTitle {
     display: none;
@@ -81,6 +82,6 @@
 
 @media screen and (min-width: 1367px) {
   .container {
-    padding: var(--Spacing-x6) 0;
+    padding: var(--Space-x6) 0;
   }
 }

apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek.tsx

@@ -2,19 +2,17 @@
 
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import useSidePeekStore from "@/stores/sidepeek"
 
-import Button from "@/components/TempDesignSystem/Button"
-
 import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
 import type { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
 
 export default function ToggleSidePeek({
   hotelId,
   roomTypeCode,
-  intent = "textInverted",
   title,
 }: ToggleSidePeekProps) {
   const intl = useIntl()
@@ -22,21 +20,19 @@ export default function ToggleSidePeek({
 
   return (
     <Button
-      onClick={() =>
+      onPress={() =>
         openSidePeek({ key: SidePeekEnum.roomDetails, hotelId, roomTypeCode })
       }
-      theme="base"
-      size="small"
-      variant="icon"
-      intent={intent}
+      size="Small"
+      variant="Text"
       wrapping
+      typography="Body/Paragraph/mdBold"
     >
-      {title
-        ? title
-        : intl.formatMessage({
-            defaultMessage: "See room details",
-          })}
-      <MaterialIcon icon="chevron_right" size={14} color="CurrentColor" />
+      {title ||
+        intl.formatMessage({
+          defaultMessage: "See room details",
+        })}
+      <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
     </Button>
   )
 }

apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx

@@ -4,13 +4,12 @@ import { useRouter } from "next/navigation"
 import { useTransition } from "react"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { selectRate } from "@/constants/routes/hotelReservation"
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
-import Button from "@/components/TempDesignSystem/Button"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useRoomContext } from "@/contexts/Details/Room"
@@ -76,25 +75,22 @@ export default function SelectedRoom() {
             )}
           </Subtitle>
           <Button
-            variant="icon"
-            intent="text"
-            size="small"
-            onClick={changeRoom}
-            disabled={isPending}
+            variant="Text"
+            size="Small"
+            onPress={changeRoom}
+            isDisabled={isPending}
+            typography="Body/Supporting text (caption)/smBold"
           >
-            <MaterialIcon icon="edit_square" color="CurrentColor" />
-            <Caption color="burgundy" type="bold">
-              {intl.formatMessage({
-                defaultMessage: "Change",
-              })}
-            </Caption>
+            <MaterialIcon icon="edit_square" size={20} color="CurrentColor" />
+            {intl.formatMessage({
+              defaultMessage: "Change",
+            })}
           </Button>
         </div>
         {room.roomTypeCode && (
           <div className={styles.details}>
             <ToggleSidePeek
               hotelId={hotelId}
-              intent="text"
               roomTypeCode={room.roomTypeCode}
             />
           </div>

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/ToggleSidePeek.tsx

@@ -1,12 +1,12 @@
 "use client"
+
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import useSidePeekStore from "@/stores/sidepeek"
 
-import Button from "@/components/TempDesignSystem/Button"
-
 import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
 import type { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
 
@@ -26,14 +26,13 @@ export default function ToggleSidePeek({
           roomTypeCode,
         })
       }
-      intent="text"
-      size="small"
-      theme="base"
-      variant="icon"
+      size="Small"
+      variant="Text"
       wrapping
+      typography="Body/Supporting text (caption)/smBold"
     >
       {intl.formatMessage({ defaultMessage: "Room details" })}
-      <MaterialIcon icon="chevron_right" size={14} />
+      <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
     </Button>
   )
 }

apps/scandic-web/types/components/hotelReservation/toggleSidePeekProps.ts

@@ -3,7 +3,6 @@ import type { SafeUser } from "@/types/user"
 export type ToggleSidePeekProps = {
   hotelId: string
   roomTypeCode?: string
-  intent?: "text" | "textInverted"
   title?: string
   user?: SafeUser
   confirmationNumber?: string