From 2e7bd73b62896e801c9cd0ff195470f5f619ef16 Mon Sep 17 00:00:00 2001 From: ollie_abrahams Date: Wed, 5 Nov 2025 11:19:41 +0000 Subject: [PATCH 1/4] minimise padding on product Button --- .../src/components/ProductCardButtons.tsx | 3 +++ .../components/ProductCardLeftCol.stories.tsx | 2 +- .../src/components/ProductCardLeftCol.tsx | 1 + .../src/components/ProductLinkButton.tsx | 27 ++++++++++++++++--- 4 files changed, 29 insertions(+), 4 deletions(-) diff --git a/dotcom-rendering/src/components/ProductCardButtons.tsx b/dotcom-rendering/src/components/ProductCardButtons.tsx index b0db04a3277..d170e493510 100644 --- a/dotcom-rendering/src/components/ProductCardButtons.tsx +++ b/dotcom-rendering/src/components/ProductCardButtons.tsx @@ -9,9 +9,11 @@ const getLabel = (cta: ProductCta): string => { export const ProductCardButtons = ({ productCtas, dataComponent, + minimisePadding = false, }: { productCtas: ProductCta[]; dataComponent?: string; + minimisePadding?: boolean; }) => ( <> {productCtas.map((productCta, index) => { @@ -21,6 +23,7 @@ export const ProductCardButtons = ({ key={label} label={label} url={productCta.url} + minimisePadding={minimisePadding} priority={index === 0 ? 'primary' : 'tertiary'} fullwidth={true} data-component={`${ diff --git a/dotcom-rendering/src/components/ProductCardLeftCol.stories.tsx b/dotcom-rendering/src/components/ProductCardLeftCol.stories.tsx index ec6a20a1878..c1d97fa55a3 100644 --- a/dotcom-rendering/src/components/ProductCardLeftCol.stories.tsx +++ b/dotcom-rendering/src/components/ProductCardLeftCol.stories.tsx @@ -120,7 +120,7 @@ export const LotsOfCtas = { }, { url: 'https://www.theguardian.com', - price: '£99.99', + price: '£105.99', retailer: 'John Lewis', text: '', }, diff --git a/dotcom-rendering/src/components/ProductCardLeftCol.tsx b/dotcom-rendering/src/components/ProductCardLeftCol.tsx index 58308e3ccb8..029086a3bdf 100644 --- a/dotcom-rendering/src/components/ProductCardLeftCol.tsx +++ b/dotcom-rendering/src/components/ProductCardLeftCol.tsx @@ -122,6 +122,7 @@ export const ProductCardLeftCol = ({ {customAttributes.length > 0 && ( diff --git a/dotcom-rendering/src/components/ProductLinkButton.tsx b/dotcom-rendering/src/components/ProductLinkButton.tsx index 63b530a9e95..347579f5f73 100644 --- a/dotcom-rendering/src/components/ProductLinkButton.tsx +++ b/dotcom-rendering/src/components/ProductLinkButton.tsx @@ -1,3 +1,4 @@ +import type { SerializedStyles } from '@emotion/react'; import { css } from '@emotion/react'; import type { ButtonPriority, @@ -16,6 +17,7 @@ type ProductLinkButtonProps = { fullwidth?: boolean; priority?: ButtonPriority; dataComponent?: string; + minimisePadding?: boolean; }; const fullWidthStyle = css` @@ -26,6 +28,15 @@ const heightAutoStyle = css` height: auto; `; +const reduceSpace = css` + & .src-button-space { + width: 8px; + } + > svg { + margin-left: -2px; + } +`; + export const theme: Partial = { backgroundPrimary: palette('--product-button-primary-background'), backgroundPrimaryHover: palette( @@ -41,12 +52,15 @@ export const ProductLinkButton = ({ url, size = 'default', fullwidth = false, + minimisePadding = true, priority = 'primary', dataComponent = 'in-body-product-link-button', }: ProductLinkButtonProps) => { - const cssOverrides = fullwidth - ? [fullWidthStyle, heightAutoStyle] - : heightAutoStyle; + const cssOverrides: SerializedStyles[] = [ + heightAutoStyle, + ...(fullwidth ? [fullWidthStyle] : []), + ...(minimisePadding ? [reduceSpace] : []), + ]; return ( Date: Wed, 5 Nov 2025 11:39:36 +0000 Subject: [PATCH 2/4] minimise padding on Inline Card --- dotcom-rendering/src/components/ProductCardInline.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/dotcom-rendering/src/components/ProductCardInline.tsx b/dotcom-rendering/src/components/ProductCardInline.tsx index a2290d1c843..3c7aaf1dce5 100644 --- a/dotcom-rendering/src/components/ProductCardInline.tsx +++ b/dotcom-rendering/src/components/ProductCardInline.tsx @@ -193,6 +193,7 @@ export const ProductCardInline = ({
From ec623eb2d97274f4846add2e3700206844325472 Mon Sep 17 00:00:00 2001 From: ollie_abrahams Date: Thu, 6 Nov 2025 10:27:29 +0000 Subject: [PATCH 3/4] move from style prop --- .../src/components/ProductLinkButton.tsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/dotcom-rendering/src/components/ProductLinkButton.tsx b/dotcom-rendering/src/components/ProductLinkButton.tsx index 347579f5f73..bd217f104ba 100644 --- a/dotcom-rendering/src/components/ProductLinkButton.tsx +++ b/dotcom-rendering/src/components/ProductLinkButton.tsx @@ -28,7 +28,8 @@ const heightAutoStyle = css` height: auto; `; -const reduceSpace = css` +const minimisePaddingStyle = css` + padding: 0 10px 0 12px; & .src-button-space { width: 8px; } @@ -59,7 +60,7 @@ export const ProductLinkButton = ({ const cssOverrides: SerializedStyles[] = [ heightAutoStyle, ...(fullwidth ? [fullWidthStyle] : []), - ...(minimisePadding ? [reduceSpace] : []), + ...(minimisePadding ? [minimisePaddingStyle] : []), ]; return ( @@ -78,13 +79,6 @@ export const ProductLinkButton = ({ size={size} cssOverrides={cssOverrides} data-component={dataComponent} - style={ - minimisePadding - ? { - padding: '0 10px 0 12px', - } - : {} - } > Date: Thu, 6 Nov 2025 11:37:37 +0000 Subject: [PATCH 4/4] remove minimise paddings as a prop in cards --- dotcom-rendering/src/components/ProductCardButtons.tsx | 4 +--- dotcom-rendering/src/components/ProductCardInline.tsx | 1 - dotcom-rendering/src/components/ProductCardLeftCol.tsx | 1 - dotcom-rendering/src/components/ProductLinkButton.tsx | 2 +- 4 files changed, 2 insertions(+), 6 deletions(-) diff --git a/dotcom-rendering/src/components/ProductCardButtons.tsx b/dotcom-rendering/src/components/ProductCardButtons.tsx index d170e493510..8c8cbafd198 100644 --- a/dotcom-rendering/src/components/ProductCardButtons.tsx +++ b/dotcom-rendering/src/components/ProductCardButtons.tsx @@ -9,11 +9,9 @@ const getLabel = (cta: ProductCta): string => { export const ProductCardButtons = ({ productCtas, dataComponent, - minimisePadding = false, }: { productCtas: ProductCta[]; dataComponent?: string; - minimisePadding?: boolean; }) => ( <> {productCtas.map((productCta, index) => { @@ -23,7 +21,7 @@ export const ProductCardButtons = ({ key={label} label={label} url={productCta.url} - minimisePadding={minimisePadding} + minimisePadding={true} priority={index === 0 ? 'primary' : 'tertiary'} fullwidth={true} data-component={`${ diff --git a/dotcom-rendering/src/components/ProductCardInline.tsx b/dotcom-rendering/src/components/ProductCardInline.tsx index 3c7aaf1dce5..a2290d1c843 100644 --- a/dotcom-rendering/src/components/ProductCardInline.tsx +++ b/dotcom-rendering/src/components/ProductCardInline.tsx @@ -193,7 +193,6 @@ export const ProductCardInline = ({
diff --git a/dotcom-rendering/src/components/ProductCardLeftCol.tsx b/dotcom-rendering/src/components/ProductCardLeftCol.tsx index 029086a3bdf..58308e3ccb8 100644 --- a/dotcom-rendering/src/components/ProductCardLeftCol.tsx +++ b/dotcom-rendering/src/components/ProductCardLeftCol.tsx @@ -122,7 +122,6 @@ export const ProductCardLeftCol = ({ {customAttributes.length > 0 && ( diff --git a/dotcom-rendering/src/components/ProductLinkButton.tsx b/dotcom-rendering/src/components/ProductLinkButton.tsx index bd217f104ba..689ca3a939e 100644 --- a/dotcom-rendering/src/components/ProductLinkButton.tsx +++ b/dotcom-rendering/src/components/ProductLinkButton.tsx @@ -53,7 +53,7 @@ export const ProductLinkButton = ({ url, size = 'default', fullwidth = false, - minimisePadding = true, + minimisePadding = false, priority = 'primary', dataComponent = 'in-body-product-link-button', }: ProductLinkButtonProps) => {