Merge pull request #13655 from guardian/doml/refactor/card-wrapper-top-bar

Refactor card wrapper top bar

Author: domlander

dotcom-rendering/src/components/Card/Card.stories.tsx

@@ -1492,6 +1492,7 @@ export const WithAFiveFourAspectRatio = () => {
 		</>
 	);
 };
+
 export const WithNoGap = () => {
 	return (
 		<>
@@ -1505,6 +1506,8 @@ export const WithNoGap = () => {
 						{...basicCardProps}
 						imagePositionOnDesktop="left"
 						isOnwardContent={true}
+						showTopBarDesktop={false}
+						showTopBarMobile={false}
 						format={{
 							display: ArticleDisplay.Standard,
 							design: ArticleDesign.Standard,
@@ -1629,6 +1632,8 @@ export const WithNoVerticalGap = () => {
 					<Card
 						{...basicCardProps}
 						isOnwardContent={true}
+						showTopBarDesktop={false}
+						showTopBarMobile={false}
 						imagePositionOnDesktop="bottom"
 						format={{
 							display: ArticleDisplay.Standard,

dotcom-rendering/src/components/Card/Card.tsx

@@ -407,7 +407,7 @@ export const Card = ({
 	index = 0,
 	isFlexSplash,
 	showTopBarDesktop = true,
-	showTopBarMobile = false,
+	showTopBarMobile = true,
 	trailTextSize,
 	showKickerImage = false,
 }: Props) => {
@@ -750,10 +750,10 @@ export const Card = ({
 	return (
 		<CardWrapper
 			format={format}
-			showTopBarDesktop={!isOnwardContent && showTopBarDesktop}
+			showTopBarDesktop={showTopBarDesktop}
 			showTopBarMobile={showTopBarMobile}
-			containerPalette={containerPalette}
 			isOnwardContent={isOnwardContent}
+			containerPalette={containerPalette}
 		>
 			<CardLink
 				linkTo={linkTo}

dotcom-rendering/src/components/Card/components/CardWrapper.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { space, until } from '@guardian/source/foundations';
+import { from, space, until } from '@guardian/source/foundations';
 import type { ArticleFormat } from '../../../lib/articleFormat';
 import { palette } from '../../../palette';
 import type { DCRContainerPalette } from '../../../types/front';
@@ -9,10 +9,10 @@ import { FormatBoundary } from '../../FormatBoundary';
 type Props = {
 	children: React.ReactNode;
 	format: ArticleFormat;
+	showTopBarDesktop: boolean;
+	showTopBarMobile: boolean;
+	isOnwardContent: boolean;
 	containerPalette?: DCRContainerPalette;
-	showTopBarDesktop?: boolean;
-	showTopBarMobile?: boolean;
-	isOnwardContent?: boolean;
 };
 
 const baseCardStyles = css`
@@ -78,7 +78,9 @@ const mobileTopBarStyles = css`
 	}
 `;
 const desktopTopBarStyles = css`
-	${topBarStyles}
+	${from.tablet} {
+		${topBarStyles}
+	}
 `;
 
 const onwardContentStyles = css`
@@ -93,10 +95,10 @@ const onwardContentStyles = css`
 export const CardWrapper = ({
 	children,
 	format,
+	showTopBarDesktop,
+	showTopBarMobile,
+	isOnwardContent,
 	containerPalette,
-	showTopBarDesktop = true,
-	showTopBarMobile = false,
-	isOnwardContent = false,
 }: Props) => {
 	return (
 		<FormatBoundary format={format}>

dotcom-rendering/src/components/Carousel.importable.tsx

@@ -548,7 +548,7 @@ const CarouselCard = ({
 				starRating={starRating}
 				index={index}
 				showTopBarDesktop={!isOnwardContent}
-				showTopBarMobile={false}
+				showTopBarMobile={!isOnwardContent}
 			/>
 		</LI>
 	);