Merge branch 'main' into cc/three-tier-baner-v2

Author: charleycampbell

apps-rendering/package.json

@@ -37,9 +37,9 @@
 		"@babel/core": "7.26.10",
 		"@babel/preset-env": "7.26.9",
 		"@creditkarma/thrift-server-core": "1.0.4",
-		"@emotion/cache": "11.11.0",
-		"@emotion/jest": "11.11.0",
-		"@emotion/react": "11.11.3",
+		"@emotion/cache": "11.14.0",
+		"@emotion/jest": "11.13.0",
+		"@emotion/react": "11.14.0",
 		"@emotion/server": "11.11.0",
 		"@guardian/apps-rendering-api-models": "11.0.0",
 		"@guardian/bridget": "7.0.0",

dotcom-rendering/package.json

@@ -33,8 +33,8 @@
 		"@braze/web-sdk-core": "3.5.1",
 		"@creditkarma/thrift-server-core": "1.0.4",
 		"@emotion/babel-plugin": "11.13.5",
-		"@emotion/cache": "11.11.0",
-		"@emotion/react": "11.11.3",
+		"@emotion/cache": "11.14.0",
+		"@emotion/react": "11.14.0",
 		"@emotion/server": "11.11.0",
 		"@guardian/ab-core": "8.0.0",
 		"@guardian/braze-components": "22.0.0",
@@ -50,7 +50,7 @@
 		"@guardian/libs": "22.0.0",
 		"@guardian/ophan-tracker-js": "2.2.5",
 		"@guardian/react-crossword": "2.0.2",
-		"@guardian/react-crossword-next": "npm:@guardian/react-crossword@6.0.0",
+		"@guardian/react-crossword-next": "npm:@guardian/react-crossword@6.2.0",
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "9.0.0",
 		"@guardian/source-development-kitchen": "17.0.0",

dotcom-rendering/src/components/FollowButtons.tsx

@@ -1,18 +1,18 @@
 import { css } from '@emotion/react';
-import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { space, textSans15 } from '@guardian/source/foundations';
 import {
 	SvgCheckmark,
 	SvgNotificationsOff,
 	SvgNotificationsOn,
 	SvgPlus,
 } from '@guardian/source/react-components';
