add secondary top border styles

guardian · Nov 21, 2024 · bc53689 · bc53689
1 parent 9816b72
commit bc53689
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/dotcom-rendering/src/components/FrontSection.tsx b/dotcom-rendering/src/components/FrontSection.tsx
@@ -351,17 +351,21 @@ const containerLevelBottomPadding = css`
  * causing gaps in the vertical side borders from tablet upwards
  */
 const primaryLevelTopSpacer = css`
-	grid-row: primary-spacing;
-	grid-column: 1 / -1;
 	height: ${space[4]}px;
 	width: 100%;
 `;
 
-/** Must be combined with the primaryLevelTopSpacer to achieve the desired effect
- */
 const primaryLevelTopBorder = css`
-	z-index: 1;
+	grid-row: primary-spacing;
+	grid-column: 1 / -1;
 	border-bottom: 2px solid ${schemePalette('--section-border-primary')};
+	z-index: 1;
+`;
+
+const secondaryLevelTopBorder = css`
+	grid-row: primary-spacing;
+	grid-column: content;
+	border-top: 1px solid ${schemePalette('--section-border-secondary')};
 `;
 
 /**
@@ -509,11 +513,17 @@ export const FrontSection = ({
 					),
 				}}
 			>
-				{containerLevel === 'Primary' && (
+				{!!containerLevel && (
 					<div
 						css={[
-							primaryLevelTopSpacer,
-							showTopBorder && primaryLevelTopBorder,
+							containerLevel === 'Primary' &&
+								primaryLevelTopSpacer,
+							showTopBorder &&
+								containerLevel === 'Primary' &&
+								primaryLevelTopBorder,
+							showTopBorder &&
+								containerLevel === 'Secondary' &&
+								secondaryLevelTopBorder,
 						]}
 					/>
 				)}

diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts
@@ -6969,6 +6969,10 @@ const paletteColours = {
 		light: () => sourcePalette.neutral[20],
 		dark: () => sourcePalette.neutral[86],
 	},
+	'--section-border-secondary': {
+		light: () => sourcePalette.neutral[73],
+		dark: () => sourcePalette.neutral[38],
+	},
 	'--section-date': {
 		light: () => sourcePalette.news[400],
 		dark: () => sourcePalette.news[600],