Draft - Add product carousel

[oliverabrahams]

What does this change?

• Extends the functionality of the ScrollableCarousel to incorporate requirements of Product Carousel
• Adds the Product Carousel

Changes to ScrollableCarousel

• Showing cards of a defined width at different breakpoints by defining a default width for the cards as well as width from different breakpoints by adding
  • type FixedSlideWidth = { defaultWidth: number; widthFromBreakpoints: { breakpoint: Breakpoint; width: number }[];}
  • This has been achieved with a discriminated union type with two kinds

type Props =
	| {
kind: CarouselKind.VisibleSlides;
...
visibleCarouselSlidesOnMobile: number;
visibleCarouselSlidesOnTablet: number;
} | {
kind: CarouselKind.FixedWidthSlides;
....
fixedSlideWidth: FixedSlideWidth;
}

• Choosing if to add padding or not. On the fronts padding is needed but for our article designs we do not.

  • isArticle: boolean

• Adds support for subgrid alignment within the cards by adding a new ScrollableCarousel.SubgridItem

Changes to Product Card

• Smooth Scrolling of read more. using element.ScrollIntoView

Why?

Screenshots

[github-actions]

Deploy build 23107 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 23107 of dotcom:rendering-all to CODE
• Deploy parts of build 23107 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Deploy build 266 of dotcom:ab-testing to CODE

All deployment options

• Deploy build 266 of dotcom:ab-testing to CODE
• Deploy parts of build 266 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.