Update typography to use presets in DCR where direct mapping is avail…

…able (#11266) Update directly mapped typography from API to use the new presets. --------- Co-authored-by: James Mockett <[email protected]>
guardian · Apr 29, 2024 · 14bbf23 · 14bbf23
1 parent 6e4fc1b
commit 14bbf23
Show file tree

Hide file tree

Showing 203 changed files with 1,156 additions and 841 deletions.
diff --git a/dotcom-rendering/.storybook/decorators/splitThemeDecorator.tsx b/dotcom-rendering/.storybook/decorators/splitThemeDecorator.tsx
@@ -10,7 +10,8 @@ import {
 import {
 	palette as sourcePalette,
 	space,
-	textSans,
+	textSans17,
+	textSansBold20,
 } from '@guardian/source-foundations';
 import { Decorator } from '@storybook/react';
 import { storybookPaletteDeclarations as paletteDeclarations } from '../mocks/paletteDeclarations';
@@ -20,7 +21,7 @@ interface Orientation {
 }
 
 const headerCss = css`
-	${textSans.large({ fontWeight: 'bold' })}
+	${textSansBold20};
 	text-align: center;
 	padding: ${space[2]}px;
 `;
@@ -33,7 +34,7 @@ const styles = css`
 const FormatHeading = ({ format }: { format: ArticleFormat }) => (
 	<h3
 		css={css`
-			${textSans.medium()}
+			${textSans17};
 			text-align: center;
 			padding: ${space[1]}px;
 			opacity: 0.75;

diff --git a/dotcom-rendering/.storybook/decorators/themeDecorator.tsx b/dotcom-rendering/.storybook/decorators/themeDecorator.tsx
@@ -5,7 +5,7 @@ import { storybookPaletteDeclarations as paletteDeclarations } from '../mocks/pa
 import {
 	palette as sourcePalette,
 	space,
-	textSans,
+	textSans15,
 } from '@guardian/source-foundations';
 import { Decorator, type StrictArgs } from '@storybook/react';
 import { ArticleFormat } from '@guardian/libs';
@@ -53,7 +53,7 @@ export const browserThemeDecorator =
 		<>
 			<div
 				css={css`
-					${textSans.small()}
+					${textSans15};
 					background-color: ${sourcePalette.brand[400]};
 					color: ${sourcePalette.neutral[100]};
 					padding: ${space[2]}px;

diff --git a/dotcom-rendering/src/components/Accordion.stories.tsx b/dotcom-rendering/src/components/Accordion.stories.tsx
@@ -1,7 +1,12 @@
 import { css } from '@emotion/react';
 import type { SerializedStyles } from '@emotion/react';
 import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs';
-import { body, breakpoints, from, space } from '@guardian/source-foundations';
+import {
+	article17,
+	breakpoints,
+	from,
+	space,
+} from '@guardian/source-foundations';
 import type { Meta, StoryObj } from '@storybook/react';
 import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
 import { Accordion as AccordionComponent } from './Accordion';
@@ -24,7 +29,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const textStyle = css`
-	${body.medium({ lineHeight: 'loose' })};
+	${article17};
 	margin-bottom: ${space[3]}px;
 `;
 

diff --git a/dotcom-rendering/src/components/Accordion.tsx b/dotcom-rendering/src/components/Accordion.tsx
@@ -1,6 +1,11 @@
 import { css } from '@emotion/react';
 import type { SerializedStyles } from '@emotion/react';
-import { focusHalo, from, headline, space } from '@guardian/source-foundations';
+import {
+	focusHalo,
+	from,
+	headlineBold20,
+	space,
+} from '@guardian/source-foundations';
 import {
 	SvgChevronDownSingle,
 	SvgChevronUpSingle,
@@ -50,7 +55,7 @@ const titleRowStyles = css`
 `;
 
 const titleStyle = css`
-	${headline.xxsmall({ fontWeight: 'bold', lineHeight: 'tight' })};
+	${headlineBold20};
 	color: ${palette('--accordion-title')};
 `;
 

diff --git a/dotcom-rendering/src/components/AdBlockAsk.importable.tsx b/dotcom-rendering/src/components/AdBlockAsk.importable.tsx
@@ -1,6 +1,12 @@
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
-import { headline, palette, textSans } from '@guardian/source-foundations';
+import {
+	headlineMedium24,
+	palette,
+	textSans14,
+	textSans15,
+	textSans17,
+} from '@guardian/source-foundations';
 import { assertUnreachable } from '../lib/assert-unreachable';
 import { useAdblockAsk } from '../lib/useAdBlockAsk';
 import ArrowRightIcon from '../static/icons/arrow-right.svg';
@@ -13,7 +19,7 @@ const linkStyles = css`
 	border-radius: 16px;
 	box-sizing: border-box;
 	color: ${palette.neutral[7]};
-	${textSans.medium()};
+	${textSans17};
 	font-weight: 700;
 	text-decoration: none;
 
@@ -40,20 +46,20 @@ const linkStyles = css`
 `;
 
 const adBlockAskH2Styles = css`
-	${headline.xsmall()}
+	${headlineMedium24}
 	color: ${palette.brandAlt[400]};
 	font-weight: bold;
 `;
 
 const adBlockAskTextStyles: Record<AdBlockAskSize, SerializedStyles> = {
 	leaderboard: css`
 		margin-top: 8px;
-		${textSans.xsmall()};
+		${textSans14};
 		color: ${palette.neutral[100]};
 	`,
 	mpu: css`
 		margin-top: 16px;
-		${textSans.small()};
+		${textSans15};
 		color: ${palette.neutral[100]};
 	`,
 };

diff --git a/dotcom-rendering/src/components/AdSlot.apps.tsx b/dotcom-rendering/src/components/AdSlot.apps.tsx
@@ -1,5 +1,10 @@
 import { css } from '@emotion/react';
-import { remSpace, textSans, until } from '@guardian/source-foundations';
+import {
+	remSpace,
+	textSans14,
+	textSans15,
+	until,
+} from '@guardian/source-foundations';
 import { Button } from '@guardian/source-react-components';
 import { forwardRef } from 'react';
 import { palette } from '../palette';
@@ -23,7 +28,7 @@ const styles = css`
 `;
 
 const adLabelsStyles = css`
-	${textSans.xsmall()}
+	${textSans14}
 	padding: ${remSpace[3]};
 	float: left;
 
@@ -62,7 +67,7 @@ const supportBannerStyles = css`
 	background-color: ${palette('--ad-support-banner-background')};
 
 	p {
-		${textSans.small()};
+		${textSans15};
 		color: ${palette('--ad-support-banner-text')};
 		font-weight: bold;
 		margin-top: 0;

diff --git a/dotcom-rendering/src/components/AdSlot.web.tsx b/dotcom-rendering/src/components/AdSlot.web.tsx
@@ -8,7 +8,7 @@ import {
 	from,
 	palette,
 	space,
-	textSans,
+	textSans12,
 	until,
 } from '@guardian/source-foundations';
 import { Hide } from '@guardian/source-react-components';
@@ -66,7 +66,7 @@ type Props = DefaultProps & (RightProps | InlineProps | RemainingProps);
 const labelHeight = constants.AD_LABEL_HEIGHT;
 
 const individualLabelCSS = css`
-	${textSans.xxsmall()};
+	${textSans12};
 	height: ${labelHeight}px;
 	max-height: ${labelHeight}px;
 	background-color: ${palette.neutral[97]};
@@ -118,7 +118,7 @@ export const labelStyles = css`
 	}
 
 	.ad-slot__adtest-cookie-clear-link {
-		${textSans.xxsmall()};
+		${textSans12};
 		text-align: left;
 		position: absolute;
 		left: 268px;

diff --git a/dotcom-rendering/src/components/AgeWarning.tsx b/dotcom-rendering/src/components/AgeWarning.tsx
@@ -1,5 +1,10 @@
 import { css } from '@emotion/react';
-import { from, textSans, visuallyHidden } from '@guardian/source-foundations';
+import {
+	from,
+	textSans12,
+	textSans17,
+	visuallyHidden,
+} from '@guardian/source-foundations';
 import { palette } from '../palette';
 import ClockIcon from '../static/icons/clock.svg';
 
@@ -10,7 +15,7 @@ type Props = {
 };
 
 const ageWarningStyles = (isSmall: boolean) => css`
-	${isSmall ? textSans.xxsmall() : textSans.medium()};
+	${isSmall ? textSans12 : textSans17};
 	color: ${palette('--age-warning-text')};
 	background-color: ${palette('--age-warning-background')};
 	display: inline-block;

diff --git a/dotcom-rendering/src/components/Answers.tsx b/dotcom-rendering/src/components/Answers.tsx
@@ -1,7 +1,13 @@
 import { css } from '@emotion/react';
 import type { ArticleTheme } from '@guardian/libs';
 import { ArticleSpecial } from '@guardian/libs';
-import { body, palette, space, textSans } from '@guardian/source-foundations';
+import {
+	article17,
+	palette,
+	space,
+	textSans14,
+	textSans17,
+} from '@guardian/source-foundations';
 import { SvgCheckmark, SvgCross } from '@guardian/source-react-components';
 
 // We export Radio wrapper styles to override Source Radio buttons to align
@@ -29,7 +35,7 @@ export const radioButtonWrapperStyles = (theme: ArticleTheme) => css`
 `;
 
 const fontStyles = (theme: ArticleTheme) =>
-	theme === ArticleSpecial.Labs ? textSans.medium() : body.medium();
+	theme === ArticleSpecial.Labs ? textSans17 : article17;
 
 const answerWithSVGStyles = css`
 	margin-bottom: ${space[2]}px;
@@ -125,7 +131,7 @@ const WhiteText = ({
 		{!!supplementText && (
 			<span
 				css={css`
-					${textSans.xsmall()}
+					${textSans14}
 				`}
 			>
 				{supplementText}
@@ -168,7 +174,7 @@ const BlackText = ({
 		{!!supplementText && (
 			<span
 				css={css`
-					${textSans.xsmall()}
+					${textSans14}
 				`}
 			>
 				{supplementText}

diff --git a/dotcom-rendering/src/components/AppsEpic.importable.tsx b/dotcom-rendering/src/components/AppsEpic.importable.tsx
@@ -2,12 +2,12 @@ import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 import type { IEpic } from '@guardian/bridget/Epic';
 import {
-	body as bodySizes,
+	article17,
 	from,
-	headline,
+	headlineMedium24,
 	palette,
 	remSpace,
-	textSans,
+	textSans17,
 } from '@guardian/source-foundations';
 import { useEffect, useState } from 'react';
 import { getAcquisitionsClient, getUserClient } from '../lib/bridgetApi';
@@ -60,13 +60,13 @@ const epicStyles: SerializedStyles = css`
 		border-top: 1px solid ${themePalette('--apps-epic-border')};
 		background: ${themePalette('--apps-epic-background')};
 		padding: ${remSpace[3]};
-		${bodySizes.medium()}
+		${article17};
 		clear: left;
 	}
 
 	h1:first-of-type {
 		margin-top: 0;
-		${headline.xsmall()}
+		${headlineMedium24}
 	}
 
 	button {
@@ -108,7 +108,7 @@ const epicStyles: SerializedStyles = css`
 		transition: 0.3s ease-in-out;
 		text-decoration: none;
 		white-space: nowrap;
-		${textSans.medium()}
+		${textSans17}
 		line-height: 1.5;
 		font-weight: 700;
 		height: 44px;

diff --git a/dotcom-rendering/src/components/AppsFooter.importable.tsx b/dotcom-rendering/src/components/AppsFooter.importable.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { remSpace, textSans } from '@guardian/source-foundations';
+import { remSpace, textSans15 } from '@guardian/source-foundations';
 import { ButtonLink } from '@guardian/source-react-components';
 import { useEffect, useState } from 'react';
 import { getNavigationClient, getUserClient } from '../lib/bridgetApi';
@@ -8,13 +8,13 @@ import { palette } from '../palette';
 const year = new Date().getFullYear();
 
 const footerStyles = css`
-	${textSans.small({ lineHeight: 'regular' })}
+	${textSans15}
 	padding: ${remSpace[4]} ${remSpace[3]};
 	background-color: ${palette('--apps-footer-background')};
 `;
 
 const linkStyles = css`
-	${textSans.small({ lineHeight: 'regular' })};
+	${textSans15};
 	color: ${palette('--apps-footer-links-text')};
 
 	:active,

diff --git a/dotcom-rendering/src/components/ArticleBody.tsx b/dotcom-rendering/src/components/ArticleBody.tsx
@@ -4,7 +4,7 @@ import type { ArticleFormat } from '@guardian/libs';
 import {
 	between,
 	body,
-	headline,
+	headlineBold24,
 	remSpace,
 } from '@guardian/source-foundations';
 import { ArticleRenderer } from '../lib/ArticleRenderer';
@@ -68,7 +68,7 @@ const globalH3Styles = (display: ArticleDisplay) => css`
 	${display === ArticleDisplay.NumberedList &&
 	`
 		h3 {
-			${headline.xsmall({ fontWeight: 'bold' })};
+			${headlineBold24};
 			margin-bottom: ${remSpace[2]};
 		}
 	`}