Merged in refactor/SW-1669-carousel-cards-shadow (pull request #1370)

Refactor(SW-1669): Carousel Cards Enhancements

* feat(SW-1669): Enhance Filters component with scroll shadows and heart icon

* feat(SW-1669): Carousel peek next card

* fix(SW-1669): carousel review comments

* feat(SW-1669): Add left scroll shadow to TabFilters component

* refactor(SW-1669): Simplify TabFilters shadow styling

* refactor(SW-1669): Adjust TabFilters shadow width

* refactor(SW-1699): Remove unused import from enter details store


Approved-by: Christian Andolf

components/Carousel/carousel.module.css

@@ -9,7 +9,7 @@
 .container {
   display: grid;
   grid-auto-flow: column;
-  grid-auto-columns: 100%;
+  grid-auto-columns: 85%;
   gap: var(--Spacing-x2);
 }
 

components/Carousel/index.tsx

@@ -23,8 +23,9 @@ function Carousel({
 }: CarouselProps) {
   const [carouselRef, api] = useEmblaCarousel(
     {
-      ...opts,
+      containScroll: "trimSnaps",
       axis: "x",
+      ...opts,
     },
     plugins
   )

components/ContentCard/contentCard.module.css

@@ -48,9 +48,3 @@
     padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x2) 0;
   }
 }
-
-@media (max-width: 767px) {
-  .card {
-    min-width: 300px;
-  }
-}

components/HotelReservation/EnterDetails/SectionAccordion/index.tsx

@@ -5,7 +5,6 @@ import { useIntl } from "react-intl"
 import { useEnterDetailsStore } from "@/stores/enter-details"
 import {
   selectBookingProgress,
-  selectNextStep,
   selectRoom,
   selectRoomStatus,
 } from "@/stores/enter-details/helpers"

components/TabFilters/index.tsx

@@ -1,5 +1,10 @@
 "use client"
 
+import { cx } from "class-variance-authority"
+
+import { HeartIcon } from "@/components/Icons"
+import useScrollShadows from "@/hooks/useScrollShadows"
+
 import styles from "./tabFilters.module.css"
 
 import type { CardGalleryFilter } from "@/types/enums/cardGallery"
@@ -21,22 +26,36 @@ export default function TabFilters({
   selectedFilter,
   onFilterSelect,
 }: TabFiltersProps) {
+  const { containerRef, showLeftShadow, showRightShadow } =
+    useScrollShadows<HTMLDivElement>()
+
   return (
-    <div className={styles.container}>
-      {categories.map((category) => (
-        <button
-          key={category.identifier}
-          onClick={() => onFilterSelect(category.identifier)}
-          className={
-            selectedFilter === category.identifier
-              ? styles.filterSelected
-              : styles.filter
-          }
-          type="button"
-        >
-          {category.label}
-        </button>
-      ))}
+    <div
+      className={cx(
+        styles.containerWrapper,
+        showLeftShadow && styles.showLeftShadow,
+        showRightShadow && styles.showRightShadow
+      )}
+    >
+      <div className={styles.container} ref={containerRef}>
+        {categories.map((category) => (
+          <button
+            key={category.identifier}
+            onClick={() => onFilterSelect(category.identifier)}
+            className={
+              selectedFilter === category.identifier
+                ? styles.filterSelected
+                : styles.filter
+            }
+            type="button"
+          >
+            <HeartIcon
+              color={selectedFilter === category.identifier ? "white" : "black"}
+            />
+            {category.label}
+          </button>
+        ))}
+      </div>
     </div>
   )
 }

components/TabFilters/tabFilters.module.css

@@ -1,9 +1,49 @@
+.containerWrapper {
+  position: relative;
+  overflow: hidden;
+}
+
 .container {
   display: flex;
   gap: var(--Spacing-x1);
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scrollbar-width: none;
+  position: relative;
+  width: 100%;
+}
+
+.containerWrapper::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--Spacing-x3);
+  pointer-events: none;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  right: 0;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 6%, #fff 90%);
+}
+
+.containerWrapper::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--Spacing-x3);
+  pointer-events: none;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  left: 0;
+  background: linear-gradient(-90deg, rgba(255, 255, 255, 0.1) 6%, #fff 90%);
+}
+
+.showLeftShadow::before,
+.showRightShadow::after {
+  opacity: 1;
 }
 
 .filter,
@@ -17,6 +57,9 @@
   font-family: var(--typography-Body-Regular-fontFamily);
   font-weight: 400;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x1);
 }
 
 .filter {