diff --git a/dotcom-rendering/src/components/ProductCardButtons.tsx b/dotcom-rendering/src/components/ProductCardButtons.tsx index b0db04a3277..8c8cbafd198 100644 --- a/dotcom-rendering/src/components/ProductCardButtons.tsx +++ b/dotcom-rendering/src/components/ProductCardButtons.tsx @@ -21,6 +21,7 @@ export const ProductCardButtons = ({ key={label} label={label} url={productCta.url} + minimisePadding={true} 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 f32c1a10fef..dbde2278c75 100644 --- a/dotcom-rendering/src/components/ProductCardLeftCol.stories.tsx +++ b/dotcom-rendering/src/components/ProductCardLeftCol.stories.tsx @@ -110,7 +110,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/ProductLinkButton.tsx b/dotcom-rendering/src/components/ProductLinkButton.tsx index 63b530a9e95..689ca3a939e 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,16 @@ const heightAutoStyle = css` height: auto; `; +const minimisePaddingStyle = css` + padding: 0 10px 0 12px; + & .src-button-space { + width: 8px; + } + > svg { + margin-left: -2px; + } +`; + export const theme: Partial = { backgroundPrimary: palette('--product-button-primary-background'), backgroundPrimaryHover: palette( @@ -41,12 +53,15 @@ export const ProductLinkButton = ({ url, size = 'default', fullwidth = false, + minimisePadding = false, priority = 'primary', dataComponent = 'in-body-product-link-button', }: ProductLinkButtonProps) => { - const cssOverrides = fullwidth - ? [fullWidthStyle, heightAutoStyle] - : heightAutoStyle; + const cssOverrides: SerializedStyles[] = [ + heightAutoStyle, + ...(fullwidth ? [fullWidthStyle] : []), + ...(minimisePadding ? [minimisePaddingStyle] : []), + ]; return (