Skip to content

ElectionTracker component #16574

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
JamieB-gu wants to merge 11 commits into
base: main
Choose a base branch
from
+1,821 −173
Draft

ElectionTracker component #16574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
98bb99a
`StackedProgress` excluded sections
JamieB-gu Aug 10, 2026
d92ee56
Fix `play` functions
JamieB-gu Aug 10, 2026
c9c101e
`Versus` optional image and colour
JamieB-gu Aug 10, 2026
1113789
Election trackers `ProgressNumber`
JamieB-gu Aug 10, 2026
42e6a67
Election trackers `SideBySide`
JamieB-gu Aug 10, 2026
0f8f4e3
Election trackers `OnwardLink`
JamieB-gu Aug 10, 2026
8994e85
Election trackers `USCongress`
JamieB-gu Aug 10, 2026
1bc45d2
Include others and independents
JamieB-gu Aug 11, 2026
a13cb7a
Add `play` function tests
JamieB-gu Aug 12, 2026
8e4579c
Fix story tests in split mode
JamieB-gu Aug 18, 2026
ff31a3f
`ElectionTracker` component
JamieB-gu Aug 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
350 changes: 350 additions & 0 deletions dotcom-rendering/src/components/ElectionTrackers/ElectionTracker.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,350 @@
import preview from '../../../.storybook/preview';
import { palette } from '../../palette';
import { UKLocal as ChangeBarsUKLocal } from './ChangeBars.stories';
import { ElectionTracker } from './ElectionTracker';
import {
UKGeneral as StackedProgressUKGeneral,
USPresidential as StackedProgressUSPresidential,
} from './StackedProgress.stories';
import { EUParliament as StackedProgressEUParliament } from './StackedProgress.stories';
import { EUParliament as ValuesWithChangeEUParliament } from './ValuesWithChange.stories';
import {
UKExitPoll as VersusUKExitPoll,
UKGeneral as VersusUKGeneral,
USPresidential as VersusUSPresidential,
} from './Versus.stories';

const meta = preview.meta({
title: 'Components/Election Trackers/Election Tracker',
component: ElectionTracker,
});

export const USCongressEmpty = meta.story({
args: {
components: [
{
kind: 'sideBySide',
from: 'tablet',
left: {
heading: 'Senate',
children: [
{
kind: 'versus',
props: {
left: {
name: 'Democrats',
abbreviation: 'Democrats',
value: 28,
change: 0,
colour: palette('--us-elections-democrats'),
image: undefined,
},
right: {
name: 'Republicans',
abbreviation: 'Republicans',
value: 38,
change: 0,
colour: palette(
'--us-elections-republicans',
),
image: undefined,
},
colour: 'none',
faded: false,
banner: undefined,
},
},
{
kind: 'stackedProgress',
props: {
total: 34,
label: '50',
calculateWinner: false,
excludedCopy: 'No election',
sections: [
{
name: 'Democrats',
colour: palette(
'--us-elections-democrats-alt',
),
value: 28,
align: 'left',
exclude: true,
},
{
name: 'Democrats',
colour: palette(
'--us-elections-democrats',
),
value: 0,
align: 'left',
exclude: false,
},
{
name: 'Others',
colour: palette(
'--us-elections-others',
),
value: 0,
align: 'left',
exclude: true,
},
{
name: 'Others',
colour: palette(
'--us-elections-others',
),
value: 0,
align: 'left',
exclude: false,
},
{
name: 'Republicans',
colour: palette(
'--us-elections-republicans-alt',
),
value: 38,
align: 'right',
exclude: true,
},
{
name: 'Republicans',
colour: palette(
'--us-elections-republicans',
),
value: 0,
align: 'right',
exclude: false,
},
],
},
},
{
kind: 'progressNumber',
props: {
additionalCopy: undefined,
copy: 'races called',
progress: 0,
total: 34,
},
},
],
},
right: {
heading: 'House',
children: [
{
kind: 'versus',
props: {
left: {
name: 'Democrats',
abbreviation: 'Democrats',
value: 0,
change: 0,
colour: palette('--us-elections-democrats'),
image: undefined,
},
right: {
name: 'Republicans',
abbreviation: 'Republicans',
value: 0,
change: 0,
colour: palette(
'--us-elections-republicans',
),
image: undefined,
},
colour: 'none',
faded: false,
banner: undefined,
},
},
{
kind: 'stackedProgress',
props: {
total: 435,
label: 'to win',
calculateWinner: true,
excludedCopy: undefined,
sections: [
{
name: 'Democrats',
colour: palette(
'--us-elections-democrats',
),
value: 0,
align: 'left',
exclude: false,
},
{
name: 'Others',
colour: palette(
'--us-elections-others',
),
value: 0,
align: 'left',
exclude: false,
},
{
name: 'Republicans',
colour: palette(
'--us-elections-republicans',
),
value: 0,
align: 'right',
exclude: false,
},
],
},
},
{
kind: 'progressNumber',
props: {
additionalCopy: undefined,
copy: 'races called',
progress: 0,
total: 435,
},
},
],
},
},
{
kind: 'onwardLink',
props: {
text: 'Full results',
link: new URL('https://www.theguardian.com'),
},
},
],
},
});

export const UKGeneralFinal = meta.story({
args: {
components: [
{
kind: 'versus',
props: VersusUKGeneral.composed.args,
},
{
kind: 'stackedProgress',
props: StackedProgressUKGeneral.composed.args,
},
{
kind: 'progressNumber',
props: {
progress: 650,
total: 650,
copy: 'seats declared',
additionalCopy: undefined,
},
},
{
kind: 'onwardLink',
props: {
text: 'See full results',
link: new URL('https://www.theguardian.com'),
},
},
],
},
});

export const UKGeneralExitPoll = meta.story({
args: {
components: [
{
kind: 'versus',
props: VersusUKExitPoll.composed.args,
},
{
kind: 'onwardLink',
props: {
text: 'View results page',
link: new URL('https://www.theguardian.com'),
},
},
],
},
});

export const UKLocal = meta.story({
args: {
components: [
{
kind: 'changeBars',
props: ChangeBarsUKLocal.args,
},
{
kind: 'progressNumber',
props: {
progress: 200,
total: 200,
copy: 'councils declared',
additionalCopy: undefined,
},
},
{
kind: 'onwardLink',
props: {
text: 'See full results',
link: new URL('https://www.theguardian.com'),
},
},
],
},
});

export const USPresidential = meta.story({
args: {
components: [
{
kind: 'progressNumber',
props: {
progress: 51,
total: 51,
copy: 'states called (includes DC)',
additionalCopy: 'Latest results',
},
},
{
kind: 'versus',
props: VersusUSPresidential.composed.args,
},
{
kind: 'stackedProgress',
props: StackedProgressUSPresidential.composed.args,
},
{
kind: 'onwardLink',
props: {
text: 'Full US election results',
link: new URL('https://www.theguardian.com'),
},
},
],
},
});

export const EUParliament = meta.story({
args: {
components: [
{
kind: 'stackedProgress',
props: StackedProgressEUParliament.composed.args,
},
{
kind: 'valuesWithChange',
props: ValuesWithChangeEUParliament.args,
},
{
kind: 'onwardLink',
props: {
text: 'See full results',
link: new URL('https://www.theguardian.com'),
},
},
],
},
});
Loading
Loading