Merge pull request #13670 from guardian/doml/slideshow-box

Give slideshow navigation background colour

Author: domlander

dotcom-rendering/src/components/Card/Card.tsx

@@ -856,6 +856,9 @@ export const Card = ({
 										<SlideshowCarousel
 											images={media.slideshowImages}
 											imageSize={imageSize}
+											hasNavigationBackgroundColour={
+												!!hasSublinks
+											}
 										/>
 									</Island>
 								</div>

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

@@ -409,6 +409,45 @@ export const DefaultSplashWithLiveUpdates: Story = {
 	},
 };
 
+const slideshowCard = {
+	...liveUpdatesCard,
+	mainMedia: undefined,
+	slideshowImages: [
+		{
+			imageSrc:
+				'https://media.guim.co.uk/68333e95233d9c68b32b56c12205c5ded94dfbf8/0_117_4791_2696/1000.jpg',
+		},
+		{
+			imageSrc:
+				'https://media.guim.co.uk/77e960298d4339e047eac5c1986d0f3214f6285d/419_447_4772_2863/master/4772.jpg',
+		},
+		{
+			imageSrc:
+				'https://media.guim.co.uk/df5aea6391e21b5a5d2d25fd9aad81d497f99d42/0_45_3062_1837/master/3062.jpg',
+		},
+		{
+			imageSrc:
+				'https://media.guim.co.uk/5ebec1a8d662f0da39887dae16e4b2720379246e/0_0_5000_3000/master/5000.jpg',
+		},
+		{
+			imageSrc:
+				'https://media.guim.co.uk/77e960298d4339e047eac5c1986d0f3214f6285d/419_447_4772_2863/master/4772.jpg',
+		},
+	],
+} satisfies DCRFrontCard;
+
+export const DefaultSplashWithLiveUpdatesAndSlideshow: Story = {
+	name: 'Standard splash with live updates and slideshow',
+	args: {
+		frontSectionTitle: 'Standard splash with live updates and slideshow',
+		groupedTrails: {
+			...defaultGroupedTrails,
+
+			splash: [{ ...slideshowCard }],
+		},
+	},
+};
+
 export const BoostedSplashWithLiveUpdates: Story = {
 	name: 'Boosted splash with live updates',
 	args: {

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

@@ -3,6 +3,7 @@ import {
 	from,
 	space,
 	textSansBold12,
+	until,
 	width,
 } from '@guardian/source/foundations';
 import type { ThemeButton } from '@guardian/source/react-components';
@@ -69,10 +70,16 @@ const captionStyles = css`
 	padding: ${space[10]}px ${space[2]}px ${space[2]}px;
 `;
 
-const navigationStyles = css`
+const navigationStyles = (hasBackgroundColour: boolean) => css`
 	display: flex;
 	align-items: center;
-	margin-top: ${space[2]}px;
+	padding-top: ${space[2]}px;
+
+	${until.tablet} {
+		background-color: ${hasBackgroundColour
+			? palette('--slideshow-navigation-background')
+			: 'transparent'};
+	}
 `;
 
 const buttonStyles = css`
@@ -97,13 +104,17 @@ const scrollingDotStyles = css`
 	}
 `;
 
+type Props = {
+	images: readonly DCRSlideshowImage[];
+	imageSize: ImageSizeType;
+	hasNavigationBackgroundColour: boolean;
+};
+
 export const SlideshowCarousel = ({
 	images,
 	imageSize,
-}: {
-	images: readonly DCRSlideshowImage[];
-	imageSize: ImageSizeType;
-}) => {
+	hasNavigationBackgroundColour,
+}: Props) => {
 	const carouselRef = useRef<HTMLUListElement | null>(null);
 	const [previousButtonEnabled, setPreviousButtonEnabled] = useState(false);
 	const [nextButtonEnabled, setNextButtonEnabled] = useState(true);
@@ -211,7 +222,7 @@ export const SlideshowCarousel = ({
 			</ul>
 
 			{slideshowImageCount > 1 && (
-				<div css={navigationStyles}>
+				<div css={navigationStyles(hasNavigationBackgroundColour)}>
 					<div css={scrollingDotStyles}>
 						<SlideshowCarouselScrollingDots
 							total={slideshowImageCount}

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

@@ -90,6 +90,7 @@ const meta = {
 	args: {
 		images,
 		imageSize: 'medium',
+		hasNavigationBackgroundColour: false,
 	},
 	render: (args) => (
 		<Wrapper>

dotcom-rendering/src/paletteDeclarations.ts

@@ -7143,6 +7143,14 @@ const paletteColours = {
 		light: slideshowCaptionLight,
 		dark: slideshowCaptionDark,
 	},
+	/**
+	 * The background colour should match the background colour of the
+	 * sublinks when there is at least one sublink present.
+	 */
+	'--slideshow-navigation-background': {
+		light: cardSublinksBackgroundLight,
+		dark: cardSublinksBackgroundDark,
+	},
 	'--slideshow-pagination-dot': {
 		light: slideshowPaginationDotLight,
 		dark: slideshowPaginationDotDark,