chore: merge main into this branch

apps-rendering/src/components/KeyEvents/KeyEvents.stories.tsx

@@ -0,0 +1,124 @@
+// ----- Imports ----- //
+
+import { css } from '@emotion/react';
+import type { ArticleFormat, ArticleTheme } from '@guardian/libs';
+import {
+	ArticleDesign,
+	ArticleDisplay,
+	ArticlePillar,
+	ArticleSpecial,
+} from '@guardian/libs';
+import type { ReactElement } from 'react';
+import type { KeyEvent } from '.';
+import KeyEvents from '.';
+
+// ----- Stories ----- //
+
+const events: KeyEvent[] = [
+	{
+		date: new Date(1 * 60 * 1000),
+		text: 'Gold for Uganda',
+		url: 'https://www.theguardian.com/environment/2021/sep/01/opec-member-urges-oil-producers-to-focus-more-on-renewable-energy',
+	},
+	{
+		date: new Date(2 * 60 * 1000),
+		text: 'Ben Maher goes into the gold medal sport in the equestrian jumps',
+		url: 'https://www.theguardian.com/environment/2021/sep/01/opec-member-urges-oil-producers-to-focus-more-on-renewable-energy',
+	},
+	{
+		date: new Date(3 * 60 * 1000),
+		text: 'Gold for Uganda',
+		url: 'https://www.theguardian.com/environment/2021/sep/01/opec-member-urges-oil-producers-to-focus-more-on-renewable-energy',
+	},
+	{
+		date: new Date(5 * 60 * 1000),
+		text: 'Gold for Uganda',
+		url: 'https://www.theguardian.com/environment/2021/sep/01/opec-member-urges-oil-producers-to-focus-more-on-renewable-energy',
+	},
+	{
+		date: new Date(9 * 60 * 1000),
+		text: 'Jodie Williams qualifies for the 400m final',
+		url: 'https://www.theguardian.com/environment/2021/sep/01/opec-member-urges-oil-producers-to-focus-more-on-renewable-energy',
+	},
+	{
+		date: new Date(15 * 60 * 1000),
+		text: 'Gold for Uganda',
+		url: 'https://www.theguardian.com/environment/2021/sep/01/opec-member-urges-oil-producers-to-focus-more-on-renewable-energy',
+	},
+	{
+		date: new Date(20 * 60 * 1000),
+		text: 'Gold for Uganda',
+		url: 'https://www.theguardian.com/environment/2021/sep/01/opec-member-urges-oil-producers-to-focus-more-on-renewable-energy',
+	},
+	{
+		date: new Date(35 * 60 * 1000),
+		text: 'Gold for Uganda',
+		url: 'https://www.theguardian.com/environment/2021/sep/01/opec-member-urges-oil-producers-to-focus-more-on-renewable-energy',
+	},
+];
+
+const KeyEventComp = (
+	dark: boolean,
+	format: ArticleFormat,
+	title: string,
+): ReactElement => (
+	<div
+		css={css`
+			flex-grow: 1;
+		`}
+	>
+		<div>{title}</div>
+		<KeyEvents keyEvents={events} format={format} supportsDarkMode={dark} />
+	</div>
+);
+
+const getFormat = (theme: ArticleTheme): ArticleFormat => {
+	return {
+		design: ArticleDesign.Standard,
+		display: ArticleDisplay.Standard,
+		theme: theme,
+	};
+};
+
+const keyEventWithTheme = (dark: boolean): (() => ReactElement) => {
+	const KeyEvent = (): ReactElement => (
+		<div
+			css={css`
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				flex-wrap: wrap;
+			`}
+		>
+			{KeyEventComp(dark, getFormat(ArticlePillar.News), 'News')}
+			{KeyEventComp(dark, getFormat(ArticlePillar.Culture), 'Culture')}
+			{KeyEventComp(
+				dark,
+				getFormat(ArticlePillar.Lifestyle),
+				'Lifestyle',
+			)}
+			{KeyEventComp(dark, getFormat(ArticlePillar.Opinion), 'Opinion')}
+			{KeyEventComp(dark, getFormat(ArticlePillar.Sport), 'Sport')}
+			{KeyEventComp(dark, getFormat(ArticleSpecial.Labs), 'Labs')}
+			{KeyEventComp(
+				dark,
+				getFormat(ArticleSpecial.SpecialReport),
+				'SpecialReport',
+			)}
+		</div>
+	);
+
+	return KeyEvent;
+};
+
+const Default = keyEventWithTheme(false);
+const Dark = keyEventWithTheme(true);
+
+// ----- Exports ----- //
+
+export default {
+	component: KeyEvents,
+	title: 'AR/KeyEvents',
+};
+
+export { Default, Dark };

common-rendering/src/components/keyEvents.tsx → apps-rendering/src/components/KeyEvents/index.tsx

@@ -2,30 +2,32 @@
 
 import { css } from '@emotion/react';
 import type { SerializedStyles } from '@emotion/react';
