Merge branch 'main' into move-format-into-article

.github/CODEOWNERS

@@ -7,7 +7,7 @@
 # These folders and all their contents are owned by the following teams.
 /dotcom-rendering/ 								@guardian/dotcom-platform
 /apps-rendering/ 								@guardian/dotcom-platform
-/dotcom-rendering/src/components/marketing/ 	@guardian/supporter-revenue-stream
+/dotcom-rendering/src/components/marketing/ 	@guardian/growth
 /dotcom-rendering/src/client/userFeatures/ 		@guardian/supporter-revenue-stream
 
 # These file types, wherever they are, are co-owned by the following teams.

dotcom-rendering/fixtures/manual/frontCollections.ts

@@ -3,6 +3,7 @@ import { trails } from './trails';
 
 const defaultGrouped = {
 	snap: [],
+	splash: [],
 	huge: [],
 	veryBig: [],
 	big: [],

dotcom-rendering/src/components/ArticleHeadline.tsx

@@ -19,7 +19,6 @@ import {
 } from '@guardian/source/foundations';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
 import { getAgeWarning } from '../lib/age-warning';
-import { decidePalette } from '../lib/decidePalette';
 import { getZIndex } from '../lib/getZIndex';
 import { palette as themePalette } from '../palette';
 import type { TagType } from '../types/tag';
@@ -81,7 +80,19 @@ const decideHeadlineFont = (format: ArticleFormat) => {
 const decideMobileHeadlineFont = (format: ArticleFormat) => {
 	switch (format.display) {
 		case ArticleDisplay.Immersive: {
-			return headlineMedium34;
+			switch (format.design) {
+				case ArticleDesign.Obituary:
+				case ArticleDesign.Comment:
+				case ArticleDesign.Editorial:
+					return headlineLight34;
+				case ArticleDesign.Feature:
+				case ArticleDesign.Review:
+				case ArticleDesign.Recipe:
+				case ArticleDesign.Interview:
+					return headlineBold34;
+				default:
+					return headlineMedium34;
+			}
 		}
 		default:
 			switch (format.design) {
@@ -359,7 +370,6 @@ export const ArticleHeadline = ({
 	hasAvatar,
 	isMatch,
 }: Props) => {
-	const palette = decidePalette(format);
 	switch (format.display) {
 		case ArticleDisplay.Immersive: {
 			switch (format.design) {
@@ -752,7 +762,9 @@ export const ArticleHeadline = ({
 											: headlineFont(format),
 										css`
 											color: ${isMatch
-												? palette.text.headlineWhenMatch
+												? themePalette(
+														'--headline-match-colour',
+												  )
 												: themePalette(
 														'--headline-colour',
 												  )};

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

@@ -397,7 +397,6 @@ export const Card = ({
 					supportingContent={supportingContent}
 					containerPalette={containerPalette}
 					alignment={supportingContentAlignment}
-					isDynamo={isDynamo}
 				/>
 			);
 		}
@@ -407,7 +406,6 @@ export const Card = ({
 					supportingContent={supportingContent}
 					containerPalette={containerPalette}
 					alignment={supportingContentAlignment}
-					isDynamo={isDynamo}
 				/>
 			</Hide>
 		);
@@ -699,10 +697,6 @@ export const Card = ({
 							{!showCommentFooter && (
 								<CardFooter
 									format={format}
-									topAlign={
-										isFlexibleContainer &&
-										imageSize === 'jumbo'
-									}
 									age={decideAge()}
 									commentCount={<CommentCount />}
 									cardBranding={
@@ -749,7 +743,6 @@ export const Card = ({
 										supportingContent={supportingContent}
 										alignment="vertical"
 										containerPalette={containerPalette}
-										isDynamo={isDynamo}
 									/>
 								</Hide>
 							)}

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

@@ -8,14 +8,10 @@ type Props = {
 	commentCount?: JSX.Element;
 	cardBranding?: JSX.Element;
 	showLivePlayable?: boolean;
-	topAlign?: boolean;
 };
 
-const marginStyles = (topAlign: boolean) => css`
-	margin-top: ${topAlign ? `${space[3]}px` : `auto`};
-`;
-
 const contentStyles = css`
+	margin-top: auto;
 	padding-top: ${space[1]}px;
 	display: flex;
 	justify-content: 'flex-start';
@@ -51,7 +47,6 @@ export const CardFooter = ({
 	commentCount,
 	cardBranding,
 	showLivePlayable = false,
-	topAlign = false,
 }: Props) => {
 	if (showLivePlayable) return null;
 
@@ -60,7 +55,7 @@ export const CardFooter = ({
 	}
 
 	return (
-		<footer css={[marginStyles(topAlign), contentStyles]}>
+		<footer css={contentStyles}>
 			{age}
 			{commentCount}
 		</footer>

dotcom-rendering/src/components/CricketScoreboard.stories.tsx

@@ -1,4 +1,3 @@
-import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs';
 import { breakpoints } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react';
 import { match } from '../../fixtures/manual/cricket-scoreboard';
@@ -19,11 +18,6 @@ type Story = StoryObj<typeof CricketScoreboard>;
 export const defaultStory: Story = {
 	name: 'Cricket Scoreboard',
 	args: {
-		format: {
-			display: ArticleDisplay.Standard,
-			design: ArticleDesign.LiveBlog,
-			theme: Pillar.Sport,
-		},
 		match,
 		scorecardUrl: '/test',
 	},

dotcom-rendering/src/components/CricketScoreboard.tsx

@@ -1,13 +1,11 @@
 import { css } from '@emotion/react';
-import type { ArticleFormat } from '@guardian/libs';
 import {
 	between,
 	space,
 	textSans14,
 	until,
 } from '@guardian/source/foundations';
-import { decidePalette } from '../lib/decidePalette';
-import type { Palette } from '../types/palette';
+import { palette } from '../palette';
 import type { CricketInnings, CricketMatch } from '../types/sport';
 import { DateTime } from './DateTime';
 
@@ -16,7 +14,6 @@ const ALL_OUT_WICKETS = 10;
 type Props = {
 	scorecardUrl: string;
 	match: CricketMatch;
-	format: ArticleFormat;
 };
 
 const screenReaderOnlyStyle = css`
@@ -44,17 +41,17 @@ const tableStyle = css`
 	${textSans14}
 `;
 
-const captionStyle = (palette: Palette) => css`
+const captionStyle = css`
 	text-align: left;
 	font-weight: bold;
-	border-top: 1px solid ${palette.border.cricketScoreboardTop};
+	border-top: 1px solid ${palette('--cricket-scoreboard-border-top')};
 	border-collapse: inherit;
 	padding-top: ${space[2]}px;
 	padding-bottom: ${space[2]}px;
 `;
 
-const rowStyle = (palette: Palette) => css`
-	border-top: 1px solid ${palette.border.cricketScoreboardDivider};
+const rowStyle = css`
+	border-top: 1px solid ${palette('--cricket-scoreboard-divider')};
 `;
 
 const cellStyle = css`
@@ -71,12 +68,12 @@ const linkPaddingStlye = css`
 	padding-bottom: ${space[2]}px;
 `;
 
-const linkStyle = (palette: Palette) => css`
-	color: ${palette.text.cricketScoreboardLink};
+const linkStyle = css`
+	color: ${palette('--cricket-scoreboard-link-text')};
 	text-decoration: none;
 
 	:hover {
-		color: ${palette.text.cricketScoreboardLink};
+		color: ${palette('--cricket-scoreboard-link-text')};
 		text-decoration: underline;
 	}
 `;
@@ -136,8 +133,7 @@ export const CricketInningsScores = ({
 	return <p>Yet to bat</p>;
 };
 
-export const CricketScoreboard = ({ scorecardUrl, match, format }: Props) => {
-	const palette = decidePalette(format);
+export const CricketScoreboard = ({ scorecardUrl, match }: Props) => {
 	const date = new Date(match.gameDate);
 	return (
 		<div css={containerStyle}>
@@ -159,7 +155,7 @@ export const CricketScoreboard = ({ scorecardUrl, match, format }: Props) => {
 				</thead>
 				<tbody>
 					{/* Home team */}
-					<tr css={rowStyle(palette)}>
+					<tr css={rowStyle}>
 						<td css={[cellStyle, boldStlye]}>
 							{match.teams.find((team) => !!team.home)?.name}
 						</td>
@@ -168,7 +164,7 @@ export const CricketScoreboard = ({ scorecardUrl, match, format }: Props) => {
 						</td>
 					</tr>
 					{/* Away team */}
-					<tr css={rowStyle(palette)}>
+					<tr css={rowStyle}>
 						<td css={[cellStyle, boldStlye]}>
 							{match.teams.find((team) => !team.home)?.name}
 						</td>
@@ -177,13 +173,13 @@ export const CricketScoreboard = ({ scorecardUrl, match, format }: Props) => {
 						</td>
 					</tr>
 				</tbody>
-				<caption css={captionStyle(palette)}>
+				<caption css={captionStyle}>
 					{match.competitionName}, {match.venueName}
 				</caption>
 				<tfoot>
-					<tr css={rowStyle(palette)}>
+					<tr css={rowStyle}>
 						<td css={linkPaddingStlye} colSpan={2}>
-							<a css={linkStyle(palette)} href={scorecardUrl}>
+							<a css={linkStyle} href={scorecardUrl}>
 								View full scorecard
 							</a>
 						</td>

dotcom-rendering/src/components/DecideContainer.tsx

@@ -22,6 +22,7 @@ import { FixedSmallSlowIV } from './FixedSmallSlowIV';
 import { FixedSmallSlowVHalf } from './FixedSmallSlowVHalf';
 import { FixedSmallSlowVMPU } from './FixedSmallSlowVMPU';
 import { FixedSmallSlowVThird } from './FixedSmallSlowVThird';
+// import { FlexibleGeneral } from './FlexibleGeneral';
 import { FlexibleSpecial } from './FlexibleSpecial';
 import { HighlightsContainer } from './HighlightsContainer.importable';
 import { Island } from './Island';
@@ -238,6 +239,18 @@ export const DecideContainer = ({
 					imageLoading={imageLoading}
 				/>
 			);
+		case 'flexible/general':
+			// Not implemented yet
+			return null;
+		// return (
+		// 	<FlexibleGeneral
+		// 		groupedTrails={groupedTrails}
+		// 		containerPalette={containerPalette}
+		// 		showAge={showAge}
+		// 		absoluteServerTimes={absoluteServerTimes}
+		// 		imageLoading={imageLoading}
+		// 	/>
+		// );
 		default:
 			return <p>{containerType} is not yet supported</p>;
 	}

dotcom-rendering/src/components/DynamicFast.stories.tsx

@@ -25,6 +25,7 @@ const defaultGroupedTrails: DCRGroupedTrails = {
 	big: [],
 	standard: [],
 	snap: [],
+	splash: [],
 };
 
 /* First Slice Variants */

dotcom-rendering/src/components/DynamicPackage.stories.tsx

@@ -13,6 +13,7 @@ const defaultGroupedTrails: DCRGroupedTrails = {
 	big: [],
 	standard: [],
 	snap: [],
+	splash: [],
 };
 
 const meta = {

dotcom-rendering/src/components/DynamicSlow.stories.tsx

@@ -18,6 +18,7 @@ const defaultGroupedTrails: DCRGroupedTrails = {
 	big: [],
 	standard: [],
 	snap: [],
+	splash: [],
 };
 
 export default {