Support crosswords in Safari 13 (#13648)

* fix for safari 13 as the

* revert changes to packages

* Update Source and crossword packages and fix imports

* Update Source packages in apps rendering and fix imports

* Update `braze-components`

This updates the Source dependencies to 9.0.0,
matching DCAR, and fixes icon imports that have
changed in the latest Source release.

---------

Co-authored-by: oliverabrahams <[email protected]>

Author: jamesmockett

apps-rendering/package.json

@@ -48,10 +48,10 @@
 		"@guardian/content-atom-model": "4.0.1",
 		"@guardian/eslint-config": "7.0.1",
 		"@guardian/eslint-config-typescript": "9.0.1",
-		"@guardian/libs": "16.1.0",
+		"@guardian/libs": "22.0.0",
 		"@guardian/renditions": "0.2.0",
-		"@guardian/source": "8.0.0",
-		"@guardian/source-development-kitchen": "8.0.0",
+		"@guardian/source": "9.0.0",
+		"@guardian/source-development-kitchen": "17.0.0",
 		"@smithy/property-provider": "2.0.16",
 		"@storybook/addon-essentials": "8.4.2",
 		"@storybook/addon-webpack5-compiler-babel": "3.0.5",

apps-rendering/src/components/Deadline/index.tsx

@@ -1,4 +1,4 @@
-import { SvgClock } from '@guardian/source/react-components';
+import { SvgClockFilled } from '@guardian/source/react-components';
 import { isValidDate } from 'date';
 import React from 'react';
 import { highlight } from './styles';
@@ -50,7 +50,7 @@ const DeadlineDate = ({ until }: { until?: number }) => {
 	if (!deadlineText) return null;
 	return (
 		<Highlight>
-			<SvgClock size="xsmall" />
+			<SvgClockFilled size="xsmall" />
 			{deadlineText}
 		</Highlight>
 	);

apps-rendering/src/components/Layout/NewsletterSignUpLayout.tsx

@@ -10,7 +10,10 @@ import {
 	textSansBold14,
 	until,
 } from '@guardian/source/foundations';
-import { SvgClock, SvgNewsletter } from '@guardian/source/react-components';
+import {
+	SvgClockFilled,
+	SvgNewsletterFilled,
+} from '@guardian/source/react-components';
 import { OptionKind } from '../../../vendor/@guardian/types/index';
 import ArticleBody from 'components/ArticleBody';
 import Footer from 'components/Footer';
@@ -112,7 +115,7 @@ const NewsletterSignUpLayout = ({ item }: Props) => {
 						<>
 							{newsletter.regionFocus && (
 								<div css={detailBlockStyles}>
-									<SvgNewsletter size="small" />
+									<SvgNewsletterFilled size="small" />
 									<b>{newsletter.regionFocus} Focused</b>
 								</div>
 							)}
@@ -125,7 +128,7 @@ const NewsletterSignUpLayout = ({ item }: Props) => {
 					{maybeRender(item.promotedNewsletter, (newsletter) => (
 						<>
 							<div css={frequencyBlockStyles}>
-								<SvgClock size="xsmall" />
+								<SvgClockFilled size="xsmall" />
 
 								<span>
 									You&apos;ll receive this newsletter

apps-rendering/src/components/NewsletterSignup/index.tsx

@@ -16,7 +16,7 @@ import {
 	textSans14,
 	textSansBold14,
 } from '@guardian/source/foundations';
-import { SvgNewsletter } from '@guardian/source/react-components';
+import { SvgNewsletterFilled } from '@guardian/source/react-components';
 import type { NewsletterSignUp } from 'bodyElement';
 import { background, border, text } from 'palette';
 import { darkModeCss } from 'styles';
@@ -151,7 +151,7 @@ const NewsletterSignup = ({
 
 						<div css={noHeightFromTabletStyles}>
 							<div css={iconHolderStyles}>
-								<SvgNewsletter size="small" />
+								<SvgNewsletterFilled size="small" />
 								<b>{frequency}</b>
 							</div>
 						</div>

dotcom-rendering/package.json

@@ -37,7 +37,7 @@
 		"@emotion/react": "11.11.3",
 		"@emotion/server": "11.11.0",
 		"@guardian/ab-core": "8.0.0",
-		"@guardian/braze-components": "21.0.0",
+		"@guardian/braze-components": "22.0.0",
 		"@guardian/bridget": "8.1.0",
 		"@guardian/browserslist-config": "6.1.0",
 		"@guardian/cdk": "50.13.0",
@@ -50,10 +50,10 @@
 		"@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@4.1.0",
+		"@guardian/react-crossword-next": "npm:@guardian/react-crossword@5.0.0",
 		"@guardian/shimport": "1.0.2",
-		"@guardian/source": "8.0.0",
-		"@guardian/source-development-kitchen": "12.0.0",
+		"@guardian/source": "9.0.0",
+		"@guardian/source-development-kitchen": "17.0.0",
 		"@guardian/support-dotcom-components": "6.1.0",
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.45.3",

dotcom-rendering/src/components/Callout/Deadline.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { isUndefined } from '@guardian/libs';
 import { space, textSans12 } from '@guardian/source/foundations';
-import { SvgClock } from '@guardian/source/react-components';
+import { SvgClockFilled } from '@guardian/source/react-components';
 import { palette } from '../../palette';
 
 type Props = {
@@ -50,7 +50,7 @@ export const Deadline = ({ until }: Props) => {
 
 	return (
 		<span css={deadlineStyles}>
-			<SvgClock size="xsmall" />
+			<SvgClockFilled size="xsmall" />
 			{deadlineText}
 		</span>
 	);

dotcom-rendering/src/components/NewsletterDetail.tsx

@@ -4,7 +4,7 @@ import {
 	space,
 	textSansBold14,
 } from '@guardian/source/foundations';
-import { SvgNewsletter } from '@guardian/source/react-components';
+import { SvgNewsletterFilled } from '@guardian/source/react-components';
 
 type Props = {
 	text: string;
@@ -41,7 +41,7 @@ const spanStyle = css`
 export const NewsletterDetail = ({ text, iconSize = 'normal' }: Props) => (
 	<div css={containerStyle}>
 		<div css={svgStyle(iconSize)}>
-			<SvgNewsletter />
+			<SvgNewsletterFilled />
 		</div>
 		<span css={spanStyle}>{text}</span>
 	</div>

dotcom-rendering/src/components/NewsletterFrequency.tsx

@@ -4,7 +4,7 @@ import {
 	textSans14,
 	textSansBold14,
 } from '@guardian/source/foundations';
-import { SvgClock } from '@guardian/source/react-components';
+import { SvgClockFilled } from '@guardian/source/react-components';
 
 type Props = {
 	frequency: string;
@@ -29,7 +29,7 @@ export const NewsletterFrequency = ({ frequency }: Props) => {
 
 	return (
 		<div css={mainStyles}>
-			<SvgClock size="xsmall" />
+			<SvgClockFilled size="xsmall" />
 
 			<span css={spanStyles}>
 				You'll receive this newsletter <strong>{freq}</strong>

dotcom-rendering/src/lib/useMatchMedia.ts

@@ -31,11 +31,13 @@ const useMatchMedia = (query: string): boolean => {
 	/** @see https://react.dev/reference/react/useSyncExternalStore */
 	return useSyncExternalStore(
 		(callback) => {
-			mediaQuery?.addEventListener('change', callback);
-
-			return () => {
-				mediaQuery?.removeEventListener('change', callback);
-			};
+			if (mediaQuery && 'onchange' in mediaQuery) {
+				mediaQuery.addEventListener('change', callback);
+				return () => {
+					mediaQuery.removeEventListener('change', callback);
+				};
+			}
+			return () => undefined;
 		},
 		() => !!mediaQuery?.matches,
 		() => false, // we cannot have media queries on the server