Merged in feat/SW-2703-mobile-summary-improvements (pull request #2060)

Feat/SW-2703 mobile price summary improvements

* feat(SW-2703): fixes to select rate price summary

* feat(SW-2703): fixes enter details summary mobile

* fix: z-index issue related to booking widget popover

* fix

* fix: added accessibility props to overlay div

* fix: added button inside header

* fix: rename aria button


Approved-by: Michael Zetterberg

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx

@@ -4,7 +4,6 @@ import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
 import { Button } from "@scandic-hotels/design-system/Button"
-import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { dt } from "@/lib/dt"
@@ -104,7 +103,11 @@ export default function SummaryUI({
 
   return (
     <section className={styles.summary}>
-      <header className={styles.header}>
+      <header
+        className={styles.header}
+        role="button"
+        onClick={handleToggleSummary}
+      >
         <Subtitle className={styles.title} type="two">
           {intl.formatMessage({
             defaultMessage: "Booking summary",
@@ -120,18 +123,12 @@ export default function SummaryUI({
           {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
           {dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nightsMsg})
         </Body>
-        <IconButton
-          onPress={handleToggleSummary}
-          className={styles.chevronButton}
-          theme="Black"
-          style="Muted"
-        >
-          <MaterialIcon
-            icon="keyboard_arrow_down"
-            size={20}
-            color="CurrentColor"
-          />
-        </IconButton>
+        <MaterialIcon
+          className={styles.chevronIcon}
+          icon="keyboard_arrow_down"
+          size={30}
+          color="CurrentColor"
+        />
       </header>
       <Divider color="primaryLightSubtle" />
       {rooms.map(({ room }, idx) => {

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/ui.module.css

@@ -9,18 +9,17 @@
 
 .header {
   display: grid;
-  grid-template-areas: "title button" "date button";
+  grid-template-areas: "title button" "date date";
+  grid-template-columns: 1fr auto;
+  align-items: center;
 }
 
 .title {
   grid-area: title;
 }
 
-.chevronButton {
+.chevronIcon {
   grid-area: button;
-  justify-self: end;
-  align-items: center;
-  margin-right: calc(0px - var(--Spacing-x2));
 }
 
 .date {