Show mini nav

dotcom-rendering/fixtures/manual/customSubnav.ts

@@ -0,0 +1,26 @@
+import type { CustomSubnav } from '../../src/types/customSubnav';
+
+export const customSubnav: CustomSubnav = {
+	id: 'us-politics',
+	header: {
+		headerText: 'US politics',
+		copy: '',
+		dotcomPath: '/us-news/us-politics',
+		showHeaderText: true,
+	},
+	format: 'large',
+	links: [
+		{
+			linkText: 'Trump administration',
+			dotcomPath: '/us-news/trump-administration',
+		},
+		{ linkText: 'US Congress', dotcomPath: '/us-news/us-congress' },
+		{ linkText: 'US supreme court', dotcomPath: '/law/us-supreme-court' },
+		{
+			linkText: 'US elections 2024',
+			dotcomPath: '/us-news/us-elections-2024',
+		},
+		{ linkText: 'US immigration', dotcomPath: '/us-news/usimmigration' },
+	],
+	pages: [],
+};

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

@@ -72,6 +72,7 @@ import { TrailText, type TrailTextSize } from './components/TrailText';
 export type Position = 'inner' | 'outer' | 'none';
 
 export type Props = {
+	headerContent?: React.ReactNode;
 	linkTo: string;
 	format: ArticleFormat;
 	/** The format of the article holding the card */
@@ -353,6 +354,7 @@ const decideSublinkPosition = (
 };
 
 export const Card = ({
+	headerContent,
 	linkTo,
 	format,
 	contextFormat,
@@ -818,6 +820,7 @@ export const Card = ({
 
 	return (
 		<CardWrapper
+			topBarPadding={headerContent ? space[1] : undefined}
 			format={format}
 			showTopBarDesktop={showTopBarDesktop}
 			showTopBarMobile={showTopBarMobile}
@@ -828,6 +831,7 @@ export const Card = ({
 					: undefined
 			}
 		>
+			{headerContent}
 			<CardLink
 				linkTo={linkTo}
 				headlineText={headlineText}

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

@@ -13,6 +13,8 @@ type Props = {
 	showTopBarMobile: boolean;
 	containerPalette?: DCRContainerPalette;
 	topBarColour?: string;
+	topBarPadding?: number;
+	isLoopAndInLoopClickTestVariant?: boolean;
 };
 
 const baseCardStyles = css`
@@ -41,7 +43,7 @@ const baseCardStyles = css`
 	text-decoration: none;
 `;
 
-const hoverStyles = css`
+const hoverStyles = (isLoopAndInLoopClickTestVariant: boolean) => css`
 	:hover .media-overlay {
 		width: 100%;
 		height: 100%;
@@ -59,7 +61,12 @@ const hoverStyles = css`
 	*/
 	:has(
 		ul.sublinks:hover,
-		.video-container:not(.cinemagraph):hover,
+		.mini-nav:hover,
+		.video-container:not(
+				${isLoopAndInLoopClickTestVariant
+					? `.cinemagraph, .loop`
+					: `.cinemagraph`}
+			):hover,
 		.slideshow-carousel-footer:hover,
 		.branding-logo:hover
 	) {
@@ -72,23 +79,23 @@ const hoverStyles = css`
 	}
 `;
 
-const topBarStyles = (colour: string) => css`
+const topBarStyles = (colour: string, padding: number) => css`
 	::before {
 		border-top: 1px solid ${colour};
 		content: '';
 		width: 100%;
-		padding-bottom: ${space[2]}px;
+		padding-bottom: ${padding}px;
 		background-color: unset;
 	}
 `;
-const mobileTopBarStyles = (colour: string) => css`
+const mobileTopBarStyles = (colour: string, padding: number) => css`
 	${until.tablet} {
-		${topBarStyles(colour)}
+		${topBarStyles(colour, padding)}
 	}
 `;
-const desktopTopBarStyles = (colour: string) => css`
+const desktopTopBarStyles = (colour: string, padding: number) => css`
 	${from.tablet} {
-		${topBarStyles(colour)}
+		${topBarStyles(colour, padding)}
 	}
 `;
 
@@ -99,16 +106,20 @@ export const CardWrapper = ({
 	showTopBarMobile,
 	containerPalette,
 	topBarColour = palette('--card-border-top'),
+	topBarPadding = space[2],
+	isLoopAndInLoopClickTestVariant,
 }: Props) => {
 	return (
 		<FormatBoundary format={format}>
 			<ContainerOverrides containerPalette={containerPalette}>
 				<div
 					css={[
 						baseCardStyles,
-						hoverStyles,
-						showTopBarDesktop && desktopTopBarStyles(topBarColour),
-						showTopBarMobile && mobileTopBarStyles(topBarColour),
+						hoverStyles(isLoopAndInLoopClickTestVariant === true),
+						showTopBarDesktop &&
+							desktopTopBarStyles(topBarColour, topBarPadding),
+						showTopBarMobile &&
+							mobileTopBarStyles(topBarColour, topBarPadding),
 					]}
 				>
 					{children}

dotcom-rendering/src/components/CardMiniNav.tsx

@@ -0,0 +1,35 @@
+import { css } from '@emotion/react';
+import { getZIndex } from '../lib/getZIndex';
+import { palette } from '../palette';
+import type { DCRFrontCard } from '../types/front';
+import { CustomSubNav } from './Masthead/Titlepiece/CustomSubNav';
+
+type Props = {
+	miniNavData: DCRFrontCard['miniNavData'];
+};
+
+export const CardMiniNav = ({ miniNavData }: Props) => {
+	if (!miniNavData) {
+		return null;
+	}
+
+	return (
+		<div
+			className="mini-nav"
+			css={css`
+				position: relative;
+				z-index: ${getZIndex('card-nested-link')};
+				min-width: 0;
+				--custom-subnav-header-text: ${palette(
+					miniNavData.header.dotcomPath
+						? '--card-kicker-text'
+						: '--card-headline',
+				)};
+				--masthead-nav-link-text: ${palette('--card-headline')};
+				--masthead-nav-link-text-hover: ${palette('--card-headline')};
+			`}
+		>
+			<CustomSubNav customSubNav={miniNavData} renderingPage="card" />
+		</div>
+	);
+};

dotcom-rendering/src/components/FrontCard.miniNav.test.tsx

@@ -0,0 +1,201 @@
+import { render, screen } from '@testing-library/react';
+import { customSubnav } from '../../fixtures/manual/customSubnav';
+import { trails } from '../../fixtures/manual/trails';
+import type { CustomSubnav } from '../types/customSubnav';
+import type { DCRContainerType, DCRFrontCard } from '../types/front';
+import { ConfigProvider } from './ConfigContext';
+import { FrontCard } from './FrontCard';
+
+const miniNavData = {
+	...customSubnav,
+	id: 'football-mini-nav',
+	header: {
+		...customSubnav.header,
+		headerText: 'Football',
+		dotcomPath: '/football',
+		copy: 'Football navigation',
+	},
+	format: 'compact',
+	links: [{ linkText: 'More Football', dotcomPath: '/football' }],
+} satisfies CustomSubnav;
+
+const defaultTrail = {
+	...trails[0],
+	boostLevel: 'boost',
+	showMiniNav: true,
+	miniNavData,
+} satisfies DCRFrontCard;
+
+const renderCard = ({
+	trail = defaultTrail,
+	...props
+}: {
+	trail?: DCRFrontCard;
+	containerType?: DCRContainerType;
+} = {}) =>
+	render(
+		<ConfigProvider
+			value={{
+				renderingTarget: 'Web',
+				darkModeAvailable: false,
+				assetOrigin: '/',
+				editionId: 'UK',
+			}}
+		>
+			<FrontCard
+				trail={trail}
+				containerType="flexible/general"
+				imageLoading="eager"
+				serverTime={1793031866891}
+				{...props}
+			/>
+		</ConfigProvider>,
+	);
+
+const expectMiniNavAbsent = () => {
+	expect(screen.queryByText('Football')).not.toBeInTheDocument();
+	expect(
+		screen.queryByRole('link', { name: 'More Football' }),
+	).not.toBeInTheDocument();
+	expect(screen.getByText(defaultTrail.headline)).toBeInTheDocument();
+};
+
+describe('FrontCard mini navigation', () => {
+	it.each(['boost', 'megaboost', 'gigaboost'] as const)(
+		'renders mini navigation for a %s card',
+		(boostLevel) => {
+			renderCard({ trail: { ...defaultTrail, boostLevel } });
+
+			expect(
+				screen.getByRole('link', { name: 'More Football' }),
+			).toHaveAttribute('href', '/football');
+			expect(screen.getByText(defaultTrail.headline)).toBeInTheDocument();
+		},
+	);
+
+	it.each([undefined, 'default'] as const)(
+		'does not render mini navigation with boost level %s',
+		(boostLevel) => {
+			renderCard({ trail: { ...defaultTrail, boostLevel } });
+
+			expectMiniNavAbsent();
+		},
+	);
+
+	it.each([undefined, 'static/medium/4', 'flexible/special'] as const)(
+		'does not render mini navigation in container %s',
+		(containerType) => {
+			renderCard({ containerType });
+
+			expectMiniNavAbsent();
+		},
+	);
+
+	it('does not render mini navigation when disabled', () => {
+		renderCard({ trail: { ...defaultTrail, showMiniNav: false } });
+
+		expectMiniNavAbsent();
+	});
+
+	it('does not render mini navigation when configuration is missing', () => {
+		renderCard({ trail: { ...defaultTrail, miniNavData: undefined } });
+
+		expectMiniNavAbsent();
+	});
+
+	it('renders a header link without an underline when header text is enabled', () => {
+		renderCard();
+
+		const header = screen.getByRole('link', { name: 'Football' });
+		expect(header).toHaveAttribute('href', '/football');
+		expect(header).toHaveStyle('text-decoration: none');
+	});
+
+	it('renders header text without a link when the header has no path', () => {
+		renderCard({
+			trail: {
+				...defaultTrail,
+				miniNavData: {
+					...miniNavData,
+					header: { ...miniNavData.header, dotcomPath: undefined },
+				},
+			},
+		});
+
+		expect(screen.getByText('Football')).toBeInTheDocument();
+		expect(screen.getByText('Football').closest('a')).toBeNull();
+		expect(screen.getByText('Football').closest('.mini-nav')).toHaveStyle({
+			'--custom-subnav-header-text': 'var(--card-headline)',
+		});
+		expect(
+			screen.getByRole('link', { name: 'More Football' }),
+		).toHaveAttribute('href', '/football');
+	});
+
+	it('hides the header without hiding navigation links when header text is disabled', () => {
+		renderCard({
+			trail: {
+				...defaultTrail,
+				miniNavData: {
+					...miniNavData,
+					header: { ...miniNavData.header, showHeaderText: false },
+				},
+			},
+		});
+
+		expect(screen.queryByText('Football')).not.toBeInTheDocument();
+		expect(
+			screen.getByRole('link', { name: 'More Football' }),
+		).toHaveAttribute('href', '/football');
+		expect(screen.getByText(defaultTrail.headline)).toBeInTheDocument();
+	});
+
+	it('places mini navigation before the card content in a full-width column', () => {
+		renderCard();
+
+		const miniNav = screen
+			.getByRole('link', { name: 'More Football' })
+			.closest('[data-component-id]');
+		const navWrapper = miniNav?.parentElement;
+		const cardWrapper = navWrapper?.parentElement;
+
+		expect(cardWrapper).toHaveStyle({
+			display: 'flex',
+			flexDirection: 'column',
+			width: '100%',
+		});
+		expect(cardWrapper?.firstElementChild).toBe(navWrapper);
+		expect(cardWrapper).toContainElement(
+			screen.getByText(defaultTrail.headline),
+		);
+	});
+
+	it('uses card styling rather than article subnav styling', () => {
+		renderCard();
+
+		const miniNav = screen
+			.getByRole('link', { name: 'More Football' })
+			.closest('[data-component-id]');
+		const list = screen.getByRole('list');
+
+		expect(miniNav).toHaveAttribute('data-rendering-page', 'card');
+		// Article subnavs have a divider (with an 8px gap) and fixed row heights; card mini-navs must not.
+		// (jsdom drops the `border-left` shorthand as it contains a CSS var, so assert on the divider's padding.)
+		expect(list).not.toHaveStyle({ paddingLeft: '8px' });
+		expect(miniNav).not.toHaveStyle({ minHeight: '36px' });
+	});
+
+	it('uses the card kicker colour for the header and headline colour for links', () => {
+		renderCard();
+
+		const miniNav = screen
+			.getByRole('link', { name: 'More Football' })
+			.closest('[data-component-id]');
+
+		expect(miniNav?.parentElement).toHaveStyle({
+			'--custom-subnav-header-text': 'var(--card-kicker-text)',
+			'--masthead-nav-link-text': 'var(--card-headline)',
+			'--masthead-nav-link-text-hover': 'var(--card-headline)',
+		});
+	});
+});