Election trackers SideBySide

dotcom-rendering/src/components/ElectionTrackers/SideBySide.stories.tsx

@@ -0,0 +1,39 @@
+import { textEgyptian17Object } from '@guardian/source/foundations';
+import { allModes } from '../../../.storybook/modes';
+import preview from '../../../.storybook/preview';
+import { SideBySide as SideBySideComponent } from './SideBySide';
+
+const meta = preview.meta({
+	title: 'Components/Election Trackers/Side By Side',
+	component: SideBySideComponent,
+	parameters: {
+		chromatic: {
+			modes: {
+				'vertical mobileMedium': allModes['vertical mobileMedium'],
+				'vertical tablet': allModes['vertical tablet'],
+			},
+		},
+	},
+});
+
+export const SideBySide = meta.story({
+	args: {
+		from: 'tablet',
+		left: {
+			heading: 'Senate',
+			children: (
+				<p css={textEgyptian17Object}>
+					Some components on the left from the "tablet" breakpoint.
+				</p>
+			),
+		},
+		right: {
+			heading: 'House',
+			children: (
+				<p css={textEgyptian17Object}>
+					Some components on the right from the "tablet" breakpoint.
+				</p>
+			),
+		},
+	},
+});

dotcom-rendering/src/components/ElectionTrackers/SideBySide.tsx

@@ -0,0 +1,80 @@
+import {
+	type Breakpoint,
+	from,
+	headlineBold20Object,
+	headlineBold24Object,
+	space,
+} from '@guardian/source/foundations';
+import type { ReactNode } from 'react';
+import { palette } from '../../palette';
+
+type Props = {
+	/**
+	 * The breakpoint from which to place the components side-by-side.
+	 */
+	from: Breakpoint;
+	left: {
+		heading: string;
+		children: ReactNode;
+	};
+	right: {
+		heading: string;
+		children: ReactNode;
+	};
+};
+
+/**
+ * Handles a common design pattern, where components are placed above one
+ * another at narrower breakpoints and side-by-side at wider ones.
+ */
+export const SideBySide = (props: Props) => (
+	<div
+		css={{
+			[from[props.from]]: {
+				display: 'flex',
+			},
+		}}
+	>
+		<div
+			css={{
+				[from[props.from]]: {
+					flexBasis: '50%',
+					paddingRight: space[2],
+				},
+			}}
+		>
+			<Heading from={props.from}>{props.left.heading}</Heading>
+			{props.left.children}
+		</div>
+		<div
+			css={{
+				[from[props.from]]: {
+					flexBasis: '50%',
+					paddingLeft: space[2],
+					borderLeftStyle: 'solid',
+					borderLeftColor: palette('--election-tracker-border'),
+					borderLeftWidth: 1,
+				},
+			}}
+		>
+			<Heading from={props.from}>{props.right.heading}</Heading>
+			{props.right.children}
+		</div>
+	</div>
+);
+
+const Heading = (props: { children: string; from: Breakpoint }) => (
+	<h3
+		css={{
+			...headlineBold20Object,
+			paddingBottom: space[2],
+			paddingTop: space[4],
+			[from[props.from]]: {
+				...headlineBold24Object,
+				paddingTop: 0,
+			},
+		}}
+	>
+		{props.children}
+	</h3>
+);

dotcom-rendering/src/paletteDeclarations.ts

@@ -7153,6 +7153,10 @@ const paletteColours = {
 		light: editorialButtonText,
 		dark: editorialButtonTextDark,
 	},
+	'--election-tracker-border': {
+		light: () => sourcePalette.neutral[86],
+		dark: () => sourcePalette.neutral[20],
+	},
 	'--email-signup-button-background': {
 		light: emailSignupButtonBackgroundLight,
 		dark: emailSignupButtonBackgroundDark,