Merged in fix/SW-2172-accessibility-issues-sidepeek-and-other-buttons (pull request #2202)

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

Approved-by: Erik Tiekstra

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