[Fairground 🎡] Card Headline sizing refactor (#12571)

* Refactor fontsizes to use one map * Transform existing sizes into modern size group * Use modern headline sizing
guardian · Oct 24, 2024 · f1bb92c · f1bb92c
1 parent 2162803
commit f1bb92c
Show file tree

Hide file tree

Showing 16 changed files with 263 additions and 356 deletions.
diff --git a/dotcom-rendering/src/components/Byline.tsx b/dotcom-rendering/src/components/Byline.tsx
@@ -29,7 +29,6 @@ const bylineStyles = (size: SmallHeadlineSize, isLabs: boolean) => {
 			if (isLabs) {
 				return css`
 					${textSansItalic24};
-					font-size: 24px;
 					line-height: 24px;
 					${until.desktop} {
 						${textSansItalic24};

diff --git a/dotcom-rendering/src/components/Card/Card.stories.tsx b/dotcom-rendering/src/components/Card/Card.stories.tsx
@@ -30,7 +30,7 @@ const basicCardProps: CardProps = {
 	headlineText: 'Headline text',
 	trailText:
 		'The 29-year-old source behind the biggest intelligence leak in the NSA’s history explains his motives',
-	headlineSize: 'medium',
+	headlineSizes: { desktop: 'xsmall' },
 	kickerText: '',
 	webPublicationDate: new Date(Date.now() - 60 * 60 * 1000).toString(),
 	image: {
@@ -209,34 +209,35 @@ export default {
 	],
 };
 
+/** TODO : Update stories once initial chromatic check has passed on new font size scale */
 export const WithDifferentHeadlineSizes = () => {
 	return (
 		<CardGroup>
 			<CardWrapper>
 				<Card
 					{...basicCardProps}
-					headlineSize="tiny"
+					headlineSizes={{ desktop: 'tiny' }}
 					headlineText="tiny"
 				/>
 			</CardWrapper>
 			<CardWrapper>
 				<Card
 					{...basicCardProps}
-					headlineSize="small"
+					headlineSizes={{ desktop: 'xxsmall' }}
 					headlineText="small"
 				/>
 			</CardWrapper>
 			<CardWrapper>
 				<Card
 					{...basicCardProps}
-					headlineSize="medium"
+					headlineSizes={{ desktop: 'xsmall' }}
 					headlineText="medium"
 				/>
 			</CardWrapper>
 			<CardWrapper>
 				<Card
 					{...basicCardProps}
-					headlineSize="large"
+					headlineSizes={{ desktop: 'small' }}
 					headlineText="large"
 				/>
 			</CardWrapper>
@@ -266,7 +267,7 @@ export const WithExternalLink = () => {
 					{...basicCardProps}
 					imagePositionOnDesktop="right"
 					kickerText="Instagram"
-					headlineSize="huge"
+					headlineSizes={{ desktop: 'medium', tablet: 'small' }}
 					headlineText="Follow The Guardian now"
 					isExternalLink={true}
 				/>
@@ -1103,7 +1104,7 @@ export const WithLetterDesign = () => {
 		<CardWrapper>
 			<Card
 				{...basicCardProps}
-				headlineSize="small"
+				headlineSizes={{ desktop: 'xxsmall' }}
 				headlineText="Culture"
 				format={{
 					display: ArticleDisplay.Standard,
@@ -1122,7 +1123,7 @@ export const WithLetterDesignAndShowQuotedHeadline = () => {
 		<CardWrapper>
 			<Card
 				{...basicCardProps}
-				headlineSize="small"
+				headlineSizes={{ desktop: 'xxsmall' }}
 				headlineText="Culture"
 				showQuotedHeadline={true}
 				format={{
@@ -1372,7 +1373,7 @@ export const DynamoWithSpecialPaletteVariations = () => {
 				containerType="dynamic/package"
 				isDynamo={true}
 				kickerText="Main kicker"
-				headlineSize="huge"
+				headlineSizes={{ desktop: 'medium', tablet: 'small' }}
 				imagePositionOnDesktop="bottom"
 				imagePositionOnMobile="bottom"
 				imageSize="large"

diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -25,7 +25,7 @@ import type { MainMedia } from '../../types/mainMedia';
 import type { OnwardsSource } from '../../types/onwards';
 import { Avatar } from '../Avatar';
 import { CardCommentCount } from '../CardCommentCount.importable';
-import { CardHeadline } from '../CardHeadline';
+import { CardHeadline, type ResponsiveFontSize } from '../CardHeadline';
 import type { AspectRatio, Loading } from '../CardPicture';
 import { CardPicture } from '../CardPicture';
 import { Island } from '../Island';
@@ -62,9 +62,7 @@ export type Props = {
 	format: ArticleFormat;
 	absoluteServerTimes: boolean;
 	headlineText: string;
-	headlineSize?: SmallHeadlineSize;
-	headlineSizeOnMobile?: SmallHeadlineSize;
-	headlineSizeOnTablet?: SmallHeadlineSize;
+	headlineSizes?: ResponsiveFontSize;
 	showQuotedHeadline?: boolean;
 	byline?: string;
 	showByline?: boolean;
@@ -118,8 +116,6 @@ export type Props = {
 	isTagPage?: boolean;
 	/** Alows the consumer to set an aspect ratio on the image of 5:3 or 5:4 */
 	aspectRatio?: AspectRatio;
-	/** Alows the consumer to use a larger font size group for boost styling*/
-	boostedFontSizes?: boolean;
 	index?: number;
 	/** The Splash card in a flexible container gets a different visual treatment to other cards*/
 	isFlexSplash?: boolean;
@@ -267,9 +263,7 @@ export const Card = ({
 	linkTo,
 	format,
 	headlineText,
-	headlineSize,
-	headlineSizeOnMobile,
-	headlineSizeOnTablet,
+	headlineSizes,
 	showQuotedHeadline,
 	byline,
 	showByline,
@@ -313,7 +307,6 @@ export const Card = ({
 	absoluteServerTimes,
 	isTagPage = false,
 	aspectRatio,
-	boostedFontSizes,
 	index = 0,
 	isFlexSplash,
 	showTopBarDesktop = true,
@@ -544,9 +537,7 @@ export const Card = ({
 					<CardHeadline
 						headlineText={headlineText}
 						format={format}
-						size={headlineSize}
-						sizeOnMobile={headlineSizeOnMobile}
-						sizeOnTablet={headlineSizeOnTablet}
+						fontSizes={headlineSizes}
 						showQuotes={showQuotes}
 						kickerText={
 							format.design === ArticleDesign.LiveBlog &&
@@ -561,7 +552,6 @@ export const Card = ({
 						byline={byline}
 						showByline={showByline}
 						isExternalLink={isExternalLink}
-						boostedFontSizes={boostedFontSizes}
 					/>
 					{!isUndefined(starRating) ? (
 						<StarRatingComponent
@@ -665,11 +655,19 @@ export const Card = ({
 												imagePositionOnMobile={
 													imagePositionOnMobile
 												}
+												//** TODO: IMPROVE THIS MAPPING */
 												// image size defaults to small if not provided. However, if the headline size is large or greater, we want to assume the image is also large so that the play icon is correctly sized.
 												imageSize={
-													headlineSize === 'huge' ||
-													headlineSize === 'large' ||
-													headlineSize === 'ginormous'
+													[
+														'small',
+														'medium',
+														'large',
+														'xlarge',
+														'xxlarge',
+													].includes(
+														headlineSizes?.desktop ??
+															'',
+													)
 														? 'large'
 														: imageSize
 												}
@@ -753,9 +751,7 @@ export const Card = ({
 									<CardHeadline
 										headlineText={headlineText}
 										format={format}
-										size={headlineSize}
-										sizeOnMobile={headlineSizeOnMobile}
-										sizeOnTablet={headlineSizeOnTablet}
+										fontSizes={headlineSizes}
 										showQuotes={showQuotes}
 										kickerText={
 											format.design ===
@@ -772,7 +768,6 @@ export const Card = ({
 										byline={byline}
 										showByline={showByline}
 										isExternalLink={isExternalLink}
-										boostedFontSizes={boostedFontSizes}
 									/>
 									{!isUndefined(starRating) ? (
 										<StarRatingComponent

diff --git a/dotcom-rendering/src/components/CardHeadline.stories.tsx b/dotcom-rendering/src/components/CardHeadline.stories.tsx
@@ -9,7 +9,7 @@ import {
 	Pillar,
 } from '../lib/articleFormat';
 import type { DCRContainerPalette } from '../types/front';
-import { CardHeadline } from './CardHeadline';
+import { CardHeadline, type HeadlineSize } from './CardHeadline';
 import { ContainerOverrides } from './ContainerOverrides';
 import { Section } from './Section';
 
@@ -18,12 +18,16 @@ export default {
 	title: 'Components/CardHeadline',
 };
 
-const smallHeadlineSizes: SmallHeadlineSize[] = [
-	'ginormous',
-	'huge',
+const headlineSize: HeadlineSize[] = [
+	'xxxlarge',
+	'xxlarge',
+	'xlarge',
 	'large',
 	'medium',
 	'small',
+	'xsmall',
+	'xxsmall',
+	'xxxsmall',
 	'tiny',
 ];
 
@@ -48,7 +52,7 @@ Article.decorators = [
 
 export const Analysis: StoryObj = ({ format }: StoryProps) => (
 	<>
-		{smallHeadlineSizes.map((size) => (
+		{headlineSize.map((size) => (
 			<Section
 				key={size}
 				fullWidth={true}
@@ -63,7 +67,7 @@ export const Analysis: StoryObj = ({ format }: StoryProps) => (
 						'Unknown'
 					} card headline looks`}
 					format={format}
-					size={size}
+					fontSizes={{ desktop: size }}
 				/>
 			</Section>
 		))}
