diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
index 874d19f0c0..33f838f1ad 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 (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 && (
-
-
-
+ 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,
+ padTop,
+}: 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 623d33c839..0000000000
--- a/dotcom-rendering/src/components/Card/components/TrailTextWrapper.tsx
+++ /dev/null
@@ -1,106 +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;
- padTop: boolean;
-};
-
-/**
- * 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-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 TrailTextWrapper = ({
- children,
- imagePositionOnDesktop,
- imageSize,
- imageType,
- shouldHide = true,
- trailTextSize = 'regular',
- trailTextColour = palette('--card-trail-text'),
- padTop,
-}: Props) => {
- return (
-
- {children}
-
- );
-};
diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx
index 147abeb7e1..c915ef7ef8 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';