Merge branch 'main' into sndrs/corepack

dotcom-rendering/README.md

@@ -4,7 +4,7 @@ Frontend rendering framework for theguardian.com. It uses [React](https://reactj
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-<!-- Automatically created with yarn run createtoc and on push hook -->
+<!-- Automatically created by running `yarn createtoc` in a pre-commit hook -->
 
 -   [Quick start](#quick-start)
     -   [Install Node.js](#install-nodejs)

dotcom-rendering/docs/contributing/code-style.md

@@ -2,7 +2,7 @@
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-<!-- Automatically created with yarn run createtoc and on push hook -->
+<!-- Automatically created by running `yarn createtoc` in a pre-commit hook -->
 
 -   [TypeScript](#typescript)
     -   [Always used named exports](#always-used-named-exports)

dotcom-rendering/docs/contributing/detailed-setup-guide.md

@@ -2,7 +2,7 @@
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-<!-- Automatically created with yarn run createtoc and on push hook -->
+<!-- Automatically created by running `yarn createtoc` in a pre-commit hook -->
 
 -   [High level diagram](#high-level-diagram)
 -   [Developing](#developing)

dotcom-rendering/docs/contributing/how-to.md

@@ -2,12 +2,12 @@
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-<!-- Automatically created with yarn run createtoc and on push hook -->
+<!-- Automatically created by running `yarn createtoc` in a pre-commit hook -->
 
 -   [How can I add to this document?](#how-can-i-add-to-this-document)
 -   [How can I add client-side JavaScript?](#how-can-i-add-client-side-javascript)
 -   [How can I create an 'island' in DCR?](#how-can-i-create-an-island-in-dcr)
--   [How can I make an AJAX request in DCR?](#how-can-i-make-an-ajax-request-in-dcr)
+-   [How to fetch external data on the client?](#how-to-fetch-external-data-on-the-client)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 

dotcom-rendering/docs/contributing/where-should-my-code-live.md

@@ -2,19 +2,18 @@
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-<!-- Automatically created with yarn run createtoc and on push hook -->
-
--   [Where should my code live?](#where-should-my-code-live)
-    -   [File locations](#file-locations)
-    -   [File naming schemes](#file-naming-schemes)
-    -   [Scripts](#scripts)
-    -   [Data Sources \& Extraction](#data-sources--extraction)
-        -   [Articles](#articles)
-        -   [Fronts](#fronts)
-        -   [Other](#other)
-        -   [Considerations](#considerations)
-            -   [Favour computation on the rendering server over computation on the client](#favour-computation-on-the-rendering-server-over-computation-on-the-client)
-            -   [Minimize data over the wire](#minimize-data-over-the-wire)
+<!-- Automatically created by running `yarn createtoc` in a pre-commit hook -->
+
+-   [File locations](#file-locations)
+-   [File naming schemes](#file-naming-schemes)
+-   [Scripts](#scripts)
+-   [Data Sources & Extraction](#data-sources--extraction)
+    -   [Articles](#articles)
+    -   [Fronts](#fronts)
+    -   [Other](#other)
+    -   [Considerations](#considerations)
+        -   [Favour computation on the rendering server over computation on the client](#favour-computation-on-the-rendering-server-over-computation-on-the-client)
+        -   [Minimize data over the wire](#minimize-data-over-the-wire)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 

dotcom-rendering/package.json

@@ -16,7 +16,7 @@
 		"test": "jest --maxWorkers=50%",
 		"test:watch": "jest --watch --maxWorkers=25%",
 		"test:ci": "jest --runInBand",
-		"createtoc": "doctoc $npm_package_tocList --github --update-only --title '<!-- Automatically created with yarn run createtoc and on push hook -->' ",
+		"createtoc": "doctoc $npm_package_tocList --github --update-only --title '<!-- Automatically created by running `yarn createtoc` in a pre-commit hook -->' ",
 		"addandcommittoc": "git add $npm_package_tocList && git commit -m 'Add TOC update' || true",
 		"playwright:open": "playwright test --ui",
 		"playwright:run": "playwright test",

dotcom-rendering/scripts/gen-stories/get-stories.mjs

@@ -220,7 +220,7 @@ const testLayoutFormats =
 			display: 'Showcase',
 			design: 'Standard',
 			theme: 'NewsPillar',
-			config: { renderingTarget: 'Apps', darkModeAvailable: false },
+			config: { renderingTarget: 'Apps', darkModeAvailable: true },
 		},
 		{
 			display: 'Showcase',
@@ -238,7 +238,7 @@ const testLayoutFormats =
 			display: 'Standard',
 			design: 'Comment',
 			theme: 'NewsPillar',
-			config: { renderingTarget: 'Apps', darkModeAvailable: false },
+			config: { renderingTarget: 'Apps', darkModeAvailable: true },
 		},
 		{
 			display: 'Standard',
@@ -286,43 +286,43 @@ const testLayoutFormats =
 			display: 'Standard',
 			design: 'LiveBlog',
 			theme: 'OpinionPillar',
-			config: { renderingTarget: 'Web', darkModeAvailable: false },
+			config: { renderingTarget: 'Apps', darkModeAvailable: true },
 		},
 		{
 			display: 'Standard',
 			design: 'LiveBlog',
 			theme: 'SportPillar',
-			config: { renderingTarget: 'Web', darkModeAvailable: false },
+			config: { renderingTarget: 'Apps', darkModeAvailable: true },
 		},
 		{
 			display: 'Standard',
 			design: 'LiveBlog',
 			theme: 'CulturePillar',
-			config: { renderingTarget: 'Web', darkModeAvailable: false },
+			config: { renderingTarget: 'Apps', darkModeAvailable: true },
 		},
 		{
 			display: 'Standard',
 			design: 'LiveBlog',
 			theme: 'LifestylePillar',
-			config: { renderingTarget: 'Web', darkModeAvailable: false },
+			config: { renderingTarget: 'Apps', darkModeAvailable: true },
 		},
 		{
 			display: 'Standard',
 			design: 'LiveBlog',
 			theme: 'SpecialReportPillar',
-			config: { renderingTarget: 'Web', darkModeAvailable: false },
+			config: { renderingTarget: 'Apps', darkModeAvailable: true },
 		},
 		{
 			display: 'Standard',
 			design: 'LiveBlog',
 			theme: 'LabsPillar',
-			config: { renderingTarget: 'Web', darkModeAvailable: false },
+			config: { renderingTarget: 'Apps', darkModeAvailable: true },
 		},
 		{
 			display: 'Standard',
 			design: 'LiveBlog',
 			theme: 'SpecialReportAltPillar',
-			config: { renderingTarget: 'Web', darkModeAvailable: false },
+			config: { renderingTarget: 'Apps', darkModeAvailable: true },
 		},
 		{
 			display: 'Standard',

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

@@ -47,7 +47,7 @@ export const TrailTextWrapper = ({
 				css`
 					display: flex;
 					flex-direction: column;
-					color: ${palette('--card-trail-text')};
+					color: ${palette('--card-headline-trail-text')};
 					${body.small({ lineHeight: 'regular' })};
 					font-size: 14px;
 					padding-left: 5px;

dotcom-rendering/src/components/CardHeadline.tsx

@@ -290,7 +290,7 @@ export const CardHeadline = ({
 					{showQuotes && <QuoteIcon colour={kickerColour} />}
 					<span
 						css={css`
-							color: ${palette('--card-headline-text')};
+							color: ${palette('--card-headline-trail-text')};
 						`}
 						className="show-underline"
 					>

dotcom-rendering/src/components/ContainerOverrides.tsx

@@ -29,7 +29,7 @@ export const ContainerOverrides = ({
 		: { text: undefined, background: undefined, topBar: undefined };
 
 	const paletteOverrides = {
-		'--card-headline-text': isDynamo
+		'--card-headline-trail-text': isDynamo
 			? text?.dynamoHeadline
 			: text?.cardHeadline,
 		'--card-footer-text': isDynamo

dotcom-rendering/src/layouts/CommentLayout.tsx

@@ -2,11 +2,8 @@ import { css } from '@emotion/react';
 import type { ArticleFormat } from '@guardian/libs';
 import { ArticleDesign, ArticleDisplay, ArticleSpecial } from '@guardian/libs';
 import {
-	brandBackground,
-	brandBorder,
-	brandLine,
 	from,
-	neutral,
+	palette as sourcePalette,
 	until,
 } from '@guardian/source-foundations';
 import { StraightLines } from '@guardian/source-react-components-development-kitchen';
@@ -44,10 +41,10 @@ import { SubNav } from '../components/SubNav.importable';
 import { getSoleContributor } from '../lib/byline';
 import { canRenderAds } from '../lib/canRenderAds';
 import { getContributionsServiceUrl } from '../lib/contributions';
-import { decidePalette } from '../lib/decidePalette';
 import { decideTrail } from '../lib/decideTrail';
 import { parse } from '../lib/slot-machine-flags';
 import type { NavType } from '../model/extract-nav';
+import { palette as themePalette } from '../palette';
 import type { DCRArticle } from '../types/frontend';
 import type { RenderingTarget } from '../types/renderingTarget';
 import { BannerWrapper, SendToBack, Stuck } from './lib/stickiness';
@@ -297,8 +294,6 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 
 	const { branding } = article.commercialProperties[article.editionId];
 
-	const palette = decidePalette(format);
-
 	const contributionsServiceUrl = getContributionsServiceUrl(article);
 
 	const renderAds = renderingTarget === 'Web' && canRenderAds(article);
@@ -329,7 +324,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 								showTopBorder={false}
 								showSideBorders={false}
 								padSides={false}
-								backgroundColour={brandBackground.primary}
+								backgroundColour={sourcePalette.brand[400]}
 								element="header"
 							>
 								<Header
@@ -357,10 +352,10 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 
 						<Section
 							fullWidth={true}
-							borderColour={brandLine.primary}
+							borderColour={sourcePalette.brand[600]}
 							showTopBorder={false}
 							padSides={false}
-							backgroundColour={brandBackground.primary}
+							backgroundColour={sourcePalette.brand[400]}
 							element="nav"
 						>
 							<Nav
@@ -388,7 +383,9 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 						{props.NAV.subNavSections && (
 							<Section
 								fullWidth={true}
-								backgroundColour={palette.background.article}
+								backgroundColour={themePalette(
+									'--article-background',
+								)}
 								padSides={false}
 								element="aside"
 							>
@@ -403,18 +400,22 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 										currentNavLink={
 											props.NAV.currentNavLink
 										}
-										linkHoverColour={
-											palette.text.articleLinkHover
-										}
-										borderColour={palette.border.subNav}
+										linkHoverColour={themePalette(
+											'--article-link-text-hover',
+										)}
+										borderColour={themePalette(
+											'--sub-nav-border',
+										)}
 									/>
 								</Island>
 							</Section>
 						)}
 
 						<Section
 							fullWidth={true}
-							backgroundColour={palette.background.article}
+							backgroundColour={themePalette(
+								'--article-background',
+							)}
 							padSides={false}
 							showTopBorder={false}
 						>
@@ -423,7 +424,9 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 								cssOverrides={css`
 									display: block;
 								`}
-								color={palette.border.secondary}
+								color={themePalette(
+									'--article-border-secondary',
+								)}
 							/>
 						</Section>
 					</SendToBack>
@@ -439,7 +442,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 				<Section
 					fullWidth={true}
 					showTopBorder={false}
-					backgroundColour={palette.background.article}
+					backgroundColour={themePalette('--article-background')}
 					element="article"
 				>
 					<StandardGrid display={format.display}>
@@ -527,7 +530,9 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 											cssOverrides={css`
 												display: block;
 											`}
-											color={palette.border.secondary}
+											color={themePalette(
+												'--article-border-secondary',
+											)}
 										/>
 									</div>
 								</div>
@@ -541,7 +546,9 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 										cssOverrides={css`
 											display: block;
 										`}
-										color={palette.border.secondary}
+										color={themePalette(
+											'--article-border-secondary',
+										)}
 									/>
 								</Hide>
 							</div>
@@ -663,7 +670,9 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 										cssOverrides={css`
 											display: block;
 										`}
-										color={palette.border.secondary}
+										color={themePalette(
+											'--article-border-secondary',
+										)}
 									/>
 									<SubMeta
 										format={format}
@@ -722,7 +731,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 						padSides={false}
 						showTopBorder={false}
 						showSideBorders={false}
-						backgroundColour={neutral[93]}
+						backgroundColour={sourcePalette.neutral[93]}
 						element="aside"
 					>
 						<AdSlot
@@ -832,7 +841,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 						padSides={false}
 						showTopBorder={false}
 						showSideBorders={false}
-						backgroundColour={neutral[93]}
+						backgroundColour={sourcePalette.neutral[93]}
 						element="aside"
 					>
 						<AdSlot
@@ -849,8 +858,10 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 						<SubNav
 							subNavSections={props.NAV.subNavSections}
 							currentNavLink={props.NAV.currentNavLink}
-							linkHoverColour={palette.text.articleLinkHover}
-							borderColour={palette.border.subNav}
+							linkHoverColour={themePalette(
+								'--article-link-text-hover',
+							)}
+							borderColour={themePalette('--sub-nav-border')}
 						/>
 					</Island>
 				</Section>
@@ -860,8 +871,8 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 					<Section
 						fullWidth={true}
 						padSides={false}
-						backgroundColour={brandBackground.primary}
-						borderColour={brandBorder.primary}
+						backgroundColour={sourcePalette.brand[400]}
+						borderColour={sourcePalette.brand[600]}
 						showSideBorders={false}
 						element="footer"
 					>
@@ -918,7 +929,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 				<Section
 					fullWidth={true}
 					data-print-layout="hide"
-					backgroundColour={neutral[97]}
+					backgroundColour={sourcePalette.neutral[97]}
 					padSides={false}
 					showSideBorders={false}
 					element="footer"

dotcom-rendering/src/layouts/LiveLayout.tsx

@@ -477,7 +477,9 @@ export const LiveLayout = (props: WebProps | AppsProps) => {
 					<Section
 						fullWidth={true}
 						showTopBorder={false}
-						backgroundColour={themePalette('--header-background')}
+						backgroundColour={themePalette(
+							'--headline-blog-background',
+						)}
 						borderColour={themePalette('--headline-border')}
 					>
 						<HeadlineGrid>