allow adaptation of card text colours for feature cards

guardian · Nov 1, 2024 · 4184e3f · 4184e3f
1 parent ca80876
commit 4184e3f
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 46 deletions.
diff --git a/dotcom-rendering/src/components/Byline.tsx b/dotcom-rendering/src/components/Byline.tsx
@@ -15,11 +15,13 @@ type Props = {
 	text: string;
 	isLabs: boolean;
 	size: SmallHeadlineSize;
+	/** Optional override of the standard text colour */
+	colour?: string;
 };
 
-const baseStyles = css`
+const baseStyles = (colour: string) => css`
 	display: block;
-	color: ${palette('--byline')};
+	color: ${colour};
 `;
 
 const bylineStyles = (size: SmallHeadlineSize, isLabs: boolean) => {
@@ -97,6 +99,15 @@ const bylineStyles = (size: SmallHeadlineSize, isLabs: boolean) => {
 	}
 };
 
-export const Byline = ({ text, isLabs, size }: Props) => {
-	return <span css={[baseStyles, bylineStyles(size, isLabs)]}>{text}</span>;
+export const Byline = ({
+	text,
+	isLabs,
+	size,
+	colour = palette('--byline'),
+}: Props) => {
+	return (
+		<span css={[baseStyles(colour), bylineStyles(size, isLabs)]}>
+			{text}
+		</span>
+	);
 };
diff --git a/dotcom-rendering/src/components/Card/components/CardAge.tsx b/dotcom-rendering/src/components/Card/components/CardAge.tsx
@@ -14,22 +14,19 @@ type Props = {
 	showClock?: boolean;
 	isOnwardContent?: boolean;
 	isTagPage: boolean;
+	colour?: string;
 };
 
-const ageStyles = (isOnwardsContent?: boolean) => {
+const ageStyles = (colour: string) => {
 	return css`
 		${textSansBold12};
 