+import Accordion from '@guardian/common-rendering/src/components/accordion';
+import {
+	background,
+	text,
+} from '@guardian/common-rendering/src/editorialPalette';
+import { darkModeCss } from '@guardian/common-rendering/src/lib';
+import type { ArticleFormat, ArticleTheme } from '@guardian/libs';
+import { ArticlePillar, timeAgo } from '@guardian/libs';
 import {
-	textSans,
-	sport,
 	culture,
+	from,
 	lifestyle,
-	opinion,
-	news,
 	neutral,
+	news,
+	opinion,
 	remSpace,
-	from,
+	sport,
+	textSans,
 } from '@guardian/source-foundations';
 import { Link } from '@guardian/source-react-components';
-import {
-	ArticleFormat,
-	ArticlePillar,
-	ArticleTheme,
-	timeAgo,
-} from '@guardian/libs';
-import { darkModeCss } from '../lib';
-import Accordion from './accordion';
-import { background, text } from '../editorialPalette';
+import type { FC } from 'react';
 
 // ----- Component ----- //
-type paletteId = 300 | 400 | 500;
+
+type PaletteId = 300 | 400 | 500;
+
 interface KeyEvent {
 	date: Date;
 	text: string;
@@ -44,7 +46,7 @@ interface ListItemProps {
 	supportsDarkMode: boolean;
 }
 
-const getColor = (theme: ArticleTheme, paletteId: paletteId) => {
+const getColour = (theme: ArticleTheme, paletteId: PaletteId): string => {
 	switch (theme) {
 		case ArticlePillar.Sport:
 			return sport[paletteId];
@@ -176,9 +178,9 @@ const textStyles = (
 	}
 
 	${darkModeCss(supportsDarkMode)`
-		color: ${getColor(format.theme, 500)};
+		color: ${getColour(format.theme, 500)};
 		&:hover {
-			color: ${getColor(format.theme, 500)};
+			color: ${getColour(format.theme, 500)};
 		}
 	`}
 `;
@@ -194,7 +196,11 @@ const timeStyles = (supportsDarkMode: boolean): SerializedStyles => css`
 	`}
 `;
 
-const ListItem = ({ keyEvent, format, supportsDarkMode }: ListItemProps) => {
+const ListItem: FC<ListItemProps> = ({
+	keyEvent,
+	format,
+	supportsDarkMode,
+}) => {
 	return (
 		<li css={listItemStyles(supportsDarkMode)}>
 			<Link
@@ -228,10 +234,15 @@ const ListItem = ({ keyEvent, format, supportsDarkMode }: ListItemProps) => {
 	);
 };
 
-const KeyEvents = ({ keyEvents, format, supportsDarkMode }: KeyEventsProps) => {
+const KeyEvents: FC<KeyEventsProps> = ({
+	keyEvents,
+	format,
+	supportsDarkMode,
+}) => {
 	return (
 		<nav
-			// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+			// https://github.com/guardian/dotcom-rendering/pull/3693
+			// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- See PR above.
 			tabIndex={0}
 			id="keyevents"
 			css={keyEventWrapperStyles(

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

@@ -2,8 +2,6 @@
 
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
-import type { KeyEvent } from '@guardian/common-rendering/src/components/keyEvents';
-import KeyEvents from '@guardian/common-rendering/src/components/keyEvents';
 import { background } from '@guardian/common-rendering/src/editorialPalette';
 import type { ArticleFormat } from '@guardian/libs';
 import { ArticleDesign } from '@guardian/libs';
@@ -17,6 +15,8 @@ import {
 import { fromNullable } from '@guardian/types';
 import Footer from 'components/Footer';
 import GridItem from 'components/GridItem';
+import type { KeyEvent } from 'components/KeyEvents';
+import KeyEvents from 'components/KeyEvents';
 import LiveBlocks from 'components/LiveBlocks';
 import LiveblogHeader from 'components/LiveblogHeader';
 import MainMedia from 'components/MainMedia';

apps-rendering/src/components/TableOfContents/TableOfContents.stories.tsx

@@ -1,5 +1,10 @@
 import type { ArticleFormat } from '@guardian/libs';
-import { ArticleDesign, ArticleDisplay, ArticlePillar } from '@guardian/libs';
+import {
+	ArticleDesign,
+	ArticleDisplay,
+	ArticlePillar,
+	ArticleSpecial,
+} from '@guardian/libs';
 import { explainer } from 'fixtures/item';
 import type { ReactElement } from 'react';
 import TableOfContents from '.';
@@ -10,13 +15,36 @@ const format: ArticleFormat = {
 	theme: ArticlePillar.News,
 };
 
+const immersiveDisplayFormat: ArticleFormat = {
+	design: ArticleDesign.Standard,
+	display: ArticleDisplay.Immersive,
+	theme: ArticlePillar.News,
+};
+
+const labsThemeFormat: ArticleFormat = {
+	design: ArticleDesign.Standard,
+	display: ArticleDisplay.Standard,
+	theme: ArticleSpecial.Labs,
+};
+
 const Default = (): ReactElement => (
 	<TableOfContents outline={explainer.outline} format={format} />
 );
 
+const Immersive = (): ReactElement => (
+	<TableOfContents
+		outline={explainer.outline}
+		format={immersiveDisplayFormat}
+	/>
+);
+
+const Labs = (): ReactElement => (
+	<TableOfContents outline={explainer.outline} format={labsThemeFormat} />
+);
+
 export default {
 	component: TableOfContents,
 	title: 'AR/TableOfContents',
 };
 
-export { Default };
+export { Default, Immersive, Labs };