diff --git a/dotcom-rendering/src/components/Byline.tsx b/dotcom-rendering/src/components/Byline.tsx index d823058e93..2c1f8fdb1f 100644 --- 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 index 0409703a94..d9186650e5 100644 --- 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 ( @@ -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 = () => { { { 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 index 3f827f4d4f..f4e0bc65af 100644 --- 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 = ({ {!isUndefined(starRating) ? ( {!isUndefined(starRating) ? ( ( <> - {smallHeadlineSizes.map((size) => ( + {headlineSize.map((size) => (
( 'Unknown' } card headline looks`} format={format} - size={size} + fontSizes={{ desktop: size }} />
))} @@ -126,7 +130,7 @@ Feature.decorators = [ export const Size: StoryObj = ({ format }: StoryProps) => ( <> - {smallHeadlineSizes.map((size) => ( + {headlineSize.map((size) => (
(
))} @@ -156,7 +160,7 @@ Size.decorators = [ export const MobileSize: StoryObj = ({ format }: StoryProps) => ( <> - {smallHeadlineSizes.map((size) => ( + {headlineSize.map((size) => (
(
))} @@ -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' }} /> ); @@ -297,7 +303,7 @@ Opinion.decorators = [ export const OpinionKicker: StoryObj = ({ format }: StoryProps) => ( <> - {smallHeadlineSizes.map((size) => ( + {headlineSize.map((size) => (
( format={format} showQuotes={true} kickerText="George Monbiot" - size={size} + fontSizes={{ desktop: size }} />
))} diff --git a/dotcom-rendering/src/components/CardHeadline.tsx b/dotcom-rendering/src/components/CardHeadline.tsx index 5fa6f36693..1be533123b 100644 --- a/dotcom-rendering/src/components/CardHeadline.tsx +++ b/dotcom-rendering/src/components/CardHeadline.tsx @@ -1,8 +1,8 @@ import { css } from '@emotion/react'; import { between, - from, headlineMedium14, + headlineMedium15, headlineMedium17, headlineMedium20, headlineMedium24, @@ -11,7 +11,6 @@ import { headlineMedium42, headlineMedium50, headlineMedium64, - space, textSans12, textSans14, textSans15, @@ -35,11 +34,7 @@ type Props = { showPulsingDot?: boolean; hasInlineKicker?: boolean; showQuotes?: boolean; // Even with design !== Comment, a piece can be opinion - size?: SmallHeadlineSize; - sizeOnMobile?: SmallHeadlineSize; - sizeOnTablet?: SmallHeadlineSize; - /* Controls which font size group to use, regular or boosted. Each group maps internally to the smallHeadlineSize type*/ - boostedFontSizes?: boolean; + fontSizes?: ResponsiveFontSize; byline?: string; showByline?: boolean; linkTo?: string; // If provided, the headline is wrapped in a link @@ -48,177 +43,74 @@ type Props = { isHighlights?: boolean; }; -/** These represent a new set of fonts. They are extra large font sizes that, as a group, are only used on headlines */ -const boostedFontStyles = ({ size }: { size: SmallHeadlineSize }) => { - switch (size) { - case 'ginormous': - return `${headlineMedium64}`; - case 'huge': - return `${headlineMedium50}`; - case 'large': - return `${headlineMedium42}`; - case 'medium': - return `${headlineMedium34}`; - case 'small': - return `${headlineMedium28}`; - case 'tiny': - return `${headlineMedium24}`; - } +const headlineSize = { + xxxlarge: headlineMedium64, + xxlarge: headlineMedium50, + xlarge: headlineMedium42, + large: headlineMedium34, + medium: headlineMedium28, + small: headlineMedium24, + xsmall: headlineMedium20, + xxsmall: headlineMedium17, + xxxsmall: headlineMedium15, + tiny: headlineMedium14, }; -const fontStyles = ({ - size, - boostedFontSizes, -}: { - size: SmallHeadlineSize; - boostedFontSizes: boolean; -}) => { - if (boostedFontSizes) return boostedFontStyles({ size }); +const textSansSize = { + xxxlarge: textSans20, + xxlarge: textSans20, + xlarge: textSans20, + large: textSans20, + medium: textSans20, + small: textSans20, + xsmall: textSans20, + xxsmall: textSans17, + xxxsmall: textSans15, + tiny: textSans12, +}; - switch (size) { - case 'ginormous': - return css` - ${from.desktop} { - ${headlineMedium50} - } - `; - case 'huge': - return css` - ${headlineMedium28} - `; - case 'large': - return css` - ${headlineMedium24} - `; - case 'medium': - return css` - ${headlineMedium20} - `; - case 'small': - return css` - ${headlineMedium17} - `; - case 'tiny': - return css` - ${headlineMedium14} - `; - } +export type HeadlineSize = keyof typeof headlineSize; +export type TextSansSize = keyof typeof textSansSize; + +export type ResponsiveFontSize = { + desktop: HeadlineSize; + tablet?: HeadlineSize; + mobile?: HeadlineSize; + mobileMedium?: HeadlineSize; }; -const fontStylesOnTablet = ({ - size, - boostedFontSizes, -}: { - size?: SmallHeadlineSize; - boostedFontSizes: boolean; -}) => { - /* Currently, tablet-specific headline sizing only applies to boosted fonts where a tablet font size has been supplied */ - if (size && boostedFontSizes) { - return css` - ${between.tablet.and.desktop} { - ${boostedFontStyles({ size })} + +const getFontSize = ( + sizes: ResponsiveFontSize, + family: 'headline' | 'textSans', +) => { + const { desktop, tablet, mobileMedium, mobile } = sizes; + + const fontSize = family === 'headline' ? headlineSize : textSansSize; + + return css` + ${fontSize[desktop]}; + + ${tablet && + css` + ${until.desktop} { + ${fontSize[tablet]}; } - `; - } - return null; -}; + `} -const fontStylesOnMobile = ({ - size, - boostedFontSizes, -}: { - size: SmallHeadlineSize; - boostedFontSizes: boolean; -}) => { - if (boostedFontSizes) { - return css` + ${mobile && + css` ${until.tablet} { - ${boostedFontStyles({ size })} + ${fontSize[mobile]}; } - `; - } + `} - switch (size) { - case 'ginormous': - return css` - ${until.mobileLandscape} { - ${headlineMedium34} - } - ${between.mobileLandscape.and.desktop} { - ${headlineMedium42} - } - `; - case 'huge': - return css` - ${until.desktop} { - ${headlineMedium24} - } - `; - case 'large': - return css` - ${until.desktop} { - ${headlineMedium20} - } - `; - case 'medium': - return css` - ${until.desktop} { - ${headlineMedium17} - } - `; - case 'small': - return css` - ${until.mobileMedium} { - ${headlineMedium14} - } - ${between.mobileMedium.and.desktop} { - ${headlineMedium17} - } - `; - default: - return undefined; - } -}; - -const labTextStyles = (size: SmallHeadlineSize) => { - switch (size) { - case 'ginormous': - case 'huge': - case 'large': - return css` - ${textSans20}; - ${until.desktop} { - ${textSans17}; - } - `; - case 'medium': - return css` - ${textSans20}; - /** - * Typography preset styles should not be overridden. - * This has been done because the styles do not directly map to the new presets. - * Please speak to your team's designer and update this to use a more appropriate preset. - */ - line-height: 1.15; - ${until.desktop} { - ${textSans17}; - /** - * Typography preset styles should not be overridden. - * This has been done because the styles do not directly map to the new presets. - * Please speak to your team's designer and update this to use a more appropriate preset. - */ - line-height: 1.15; - } - padding-bottom: ${space[1]}px; - `; - case 'small': - return css` - ${textSans15}; - `; - case 'tiny': - return css` - ${textSans12}; - `; - } + ${mobileMedium && + css` + ${between.mobileMedium.and.tablet} { + ${fontSize[mobileMedium]}; + } + `} + `; }; const sublinkStyles = css` @@ -263,6 +155,29 @@ export const WithLink = ({ return <>{children}; }; +/** + * The Byline component uses a different type to determine font sizes but infers the size from the desktop headline size. + * This function converts the headline size to the appropriate byline size. + */ +const getBylineFontSizes = (size: HeadlineSize): SmallHeadlineSize => { + switch (size) { + case 'xxlarge': + return 'ginormous'; + case 'medium': + return 'huge'; + case 'small': + return 'large'; + case 'xsmall': + return 'medium'; + case 'xxsmall': + return 'small'; + case 'tiny': + return 'tiny'; + default: + return 'medium'; + } +}; + export const CardHeadline = ({ headlineText, format, @@ -270,10 +185,8 @@ export const CardHeadline = ({ kickerText, showPulsingDot, hasInlineKicker, - size = 'medium', - sizeOnMobile, - sizeOnTablet, - boostedFontSizes = false, + /** headline medium 20 on desktop and headline medium 17 on tablet and mobile */ + fontSizes = { desktop: 'xsmall', tablet: 'xxsmall', mobile: 'xxsmall' }, byline, showByline, linkTo, @@ -287,6 +200,13 @@ export const CardHeadline = ({ // The link is only applied directly to the headline if it is a sublink const isSublink = !!linkTo; + const fonts = + format.theme === ArticleSpecial.Labs + ? getFontSize(fontSizes, 'textSans') + : getFontSize(fontSizes, 'headline'); + + const bylineSize = getBylineFontSizes(fontSizes.desktop); + return (

{!!kickerText && ( @@ -350,7 +256,7 @@ export const CardHeadline = ({ )} diff --git a/dotcom-rendering/src/components/DynamicPackage.tsx b/dotcom-rendering/src/components/DynamicPackage.tsx index 813d52555f..24c339a16b 100644 --- a/dotcom-rendering/src/components/DynamicPackage.tsx +++ b/dotcom-rendering/src/components/DynamicPackage.tsx @@ -52,8 +52,10 @@ const Snap100 = ({ containerType="dynamic/package" showAge={showAge} absoluteServerTimes={absoluteServerTimes} - headlineSize="large" - headlineSizeOnMobile="medium" + headlineSizes={{ + desktop: 'small', + tablet: 'xxsmall', + }} imagePositionOnDesktop="right" imagePositionOnMobile="left" imageSize="medium" @@ -91,7 +93,15 @@ const Card100 = ({ containerType="dynamic/package" showAge={showAge} absoluteServerTimes={absoluteServerTimes} - headlineSize={cards[0].isBoosted ? 'ginormous' : 'huge'} + headlineSizes={ + cards[0].isBoosted + ? { + desktop: 'xxlarge', + tablet: 'xlarge', + mobile: 'large', + } + : { desktop: 'medium', tablet: 'small' } + } imagePositionOnDesktop="bottom" imagePositionOnMobile="bottom" imageSize="large" @@ -133,8 +143,7 @@ const Card75_Card25 = ({ containerType="dynamic/package" showAge={showAge} absoluteServerTimes={absoluteServerTimes} - headlineSize="large" - headlineSizeOnMobile="huge" + headlineSizes={{ desktop: 'small' }} imagePositionOnDesktop="right" imagePositionOnMobile="bottom" imageSize="medium" @@ -453,7 +462,7 @@ const Card75_ColumnOfCards25 = ({ containerType="dynamic/package" showAge={showAge} absoluteServerTimes={absoluteServerTimes} - headlineSize="huge" + headlineSizes={{ desktop: 'medium', tablet: 'small' }} imagePositionOnDesktop="bottom" imagePositionOnMobile="bottom" imageSize="large" @@ -489,11 +498,14 @@ const Card75_ColumnOfCards25 = ({ image={ shouldShowImage ? card.image : undefined } - headlineSize={ + headlineSizes={ cardIndex === 0 || remaining.length === 2 - ? 'medium' - : 'small' + ? { + desktop: 'xsmall', + tablet: 'xxsmall', + } + : { desktop: 'xxsmall' } } supportingContent={limitSupportingContent( card, diff --git a/dotcom-rendering/src/components/FixedSmallSlowVThird.tsx b/dotcom-rendering/src/components/FixedSmallSlowVThird.tsx index 8f6aed62e5..7c421a2b31 100644 --- a/dotcom-rendering/src/components/FixedSmallSlowVThird.tsx +++ b/dotcom-rendering/src/components/FixedSmallSlowVThird.tsx @@ -54,7 +54,7 @@ export const FixedSmallSlowVThird = ({ containerPalette={containerPalette} showAge={showAge} absoluteServerTimes={absoluteServerTimes} - headlineSize="small" + headlineSizes={{ desktop: 'xxsmall' }} imagePositionOnDesktop="left" imagePositionOnMobile="none" imageSize="small" diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx index c915ef7ef8..65149dc73d 100644 --- a/dotcom-rendering/src/components/FlexibleGeneral.tsx +++ b/dotcom-rendering/src/components/FlexibleGeneral.tsx @@ -13,6 +13,7 @@ import type { import { LI } from './Card/components/LI'; import type { TrailTextSize } from './Card/components/TrailText'; import { UL } from './Card/components/UL'; +import type { ResponsiveFontSize } from './CardHeadline'; import type { Loading } from './CardPicture'; import { FrontCard } from './FrontCard'; import type { Alignment } from './SupportingContent'; @@ -68,9 +69,7 @@ export const decideCardPositions = (cards: DCRFrontCard[]): GroupedCards => { }; type BoostedSplashProperties = { - headlineSize: SmallHeadlineSize; - headlineSizeOnMobile: SmallHeadlineSize; - headlineSizeOnTablet: SmallHeadlineSize; + headlineSizes: ResponsiveFontSize; imagePositionOnDesktop: ImagePositionType; imagePositionOnMobile: ImagePositionType; imageSize: ImageSizeType; @@ -87,12 +86,15 @@ const decideSplashCardProperties = ( supportingContentLength: number, ): BoostedSplashProperties => { switch (boostLevel) { + // boostedfont sizing // The default boost level is equal to no boost. It is the same as the default card layout. case 'default': return { - headlineSize: 'small', - headlineSizeOnMobile: 'small', - headlineSizeOnTablet: 'small', + headlineSizes: { + desktop: 'medium', + tablet: 'medium', + mobile: 'medium', + }, imagePositionOnDesktop: 'right', imagePositionOnMobile: 'bottom', imageSize: 'large', @@ -103,9 +105,11 @@ const decideSplashCardProperties = ( }; case 'boost': return { - headlineSize: 'medium', - headlineSizeOnMobile: 'medium', - headlineSizeOnTablet: 'medium', + headlineSizes: { + desktop: 'large', + tablet: 'large', + mobile: 'large', + }, imagePositionOnDesktop: 'right', imagePositionOnMobile: 'bottom', imageSize: 'jumbo', @@ -116,9 +120,11 @@ const decideSplashCardProperties = ( }; case 'megaboost': return { - headlineSize: 'large', - headlineSizeOnMobile: 'large', - headlineSizeOnTablet: 'large', + headlineSizes: { + desktop: 'xlarge', + tablet: 'xlarge', + mobile: 'xlarge', + }, imagePositionOnDesktop: 'bottom', imagePositionOnMobile: 'bottom', imageSize: 'jumbo', @@ -128,9 +134,11 @@ const decideSplashCardProperties = ( }; case 'gigaboost': return { - headlineSize: 'huge', - headlineSizeOnMobile: 'huge', - headlineSizeOnTablet: 'large', + headlineSizes: { + desktop: 'xxlarge', + tablet: 'xlarge', + mobile: 'xxlarge', + }, imagePositionOnDesktop: 'bottom', imagePositionOnMobile: 'bottom', imageSize: 'jumbo', @@ -158,9 +166,7 @@ export const SplashCardLayout = ({ if (!card) return null; const { - headlineSize, - headlineSizeOnMobile, - headlineSizeOnTablet, + headlineSizes, imagePositionOnDesktop, imagePositionOnMobile, imageSize, @@ -184,9 +190,7 @@ export const SplashCardLayout = ({ containerType="flexible/general" showAge={showAge} absoluteServerTimes={absoluteServerTimes} - headlineSize={headlineSize} - headlineSizeOnMobile={headlineSizeOnMobile} - headlineSizeOnTablet={headlineSizeOnTablet} + headlineSizes={headlineSizes} imagePositionOnDesktop={imagePositionOnDesktop} imagePositionOnMobile={imagePositionOnMobile} imageSize={imageSize} @@ -202,7 +206,6 @@ export const SplashCardLayout = ({ kickerText={card.kickerText} showLivePlayable={card.showLivePlayable} liveUpdatesAlignment={liveUpdatesAlignment} - boostedFontSizes={true} isFlexSplash={true} showTopBarDesktop={false} showTopBarMobile={true} @@ -214,9 +217,7 @@ export const SplashCardLayout = ({ }; type BoostedCardProperties = { - headlineSize: SmallHeadlineSize; - headlineSizeOnMobile: SmallHeadlineSize; - headlineSizeOnTablet: SmallHeadlineSize; + headlineSizes: ResponsiveFontSize; imageSize: ImageSizeType; liveUpdatesPosition: Position; supportingContentAlignment: Alignment; @@ -231,9 +232,11 @@ const decideCardProperties = ( switch (boostLevel) { case 'megaboost': return { - headlineSize: 'small', - headlineSizeOnMobile: 'small', - headlineSizeOnTablet: 'tiny', + headlineSizes: { + desktop: 'medium', + tablet: 'small', + mobile: 'medium', + }, imageSize: 'jumbo', liveUpdatesPosition: 'outer', supportingContentAlignment: 'horizontal', @@ -241,9 +244,11 @@ const decideCardProperties = ( case 'boost': default: return { - headlineSize: 'tiny', - headlineSizeOnMobile: 'tiny', - headlineSizeOnTablet: 'tiny', + headlineSizes: { + desktop: 'small', + tablet: 'small', + mobile: 'small', + }, imageSize: 'medium', liveUpdatesPosition: 'inner', supportingContentAlignment: 'horizontal', @@ -268,9 +273,7 @@ export const BoostedCardLayout = ({ if (!card) return null; const { - headlineSize, - headlineSizeOnMobile, - headlineSizeOnTablet, + headlineSizes, imageSize, supportingContentAlignment, liveUpdatesPosition, @@ -287,9 +290,7 @@ export const BoostedCardLayout = ({ containerType="flexible/general" showAge={showAge} absoluteServerTimes={absoluteServerTimes} - headlineSize={headlineSize} - headlineSizeOnMobile={headlineSizeOnMobile} - headlineSizeOnTablet={headlineSizeOnTablet} + headlineSizes={headlineSizes} imagePositionOnDesktop={'right'} imagePositionOnMobile={'bottom'} imageSize={imageSize} @@ -307,7 +308,6 @@ export const BoostedCardLayout = ({ liveUpdatesAlignment="horizontal" showTopBarDesktop={false} showTopBarMobile={true} - boostedFontSizes={true} liveUpdatesPosition={liveUpdatesPosition} /> diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx index 0b8c6a6399..8cd7b3eb67 100644 --- a/dotcom-rendering/src/components/FlexibleSpecial.tsx +++ b/dotcom-rendering/src/components/FlexibleSpecial.tsx @@ -11,6 +11,7 @@ import type { import { LI } from './Card/components/LI'; import type { TrailTextSize } from './Card/components/TrailText'; import { UL } from './Card/components/UL'; +import type { ResponsiveFontSize } from './CardHeadline'; import type { Loading } from './CardPicture'; import { FrontCard } from './FrontCard'; import type { Alignment } from './SupportingContent'; @@ -24,9 +25,7 @@ type Props = { }; type BoostProperties = { - headlineSize: SmallHeadlineSize; - headlineSizeOnMobile: SmallHeadlineSize; - headlineSizeOnTablet: SmallHeadlineSize; + headlineSizes: ResponsiveFontSize; imagePositionOnDesktop: ImagePositionType; imagePositionOnMobile: ImagePositionType; imageSize: ImageSizeType; @@ -46,9 +45,11 @@ const determineCardProperties = ( // The default boost level is equal to no boost. It is the same as the default card layout. case 'default': return { - headlineSize: 'large', - headlineSizeOnMobile: 'small', - headlineSizeOnTablet: 'medium', + headlineSizes: { + desktop: 'xlarge', + tablet: 'large', + mobile: 'medium', + }, imagePositionOnDesktop: 'right', imagePositionOnMobile: 'bottom', imageSize: 'large', @@ -60,9 +61,11 @@ const determineCardProperties = ( case 'boost': return { - headlineSize: 'huge', - headlineSizeOnMobile: 'medium', - headlineSizeOnTablet: 'large', + headlineSizes: { + desktop: 'xxlarge', + tablet: 'xlarge', + mobile: 'large', + }, imagePositionOnDesktop: 'right', imagePositionOnMobile: 'bottom', imageSize: 'jumbo', @@ -73,9 +76,11 @@ const determineCardProperties = ( }; case 'megaboost': return { - headlineSize: 'huge', - headlineSizeOnMobile: 'large', - headlineSizeOnTablet: 'large', + headlineSizes: { + desktop: 'xxlarge', + tablet: 'xlarge', + mobile: 'xlarge', + }, imagePositionOnDesktop: 'bottom', imagePositionOnMobile: 'bottom', imageSize: 'jumbo', @@ -85,9 +90,11 @@ const determineCardProperties = ( }; case 'gigaboost': return { - headlineSize: 'ginormous', - headlineSizeOnMobile: 'huge', - headlineSizeOnTablet: 'huge', + headlineSizes: { + desktop: 'xxxlarge', + tablet: 'xxlarge', + mobile: 'xxlarge', + }, imagePositionOnDesktop: 'bottom', imagePositionOnMobile: 'bottom', imageSize: 'jumbo', @@ -114,9 +121,7 @@ export const OneCardLayout = ({ if (!card) return null; const { - headlineSize, - headlineSizeOnMobile, - headlineSizeOnTablet, + headlineSizes, imagePositionOnDesktop, imagePositionOnMobile, imageSize, @@ -136,9 +141,7 @@ export const OneCardLayout = ({ containerType="flexible/special" showAge={showAge} absoluteServerTimes={absoluteServerTimes} - headlineSize={headlineSize} - headlineSizeOnMobile={headlineSizeOnMobile} - headlineSizeOnTablet={headlineSizeOnTablet} + headlineSizes={headlineSizes} imagePositionOnDesktop={imagePositionOnDesktop} imagePositionOnMobile={imagePositionOnMobile} imageSize={imageSize} @@ -150,7 +153,6 @@ export const OneCardLayout = ({ kickerText={card.kickerText} showLivePlayable={card.showLivePlayable} liveUpdatesAlignment={liveUpdatesAlignment} - boostedFontSizes={true} isFlexSplash={true} showTopBarDesktop={false} showTopBarMobile={true} diff --git a/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx b/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx index 9f0aab3f72..607e5d2e65 100644 --- a/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx +++ b/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx @@ -152,8 +152,12 @@ export const HighlightsCard = ({ ); }; @@ -314,8 +309,7 @@ export const Card75Media50Left = ({ imageSize="large" imageLoading={imageLoading} isTagPage={isTagPage} - headlineSize="large" - headlineSizeOnMobile="large" + headlineSizes={{ desktop: 'small', tablet: 'xsmall' }} trailTextColour={palette('--card-headline')} /> ); @@ -356,8 +350,7 @@ export const Card25Media25 = ({ imageSize="small" imageLoading={imageLoading} isTagPage={isTagPage} - headlineSize="medium" - headlineSizeOnMobile="medium" + headlineSizes={{ desktop: 'xsmall', tablet: 'xxsmall' }} isPlayableMediaCard={false} trailTextColour={palette('--card-headline')} /> @@ -399,8 +392,7 @@ export const Card25Media25SmallHeadline = ({ imageSize="small" imageLoading={imageLoading} isTagPage={isTagPage} - headlineSize="small" - headlineSizeOnMobile="medium" + headlineSizes={{ desktop: 'xxsmall', tablet: 'xxsmall' }} isPlayableMediaCard={false} trailTextColour={palette('--card-headline')} /> @@ -441,8 +433,7 @@ export const Card25Media25Tall = ({ imageSize="small" imageLoading={imageLoading} isTagPage={isTagPage} - headlineSize="medium" - headlineSizeOnMobile="medium" + headlineSizes={{ desktop: 'xsmall', tablet: 'xxsmall' }} trailText={ isUndefined(trail.avatarUrl) && (isUndefined(trail.supportingContent) || @@ -490,8 +481,7 @@ export const Card25Media25TallNoTrail = ({ imageSize="small" imageLoading={imageLoading} isTagPage={isTagPage} - headlineSize="medium" - headlineSizeOnMobile="medium" + headlineSizes={{ desktop: 'xsmall', tablet: 'xxsmall' }} supportingContent={trail.supportingContent?.slice(0, 2)} isPlayableMediaCard={false} trailTextColour={palette('--card-headline')} @@ -532,8 +522,7 @@ export const Card25Media25TallSmallHeadline = ({ imageSize="small" imageLoading={imageLoading} isTagPage={isTagPage} - headlineSize="small" - headlineSizeOnMobile="medium" + headlineSizes={{ desktop: 'xxsmall', tablet: 'xxsmall' }} supportingContent={trail.supportingContent?.slice(0, 2)} isPlayableMediaCard={false} trailTextColour={palette('--card-headline')} @@ -567,8 +556,7 @@ export const Card50Media50 = ({ ); @@ -656,8 +643,7 @@ export const Card66Media66 = ({ showAge={showAge} absoluteServerTimes={absoluteServerTimes} trailText={trail.trailText} - headlineSize="medium" - headlineSizeOnMobile="medium" + headlineSizes={{ desktop: 'xsmall', tablet: 'xxsmall' }} imagePositionOnDesktop="top" imagePositionOnMobile="top" imageSize="large" @@ -702,9 +688,8 @@ export const Card33Media33 = ({ imagePositionOnMobile="left" imageLoading={imageLoading} isTagPage={isTagPage} - headlineSize="medium" - headlineSizeOnMobile="medium" trailTextColour={palette('--card-headline')} + headlineSizes={{ desktop: 'xsmall', tablet: 'xxsmall' }} /> ); }; @@ -741,8 +726,7 @@ export const Card33Media33Tall = ({ imagePositionOnMobile="left" imageLoading={imageLoading} isTagPage={isTagPage} - headlineSize="medium" - headlineSizeOnMobile="medium" + headlineSizes={{ desktop: 'xsmall', tablet: 'xxsmall' }} supportingContent={trail.supportingContent?.slice(0, 2)} supportingContentAlignment="vertical" trailTextColour={palette('--card-headline')} @@ -784,8 +768,7 @@ export const Card33Media33MobileTopTall = ({ imagePositionOnMobile="top" imageLoading={imageLoading} isTagPage={isTagPage} - headlineSize="medium" - headlineSizeOnMobile="large" + headlineSizes={{ desktop: 'xsmall', tablet: 'xsmall' }} supportingContent={trail.supportingContent?.slice(0, 2)} supportingContentAlignment="vertical" trailTextColour={palette('--card-headline')} @@ -821,7 +804,7 @@ export const CardDefault = ({ image={undefined} imageLoading={'lazy'} avatarUrl={undefined} - headlineSize="small" + headlineSizes={{ desktop: 'xxsmall' }} isPlayableMediaCard={false} isTagPage={isTagPage} trailTextColour={palette('--card-headline')} @@ -860,7 +843,7 @@ export const CardDefaultMedia = ({ imagePositionOnMobile="none" imageLoading={imageLoading} isTagPage={isTagPage} - headlineSize="small" + headlineSizes={{ desktop: 'xxsmall' }} isPlayableMediaCard={false} trailTextColour={palette('--card-headline')} /> @@ -898,7 +881,7 @@ export const CardDefaultMediaMobile = ({ imagePositionOnMobile="left" imageLoading={imageLoading} isTagPage={isTagPage} - headlineSize="small" + headlineSizes={{ desktop: 'xxsmall' }} isPlayableMediaCard={false} trailTextColour={palette('--card-headline')} />