From 1113789fcb58d58d12cd151e0df9fa2d63f355f2 Mon Sep 17 00:00:00 2001
From: Jamie B <53781962+JamieB-gu@users.noreply.github.com>
Date: Mon, 10 Aug 2026 14:42:00 +0100
Subject: [PATCH] Election trackers `ProgressNumber`

A small component that can be used in election trackers. Represents
progress towards a total in text form. For example, "300/650 seats
declared" or "290/435 races called".
---
 .../ProgressNumber.stories.tsx                | 24 ++++++
 .../ElectionTrackers/ProgressNumber.tsx       | 77 +++++++++++++++++++
 2 files changed, 101 insertions(+)
 create mode 100644 dotcom-rendering/src/components/ElectionTrackers/ProgressNumber.stories.tsx
 create mode 100644 dotcom-rendering/src/components/ElectionTrackers/ProgressNumber.tsx

diff --git a/dotcom-rendering/src/components/ElectionTrackers/ProgressNumber.stories.tsx b/dotcom-rendering/src/components/ElectionTrackers/ProgressNumber.stories.tsx
new file mode 100644
index 00000000000..e90e9f070e4
--- /dev/null
+++ b/dotcom-rendering/src/components/ElectionTrackers/ProgressNumber.stories.tsx
@@ -0,0 +1,24 @@
+import { allModes } from '../../../.storybook/modes';
+import preview from '../../../.storybook/preview';
+import { ProgressNumber as ProgressNumberComponent } from './ProgressNumber';
+
+const meta = preview.meta({
+	title: 'Components/Election Trackers/Progress Number',
+	component: ProgressNumberComponent,
+	parameters: {
+		chromatic: {
+			modes: {
+				'vertical mobileMedium': allModes['vertical mobileMedium'],
+			},
+		},
+	},
+});
+
+export const ProgressNumber = meta.story({
+	args: {
+		progress: 300,
+		total: 650,
+		copy: 'seats declared',
+		additionalCopy: 'Additional context',
+	},
+});
diff --git a/dotcom-rendering/src/components/ElectionTrackers/ProgressNumber.tsx b/dotcom-rendering/src/components/ElectionTrackers/ProgressNumber.tsx
new file mode 100644
index 00000000000..a37c7b8e8bf
--- /dev/null
+++ b/dotcom-rendering/src/components/ElectionTrackers/ProgressNumber.tsx
@@ -0,0 +1,77 @@
+import {
+	space,
+	textSans14Object,
+	textSansBold14Object,
+} from '@guardian/source/foundations';
+
+type Props = {
+	/**
+	 * Progress towards a total. For example, seats declared so far in an
+	 * election.
+	 */
+	progress: number;
+	/**
+	 * The total being progressed towards. For example, the total number of
+	 * seats up for election.
+	 */
+	total: number;
+	/**
+	 * The copy describing the numbers. For example "seats declared" or "races
+	 * called".
+	 */
+	copy: string;
+	/**
+	 * Additional copy that may provide more context for the graphic in which
+	 * this appears. Will appear on the same line as the progress number, but
+	 * left-aligned.
+	 */
+	additionalCopy: string | undefined;
+};
+
+/**
+ * Represents progress towards a total in text form. Right-aligned, with any
+ * `additionalCopy` left-aligned.
+ *
+ * @example
+ * <caption>This will generate "300/650 seats declared"</caption>
+ * <ProgressNumber
+ *   progress={300}
+ *   total={650}
+ *   copy="seats declared"
+ *   additionalCopy={undefined}
+ * />
+ */
+export const ProgressNumber = (props: Props) => {
+	if (props.additionalCopy === undefined) {
+		return <Numbers {...props} />;
+	}
+
+	return (
+		<div css={{ display: 'flex', justifyContent: 'space-between' }}>
+			<p
+				css={{
+					...textSans14Object,
+					paddingTop: space[2],
+				}}
+			>
+				{props.additionalCopy}
+			</p>
+			<Numbers {...props} />
+		</div>
+	);
+};
+
+const Numbers = (props: Omit<Props, 'additionalCopy'>) => (
+	<p
+		css={{
+			...textSans14Object,
+			textAlign: 'right',
+			paddingTop: space[2],
+		}}
+	>
+		<strong css={textSansBold14Object}>
+			{props.progress}/{props.total}
+		</strong>{' '}
+		{props.copy}
+	</p>
+);