diff --git a/dotcom-rendering/src/components/ElementContainer.tsx b/dotcom-rendering/src/components/ElementContainer.tsx index 4940a479302..b0774d1fdb0 100644 --- 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 index 3eda1f8df48..0b5f3a2dd1a 100644 --- 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} diff --git a/dotcom-rendering/src/components/Timeline.tsx b/dotcom-rendering/src/components/Timeline.tsx index dd85dac6575..8e0f355ba32 100644 --- 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 ( - <> +