@@ -126,7 +130,7 @@ Feature.decorators = [
 
 export const Size: StoryObj = ({ format }: StoryProps) => (
 	<>
-		{smallHeadlineSizes.map((size) => (
+		{headlineSize.map((size) => (
 			<Section
 				key={size}
 				fullWidth={true}
@@ -137,7 +141,7 @@ export const Size: StoryObj = ({ format }: StoryProps) => (
 				<CardHeadline
 					headlineText={`This is how a ${size} card headline looks`}
 					format={format}
-					size={size}
+					fontSizes={{ desktop: size }}
 				/>
 			</Section>
 		))}
@@ -156,7 +160,7 @@ Size.decorators = [
 
 export const MobileSize: StoryObj = ({ format }: StoryProps) => (
 	<>
-		{smallHeadlineSizes.map((size) => (
+		{headlineSize.map((size) => (
 			<Section
 				key={size}
 				fullWidth={true}
@@ -167,8 +171,10 @@ export const MobileSize: StoryObj = ({ format }: StoryProps) => (
 				<CardHeadline
 					headlineText={`This is how a mobile ${size} card headline looks`}
 					format={format}
-					size="medium"
-					sizeOnMobile={size}
+					fontSizes={{
+						desktop: 'xsmall',
+						tablet: size,
+					}}
 				/>
 			</Section>
 		))}
@@ -280,7 +286,7 @@ export const Opinion: StoryObj = ({ format }: StoryProps) => (
 			headlineText="This is how small card headline for opinion articles look"
 			format={format}
 			showQuotes={true}
-			size="small"
+			fontSizes={{ desktop: 'xxsmall' }}
 		/>
 	</Section>
 );
@@ -297,7 +303,7 @@ Opinion.decorators = [
 
 export const OpinionKicker: StoryObj = ({ format }: StoryProps) => (
 	<>
-		{smallHeadlineSizes.map((size) => (
+		{headlineSize.map((size) => (
 			<Section
 				key={size}
 				fullWidth={true}
@@ -310,7 +316,7 @@ export const OpinionKicker: StoryObj = ({ format }: StoryProps) => (
 					format={format}
 					showQuotes={true}
 					kickerText="George Monbiot"
-					size={size}
+					fontSizes={{ desktop: size }}
 				/>
 			</Section>
 		))}