-		color: ${isOnwardsContent
-			? palette('--card-footer-onwards-content')
-			: palette('--card-footer-text')};
+		color: ${colour};
 
 		margin-top: -4px;
 
 		svg {
-			fill: ${isOnwardsContent
-				? palette('--card-footer-onwards-content')
-				: palette('--card-footer-text')};
+			fill: ${colour};
 			margin-bottom: -1px;
 			height: 11px;
 			width: 11px;
@@ -44,13 +41,20 @@ export const CardAge = ({
 	isOnwardContent,
 	absoluteServerTimes,
 	isTagPage,
+	colour = palette('--card-footer-text'),
 }: Props) => {
 	if (timeAgo(new Date(webPublication.date).getTime()) === false) {
 		return null;
 	}
 
 	return (
-		<span css={ageStyles(isOnwardContent)}>
+		<span
+			css={ageStyles(
+				isOnwardContent
+					? palette('--card-footer-onwards-content')
+					: colour,
+			)}
+		>
 			{showClock && <ClockIcon />}
 			{isTagPage ? (
 				<DateTime

diff --git a/dotcom-rendering/src/components/CardCommentCount.importable.tsx b/dotcom-rendering/src/components/CardCommentCount.importable.tsx
@@ -17,22 +17,11 @@ type Props = {
 	discussionId: string;
 	isDynamo?: true;
 	isOnwardContent?: boolean;
+	/** Optional override of default comment count colour */
+	colour?: string;
 };
 
-const getCommentCountColour = (
-	isDynamo?: boolean,
-	isOnwardContent?: boolean,
-) => {
-	if (isDynamo) {
-		return themePalette('--card-trail-text');
-	} else if (isOnwardContent) {
-		return themePalette('--card-footer-onwards-content');
-	} else {
-		return themePalette('--card-footer-text');
-	}
-};
-
-const containerStyles = (isDynamo?: boolean, isOnwardContent?: boolean) => css`
+const containerStyles = (colour: string) => css`
 	display: flex;
 	flex-direction: row;
 	${textSansBold12};
@@ -43,16 +32,16 @@ const containerStyles = (isDynamo?: boolean, isOnwardContent?: boolean) => css`
 	 */
 	line-height: 1.15;
 	margin-top: -4px;
-	color: ${getCommentCountColour(isDynamo, isOnwardContent)};
+	color: ${colour};
 `;
 
-const svgStyles = (isDynamo?: boolean, isOnwardContent?: boolean) => css`
+const svgStyles = (colour: string) => css`
 	svg {
 		margin-bottom: -5px;
 		height: 14px;
 		width: 14px;
 		margin-right: 2px;
-		fill: ${getCommentCountColour(isDynamo, isOnwardContent)};
+		fill: ${colour};
 	}
 `;
 
@@ -78,14 +67,26 @@ export const CardCommentCount = ({
 	discussionId,
 	isDynamo,
 	isOnwardContent,
+	colour = themePalette('--card-footer-text'),
 }: Props) => {
 	const count = useCommentCount(discussionApiUrl, discussionId);
 
 	const { long, short } = formatCount(count);
+
+	const getCommentCountColour = (): string => {
+		if (isDynamo) {
+			return themePalette('--card-trail-text');
+		} else if (isOnwardContent) {
+			return themePalette('--card-footer-onwards-content');
+		} else {
+			return colour;
+		}
+	};
+
 	return (
 		<ContainerOverrides containerPalette={containerPalette}>
-			<div css={containerStyles(isDynamo, isOnwardContent)}>
-				<div css={svgStyles(isDynamo, isOnwardContent)}>
+			<div css={containerStyles(getCommentCountColour())}>
+				<div css={svgStyles(getCommentCountColour())}>
 					<CommentIcon />
 				</div>
 				<div css={longStyles}>{long}</div>

diff --git a/dotcom-rendering/src/components/CardHeadline.tsx b/dotcom-rendering/src/components/CardHeadline.tsx
@@ -39,8 +39,10 @@ type Props = {
 	showByline?: boolean;
 	linkTo?: string; // If provided, the headline is wrapped in a link
 	isExternalLink?: boolean;
-	/** Is the headline inside a Highlights card? */
-	isHighlights?: boolean;
+	/** Optional override of the standard card headline colour */
+	headlineColour?: string;
+	/** Optional override of the standard card kicker colour */
+	kickerColour?: string;
 };
 
 const headlineSize = {
@@ -191,12 +193,9 @@ export const CardHeadline = ({
 	showByline,
 	linkTo,
 	isExternalLink,
-	isHighlights = false,
+	headlineColour = palette('--card-headline'),
+	kickerColour = palette('--card-kicker-text'),
 }: Props) => {
-	const kickerColour = isHighlights
-		? palette('--highlights-card-kicker-text')
-		: palette('--card-kicker-text');
-
 	// The link is only applied directly to the headline if it is a sublink
 	const isSublink = !!linkTo;
 
@@ -231,13 +230,9 @@ export const CardHeadline = ({
 				)}
 				{showQuotes && <QuoteIcon colour={kickerColour} />}
 				<span
-					css={[
-						css`
-							color: ${isHighlights
-								? palette('--highlights-card-headline')
-								: palette('--card-headline')};
-						`,
-					]}
+					css={css`
+						color: ${headlineColour};
+					`}
 					className="show-underline"
 				>
 					{headlineText}
@@ -257,6 +252,7 @@ export const CardHeadline = ({
 					text={byline}
 					isLabs={format.theme === ArticleSpecial.Labs}
 					size={bylineSize}
+					colour={palette('--feature-card-kicker-text')}
 				/>
 			)}
 		</WithLink>

diff --git a/dotcom-rendering/src/components/FeatureCard.tsx b/dotcom-rendering/src/components/FeatureCard.tsx
@@ -166,6 +166,7 @@ const CardAge = ({
 			isOnwardContent={false}
 			absoluteServerTimes={absoluteServerTimes}
 			isTagPage={false}
+			colour={palette('--feature-card-footer-text')}
 		/>
 	);
 };
@@ -207,6 +208,7 @@ const CommentCount = ({
 					discussionApiUrl={discussionApiUrl}
 					discussionId={discussionId}
 					isOnwardContent={false}
+					colour={palette('--feature-card-footer-text')}
 				/>
 			</Island>
 		</Link>
@@ -364,6 +366,12 @@ export const FeatureCard = ({
 										byline={byline}
 										showByline={showByline}
 										isExternalLink={isExternalLink}
+										headlineColour={palette(
+											'--feature-card-headline',
+										)}
+										kickerColour={palette(
+											'--feature-card-kicker-text',
+										)}
 									/>
 
 									{starRating !== undefined ? (

diff --git a/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx b/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx
@@ -164,7 +164,8 @@ export const HighlightsCard = ({
 						kickerText={kickerText}
 						isExternalLink={isExternalLink}
 						showQuotes={showQuotedHeadline}
-						isHighlights={true}
+						headlineColour={palette('--highlights-card-headline')}
+						kickerColour={palette('--highlights-card-kicker-text')}
 					/>
 				</div>
 

diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts
@@ -5759,6 +5759,21 @@ const editorialButtonText: PaletteFunction = (format: ArticleFormat) => {
 	}
 };
 
+const featureCardKickerTextLight: PaletteFunction = ({ theme }) => {
+	switch (theme) {
+		case ArticleSpecial.Labs:
+		case ArticleSpecial.SpecialReport:
+		case ArticleSpecial.SpecialReportAlt:
+			return sourcePalette.neutral[86];
+		case Pillar.News:
+		case Pillar.Opinion:
+		case Pillar.Sport:
+		case Pillar.Culture:
+		case Pillar.Lifestyle:
+			return pillarPalette(theme, 600);
+	}
+};
+
 // ----- Palette ----- //
 
 /**
@@ -6424,6 +6439,18 @@ const paletteColours = {
 		light: explainerAtomBackgroundLight,
 		dark: explainerAtomBackgroundDark,
 	},
+	'--feature-card-footer-text': {
+		light: () => sourcePalette.neutral[86],
+		dark: () => sourcePalette.neutral[20],
+	},
+	'--feature-card-headline': {
+		light: () => sourcePalette.neutral[97],
+		dark: () => sourcePalette.neutral[20],
+	},
+	'--feature-card-kicker-text': {
+		light: featureCardKickerTextLight,
+		dark: () => sourcePalette.neutral[20],
+	},
 	'--feature-card-trail-text': {
 		light: () => sourcePalette.neutral[86],
 		dark: () => sourcePalette.neutral[20],