Add count to product carousel

dotcom-rendering/src/components/CarouselCount.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+export const CarouselCount = ({
+	sectionId,
+	count,
+	total,
+}: {
+	sectionId: string;
+	count: number;
+	total: number;
+}) => {
+	const [portalNode, setPortalNode] = useState<HTMLElement | null>(null);
+
+	useEffect(() => {
+		const node = document.getElementById(`${sectionId}-carousel-count`);
+		if (!node) {
+			console.warn(
+				`Portal node with ID "${sectionId}-carousel-count" not found.`,
+			);
+		}
+		setPortalNode(node);
+	}, [sectionId]);
+
+	if (!portalNode) return null;
+
+	return createPortal(
+		<div>
+			{count} of {total}
+		</div>,
+		portalNode,
+	);
+};

dotcom-rendering/src/components/CarouselNavigationButtons.tsx

@@ -19,6 +19,7 @@ type CarouselNavigationProps = {
 	dataLinkNamePreviousButton: string;
 	/** Unique identifier for the carousel navigation container. */
 	sectionId: string;
+	showFromTabletOnly?: boolean;
 };
 
 const themeButton: Partial<ThemeButton> = {
@@ -33,7 +34,7 @@ const themeButtonDisabled: Partial<ThemeButton> = {
 	backgroundTertiaryHover: 'transparent',
 };
 
-const buttonStyles = css`
+const showFromTablet = css`
 	display: none;
 	${from.tablet} {
 		display: flex;
@@ -42,6 +43,15 @@ const buttonStyles = css`
 	}
 `;
 
+/**
+ * In the Articles we will control the visibility in the portal node
+ */
+const showAlways = css`
+	display: flex;
+	gap: ${space[1]}px;
+	margin-left: auto;
+`;
+
 /**
  *
  * Navigation buttons for a carousel-like component.
@@ -68,6 +78,7 @@ export const CarouselNavigationButtons = ({
 	dataLinkNamePreviousButton,
 	dataLinkNameNextButton,
 	sectionId,
+	showFromTabletOnly = true,
 }: CarouselNavigationProps) => {
 	const [portalNode, setPortalNode] = useState<HTMLElement | null>(null);
 	useEffect(() => {
@@ -88,7 +99,7 @@ export const CarouselNavigationButtons = ({
 		<div
 			aria-controls="carousel"
 			aria-label="carousel arrows"
-			css={buttonStyles}
+			css={showFromTabletOnly ? showFromTablet : showAlways}
 		>
 			<Button
 				hideLabel={true}

dotcom-rendering/src/components/ScrollableCarousel.tsx

@@ -2,9 +2,10 @@ import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 import type { Breakpoint } from '@guardian/source/foundations';
 import { from, space, until } from '@guardian/source/foundations';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { nestedOphanComponents } from '../lib/ophan-helpers';
 import { palette } from '../palette';
+import { CarouselCount } from './CarouselCount';
 import { CarouselNavigationButtons } from './CarouselNavigationButtons';
 
 type GapSize = 'small' | 'medium' | 'large' | 'none';
@@ -308,6 +309,7 @@ export const ScrollableCarousel = ({
 	const carouselRef = useRef<HTMLOListElement | null>(null);
 	const [previousButtonEnabled, setPreviousButtonEnabled] = useState(false);
 	const [nextButtonEnabled, setNextButtonEnabled] = useState(true);
+	const [cardCount, setCardCount] = useState(1);
 
 	const showNavigation =
 		kind === CarouselKind.VisibleSlides
@@ -345,11 +347,29 @@ export const ScrollableCarousel = ({
 		const maxScrollLeft =
 			carouselElement.scrollWidth - carouselElement.clientWidth;
 		const cardWidth = carouselElement.querySelector('li')?.offsetWidth ?? 0;
-
 		setPreviousButtonEnabled(scrollLeft > cardWidth / 2);
 		setNextButtonEnabled(scrollLeft < maxScrollLeft - cardWidth / 2);
 	};
 
+	/**
+	 * Update the count of the first card / how far scrolled the carousel is
+	 *
+	 * This function checks how far along the carousel is scrolled and then
+	 * updates the state of cardCount. we use the half of a card because at
+	 * this scroll amount the carousel will snap to that card.
+	 */
+	const updateCardCountOnScroll = useCallback(() => {
+		const carouselElement = carouselRef.current;
+		if (!carouselElement) return;
+		const cardWidth = carouselElement.querySelector('li')?.offsetWidth ?? 0;
+		const count = Math.ceil(
+			(carouselElement.scrollLeft + cardWidth / 2) / cardWidth,
+		);
+		if (count !== cardCount) {
+			setCardCount(count);
+		}
+	}, [cardCount]);
+
 	/**
 	 * Throttle scroll events to optimise performance. As we're only using this
 	 * to toggle button state as the carousel is scrolled we don't need to
@@ -431,7 +451,6 @@ export const ScrollableCarousel = ({
 			'scroll',
 			throttleEvent(updateButtonVisibilityOnScroll),
 		);
-
 		return () => {
 			carouselElement.removeEventListener(
 				'scroll',
@@ -440,6 +459,20 @@ export const ScrollableCarousel = ({
 		};
 	}, []);
 
+	useEffect(() => {
+		const carouselElement = carouselRef.current;
+		if (!carouselElement) return;
+		if (!isArticle) return;
+
+		carouselElement.addEventListener('scroll', updateCardCountOnScroll);
+		return () => {
+			carouselElement.removeEventListener(
+				'scroll',
+				updateCardCountOnScroll,
+			);
+		};
+	}, [isArticle, updateCardCountOnScroll]);
+
 	return (
 		<div css={[baseContainerStyles, !isArticle && frontContainerStyles]}>
 			<ol
@@ -470,6 +503,7 @@ export const ScrollableCarousel = ({
 
 			{showNavigation && (
 				<CarouselNavigationButtons
+					showFromTabletOnly={!isArticle}
 					previousButtonEnabled={previousButtonEnabled}
 					nextButtonEnabled={nextButtonEnabled}
 					onClickPreviousButton={() => scrollTo('left')}
@@ -485,6 +519,13 @@ export const ScrollableCarousel = ({
 					)}
 				/>
 			)}
+			{isArticle && (
+				<CarouselCount
+					sectionId={sectionId ?? ''}
+					count={cardCount}
+					total={carouselLength}
+				/>
+			)}
 		</div>
 	);
 };

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { palette, space } from '@guardian/source/foundations';
+import { from, palette, space, textSans14 } from '@guardian/source/foundations';
 import type { ArticleFormat } from '../lib/articleFormat';
 import type { ProductBlockElement } from '../types/content';
 import { ProductCarouselCard } from './ProductCarouselCard';
@@ -14,6 +14,22 @@ const carouselHeader = css`
 	margin-bottom: 10px;
 	display: flex;
 	justify-content: space-between;
+	align-items: center;
+`;
+
+const navigation = css`
+	display: none;
+	${from.phablet} {
+		display: block;
+	}
+`;
+const count = css`
+	${textSans14};
+	color: ${palette.neutral[46]};
+	display: block;
+	${from.phablet} {
+		display: none;
+	}
 `;
 
 export const ScrollableProduct = ({
@@ -40,7 +56,11 @@ export const ScrollableProduct = ({
 				>
 					At a glance
 				</Subheading>
-				<div id={'at-a-glance-carousel-navigation'}></div>
+				<div
+					css={navigation}
+					id={'at-a-glance-carousel-navigation'}
+				></div>
+				<div css={count} id={'at-a-glance-carousel-count'}></div>
 			</div>
 			<ScrollableCarousel
 				isArticle={true}