+import type { ReactNode } from 'react';
 import { palette } from '../palette';
 
 type IconProps = {
 	isFollowing?: boolean;
-	iconIsFollowing: EmotionJSX.Element;
-	iconIsNotFollowing: EmotionJSX.Element;
+	iconIsFollowing: ReactNode;
+	iconIsNotFollowing: ReactNode;
 };
 
 const FollowIcon = ({

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

@@ -34,6 +34,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default = {
 	args: {
+		now: '2025-03-24T15:53:12.604Z',
 		edition: 'UK',
 		guardianBaseUrl: 'https://www.theguardian.com',
 		initialDays,

dotcom-rendering/src/components/FootballMatchList.tsx

@@ -32,6 +32,7 @@ type Props = {
 	edition: EditionId;
 	guardianBaseUrl: string;
 	getMoreDays?: () => Promise<Result<'failed', FootballMatches>>;
+	now: string;
 };
 
 const REMOVE_TRAILING_DOTS_REGEX = /\.+$/;
@@ -221,10 +222,12 @@ const MatchWrapper = ({
 	children,
 }: {
 	match: FootballMatch;
-	now: Date;
+	now: string;
 	children: ReactNode;
 }) => {
-	if (shouldRenderMatchLink(new Date(match.dateTimeISOString), now)) {
+	if (
+		shouldRenderMatchLink(new Date(match.dateTimeISOString), new Date(now))
+	) {
 		return (
 			<li css={matchListItemStyles}>
 				<a
@@ -260,7 +263,7 @@ const Match = ({
 }: {
 	match: FootballMatch;
 	timeFormatter: Intl.DateTimeFormat;
-	now: Date;
+	now: string;
 }) => (
 	<MatchWrapper match={match} now={now}>
 		<MatchStatus match={match} timeFormatter={timeFormatter} />
@@ -387,14 +390,13 @@ export const FootballMatchList = ({
 	guardianBaseUrl,
 	initialDays,
 	getMoreDays,
+	now,
 }: Props) => {
 	const dateFormatter = getDateFormatter(edition);
 	const timeFormatter = getTimeFormatter(edition);
 
 	const [days, setDays] = useState(initialDays);
 	const [isError, setIsError] = useState<boolean>(false);
-	const now = new Date();
-
 	return (
 		<>
 			{days.map((day) => (

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

@@ -13,6 +13,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Results = {
 	args: {
+		now: '2025-03-24T15:53:12.604Z',
 		regions,
 		guardianBaseUrl: 'https://www.theguardian.com',
 		kind: 'Result',

dotcom-rendering/src/components/FootballMatchesPage.tsx

@@ -28,6 +28,7 @@ type Props = {
 	getMoreDays?: () => Promise<Result<'failed', FootballMatches>>;
 	renderAds: boolean;
 	pageId: string;
+	now: string;
 };
 
 const createTitle = (kind: FootballMatchKind, edition: EditionId) => {
@@ -47,6 +48,7 @@ const createTitle = (kind: FootballMatchKind, edition: EditionId) => {
 
 export const FootballMatchesPage = ({
 	regions,
+	now,
 	guardianBaseUrl,
 	kind,
 	initialDays,
@@ -121,6 +123,7 @@ export const FootballMatchesPage = ({
 			`}
 		>
 			<FootballMatchList
+				now={now}
 				initialDays={initialDays}
 				edition={edition}
 				getMoreDays={getMoreDays}

dotcom-rendering/src/components/FootballMatchesPageWrapper.importable.tsx

@@ -63,6 +63,7 @@ const goToCompetitionSpecificPage =
 
 type Props = {
 	regions: Region[];
+	now: string;
 	guardianBaseUrl: string;
 	ajaxUrl: string;
 	kind: FootballMatchKind;
@@ -75,6 +76,7 @@ type Props = {
 
 export const FootballMatchesPageWrapper = ({
 	regions,
+	now,
 	guardianBaseUrl,
 	ajaxUrl,
 	kind,
@@ -92,6 +94,7 @@ export const FootballMatchesPageWrapper = ({
 			guardianBaseUrl={guardianBaseUrl}
 			kind={kind}
 			initialDays={initialDays}
+			now={now}
 			edition={edition}
 			goToCompetitionSpecificPage={goToCompetitionSpecificPage(
 				guardianBaseUrl,

dotcom-rendering/src/components/FootballTableList.tsx

@@ -42,10 +42,17 @@ const footballTablesGridStyles = css`
 	}
 `;
 
-const CompetitionName = ({ children }: { children: ReactNode }) => (
+const CompetitionName = ({
+	children,
+	hasGroups,
+}: {
+	children: ReactNode;
+	hasGroups: boolean;
+}) => (
 	<h2
 		css={css`
 			${textSansBold14}
+			grid-row: ${hasGroups ? 2 : 1};
 			grid-column: centre-column-start / centre-column-end;
 			color: ${palette('--football-competition-text')};
 			border-top: 1px solid ${palette('--football-top-border')};
@@ -79,6 +86,7 @@ const GroupName = ({
 	<h3
 		css={css`
 			grid-column: centre-column-start / centre-column-end;
+			grid-row: ${1 + 3 * index};
 			padding-top: ${space[1]}px;
 			padding-bottom: ${space[3]}px;
 			border-top: 1px solid ${palette('--football-list-border')};
@@ -102,15 +110,12 @@ export const FootballTableList = ({ competitions, guardianBaseUrl }: Props) => (
 			<section key={competition.name} css={footballTablesGridStyles}>
 				{competition.tables.map((table, groupIndex) => (
 					<>
-						{competition.hasGroups && (
-							<GroupName index={groupIndex}>
-								{table.groupName}
-							</GroupName>
-						)}
 						{
 							// Only show the competition name above/beside the first group
 							groupIndex === 0 && (
-								<CompetitionName>
+								<CompetitionName
+									hasGroups={competition.hasGroups}
+								>
 									<a
 										href={`${guardianBaseUrl}${competition.url}`}
 										css={css`
@@ -126,8 +131,16 @@ export const FootballTableList = ({ competitions, guardianBaseUrl }: Props) => (
 								</CompetitionName>
 							)
 						}
+						{competition.hasGroups && (
+							<GroupName index={groupIndex}>
+								{table.groupName}
+							</GroupName>
+						)}
 						<div
 							css={css`
+								grid-row: ${competition.hasGroups
+									? 3 + 3 * groupIndex
+									: 1};
 								grid-column: centre-column-start /
 									centre-column-end;
 							`}

dotcom-rendering/src/components/marketing/lib/ReactComponent.tsx

@@ -3,7 +3,7 @@
  * This file was migrated from:
  * https://github.com/guardian/support-dotcom-components/blob/9c3eae7cb0b159db4a1c40679d6b37710b0bb937/packages/modules/src/types.ts#L12
  */
-import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
+import type { ReactNode } from 'react';
 
 // This type can be used in place of React.FC<T> which was previously widespread
 // in this codebase but is no longer recommended. In many cases it's possible to
@@ -17,4 +17,4 @@ import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 
 export type ReactComponent<GenericProps = Record<string, never>> = (
 	props: GenericProps,
-) => EmotionJSX.Element;
+) => ReactNode;