From 825e89a444939a9dbbb9ebafead4587327166ded Mon Sep 17 00:00:00 2001 From: Anna Beddow Date: Tue, 17 Dec 2024 12:18:21 +0000 Subject: [PATCH] WIP --- dotcom-rendering/src/components/Card/Card.tsx | 68 +++++++++++++------ .../Card/components/ImageWrapper.tsx | 4 +- .../src/components/CardHeadline.tsx | 3 + .../src/components/FlexibleGeneral.tsx | 21 ++++-- .../src/components/FlexibleSpecial.tsx | 15 ++-- dotcom-rendering/src/components/Kicker.tsx | 21 ++++++ 6 files changed, 98 insertions(+), 34 deletions(-) diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx index f58c186a5a4..35a5a4a18f0 100644 --- a/dotcom-rendering/src/components/Card/Card.tsx +++ b/dotcom-rendering/src/components/Card/Card.tsx @@ -142,6 +142,7 @@ export type Props = { /** The square podcast series image, if it exists for a card */ podcastImage?: PodcastSeriesImage; galleryCount?: number; + showAccentImage?: boolean; }; const starWrapper = (cardHasImage: boolean) => css` @@ -220,7 +221,7 @@ const getMedia = ({ return { type: 'podcast', podcastImage, - trailImage: { src: imageUrl, altText: imageAltText }, + ...(imageUrl && { imageUrl }), } as const; } if (imageUrl) { @@ -260,11 +261,14 @@ const getHeadlinePosition = ({ isFlexSplash, containerType, showLivePlayable, + isMediaCard, }: { containerType?: DCRContainerType; isFlexSplash?: boolean; showLivePlayable: boolean; + isMediaCard: boolean; }) => { + if (isMediaCard) return 'inner'; if (containerType === 'flexible/special' && isFlexSplash) { return 'outer'; } @@ -316,6 +320,7 @@ const podcastImageStyles = (imageSize: ImageSizeType) => { `; } }; + export const Card = ({ linkTo, format, @@ -373,7 +378,9 @@ export const Card = ({ podcastImage, // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Added in preparation for UI changes to display gallery count galleryCount, + showAccentImage = false, }: Props) => { + console.log({ headlineText, showAccentImage }); const hasSublinks = supportingContent && supportingContent.length > 0; const sublinkPosition = decideSublinkPosition( supportingContent, @@ -469,6 +476,8 @@ export const Card = ({ isBetaContainer, }); + console.log({ headlineText, media }); + // For opinion type cards with avatars (which aren't onwards content) // we render the footer in a different location const showCommentFooter = @@ -503,6 +512,7 @@ export const Card = ({ containerType, isFlexSplash, showLivePlayable, + isMediaCard: isMediaCard(format), }); const hideTrailTextUntil = () => { @@ -828,24 +838,36 @@ export const Card = ({ {media.type === 'crossword' && ( )} - {media.type === 'podcast' && media.podcastImage.src && ( -
- -
+ {media.type === 'podcast' && ( + <> + {media.podcastImage.src && !showAccentImage ? ( +
+ +
+ ) : ( + + )} + )} )} @@ -890,6 +912,12 @@ export const Card = ({ showByline={showByline} isExternalLink={isExternalLink} isBetaContainer={isBetaContainer} + accentImage={ + showAccentImage && + media?.type === 'podcast' + ? media?.podcastImage?.src + : '' + } /> {!isUndefined(starRating) ? ( )} - {!!trailText && ( + {!!trailText && media?.type !== 'podcast' && ( { // The link is only applied directly to the headline if it is a sublink const isSublink = !!linkTo; @@ -256,6 +258,7 @@ export const CardHeadline = ({ color={kickerColour} showPulsingDot={showPulsingDot} isInline={hasInlineKicker} + accentImage={accentImage} /> )} {showQuotes && } diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx index 11f874b545d..c4b46956bfa 100644 --- a/dotcom-rendering/src/components/FlexibleGeneral.tsx +++ b/dotcom-rendering/src/components/FlexibleGeneral.tsx @@ -1,3 +1,4 @@ +import { isMediaCard } from '../lib/cardHelpers'; import { palette } from '../palette'; import type { BoostLevel } from '../types/content'; import type { @@ -86,6 +87,7 @@ type BoostedSplashProperties = { const decideSplashCardProperties = ( boostLevel: BoostLevel, supportingContentLength: number, + isMediaCard: boolean, ): BoostedSplashProperties => { switch (boostLevel) { // boostedfont sizing @@ -98,7 +100,7 @@ const decideSplashCardProperties = ( mobile: 'medium', }, imagePositionOnDesktop: 'right', - imagePositionOnMobile: 'bottom', + imagePositionOnMobile: isMediaCard ? 'top' : 'bottom', imageSize: 'large', supportingContentAlignment: supportingContentLength >= 4 ? 'horizontal' : 'vertical', @@ -113,7 +115,7 @@ const decideSplashCardProperties = ( mobile: 'large', }, imagePositionOnDesktop: 'right', - imagePositionOnMobile: 'bottom', + imagePositionOnMobile: isMediaCard ? 'top' : 'bottom', imageSize: 'jumbo', supportingContentAlignment: supportingContentLength >= 4 ? 'horizontal' : 'vertical', @@ -127,8 +129,8 @@ const decideSplashCardProperties = ( tablet: 'xlarge', mobile: 'xlarge', }, - imagePositionOnDesktop: 'bottom', - imagePositionOnMobile: 'bottom', + imagePositionOnDesktop: isMediaCard ? 'top' : 'bottom', + imagePositionOnMobile: isMediaCard ? 'top' : 'bottom', imageSize: 'jumbo', supportingContentAlignment: 'horizontal', liveUpdatesAlignment: 'horizontal', @@ -141,8 +143,8 @@ const decideSplashCardProperties = ( tablet: 'xlarge', mobile: 'xxlarge', }, - imagePositionOnDesktop: 'bottom', - imagePositionOnMobile: 'bottom', + imagePositionOnDesktop: isMediaCard ? 'top' : 'bottom', + imagePositionOnMobile: isMediaCard ? 'top' : 'bottom', imageSize: 'jumbo', supportingContentAlignment: 'horizontal', liveUpdatesAlignment: 'horizontal', @@ -182,6 +184,7 @@ export const SplashCardLayout = ({ } = decideSplashCardProperties( card.boostLevel ?? 'default', card.supportingContent?.length ?? 0, + isMediaCard(card.format), ); return ( @@ -220,6 +223,7 @@ export const SplashCardLayout = ({ showTopBarDesktop={false} showTopBarMobile={true} trailTextSize={trailTextSize} + showAccentImage={true} /> @@ -312,7 +316,9 @@ export const BoostedCardLayout = ({ absoluteServerTimes={absoluteServerTimes} headlineSizes={headlineSizes} imagePositionOnDesktop={'right'} - imagePositionOnMobile={'bottom'} + imagePositionOnMobile={ + isMediaCard(card.format) ? 'top' : 'bottom' + } imageSize={imageSize} trailText={card.trailText} supportingContent={card.supportingContent} @@ -329,6 +335,7 @@ export const BoostedCardLayout = ({ showTopBarDesktop={false} showTopBarMobile={true} liveUpdatesPosition={liveUpdatesPosition} + showAccentImage={true} /> diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx index 5c2ea2ec7b3..96c2f47b2f5 100644 --- a/dotcom-rendering/src/components/FlexibleSpecial.tsx +++ b/dotcom-rendering/src/components/FlexibleSpecial.tsx @@ -43,6 +43,7 @@ type BoostProperties = { const determineCardProperties = ( boostLevel: BoostLevel, supportingContentLength: number, + isMediaCard: boolean, ): BoostProperties => { switch (boostLevel) { // The default boost level is equal to no boost. It is the same as the default card layout. @@ -54,7 +55,7 @@ const determineCardProperties = ( mobile: 'medium', }, imagePositionOnDesktop: 'right', - imagePositionOnMobile: 'bottom', + imagePositionOnMobile: isMediaCard ? 'top' : 'bottom', imageSize: 'large', supportingContentAlignment: supportingContentLength >= 3 ? 'horizontal' : 'vertical', @@ -70,7 +71,7 @@ const determineCardProperties = ( mobile: 'large', }, imagePositionOnDesktop: 'right', - imagePositionOnMobile: 'bottom', + imagePositionOnMobile: isMediaCard ? 'top' : 'bottom', imageSize: 'jumbo', supportingContentAlignment: supportingContentLength >= 3 ? 'horizontal' : 'vertical', @@ -84,8 +85,8 @@ const determineCardProperties = ( tablet: 'xlarge', mobile: 'xlarge', }, - imagePositionOnDesktop: 'bottom', - imagePositionOnMobile: 'bottom', + imagePositionOnDesktop: isMediaCard ? 'top' : 'bottom', + imagePositionOnMobile: isMediaCard ? 'top' : 'bottom', imageSize: 'jumbo', supportingContentAlignment: 'horizontal', liveUpdatesAlignment: 'horizontal', @@ -98,8 +99,8 @@ const determineCardProperties = ( tablet: 'xxlarge', mobile: 'xxlarge', }, - imagePositionOnDesktop: 'bottom', - imagePositionOnMobile: 'bottom', + imagePositionOnDesktop: isMediaCard ? 'top' : 'bottom', + imagePositionOnMobile: isMediaCard ? 'top' : 'bottom', imageSize: 'jumbo', supportingContentAlignment: 'horizontal', liveUpdatesAlignment: 'horizontal', @@ -138,6 +139,7 @@ export const OneCardLayout = ({ } = determineCardProperties( card.boostLevel ?? 'default', card.supportingContent?.length ?? 0, + isMediaCard(card.format), ); return (
    @@ -164,6 +166,7 @@ export const OneCardLayout = ({ showTopBarDesktop={false} showTopBarMobile={true} trailTextSize={trailTextSize} + showAccentImage={true} />
diff --git a/dotcom-rendering/src/components/Kicker.tsx b/dotcom-rendering/src/components/Kicker.tsx index abd92342998..95638696577 100644 --- a/dotcom-rendering/src/components/Kicker.tsx +++ b/dotcom-rendering/src/components/Kicker.tsx @@ -6,6 +6,7 @@ import { textSansBold15, } from '@guardian/source/foundations'; import { palette } from '../palette'; +import { CardPicture } from './CardPicture'; import { Island } from './Island'; import { PulsingDot } from './PulsingDot.importable'; @@ -17,6 +18,7 @@ type Props = { isInline?: boolean; /** Controls the weight of the standard, non-live kicker. Defaults to regular */ fontWeight?: 'regular' | 'bold'; + accentImage?: string; }; const standardTextStyles = css` @@ -62,6 +64,7 @@ export const Kicker = ({ showPulsingDot, isInline, fontWeight = 'regular', + accentImage, }: Props) => { /** * @todo @@ -88,6 +91,24 @@ export const Kicker = ({ : 'transparent', }} > + {accentImage && ( +
+ +
+ )} {showPulsingDot && (