Add container top bar as well as card topbar (#12410)

guardian · Sep 19, 2024 · 1130339 · 1130339
1 parent 611d5a9
commit 1130339
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 4 deletions.
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -418,7 +418,8 @@ export const Card = ({
 	return (
 		<CardWrapper
 			format={format}
-			showTopBar={!isOnwardContent}
+			showTopBar={!isOnwardContent && !isFlexibleContainer}
+			showMobileTopBar={isFlexibleContainer}
 			containerPalette={containerPalette}
 			isOnwardContent={isOnwardContent}
 		>

diff --git a/dotcom-rendering/src/components/Card/components/CardWrapper.tsx b/dotcom-rendering/src/components/Card/components/CardWrapper.tsx
@@ -1,6 +1,10 @@
 import { css } from '@emotion/react';
 import type { ArticleFormat } from '@guardian/libs';
-import { palette as sourcePalette, space } from '@guardian/source/foundations';
+import {
+	palette as sourcePalette,
+	space,
+	until,
+} from '@guardian/source/foundations';
 import { palette } from '../../../palette';
 import type { DCRContainerPalette } from '../../../types/front';
 import { ContainerOverrides } from '../../ContainerOverrides';
@@ -11,6 +15,7 @@ type Props = {
 	format: ArticleFormat;
 	containerPalette?: DCRContainerPalette;
 	showTopBar?: boolean;
+	showMobileTopBar?: boolean;
 	isOnwardContent?: boolean;
 };
 
@@ -76,6 +81,12 @@ const topBarStyles = css`
 	}
 `;
 
+const mobileTopBarStyles = css`
+	${until.tablet} {
+		${topBarStyles}
+	}
+`;
+
 const onwardContentStyles = css`
 	border-radius: ${space[2]}px;
 	overflow: hidden;
@@ -90,6 +101,7 @@ export const CardWrapper = ({
 	format,
 	containerPalette,
 	showTopBar = true,
+	showMobileTopBar = false,
 	isOnwardContent = false,
 }: Props) => {
 	return (
@@ -101,6 +113,7 @@ export const CardWrapper = ({
 						hoverStyles,
 						sublinkHoverStyles,
 						showTopBar && topBarStyles,
+						showMobileTopBar && mobileTopBarStyles,
 						isOnwardContent && onwardContentStyles,
 					]}
 				>

diff --git a/dotcom-rendering/src/components/Card/components/UL.tsx b/dotcom-rendering/src/components/Card/components/UL.tsx
@@ -38,6 +38,22 @@ const marginBottomStyles = css`
 	margin-bottom: ${space[3]}px;
 `;
 
+const topBarStyles = css`
+	${from.tablet} {
+		padding-top: 8px;
+		::before {
+			content: '';
+			display: block;
+			position: absolute;
+			top: 0px;
+			left: 10px;
+			width: calc(100% - 20px);
+			height: 1px;
+			background-color: ${palette('--card-border-top')};
+		}
+	}
+`;
+
 type Props = {
 	children: React.ReactNode;
 	/** Passed to flex-direction */
@@ -48,6 +64,8 @@ type Props = {
 	padBottom?: boolean;
 	/** Used to keep cards aligned in adjacent columns */
 	wrapCards?: boolean;
+	/** Used to display a full width bar along the top of the container */
+	showTopBar?: boolean;
 };
 
 export const UL = ({
@@ -56,6 +74,7 @@ export const UL = ({
 	showDivider = false,
 	padBottom = false,
 	wrapCards = false,
+	showTopBar = false,
 }: Props) => {
 	return (
 		<ul
@@ -64,6 +83,7 @@ export const UL = ({
 				showDivider && verticalDivider(palette('--section-border')),
 				padBottom && marginBottomStyles,
 				wrapCards && wrapStyles,
+				showTopBar && topBarStyles,
 			]}
 		>
 			{children}

diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx
@@ -152,7 +152,7 @@ const TwoCardOrFourCardLayout = ({
 }) => {
 	const hasTwoOrFewerCards = cards.length <= 2;
 	return (
-		<UL direction="row" padBottom={padBottom}>
+		<UL direction="row" padBottom={padBottom} showTopBar={true}>
 			{cards.map((card, cardIndex) => {
 				return (
 					<LI
@@ -173,7 +173,8 @@ const TwoCardOrFourCardLayout = ({
 							imagePositionOnDesktop={
 								hasTwoOrFewerCards ? 'left' : 'bottom'
 							}
-							supportingContent={undefined} // we don't want to support sublinks on standard cards here so we hard code to undefined.
+							/* we don't want to support sublinks on standard cards here so we hard code to undefined */
+							supportingContent={undefined}
 							imageSize={'medium'}
 							aspectRatio="5:4"
 							kickerText={card.kickerText}