Rework trail text visibility logic & show on all breakpoints in flexi…

…ble/general (#12584)

* rework trail text visibility logic

* reorder trail text logic to ensure it shows on splash for all breakpoints

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 (isFlexibleContainer) {
+			return undefined;
+		} else if (
+			imageSize === 'large' &&
+			imagePositionOnDesktop === 'right' &&
+			media?.type !== 'avatar'
+		) {
+			return 'desktop';
+		} else {
+			return 'tablet';
+		}
+	};
+
 	/** Determines the gap of between card components based on card properties */
 	const getGapSize = (): GapSize => {
 		if (isOnwardContent) return 'none';
@@ -779,24 +790,15 @@ export const Card = ({
 							)}
 
 							{!!trailText && (
-								<TrailTextWrapper
-									imagePositionOnDesktop={
-										imagePositionOnDesktop
-									}
-									imageSize={imageSize}
-									imageType={media?.type}
-									shouldHide={isFlexSplash ? false : true}
+								<TrailText
+									trailText={trailText}
 									trailTextColour={trailTextColour}
 									trailTextSize={trailTextSize}
 									padTop={headlinePosition === 'inner'}
-								>
-									<div
-										dangerouslySetInnerHTML={{
-											__html: trailText,
-										}}
-									/>
-								</TrailTextWrapper>
+									hideUntil={hideTrailTextUntil()}
+								/>
 							)}
+
 							{!showCommentFooter && (
 								<CardFooter
 									format={format}

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

@@ -0,0 +1,71 @@
+import { css } from '@emotion/react';
+import {
+	from,
+	space,
+	textSans14,
+	textSans17,
+} from '@guardian/source/foundations';
+import { Hide } from '@guardian/source/react-components';
+import { palette } from '../../../palette';
+
+export type TrailTextSize = 'regular' | 'large';
+
+type Props = {
+	trailText: string;
+	trailTextSize?: TrailTextSize;
+	/** Optionally overrides the trail text colour */
+	trailTextColour?: string;
+	/** Controls visibility of trail text on various breakpoints */
+	hideUntil?: 'tablet' | 'desktop';
+	/** Adds padding to the top of the trail text */
+	padTop: boolean;
+};
+
+const trailTextStyles = css`
+	display: flex;
+	flex-direction: column;
+	padding-bottom: ${space[2]}px;
+`;
+
+const topPadding = css`
+	padding-top: ${space[2]}px;
+`;
+
+const fontStyles = (trailTextSize: TrailTextSize) => css`
+	${textSans14}
+	${from.desktop} {
+		${trailTextSize === 'large' && textSans17}
+	}
+	strong {
+		font-weight: bold;
+	}
+`;
+
+export const TrailText = ({
+	trailText: text,
+	trailTextSize = 'regular',
+	trailTextColour = palette('--card-trail-text'),
+	hideUntil,
+	padTop,
+}: Props) => {
+	const trailText = (
+		<div
+			css={[
+				trailTextStyles,
+				css`
+					color: ${trailTextColour};
+				`,
+				fontStyles(trailTextSize),
+				padTop && topPadding,
+			]}
+			dangerouslySetInnerHTML={{
+				__html: text,
+			}}
+		/>
+	);
+	return hideUntil ? (
+		<Hide until={hideUntil}>{trailText}</Hide>
+	) : (
+		<>{trailText}</>
+	);
+};

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';

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';