Update timeline article format to match tablet/desktop breakpoint des…

…igns
guardian · May 9, 2024 · a8569fd · a8569fd
1 parent e6ce0b6
commit a8569fd
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 10 deletions.
diff --git a/dotcom-rendering/src/components/ElementContainer.tsx b/dotcom-rendering/src/components/ElementContainer.tsx
@@ -34,6 +34,21 @@ const setBackgroundColour = (colour: string) => css`
 	background-color: ${colour};
 `;
 
+const timelineStyles = (colour: string) => css`
+	position: relative;
+	margin: auto;
+
+	${from.leftCol} {
+		max-width: 1140px;
+		border-left: 1px solid ${colour};
+		border-right: 1px solid ${colour};
+	}
+
+	${from.wide} {
+		max-width: 1300px;
+	}
+`;
+
 //Previously, borderColour would be set to palette.neutral[86] if the parameter being passed was undefined. We still want this as a fallback, but not for ArticleDesign.Picture pages (and probably not for any future pages with a similar design).
 const decideFallbackBorderColour = (format: ArticleFormat | undefined) => {
 	return format?.design === ArticleDesign.Picture
@@ -68,6 +83,7 @@ type Props = {
 	hasPageSkin?: boolean;
 	hasPageSkinContentSelfConstrain?: boolean;
 	format?: ArticleFormat;
+	isTimeline?: boolean;
 };
 
 /**
@@ -95,6 +111,7 @@ export const ElementContainer = ({
 	containerName,
 	hasPageSkin = false,
 	hasPageSkinContentSelfConstrain = false,
+	isTimeline = false,
 }: Props) =>
 	jsx(element, {
 		id: ophanComponentName,
@@ -116,14 +133,17 @@ export const ElementContainer = ({
 				 */
 				id={sectionId}
 				css={[
-					shouldCenter && center,
-					showSideBorders && sideBorderStyles(borderColour),
+					shouldCenter && !isTimeline && center,
+					showSideBorders &&
+						!isTimeline &&
+						sideBorderStyles(borderColour),
 					showTopBorder && topBorderStyles(borderColour),
 					innerBackgroundColour &&
 						setBackgroundColour(innerBackgroundColour),
 					padSides && sidePadding,
 					padBottom && bottomPadding,
 					hasPageSkin && pageSkinContainer,
+					isTimeline && timelineStyles(borderColour),
 				]}
 			>
 				{children}

diff --git a/dotcom-rendering/src/components/Section.tsx b/dotcom-rendering/src/components/Section.tsx
@@ -110,6 +110,10 @@ type Props = {
 	/** When there is a page skin in some special cases we still want the container to take full
 	 * width but the content to constrain itself e.g. Header */
 	hasPageSkinContentSelfConstrain?: boolean;
+	/**
+	 * Whether the article format is Timeline. Defaults to false.
+	 */
+	isTimeline?: boolean;
 	/**
 	 * @deprecated Do not use
 	 *
@@ -302,6 +306,7 @@ export const Section = ({
 	shouldCenter,
 	hasPageSkin = false,
 	hasPageSkinContentSelfConstrain = false,
+	isTimeline = false,
 	className,
 }: Props) => {
 	const overrides =
@@ -333,6 +338,7 @@ export const Section = ({
 				hasPageSkinContentSelfConstrain={
 					hasPageSkinContentSelfConstrain
 				}
+				isTimeline={isTimeline}
 			>
 				{children}
 			</ElementContainer>

diff --git a/dotcom-rendering/src/components/Timeline.tsx b/dotcom-rendering/src/components/Timeline.tsx
@@ -145,10 +145,11 @@ const eventStyles = css`
 	position: relative;
 
 	${from.tablet} {
-		margin-left: -21px;
-		margin-right: -21px;
+		border-left: none;
 	}
+
 	${from.leftCol} {
+		border-left: 1px solid ${palette('--timeline-event-border')};
 		margin-left: -11px;
 		margin-right: -11px;
 	}
@@ -162,10 +163,11 @@ const labelStyles = css`
 	${textSans.small({ fontWeight: 'regular' })}
 
 	${from.tablet} {
-		margin-left: -21px;
-		margin-right: -21px;
+		border-left: none;
 	}
+
 	${from.leftCol} {
+		border-left: 1px solid ${palette('--timeline-event-border')};
 		margin-left: -11px;
 		margin-right: -11px;
 	}
@@ -225,6 +227,16 @@ const TimelineEvent = ({
 	</>
 );
 
+const containerStyles = css`
+	border-left: none;
+	${from.tablet} {
+		border-left: 1px solid ${palette('--timeline-event-border')};
+	}
+	${from.leftCol} {
+		border-left: none;
+	}
+`;
+
 // ----- Timeline ----- //
 
 type Props = {
@@ -243,7 +255,7 @@ export const Timeline = ({
 			const someEventsHaveTitles = timeline.events.some(hasTitle);
 
 			return (
-				<>
+				<div css={containerStyles}>
 					{timeline.events.map((event) => (
 						<TimelineEvent
 							event={event}
@@ -254,7 +266,7 @@ export const Timeline = ({
 							format={format}
 						/>
 					))}
-				</>
+				</div>
 			);
 		}
 		case 'model.dotcomrendering.pageElements.DCRSectionedTimelineBlockElement': {
@@ -263,7 +275,7 @@ export const Timeline = ({
 			);
 
 			return (
-				<>
+				<div css={containerStyles}>
 					{timeline.sections.map((section) => (
 						<section key={section.title}>
 							<Subheading format={format} topPadding={false}>
@@ -283,7 +295,7 @@ export const Timeline = ({
 							))}
 						</section>
 					))}
-				</>
+				</div>
 			);
 		}
 	}

diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -391,6 +391,8 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 			? article.matchUrl
 			: undefined;
 
+	const isTimeline = format.design === ArticleDesign.Timeline;
+
 	const isMatchReport =
 		format.design === ArticleDesign.MatchReport && !!footballMatchUrl;
 
@@ -494,6 +496,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 								padSides={false}
 								backgroundColour={sourcePalette.brand[400]}
 								element="nav"
+								isTimeline={isTimeline}
 							>
 								<Nav
 									nav={props.NAV}
@@ -526,6 +529,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 										)}
 										padSides={false}
 										element="aside"
+										isTimeline={isTimeline}
 									>
 										<Island
 											priority="enhancement"
@@ -552,6 +556,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 										)}
 										padSides={false}
 										showTopBorder={false}
+										isTimeline={isTimeline}
 									>
 										<StraightLines
 											count={4}
@@ -613,6 +618,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 						'--article-inner-background',
 					)}
 					element="article"
+					// isTimeline={isTimeline}
 				>
 					<StandardGrid
 						isMatchReport={isMatchReport}