Control top bar visibility on cards via props rather than container c…

…ontext (#12514)
guardian · Oct 9, 2024 · 4f75a0d · 4f75a0d
1 parent 00f32f7
commit 4f75a0d
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 11 deletions.
diff --git a/dotcom-rendering/src/components/Card/Card.stories.tsx b/dotcom-rendering/src/components/Card/Card.stories.tsx
@@ -1575,6 +1575,8 @@ export const WithALargeGap = () => {
 							design: ArticleDesign.Comment,
 							theme: Pillar.Opinion,
 						}}
+						showTopBarDesktop={false}
+						showTopBarMobile={true}
 					/>
 				</div>
 			</CardWrapper>

diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -116,6 +116,8 @@ export type Props = {
 	index?: number;
 	/** The Splash card in a flexible container gets a different visual treatment to other cards*/
 	isFlexSplash?: boolean;
+	showTopBarDesktop?: boolean;
+	showTopBarMobile?: boolean;
 };
 
 const starWrapper = (cardHasImage: boolean) => css`
@@ -268,6 +270,8 @@ export const Card = ({
 	boostedFontSizes,
 	index = 0,
 	isFlexSplash,
+	showTopBarDesktop = true,
+	showTopBarMobile = false,
 }: Props) => {
 	const hasSublinks = supportingContent && supportingContent.length > 0;
 	const sublinkPosition = decideSublinkPosition(
@@ -454,8 +458,8 @@ export const Card = ({
 	return (
 		<CardWrapper
 			format={format}
-			showTopBar={!isOnwardContent && !isFlexibleContainer}
-			showMobileTopBar={isFlexibleContainer}
+			showTopBarDesktop={!isOnwardContent && showTopBarDesktop}
+			showTopBarMobile={showTopBarMobile}
 			containerPalette={containerPalette}
 			isOnwardContent={isOnwardContent}
 		>

diff --git a/dotcom-rendering/src/components/Card/components/CardWrapper.tsx b/dotcom-rendering/src/components/Card/components/CardWrapper.tsx
@@ -14,8 +14,8 @@ type Props = {
 	children: React.ReactNode;
 	format: ArticleFormat;
 	containerPalette?: DCRContainerPalette;
-	showTopBar?: boolean;
-	showMobileTopBar?: boolean;
+	showTopBarDesktop?: boolean;
+	showTopBarMobile?: boolean;
 	isOnwardContent?: boolean;
 };
 
@@ -70,7 +70,7 @@ const sublinkHoverStyles = css`
 	}
 `;
 
-const topBarStyles = css`
+const desktopTopBarStyles = css`
 	:before {
 		border-top: 1px solid ${palette('--card-border-top')};
 		content: '';
@@ -83,7 +83,7 @@ const topBarStyles = css`
 
 const mobileTopBarStyles = css`
 	${until.tablet} {
-		${topBarStyles}
+		${desktopTopBarStyles}
 	}
 `;
 
@@ -100,8 +100,8 @@ export const CardWrapper = ({
 	children,
 	format,
 	containerPalette,
-	showTopBar = true,
-	showMobileTopBar = false,
+	showTopBarDesktop = true,
+	showTopBarMobile = false,
 	isOnwardContent = false,
 }: Props) => {
 	return (
@@ -112,8 +112,8 @@ export const CardWrapper = ({
 						baseCardStyles,
 						hoverStyles,
 						sublinkHoverStyles,
-						showTopBar && topBarStyles,
-						showMobileTopBar && mobileTopBarStyles,
+						showTopBarDesktop && desktopTopBarStyles,
+						showTopBarMobile && mobileTopBarStyles,
 						isOnwardContent && onwardContentStyles,
 					]}
 				>

diff --git a/dotcom-rendering/src/components/Carousel.importable.tsx b/dotcom-rendering/src/components/Carousel.importable.tsx
@@ -540,6 +540,8 @@ const CarouselCard = ({
 				absoluteServerTimes={absoluteServerTimes}
 				starRating={starRating}
 				index={index}
+				showTopBarDesktop={!isOnwardContent}
+				showTopBarMobile={false}
 			/>
 		</LI>
 	);

diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx
@@ -181,6 +181,8 @@ export const SplashCardLayout = ({
 					showLivePlayable={card.showLivePlayable}
 					boostedFontSizes={true}
 					isFlexSplash={true}
+					showTopBarDesktop={false}
+					showTopBarMobile={true}
 				/>
 			</LI>
 		</UL>
@@ -262,6 +264,8 @@ export const BoostedCardLayout = ({
 					aspectRatio="5:4"
 					kickerText={card.kickerText}
 					showLivePlayable={card.showLivePlayable}
+					showTopBarDesktop={false}
+					showTopBarMobile={true}
 				/>
 			</LI>
 		</UL>
@@ -314,6 +318,8 @@ export const StandardCardLayout = ({
 							aspectRatio="5:4"
 							kickerText={card.kickerText}
 							showLivePlayable={false}
+							showTopBarDesktop={false}
+							showTopBarMobile={true}
 						/>
 					</LI>
 				);

diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx
@@ -137,6 +137,8 @@ export const OneCardLayout = ({
 					showLivePlayable={card.showLivePlayable}
 					boostedFontSizes={true}
 					isFlexSplash={true}
+					showTopBarDesktop={false}
+					showTopBarMobile={true}
 				/>
 			</LI>
 		</UL>
@@ -192,6 +194,8 @@ const TwoCardOrFourCardLayout = ({
 							aspectRatio="5:4"
 							kickerText={card.kickerText}
 							showLivePlayable={false}
+							showTopBarDesktop={false}
+							showTopBarMobile={true}
 						/>
 					</LI>
 				);

diff --git a/dotcom-rendering/src/components/ScrollableSmallContainer.importable.tsx b/dotcom-rendering/src/components/ScrollableSmallContainer.importable.tsx
@@ -239,7 +239,8 @@ export const ScrollableSmallContainer = ({
 								aspectRatio="5:4"
 								kickerText={trail.kickerText}
 								showLivePlayable={trail.showLivePlayable}
-								// TODO - specify card props
+								showTopBarDesktop={false}
+								showTopBarMobile={false}
 							/>
 						</li>
 					);