diff --git a/dotcom-rendering/src/components/ElectionTrackers/Versus.tsx b/dotcom-rendering/src/components/ElectionTrackers/Versus.tsx index 0909617f847..0c1e011baf1 100644 --- a/dotcom-rendering/src/components/ElectionTrackers/Versus.tsx +++ b/dotcom-rendering/src/components/ElectionTrackers/Versus.tsx @@ -7,6 +7,7 @@ import { headlineMedium20Object, headlineMedium24Object, headlineMedium34Object, + space, textSans12Object, } from '@guardian/source/foundations'; import { generateImageURL } from '../../lib/image'; @@ -166,24 +167,19 @@ const GroupComponent = (props: { : textColour(props.faded) } /> - - {'change' in props.group ? ( - - ) : ( + {'description' in props.group ? ( - )} + ) : null}

); @@ -230,6 +226,53 @@ const Name = ({ ); +const ValueWithChange = (props: { + align: 'left' | 'right'; + colour: Props['colour']; + faded: Props['faded']; + group: Group; +}) => { + const value = ( + + ); + + const change = + 'change' in props.group ? : null; + + if (props.group.image !== undefined) { + return ( + <> + {value} + {change} + + ); + } + + return ( + + {value} + {change} + + ); +}; + const Value = (props: { value: Group['value']; colour: string;