Merged in feat/SW-1680-listing-ancillaries-mobile (pull request #1357)

feat(SW-1680): add carousel design for mobile

* feat(SW-1680): add carousel design for mobile

* feat(SW-1680): adjust design

* feat(SW-1680): adjust responsive design


Approved-by: Pontus Dreij
Approved-by: Simon.Emanuelsson

components/HotelReservation/MyStay/MyStay/Ancillaries/ancillaries.module.css

@@ -46,24 +46,25 @@
   display: none;
 }
 
-.mobileAncillaries {
-  display: flex;
-  gap: var(--Spacing-x2);
-  overflow: hidden;
-  overflow-x: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  flex-wrap: nowrap;
-}
-
 .modal {
   display: none;
 }
 
+.carouselContainer {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 80%;
+  gap: var(--Spacing-x2);
+}
+
 @media screen and (min-width: 768px) {
   .modalContent {
     width: 600px;
   }
+
+  .carouselContainer {
+    grid-auto-columns: calc((100% - var(--Spacing-x3)) / 2);
+  }
 }
 
 @media screen and (min-width: 1052px) {

components/HotelReservation/MyStay/MyStay/Ancillaries/index.tsx

@@ -2,6 +2,7 @@
 import { useState } from "react"
 import { useIntl } from "react-intl"
 
+import { Carousel } from "@/components/Carousel"
 import { ChevronRightSmallIcon } from "@/components/Icons"
 import Modal from "@/components/Modal"
 import { AncillaryCard } from "@/components/TempDesignSystem/AncillaryCard"
@@ -100,11 +101,19 @@ export function Ancillaries({ ancillaries }: AncillariesProps) {
           <AncillaryCard key={ancillary.id} ancillary={ancillary} />
         ))}
       </div>
-
       <div className={styles.mobileAncillaries}>
-        {allAncillaries.map(({ description, ...ancillary }) => (
+        <Carousel>
-          <AncillaryCard key={ancillary.id} ancillary={ancillary} />
+          <Carousel.Content className={styles.carouselContainer}>
-        ))}
+            {allAncillaries.map(({ description, ...ancillary }) => (
+              <Carousel.Item key={ancillary.id}>
+                <AncillaryCard key={ancillary.id} ancillary={ancillary} />
+              </Carousel.Item>
+            ))}
+          </Carousel.Content>
+          <Carousel.Previous className={styles.navigationButton} />
+          <Carousel.Next className={styles.navigationButton} />
+          <Carousel.Dots />
+        </Carousel>
       </div>
     </div>
   )

components/TempDesignSystem/AncillaryCard/ancillaryCard.module.css

@@ -1,14 +1,12 @@
 .ancillaryCard {
   display: flex;
   flex-direction: column;
-  min-width: 251px;
-  max-width: 286px;
 }
 
 .imageContainer {
   position: relative;
   width: 100%;
-  height: 140px;
+  aspect-ratio: 16/9;
   border-radius: var(--Corner-radius-Medium);
   overflow: hidden;
 }