From b6bf1b3dedb6da6cb5f91881cd72e2dfb4594243 Mon Sep 17 00:00:00 2001
From: "Chuma Mcphoy (We Ahead)" <chuma.mcphoy@scandichotels.com>
Date: Wed, 19 Feb 2025 12:46:22 +0000
Subject: [PATCH] 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       |  2 +-
 components/Carousel/index.tsx                 |  3 +-
 components/ContentCard/contentCard.module.css |  6 ---
 .../EnterDetails/SectionAccordion/index.tsx   |  1 -
 components/TabFilters/index.tsx               | 49 +++++++++++++------
 components/TabFilters/tabFilters.module.css   | 43 ++++++++++++++++
 6 files changed, 80 insertions(+), 24 deletions(-)

diff --git a/components/Carousel/carousel.module.css b/components/Carousel/carousel.module.css
index cf9612a42..ea2f3cc05 100644
--- a/components/Carousel/carousel.module.css
+++ b/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);
 }
 
diff --git a/components/Carousel/index.tsx b/components/Carousel/index.tsx
index 5c9b38c61..2127c8308 100644
--- a/components/Carousel/index.tsx
+++ b/components/Carousel/index.tsx
@@ -23,8 +23,9 @@ function Carousel({
 }: CarouselProps) {
   const [carouselRef, api] = useEmblaCarousel(
     {
-      ...opts,
+      containScroll: "trimSnaps",
       axis: "x",
+      ...opts,
     },
     plugins
   )
diff --git a/components/ContentCard/contentCard.module.css b/components/ContentCard/contentCard.module.css
index db568787c..7eed58651 100644
--- a/components/ContentCard/contentCard.module.css
+++ b/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;
-  }
-}
diff --git a/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx b/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx
index e6c607f12..2979d6018 100644
--- a/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx
+++ b/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"
diff --git a/components/TabFilters/index.tsx b/components/TabFilters/index.tsx
index ae3b6fe68..7d6e906e2 100644
--- a/components/TabFilters/index.tsx
+++ b/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>
   )
 }
diff --git a/components/TabFilters/tabFilters.module.css b/components/TabFilters/tabFilters.module.css
index 1a6c3fac4..e07f896c8 100644
--- a/components/TabFilters/tabFilters.module.css
+++ b/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 {