From 6352c6dfc5e625400ed6ee90c97fb7d3774177ee Mon Sep 17 00:00:00 2001 From: Charlotte Date: Fri, 18 Oct 2024 17:55:17 +0100 Subject: [PATCH 1/2] rework trail text visibility logic --- dotcom-rendering/src/components/Card/Card.tsx | 38 +++---- .../components/Card/components/TrailText.tsx | 63 ++++++++++++ .../Card/components/TrailTextWrapper.tsx | 99 ------------------- .../src/components/FlexibleGeneral.tsx | 2 +- .../src/components/FlexibleSpecial.tsx | 2 +- 5 files changed, 85 insertions(+), 119 deletions(-) create mode 100644 dotcom-rendering/src/components/Card/components/TrailText.tsx delete mode 100644 dotcom-rendering/src/components/Card/components/TrailTextWrapper.tsx diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx index b3bfdf49c8..678146a593 100644 --- a/dotcom-rendering/src/components/Card/Card.tsx +++ b/dotcom-rendering/src/components/Card/Card.tsx @@ -53,10 +53,7 @@ import type { ImageSizeType, } from './components/ImageWrapper'; import { ImageWrapper } from './components/ImageWrapper'; -import { - type TrailTextSize, - TrailTextWrapper, -} from './components/TrailTextWrapper'; +import { TrailText, type TrailTextSize } from './components/TrailText'; export type Position = 'inner' | 'outer' | 'none'; @@ -443,6 +440,20 @@ export const Card = ({ showLivePlayable, }); + const hideTrailTextUntil = () => { + if ( + imageSize === 'large' && + imagePositionOnDesktop === 'right' && + media?.type !== 'avatar' + ) { + return 'desktop'; + } else if (isFlexSplash ?? containerType === 'flexible/general') { + return undefined; + } else { + return 'tablet'; + } + }; + /** Determines the gap of between card components based on card properties */ const getGapSize = (): GapSize => { if (isOnwardContent) return 'none'; @@ -779,23 +790,14 @@ export const Card = ({ )} {!!trailText && ( - -
- + hideUntil={hideTrailTextUntil()} + /> )} + {!showCommentFooter && ( css` + ${textSans14} + ${from.desktop} { + ${trailTextSize === 'large' && textSans17} + } + strong { + font-weight: bold; + } +`; + +export const TrailText = ({ + trailText: text, + trailTextSize = 'regular', + trailTextColour = palette('--card-trail-text'), + hideUntil, +}: Props) => { + const trailText = ( +
+ ); + return hideUntil ? ( + {trailText} + ) : ( + <>{trailText} + ); +}; diff --git a/dotcom-rendering/src/components/Card/components/TrailTextWrapper.tsx b/dotcom-rendering/src/components/Card/components/TrailTextWrapper.tsx deleted file mode 100644 index 197256f96d..0000000000 --- a/dotcom-rendering/src/components/Card/components/TrailTextWrapper.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import { css } from '@emotion/react'; -import { - from, - space, - textSans14, - textSans17, - until, -} from '@guardian/source/foundations'; -import { palette } from '../../../palette'; -import type { ImagePositionType, ImageSizeType } from './ImageWrapper'; - -export type TrailTextSize = 'regular' | 'large'; - -type Props = { - children: string | React.ReactNode; - imagePositionOnDesktop?: ImagePositionType; - imageSize?: ImageSizeType; - imageType?: CardImageType | undefined; - /** By default, trail text is hidden at specific breakpoints. This prop allows consumers to show trails across all breakpoints if set to false */ - shouldHide?: boolean; - trailTextSize?: TrailTextSize; - /** Optionally overrides the trail text colour */ - trailTextColour?: string; -}; - -/** - * Determines the visibility state for the trail text based on the image size, - * position, and type. If the image is large, positioned on the right, and is not an avatar, - * the trail text will be hidden until the desktop breakpoint. - * Otherwise, it will be hidden until the tablet breakpoint. - */ -const decideVisibilityStyles = ( - imagePosition?: ImagePositionType, - imageSize?: ImageSizeType, - imageType?: CardImageType | undefined, -) => { - if ( - imageSize === 'large' && - imagePosition === 'right' && - imageType !== 'avatar' - ) { - return css` - ${until.desktop} { - display: none; - } - `; - } - return css` - ${until.tablet} { - display: none; - } - `; -}; - -const trailTextStyles = css` - display: flex; - flex-direction: column; - padding: ${space[2]}px 0; -`; - -const fontStyles = (trailTextSize: TrailTextSize) => css` - ${textSans14} - ${from.desktop} { - ${trailTextSize === 'large' && textSans17} - } - strong { - font-weight: bold; - } -`; - -export const TrailTextWrapper = ({ - children, - imagePositionOnDesktop, - imageSize, - imageType, - shouldHide = true, - trailTextSize = 'regular', - trailTextColour = palette('--card-trail-text'), -}: Props) => { - return ( -
- {children} -
- ); -}; diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx index b3feec4a5d..f4b20e28eb 100644 --- a/dotcom-rendering/src/components/FlexibleGeneral.tsx +++ b/dotcom-rendering/src/components/FlexibleGeneral.tsx @@ -11,7 +11,7 @@ import type { ImageSizeType, } from './Card/components/ImageWrapper'; import { LI } from './Card/components/LI'; -import type { TrailTextSize } from './Card/components/TrailTextWrapper'; +import type { TrailTextSize } from './Card/components/TrailText'; import { UL } from './Card/components/UL'; import type { Loading } from './CardPicture'; import { FrontCard } from './FrontCard'; diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx index 595b627acc..0b8c6a6399 100644 --- a/dotcom-rendering/src/components/FlexibleSpecial.tsx +++ b/dotcom-rendering/src/components/FlexibleSpecial.tsx @@ -9,7 +9,7 @@ import type { ImageSizeType, } from './Card/components/ImageWrapper'; import { LI } from './Card/components/LI'; -import type { TrailTextSize } from './Card/components/TrailTextWrapper'; +import type { TrailTextSize } from './Card/components/TrailText'; import { UL } from './Card/components/UL'; import type { Loading } from './CardPicture'; import { FrontCard } from './FrontCard'; From e74cc0688b7c1f9c6fc52b0826a1cd35af5fa177 Mon Sep 17 00:00:00 2001 From: Charlotte Date: Fri, 18 Oct 2024 18:28:50 +0100 Subject: [PATCH 2/2] reorder trail text logic to ensure it shows on splash for all breakpoints --- dotcom-rendering/src/components/Card/Card.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx index 678146a593..0a0aa81b34 100644 --- a/dotcom-rendering/src/components/Card/Card.tsx +++ b/dotcom-rendering/src/components/Card/Card.tsx @@ -441,14 +441,14 @@ export const Card = ({ }); const hideTrailTextUntil = () => { - if ( + if (isFlexibleContainer) { + return undefined; + } else if ( imageSize === 'large' && imagePositionOnDesktop === 'right' && media?.type !== 'avatar' ) { return 'desktop'; - } else if (isFlexSplash ?? containerType === 'flexible/general') { - return undefined; } else { return 'tablet'; }