From 9ca7330d74538998f9b810281032074018626a58 Mon Sep 17 00:00:00 2001
From: "Chuma Mcphoy (We Ahead)" <chuma.mcphoy@scandichotels.com>
Date: Tue, 18 Feb 2025 10:22:44 +0000
Subject: [PATCH] Merged in
 refactor/SW-1679-reset-scroll-state-on-new-filter-selections (pull request
 #1367)

feat(SW-1679): Add key prop to Carousel to reset on filter change

* feat(SW-1679): Enhance SectionHeader and Carousel component in CarouselCards

* Add headingLevel and headingAs props to SectionHeader
* Add key prop to Carousel to reset on filter change


Approved-by: Christian Andolf
---
 components/Blocks/CarouselCards/index.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/components/Blocks/CarouselCards/index.tsx b/components/Blocks/CarouselCards/index.tsx
index f19a615c1..2e1e8456b 100644
--- a/components/Blocks/CarouselCards/index.tsx
+++ b/components/Blocks/CarouselCards/index.tsx
@@ -36,7 +36,12 @@ export default function CarouselCards({ carousel_cards }: CarouselCardsProps) {
 
   return (
     <SectionContainer>
-      <SectionHeader title={heading} link={link} />
+      <SectionHeader
+        title={heading}
+        headingLevel="h2"
+        headingAs="h3"
+        link={link}
+      />
       {filterCategories.length > 0 && activeFilter && (
         <Filters
           categories={filterCategories}
@@ -44,7 +49,7 @@ export default function CarouselCards({ carousel_cards }: CarouselCardsProps) {
           onFilterSelect={setActiveFilter}
         />
       )}
-      <Carousel>
+      <Carousel key={activeFilter}>
         <Carousel.Content>
           {filteredCards.map((card, index) => (
             <Carousel.Item key={`${card.heading}-${index}`}>