Skip to content

Commit 231f326

Browse files
Minimise padding on the product button (#14801)
* Minimise padding on ProductButton to reduce the likelihood of the CTA going onto 2 lines. Padding signed off by DS team
1 parent 3bff594 commit 231f326

File tree

3 files changed

+20
-4
lines changed

3 files changed

+20
-4
lines changed

dotcom-rendering/src/components/ProductCardButtons.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export const ProductCardButtons = ({
2121
key={label}
2222
label={label}
2323
url={productCta.url}
24+
minimisePadding={true}
2425
priority={index === 0 ? 'primary' : 'tertiary'}
2526
fullwidth={true}
2627
data-component={`${

dotcom-rendering/src/components/ProductCardLeftCol.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ export const LotsOfCtas = {
110110
},
111111
{
112112
url: 'https://www.theguardian.com',
113-
price: 99.99',
113+
price: 105.99',
114114
retailer: 'John Lewis',
115115
text: '',
116116
},

dotcom-rendering/src/components/ProductLinkButton.tsx

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import type { SerializedStyles } from '@emotion/react';
12
import { css } from '@emotion/react';
23
import type {
34
ButtonPriority,
@@ -16,6 +17,7 @@ type ProductLinkButtonProps = {
1617
fullwidth?: boolean;
1718
priority?: ButtonPriority;
1819
dataComponent?: string;
20+
minimisePadding?: boolean;
1921
};
2022

2123
const fullWidthStyle = css`
@@ -26,6 +28,16 @@ const heightAutoStyle = css`
2628
height: auto;
2729
`;
2830

31+
const minimisePaddingStyle = css`
32+
padding: 0 10px 0 12px;
33+
& .src-button-space {
34+
width: 8px;
35+
}
36+
> svg {
37+
margin-left: -2px;
38+
}
39+
`;
40+
2941
export const theme: Partial<ThemeButton> = {
3042
backgroundPrimary: palette('--product-button-primary-background'),
3143
backgroundPrimaryHover: palette(
@@ -41,12 +53,15 @@ export const ProductLinkButton = ({
4153
url,
4254
size = 'default',
4355
fullwidth = false,
56+
minimisePadding = false,
4457
priority = 'primary',
4558
dataComponent = 'in-body-product-link-button',
4659
}: ProductLinkButtonProps) => {
47-
const cssOverrides = fullwidth
48-
? [fullWidthStyle, heightAutoStyle]
49-
: heightAutoStyle;
60+
const cssOverrides: SerializedStyles[] = [
61+
heightAutoStyle,
62+
...(fullwidth ? [fullWidthStyle] : []),
63+
...(minimisePadding ? [minimisePaddingStyle] : []),
64+
];
5065

5166
return (
5267
<LinkButton

0 commit comments

Comments
 (0)