From 344d00c9422e2e36c77702022c2855e19c5f0b80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CLAKSHMIRPILLAI=E2=80=9D?= <“luxmi.r.pillai@gmail.com”> Date: Thu, 19 Dec 2024 12:56:58 +0000 Subject: [PATCH 1/3] Change the highlight text color and CTA hoover color --- .../src/components/UsEoy2024Wrapper.importable.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/components/UsEoy2024Wrapper.importable.tsx b/dotcom-rendering/src/components/UsEoy2024Wrapper.importable.tsx index d96f9653f8..9e10212c6c 100644 --- a/dotcom-rendering/src/components/UsEoy2024Wrapper.importable.tsx +++ b/dotcom-rendering/src/components/UsEoy2024Wrapper.importable.tsx @@ -185,7 +185,7 @@ const stylesSubCampaign = { color: ${'#1A2835'}; `, highlight: css` - background-color: ${'#670055'}; + background-color: ${'#016D67'}; color: ${'#F6F6F6'}; padding-left: 2px; `, @@ -413,7 +413,7 @@ export const UsEoy2024: ReactComponent = ({ }, hover: { backgroundColour: isSubCampaign - ? '#891414' + ? '#01544F' : '#C41C1C', textColour: '#FFFFFF', }, From f43b035adaced75a744067e0cbba8b1277b47499 Mon Sep 17 00:00:00 2001 From: Anna Beddow Date: Thu, 19 Dec 2024 14:48:12 +0000 Subject: [PATCH 2/3] Add 1:1 padding option for card picture (#13039) --- dotcom-rendering/src/components/CardPicture.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/dotcom-rendering/src/components/CardPicture.tsx b/dotcom-rendering/src/components/CardPicture.tsx index 772d9ec599..9b251c2dc9 100644 --- a/dotcom-rendering/src/components/CardPicture.tsx +++ b/dotcom-rendering/src/components/CardPicture.tsx @@ -104,6 +104,8 @@ const getAspectRatioPadding = (aspectRatio?: AspectRatio): string => { return '80%'; case '4:5': return '125%'; + case '1:1': + return '100%'; case '5:3': default: return '60%'; From e603a00c046629a3533deda9013effa48aee111c Mon Sep 17 00:00:00 2001 From: Anna Beddow Date: Thu, 19 Dec 2024 14:48:42 +0000 Subject: [PATCH 3/3] 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 568562a1b4..7b0679ac80 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 d296ff707c..c13a3a5cd2 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 ad29cdc47d..9b09bb367a 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 (
    @@ -170,6 +173,15 @@ export const OneCardLayout = ({ ); }; +const getImagePosition = ( + hasTwoOrFewerCards: boolean, + isAMediaCard: boolean, +) => { + if (isAMediaCard && !hasTwoOrFewerCards) return 'top'; + if (hasTwoOrFewerCards) return 'left'; + return 'bottom'; +}; + const TwoCardOrFourCardLayout = ({ cards, containerPalette, @@ -208,9 +220,10 @@ const TwoCardOrFourCardLayout = ({ absoluteServerTimes={absoluteServerTimes} image={showImage ? card.image : undefined} imageLoading={imageLoading} - imagePositionOnDesktop={ - hasTwoOrFewerCards ? 'left' : 'bottom' - } + imagePositionOnDesktop={getImagePosition( + hasTwoOrFewerCards, + isMediaCard(card.format), + )} /* we don't want to support sublinks on standard cards here so we hard code to undefined */ supportingContent={undefined} imageSize={'medium'} diff --git a/dotcom-rendering/src/components/ScrollableMedium.importable.tsx b/dotcom-rendering/src/components/ScrollableMedium.importable.tsx index c1797103f4..7045ef4a38 100644 --- a/dotcom-rendering/src/components/ScrollableMedium.importable.tsx +++ b/dotcom-rendering/src/components/ScrollableMedium.importable.tsx @@ -1,3 +1,4 @@ +import { isMediaCard } from '../lib/cardHelpers'; import type { AspectRatio, DCRContainerPalette, @@ -40,6 +41,9 @@ export const ScrollableMedium = ({ visibleCardsOnTablet={4} > {trails.map((trail) => { + const imagePosition = isMediaCard(trail.format) + ? 'top' + : 'bottom'; return (