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

Why?

Screenshots

[github-actions]

Deploy build 23664 of dotcom:rendering-all to CODE

All deployment options

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

---

From guardian/actions-riff-raff.

[github-actions]

Deploy build 390 of dotcom:ab-testing to CODE

All deployment options

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

---

From guardian/actions-riff-raff.

[github-actions]

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

[charleycampbell]

Looks good to me just one clarification question! I like the refactoring of the scrollable carousel - have we tested the carousels on the Fronts to check they haven't changed/broken?

[oliverabrahams]

Looks good to me just one clarification question! I like the refactoring of the scrollable carousel - have we tested the carousels on the Fronts to check they haven't changed/broken?

I have not tested this, I will put it on code before merging. I was assuming that because there are no changes in chromatic it is probably fine but will test in CODE also

[arelra]

Could we squash the commits where possible please. It would be great if each commit describes an atomic change and hence makes the history easier to read.

[jamesmockett]

I guess none is a useful option to have, although it's maybe not required here as shouldStackCards is not set so the carousel will always be on a single row meaning you don't need to worry about the row gap.

[oliverabrahams]

Yea this is also helpful for when we don't want this set. Here where we are using a subgrid we then don't have to override it.

[jamesmockett]

Probably outside the scope of this PR, but I wonder if it would make sense to create a separate fronts carousel component that imports the base carousel and applies the necessary fronts specific styles? (Moving them from here.) That would, hopefully, leave a simpler generic carousel that could be more easily reused elsewhere.

[oliverabrahams]

See comment below - Interested what you both think

[SiAdcock]

Rather than passing this as a prop, have you considered exposing separate Carousel components that wrap a base carousel? This keeps the base carousel relatively clean and simple, while extracting and isolating the fancier logic and styles into the kinds of carousels that need them.

[oliverabrahams]

Yea I did consider doing this, it was quite hard to work out what a base was for some things. For the fronts carousel there is a 32px peeping card but for our designs we have just a fixed width of cards at different breakpoints, the API for one doesn't really work for the other. There isn't an obvious base between these two, you could override one with the other by choosing one as the base but that seems worse than having 2 kinds IMO. This maybe because we don't have a generic one in the DS. Happy to chat about it though if you disagree.

[SiAdcock]

Yeah, my question came from a position of ignorance, I don't know how easy it would be to achieve. My thinking was actually to define a generic carousel (the elusive "DS carousel" you mention), and then use this as the base for a fronts-specific carousel and a product-specific carousel. It would be easier to do this now that we have two different carousel designs to work from and identify what carousel features we feel ought to be generic