Merged in feat/SW-1443-card-gallery-destination-overview (pull request #1362)

feat(SW-1443): added cardGallery block to destination overview page instead of carousel functionality

* feat(SW-1443): added cardGallery block to destination overview page instead of carousel functionality


Approved-by: Fredrik Thorsson

components/Blocks/CarouselCards/Filters/filters.module.css

@@ -1,32 +0,0 @@
-.container {
-  display: flex;
-  gap: var(--Spacing-x1);
-  overflow-x: auto;
-  scroll-snap-type: x mandatory;
-  scrollbar-width: none;
-}
-
-.filter,
-.filterSelected {
-  border-radius: var(--Corner-radius-Rounded);
-  padding: var(--Spacing-x1) var(--Spacing-x2);
-  transition: all 0.2s ease-in-out;
-  scroll-snap-align: start;
-  flex-shrink: 0;
-  font-size: var(--typography-Caption-Bold-Mobile-fontSize);
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-weight: 400;
-  cursor: pointer;
-}
-
-.filter {
-  color: var(--UI-Text-High-contrast);
-  background: transparent;
-  border: 1px solid var(--UI-Input-Controls-Border-Hover);
-}
-
-.filterSelected {
-  color: var(--Base-Text-Inverted);
-  background: var(--Base-Button-Tertiary-Fill-Normal);
-  border: 1px solid transparent;
-}

components/Blocks/CarouselCards/Filters/index.tsx

@@ -1,36 +0,0 @@
-"use client"
-
-import styles from "./filters.module.css"
-
-import type { CarouselCardFilter } from "@/types/enums/carouselCards"
-
-interface FiltersProps {
-  categories: Array<{ identifier: CarouselCardFilter; label: string }>
-  selectedFilter: CarouselCardFilter
-  onFilterSelect: (filter: CarouselCardFilter) => void
-}
-
-export default function Filters({
-  categories,
-  selectedFilter,
-  onFilterSelect,
-}: FiltersProps) {
-  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>
-  )
-}

components/Blocks/CarouselCards/index.tsx

@@ -7,8 +7,7 @@ import ContentCard from "@/components/ContentCard"
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
-
-import Filters from "./Filters"
+import TabFilters from "@/components/TabFilters"
 
 import styles from "./carouselCards.module.css"
 
@@ -43,7 +42,7 @@ export default function CarouselCards({ carousel_cards }: CarouselCardsProps) {
         link={link}
       />
       {filterCategories.length > 0 && activeFilter && (
-        <Filters
+        <TabFilters
           categories={filterCategories}
           selectedFilter={activeFilter}
           onFilterSelect={setActiveFilter}