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
This commit is contained in:
Chuma Mcphoy (We Ahead)
2025-02-18 10:22:44 +00:00
parent 102381fdeb
commit 9ca7330d74

View File

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