From bc9c3e77e8414c9713d1f9338c59dab4287da99a Mon Sep 17 00:00:00 2001 From: Anna Beddow Date: Mon, 6 Jan 2025 10:16:37 +0000 Subject: [PATCH 1/3] Pad content based on card properties --- dotcom-rendering/src/components/Card/Card.tsx | 17 ++++++++++++-- .../Card/components/ContentWrapper.tsx | 23 +++++++++++-------- 2 files changed, 29 insertions(+), 11 deletions(-) diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx index ac90255868..ce8c993763 100644 --- a/dotcom-rendering/src/components/Card/Card.tsx +++ b/dotcom-rendering/src/components/Card/Card.tsx @@ -569,6 +569,16 @@ export const Card = ({ ); }; + const determinePadContent = ( + isMediaCard: boolean, + isBetaContainer: boolean, + isOnwardContent: boolean, + ): 'large' | 'small' | undefined => { + if (isMediaCard && isBetaContainer) return 'large'; + if (isMediaCard || isOnwardContent) return 'small'; + return undefined; + }; + return ( {/* This div is needed to keep the headline and trail text justified at the start */} diff --git a/dotcom-rendering/src/components/Card/components/ContentWrapper.tsx b/dotcom-rendering/src/components/Card/components/ContentWrapper.tsx index ef046d3ea9..685fc86848 100644 --- a/dotcom-rendering/src/components/Card/components/ContentWrapper.tsx +++ b/dotcom-rendering/src/components/Card/components/ContentWrapper.tsx @@ -64,7 +64,10 @@ const flexBasisStyles = ({ const paddingStyles = ( imagePosition: ImagePositionType, isFlexibleContainer: boolean, + paddingWidth: 'small' | 'large', ) => { + const paddingSize = + paddingWidth === 'small' ? `${space[1]}` : `${space[2]}`; /** * If we're in a flexible container there is a 20px gap between the image * and content. We don't apply padding to the content on the same edge as @@ -72,18 +75,18 @@ const paddingStyles = ( */ if (isFlexibleContainer && imagePosition === 'left') { return css` - padding: ${space[1]}px ${space[1]}px ${space[1]}px 0; + padding: ${paddingSize}px ${paddingSize}px ${paddingSize}px 0; `; } if (isFlexibleContainer && imagePosition === 'right') { return css` - padding: ${space[1]}px 0 ${space[1]}px ${space[1]}px; + padding: ${paddingSize}px 0 ${paddingSize}px ${paddingSize}px; `; } return css` - padding: ${space[1]}px; + padding: ${paddingSize}px; `; }; @@ -92,8 +95,7 @@ type Props = { imageType?: CardImageType; imageSize: ImageSizeType; imagePositionOnDesktop: ImagePositionType; - hasBackgroundColour?: boolean; - isOnwardContent?: boolean; + padContent?: 'small' | 'large'; isFlexibleContainer?: boolean; }; @@ -102,8 +104,7 @@ export const ContentWrapper = ({ imageType, imageSize, imagePositionOnDesktop, - hasBackgroundColour, - isOnwardContent, + padContent, isFlexibleContainer = false, }: Props) => { const isHorizontalOnDesktop = @@ -115,8 +116,12 @@ export const ContentWrapper = ({ sizingStyles, isHorizontalOnDesktop && flexBasisStyles({ imageSize, imageType }), - (!!hasBackgroundColour || !!isOnwardContent) && - paddingStyles(imagePositionOnDesktop, isFlexibleContainer), + padContent && + paddingStyles( + imagePositionOnDesktop, + isFlexibleContainer, + padContent, + ), ]} > {children} From 47d4cc5d1bc1ffc3a350148417ba7f1f91d98f62 Mon Sep 17 00:00:00 2001 From: Anna Beddow Date: Mon, 6 Jan 2025 10:55:36 +0000 Subject: [PATCH 2/3] Fix linting --- dotcom-rendering/src/components/Card/Card.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx index ce8c993763..220ff12799 100644 --- a/dotcom-rendering/src/components/Card/Card.tsx +++ b/dotcom-rendering/src/components/Card/Card.tsx @@ -570,12 +570,12 @@ export const Card = ({ }; const determinePadContent = ( - isMediaCard: boolean, - isBetaContainer: boolean, - isOnwardContent: boolean, + mediaCard: boolean, + betaContainer: boolean, + onwardContent: boolean, ): 'large' | 'small' | undefined => { - if (isMediaCard && isBetaContainer) return 'large'; - if (isMediaCard || isOnwardContent) return 'small'; + if (mediaCard && betaContainer) return 'large'; + if (mediaCard || onwardContent) return 'small'; return undefined; }; From 1b4c7ae17ef2c5e9b51b27f42712e22ef126ce85 Mon Sep 17 00:00:00 2001 From: Anna Beddow Date: Tue, 7 Jan 2025 09:01:44 +0000 Subject: [PATCH 3/3] Refactor to avoid interpolating space values --- .../components/Card/components/ContentWrapper.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/dotcom-rendering/src/components/Card/components/ContentWrapper.tsx b/dotcom-rendering/src/components/Card/components/ContentWrapper.tsx index 685fc86848..6a933c6589 100644 --- a/dotcom-rendering/src/components/Card/components/ContentWrapper.tsx +++ b/dotcom-rendering/src/components/Card/components/ContentWrapper.tsx @@ -64,10 +64,8 @@ const flexBasisStyles = ({ const paddingStyles = ( imagePosition: ImagePositionType, isFlexibleContainer: boolean, - paddingWidth: 'small' | 'large', + paddingWidth: 1 | 2, ) => { - const paddingSize = - paddingWidth === 'small' ? `${space[1]}` : `${space[2]}`; /** * If we're in a flexible container there is a 20px gap between the image * and content. We don't apply padding to the content on the same edge as @@ -75,18 +73,20 @@ const paddingStyles = ( */ if (isFlexibleContainer && imagePosition === 'left') { return css` - padding: ${paddingSize}px ${paddingSize}px ${paddingSize}px 0; + padding: ${space[paddingWidth]}px ${space[paddingWidth]}px + ${space[paddingWidth]}px 0; `; } if (isFlexibleContainer && imagePosition === 'right') { return css` - padding: ${paddingSize}px 0 ${paddingSize}px ${paddingSize}px; + padding: ${space[paddingWidth]}px 0 ${space[paddingWidth]}px + ${space[paddingWidth]}px; `; } return css` - padding: ${paddingSize}px; + padding: ${space[paddingWidth]}px; `; }; @@ -120,7 +120,7 @@ export const ContentWrapper = ({ paddingStyles( imagePositionOnDesktop, isFlexibleContainer, - padContent, + padContent === 'small' ? 1 : 2, ), ]} >