From e603a00c046629a3533deda9013effa48aee111c Mon Sep 17 00:00:00 2001 From: Anna Beddow Date: Thu, 19 Dec 2024 14:48:42 +0000 Subject: [PATCH] Media card alignment (#13040) * Always position image on the top if its a media card * Always inner headline if its a media card * remove src from path * fix linting --- dotcom-rendering/src/components/Card/Card.tsx | 18 ++++++----- .../src/components/FlexibleGeneral.tsx | 21 ++++++++----- .../src/components/FlexibleSpecial.tsx | 31 +++++++++++++------ .../ScrollableMedium.importable.tsx | 8 +++-- .../src/components/StaticMediumFour.tsx | 5 ++- 5 files changed, 55 insertions(+), 28 deletions(-) diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx index 568562a1b4b..7b0679ac80b 100644 --- a/dotcom-rendering/src/components/Card/Card.tsx +++ b/dotcom-rendering/src/components/Card/Card.tsx @@ -7,7 +7,7 @@ import { } from '@guardian/source/foundations'; import { Hide, Link } from '@guardian/source/react-components'; import { ArticleDesign, type ArticleFormat } from '../../lib/articleFormat'; -import { isMediaCard } from '../../lib/cardHelpers'; +import { isMediaCard as isAMediaCard } from '../../lib/cardHelpers'; import { getZIndex } from '../../lib/getZIndex'; import { DISCUSSION_ID_DATA_ATTRIBUTE } from '../../lib/useCommentCount'; import { palette } from '../../palette'; @@ -260,11 +260,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'; } @@ -450,9 +453,9 @@ export const Card = ({ - * Media cards have contrasting background colours. We add additional * padding to these cards to keep the text readable. - */ - const hasBackgroundColour = isMediaCard(format); + const isMediaCard = isAMediaCard(format); - const backgroundColour = hasBackgroundColour + const backgroundColour = isMediaCard ? palette('--card-media-background') : palette('--card-background'); @@ -479,6 +482,7 @@ export const Card = ({ containerType, isFlexSplash, showLivePlayable, + isMediaCard, }); const hideTrailTextUntil = () => { @@ -498,7 +502,7 @@ export const Card = ({ /** Determines the gap of between card components based on card properties */ const getGapSize = (): GapSize => { if (isOnwardContent) return 'none'; - if (hasBackgroundColour && !isFlexibleContainer) return 'tiny'; + if (isMediaCard && !isFlexibleContainer) return 'tiny'; if (!!isFlexSplash || (isFlexibleContainer && imageSize === 'jumbo')) { return 'small'; } @@ -812,7 +816,7 @@ export const Card = ({ imageType={media?.type} imageSize={imageSize} imagePositionOnDesktop={imagePositionOnDesktop} - hasBackgroundColour={hasBackgroundColour} + hasBackgroundColour={isMediaCard} isOnwardContent={isOnwardContent} isFlexibleContainer={isFlexibleContainer} > @@ -943,9 +947,7 @@ export const Card = ({
{showLivePlayable && liveUpdatesPosition === 'outer' && ( diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx index d296ff707cb..c13a3a5cd21 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, + mediaCard: boolean, ): BoostedSplashProperties => { switch (boostLevel) { // boostedfont sizing @@ -98,7 +100,7 @@ const decideSplashCardProperties = ( mobile: 'medium', }, imagePositionOnDesktop: 'right', - imagePositionOnMobile: 'bottom', + imagePositionOnMobile: mediaCard ? 'top' : 'bottom', imageSize: 'large', supportingContentAlignment: supportingContentLength >= 4 ? 'horizontal' : 'vertical', @@ -113,7 +115,7 @@ const decideSplashCardProperties = ( mobile: 'large', }, imagePositionOnDesktop: 'right', - imagePositionOnMobile: 'bottom', + imagePositionOnMobile: mediaCard ? 'top' : 'bottom', imageSize: 'jumbo', supportingContentAlignment: supportingContentLength >= 4 ? 'horizontal' : 'vertical', @@ -127,8 +129,8 @@ const decideSplashCardProperties = ( tablet: 'xlarge', mobile: 'xlarge', }, - imagePositionOnDesktop: 'bottom', - imagePositionOnMobile: 'bottom', + imagePositionOnDesktop: mediaCard ? 'top' : 'bottom', + imagePositionOnMobile: mediaCard ? 'top' : 'bottom', imageSize: 'jumbo', supportingContentAlignment: 'horizontal', liveUpdatesAlignment: 'horizontal', @@ -141,8 +143,8 @@ const decideSplashCardProperties = ( tablet: 'xlarge', mobile: 'xxlarge', }, - imagePositionOnDesktop: 'bottom', - imagePositionOnMobile: 'bottom', + imagePositionOnDesktop: mediaCard ? 'top' : 'bottom', + imagePositionOnMobile: mediaCard ? '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 ( @@ -312,8 +315,10 @@ export const BoostedCardLayout = ({ showAge={showAge} absoluteServerTimes={absoluteServerTimes} headlineSizes={headlineSizes} - imagePositionOnDesktop={'right'} - imagePositionOnMobile={'bottom'} + imagePositionOnDesktop="right" + imagePositionOnMobile={ + isMediaCard(card.format) ? 'top' : 'bottom' + } imageSize={imageSize} trailText={card.trailText} supportingContent={card.supportingContent} diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx index ad29cdc47df..9b09bb367a5 100644 --- a/dotcom-rendering/src/components/FlexibleSpecial.tsx +++ b/dotcom-rendering/src/components/FlexibleSpecial.tsx @@ -1,3 +1,4 @@ +import { isMediaCard } from '../lib/cardHelpers'; import type { BoostLevel } from '../types/content'; import type { AspectRatio, @@ -42,6 +43,7 @@ type BoostProperties = { const determineCardProperties = ( boostLevel: BoostLevel, supportingContentLength: number, + mediaCard: boolean, ): BoostProperties => { switch (boostLevel) { // The default boost level is equal to no boost. It is the same as the default card layout. @@ -53,7 +55,7 @@ const determineCardProperties = ( mobile: 'medium', }, imagePositionOnDesktop: 'right', - imagePositionOnMobile: 'bottom', + imagePositionOnMobile: mediaCard ? 'top' : 'bottom', imageSize: 'large', supportingContentAlignment: supportingContentLength >= 3 ? 'horizontal' : 'vertical', @@ -69,7 +71,7 @@ const determineCardProperties = ( mobile: 'large', }, imagePositionOnDesktop: 'right', - imagePositionOnMobile: 'bottom', + imagePositionOnMobile: mediaCard ? 'top' : 'bottom', imageSize: 'jumbo', supportingContentAlignment: supportingContentLength >= 3 ? 'horizontal' : 'vertical', @@ -83,8 +85,8 @@ const determineCardProperties = ( tablet: 'xlarge', mobile: 'xlarge', }, - imagePositionOnDesktop: 'bottom', - imagePositionOnMobile: 'bottom', + imagePositionOnDesktop: mediaCard ? 'top' : 'bottom', + imagePositionOnMobile: mediaCard ? 'top' : 'bottom', imageSize: 'jumbo', supportingContentAlignment: 'horizontal', liveUpdatesAlignment: 'horizontal', @@ -97,8 +99,8 @@ const determineCardProperties = ( tablet: 'xxlarge', mobile: 'xxlarge', }, - imagePositionOnDesktop: 'bottom', - imagePositionOnMobile: 'bottom', + imagePositionOnDesktop: mediaCard ? 'top' : 'bottom', + imagePositionOnMobile: mediaCard ? 'top' : 'bottom', imageSize: 'jumbo', supportingContentAlignment: 'horizontal', liveUpdatesAlignment: 'horizontal', @@ -137,6 +139,7 @@ export const OneCardLayout = ({ } = determineCardProperties( card.boostLevel ?? 'default', card.supportingContent?.length ?? 0, + isMediaCard(card.format), ); return (