From 4f75a0dbaf5a5dd756b1e8a1bb0aafa542e398a3 Mon Sep 17 00:00:00 2001 From: Charlotte Emms <43961396+cemms1@users.noreply.github.com> Date: Wed, 9 Oct 2024 11:11:30 +0100 Subject: [PATCH] Control top bar visibility on cards via props rather than container context (#12514) --- .../src/components/Card/Card.stories.tsx | 2 ++ dotcom-rendering/src/components/Card/Card.tsx | 8 ++++++-- .../components/Card/components/CardWrapper.tsx | 16 ++++++++-------- .../src/components/Carousel.importable.tsx | 2 ++ .../src/components/FlexibleGeneral.tsx | 6 ++++++ .../src/components/FlexibleSpecial.tsx | 4 ++++ .../ScrollableSmallContainer.importable.tsx | 3 ++- 7 files changed, 30 insertions(+), 11 deletions(-) diff --git a/dotcom-rendering/src/components/Card/Card.stories.tsx b/dotcom-rendering/src/components/Card/Card.stories.tsx index 39c97f8ea0..95479e56bd 100644 --- 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} /> diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx index d290e5e781..71b23cc515 100644 --- 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 ( diff --git a/dotcom-rendering/src/components/Card/components/CardWrapper.tsx b/dotcom-rendering/src/components/Card/components/CardWrapper.tsx index 665dc36601..5a5653df20 100644 --- 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 index 76546c68d1..39a0909439 100644 --- 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} /> ); diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx index 549dc9217d..c757ebe77b 100644 --- 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} /> @@ -262,6 +264,8 @@ export const BoostedCardLayout = ({ aspectRatio="5:4" kickerText={card.kickerText} showLivePlayable={card.showLivePlayable} + showTopBarDesktop={false} + showTopBarMobile={true} /> @@ -314,6 +318,8 @@ export const StandardCardLayout = ({ aspectRatio="5:4" kickerText={card.kickerText} showLivePlayable={false} + showTopBarDesktop={false} + showTopBarMobile={true} /> ); diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx index f7d60a4d2f..26e9663520 100644 --- 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} /> @@ -192,6 +194,8 @@ const TwoCardOrFourCardLayout = ({ aspectRatio="5:4" kickerText={card.kickerText} showLivePlayable={false} + showTopBarDesktop={false} + showTopBarMobile={true} /> ); diff --git a/dotcom-rendering/src/components/ScrollableSmallContainer.importable.tsx b/dotcom-rendering/src/components/ScrollableSmallContainer.importable.tsx index dcf234c626..cedbcb673a 100644 --- 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} /> );