Add an interactive test to storybook. Add a section ID to the product carousel. and add a section for the navigation button portal to hydrate

Author: oliverabrahams

dotcom-rendering/src/components/CarouselNavigationButtons.tsx

@@ -7,7 +7,7 @@ import {
 	type ThemeButton,
 } from '@guardian/source/react-components';
 import { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
+import { createPortal } from 'react-dom';
 import { palette } from '../palette';
 
 type CarouselNavigationProps = {
@@ -84,7 +84,7 @@ export const CarouselNavigationButtons = ({
 
 	if (!portalNode) return null;
 
-	return ReactDOM.createPortal(
+	return createPortal(
 		<div
 			aria-controls="carousel"
 			aria-label="carousel arrows"
@@ -101,6 +101,7 @@ export const CarouselNavigationButtons = ({
 				}
 				size="small"
 				disabled={!previousButtonEnabled}
+				data-testid="carousel-back-button"
 				aria-label="previous"
 				value="previous"
 				data-link-name={dataLinkNamePreviousButton}
@@ -109,6 +110,7 @@ export const CarouselNavigationButtons = ({
 			<Button
 				hideLabel={true}
 				iconSide="left"
+				data-testid="carousel-forward-button"
 				icon={<SvgChevronRightSingle />}
 				onClick={onClickNextButton}
 				priority="tertiary"

dotcom-rendering/src/components/ScrollableCarousel.tsx

@@ -312,7 +312,7 @@ export const ScrollableCarousel = ({
 	const showNavigation =
 		kind === CarouselKind.VisibleSlides
 			? carouselLength > visibleCarouselSlidesOnTablet
-			: false;
+			: true;
 
 	const scrollTo = (direction: 'left' | 'right') => {
 		if (!carouselRef.current) return;

dotcom-rendering/src/components/ScrollableProduct.importable.tsx

@@ -1,8 +1,20 @@
+import { css } from '@emotion/react';
+import { palette, space } from '@guardian/source/foundations';
 import type { ArticleFormat } from '../lib/articleFormat';
 import type { ProductBlockElement } from '../types/content';
 import { ProductCarouselCard } from './ProductCarouselCard';
 import type { FixedSlideWidth } from './ScrollableCarousel';
 import { CarouselKind, ScrollableCarousel } from './ScrollableCarousel';
+import { Subheading } from './Subheading';
+
+const carouselHeader = css`
+	padding-bottom: 10px;
+	padding-top: ${space[6]}px;
+	border-bottom: 1px solid ${palette.neutral[86]};
+	margin-bottom: 10px;
+	display: flex;
+	justify-content: space-between;
+`;
 
 export const ScrollableProduct = ({
 	products,
@@ -19,21 +31,37 @@ export const ScrollableProduct = ({
 		],
 	};
 	return (
-		<ScrollableCarousel
-			isArticle={true}
-			kind={CarouselKind.FixedWidthSlides}
-			carouselLength={products.length}
-			fixedSlideWidth={fixedCardWidth}
-			gapSizes={{ row: 'none', column: 'large' }}
-		>
-			{products.map((product: ProductBlockElement) => (
-				<ScrollableCarousel.SubgridItem
-					key={product.productCtas[0]?.url ?? product.elementId}
-					subgridRows={4}
+		<>
+			<div css={carouselHeader}>
+				<Subheading
+					format={format}
+					id={'at-a-glance'}
+					topPadding={false}
 				>
-					<ProductCarouselCard product={product} format={format} />
-				</ScrollableCarousel.SubgridItem>
-			))}
-		</ScrollableCarousel>
+					At a glance
+				</Subheading>
+				<div id={'at-a-glance-carousel-navigation'}></div>
+			</div>
+			<ScrollableCarousel
+				isArticle={true}
+				kind={CarouselKind.FixedWidthSlides}
+				carouselLength={products.length}
+				fixedSlideWidth={fixedCardWidth}
+				gapSizes={{ row: 'none', column: 'large' }}
+				sectionId={'at-a-glance'}
+			>
+				{products.map((product: ProductBlockElement) => (
+					<ScrollableCarousel.SubgridItem
+						key={product.productCtas[0]?.url ?? product.elementId}
+						subgridRows={4}
+					>
+						<ProductCarouselCard
+							product={product}
+							format={format}
+						/>
+					</ScrollableCarousel.SubgridItem>
+				))}
+			</ScrollableCarousel>
+		</>
 	);
 };

dotcom-rendering/src/components/ScrollableProducts.stories.tsx

@@ -15,19 +15,39 @@ const meta = {
 				breakpoints.tablet,
 				breakpoints.wide,
 			],
+			// Because this component uses react.createPortal
+			// we delay to give the portals time to hydrate
+			delay: 500,
 		},
 	},
 	args: {
 		products: [
-			{ ...exampleProduct, h2Id: 'product' },
 			{
 				...exampleProduct,
+				primaryHeadingHtml: '<em>Product 0</em>',
+				h2Id: 'product',
+			},
+			{
+				...exampleProduct,
+				primaryHeadingHtml: '<em>Product 1</em>',
 				h2Id: 'product-1',
 				productName: 'Lorem ipsum dolor sit amet',
 			},
-			{ ...exampleProduct, h2Id: 'product-2' },
-			{ ...exampleProduct, h2Id: 'product-3' },
-			{ ...exampleProduct, h2Id: 'product-4' },
+			{
+				...exampleProduct,
+				primaryHeadingHtml: '<em>Product 2</em>',
+				h2Id: 'product-2',
+			},
+			{
+				...exampleProduct,
+				primaryHeadingHtml: '<em>Product 3</em>',
+				h2Id: 'product-3',
+			},
+			{
+				...exampleProduct,
+				primaryHeadingHtml: '<em>Product 4</em>',
+				h2Id: 'product-4',
+			},
 		],
 		format: {
 			design: ArticleDesign.Review,
@@ -78,3 +98,20 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const With5Cards = {} satisfies Story;
+
+export const ClickForwardArrow = {
+	play: async ({ canvas, userEvent }) => {
+		await userEvent.click(canvas.getByTestId('carousel-forward-button'));
+	},
+} satisfies Story;
+
+export const ClickForwardTwiceAndBackOnce = {
+	play: async ({ canvas, userEvent }) => {
+		const user = userEvent.setup({
+			delay: 500, // delay between each interaction
+		});
+		await user.click(canvas.getByTestId('carousel-forward-button'));
+		await user.click(canvas.getByTestId('carousel-forward-button'));
+		await user.click(canvas.getByTestId('carousel-back-button'));
+	},
+} satisfies Story;