Skip to content

Commit 3097c92

Browse files
charleycampbellcharleycampbell
committed
changed the model for handling of buttons as its changed upstream
1 parent 1e20d68 commit 3097c92

File tree

7 files changed

+187
-151
lines changed

7 files changed

+187
-151
lines changed

‎dotcom-rendering/src/components/InlineProductCard.stories.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,20 @@ const sampleProductCard: InlineProductCardProps = {
6767
theme: Pillar.Lifestyle,
6868
},
6969
image: 'https://media.guim.co.uk/ed32f52c10d742be18c4ff1b218dce611e71f57e/500_0_3000_3000/master/3000.jpg',
70-
primaryUrl: 'https://www.aircraft.com/lume',
71-
primaryCta: 'Buy at AirCraft',
72-
primaryPrice: '£199.99',
73-
secondaryCta: '£199.99 at Amazon',
74-
secondaryUrl:
75-
'https://www.amazon.co.uk/AirCraft-Home-Backlight-Oscillating-Circulator/dp/B0D8QNGB3M',
70+
productCtas: [
71+
{
72+
url: 'https://www.theguardian.com',
73+
text: '',
74+
retailer: 'Amazon',
75+
price: '£89.99',
76+
},
77+
{
78+
url: 'https://www.theguardian.com',
79+
text: 'See alternatives',
80+
retailer: 'John Lewis',
81+
price: '£99.99',
82+
},
83+
],
7684
brandName: 'AirCraft',
7785
productName: 'Lume',
7886
altText: 'A small fan on a table',

‎dotcom-rendering/src/components/InlineProductCard.tsx‎

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,13 @@ export type CustomAttributes = {
2020
value: string;
2121
};
2222

23+
export type ProductCtas = {
24+
url: string;
25+
text: string;
26+
retailer: string;
27+
price: string;
28+
};
29+
2330
export type InlineProductCardProps = {
2431
format: ArticleFormat;
2532
brandName: string;
@@ -28,11 +35,7 @@ export type InlineProductCardProps = {
2835
altText: string;
2936
credit: string;
3037
displayCredit: boolean;
31-
primaryCta: string;
32-
primaryUrl: string;
33-
primaryPrice: string;
34-
secondaryCta?: string;
35-
secondaryUrl?: string;
38+
productCtas: ProductCtas[];
3639
customAttributes: CustomAttributes[];
3740
isCardOnly: boolean;
3841
};
@@ -161,14 +164,11 @@ export const InlineProductCard = ({
161164
altText,
162165
credit,
163166
displayCredit,
164-
primaryCta,
165-
primaryUrl,
166-
primaryPrice,
167-
secondaryCta,
168-
secondaryUrl,
169167
customAttributes,
168+
productCtas,
170169
isCardOnly = false,
171170
}: InlineProductCardProps) => {
171+
const primaryPrice = productCtas[0]?.price ?? '';
172172
return (
173173
<div css={[isCardOnly && productCard, !isCardOnly && showcaseCard]}>
174174
{!!image && (
@@ -197,21 +197,11 @@ export const InlineProductCard = ({
197197
<div css={productNameStyle}>{productName}</div>
198198
<div css={priceStyle}>{primaryPrice}</div>
199199
<div css={desktopButtonWrapper}>
200-
<ProductCardButtons
201-
primaryCta={primaryCta}
202-
primaryUrl={primaryUrl}
203-
secondaryCta={secondaryCta}
204-
secondaryUrl={secondaryUrl}
205-
/>
200+
<ProductCardButtons productCtas={productCtas} />
206201
</div>
207202
</div>
208203
<div css={mobileButtonWrapper}>
209-
<ProductCardButtons
210-
primaryCta={primaryCta}
211-
primaryUrl={primaryUrl}
212-
secondaryUrl={secondaryUrl}
213-
secondaryCta={secondaryCta}
214-
/>
204+
<ProductCardButtons productCtas={productCtas} />
215205
</div>
216206
{!isCardOnly && customAttributes.length > 0 && (
217207
<div css={customAttributesContainer}>
@@ -229,21 +219,33 @@ export const InlineProductCard = ({
229219
};
230220

231221
const ProductCardButtons = ({
232-
primaryCta,
233-
primaryUrl,
234-
secondaryCta,
235-
secondaryUrl,
222+
productCtas,
236223
}: {
237-
primaryCta: string;
238-
primaryUrl: string;
239-
secondaryCta?: string;
240-
secondaryUrl?: string;
224+
productCtas: ProductCtas[];
241225
}) => {
226+
const primaryCta = productCtas.length > 0 ? productCtas[0] : null;
227+
const primaryUrl = primaryCta?.url ?? '';
228+
const primaryLabel =
229+
primaryCta?.text && primaryCta.text.trim().length > 0
230+
? primaryCta.text
231+
: primaryCta?.price && primaryCta.retailer
232+
? `${primaryCta.price} at ${primaryCta.retailer}`
233+
: '';
234+
235+
const secondaryCta = productCtas.length > 0 ? productCtas[1] : null;
236+
const secondaryUrl = secondaryCta?.url ?? '';
237+
const secondaryLabel =
238+
secondaryCta?.text && secondaryCta.text.trim().length > 0
239+
? secondaryCta.text
240+
: secondaryCta?.price && secondaryCta.retailer
241+
? `${secondaryCta.price} at ${secondaryCta.retailer}`
242+
: '';
243+
242244
return (
243245
<>
244246
<ProductLinkButton
245247
dataComponent="inline-product-card-primary-button"
246-
label={primaryCta}
248+
label={primaryLabel}
247249
url={primaryUrl}
248250
cssOverrides={css`
249251
width: 100%;
@@ -252,7 +254,7 @@ const ProductCardButtons = ({
252254
{!!secondaryCta && !!secondaryUrl && (
253255
<ProductLinkButton
254256
dataComponent="inline-product-card-secondary-button"
255-
label={secondaryCta}
257+
label={secondaryLabel}
256258
url={secondaryUrl}
257259
priority="tertiary"
258260
cssOverrides={css`

‎dotcom-rendering/src/components/LeftColProductCard.stories.tsx‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,20 @@ const sampleProductCard: LeftColProductCardProps = {
3131
brandName: 'AirCraft',
3232
productName: 'Lume',
3333
image: 'https://media.guim.co.uk/ed32f52c10d742be18c4ff1b218dce611e71f57e/500_0_3000_3000/master/3000.jpg',
34-
primaryCta: 'Buy at AirCraft',
35-
primaryUrl: 'https://www.aircraft.com/lume',
36-
primaryPrice: '£199.99',
34+
productCtas: [
35+
{
36+
url: 'https://www.theguardian.com',
37+
text: '',
38+
retailer: 'Amazon',
39+
price: '£89.99',
40+
},
41+
{
42+
url: 'https://www.theguardian.com',
43+
text: 'See alternatives',
44+
retailer: 'John Lewis',
45+
price: '£99.99',
46+
},
47+
],
3748
customAttributes: [
3849
{ name: 'What we love', value: 'It packs away pretty small' },
3950
{
@@ -48,6 +59,20 @@ const sampleProductCard: LeftColProductCardProps = {
4859

4960
export const Default = () => <LeftColProductCard {...sampleProductCard} />;
5061

62+
export const WithButtonOverride = () => (
63+
<LeftColProductCard
64+
{...sampleProductCard}
65+
productCtas={[
66+
{
67+
url: 'https://www.theguardian.com',
68+
text: 'Shop Now',
69+
retailer: 'Amazon',
70+
price: '£89.99',
71+
},
72+
]}
73+
></LeftColProductCard>
74+
);
75+
5176
export const WithNoCustomAttributes = () => (
5277
<LeftColProductCard {...sampleProductCard} customAttributes={[]} />
5378
);

‎dotcom-rendering/src/components/LeftColProductCard.tsx‎

Lines changed: 78 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,29 @@ import { palette } from '../palette';
1111
import { Caption } from './Caption';
1212
import { Picture } from './Picture';
1313
import { ProductLinkButton } from './ProductLinkButton';
14-
import { stripHtmlFromString } from './TextBlockComponent';
1514

1615
export type CustomAttributes = {
1716
name: string;
1817
value: string;
1918
};
2019

20+
export type ProductCtas = {
21+
url: string;
22+
text: string;
23+
retailer: string;
24+
price: string;
25+
};
26+
2127
export type LeftColProductCardProps = {
2228
brandName: string;
2329
productName: string;
2430
image: string;
25-
primaryCta: string;
26-
primaryUrl: string;
27-
primaryPrice: string;
2831
altText: string;
2932
displayCredit: boolean;
3033
credit: string;
3134
customAttributes: CustomAttributes[];
3235
format: ArticleFormat;
36+
productCtas: ProductCtas[];
3337
};
3438

3539
const card = css`
@@ -101,68 +105,78 @@ export const LeftColProductCard = ({
101105
altText,
102106
displayCredit,
103107
credit,
104-
primaryCta,
105-
primaryUrl,
106-
primaryPrice,
107108
customAttributes,
108109
format,
109-
}: LeftColProductCardProps) => (
110-
<div css={card}>
111-
{!!image && (
112-
<div
113-
css={css`
114-
figcaption {
115-
position: static;
116-
}
117-
`}
118-
>
119-
<Picture
120-
role={'productCard'}
121-
format={format}
122-
master={image}
123-
alt={altText}
124-
height={220}
125-
width={220}
126-
loading={'eager'}
127-
/>
128-
<Caption
129-
shouldLimitWidth={true}
130-
format={format}
131-
isLeftCol={true}
132-
displayCredit={displayCredit}
133-
credit={credit}
134-
isOverlaid={false}
135-
/>
110+
productCtas,
111+
}: LeftColProductCardProps) => {
112+
const primaryCta = productCtas.length > 0 ? productCtas[0] : null;
113+
const primaryUrl = primaryCta?.url ?? '';
114+
const primaryLabel =
115+
primaryCta?.text && primaryCta.text.trim().length > 0
116+
? primaryCta.text
117+
: primaryCta?.price && primaryCta.retailer
118+
? `${primaryCta.price} at ${primaryCta.retailer}`
119+
: '';
120+
const primaryPrice = primaryCta?.price ?? '';
121+
122+
return (
123+
<div css={card}>
124+
{!!image && (
125+
<div
126+
css={css`
127+
figcaption {
128+
position: static;
129+
}
130+
`}
131+
>
132+
<Picture
133+
role={'productCard'}
134+
format={format}
135+
master={image}
136+
alt={altText}
137+
height={220}
138+
width={220}
139+
loading={'eager'}
140+
/>
141+
<Caption
142+
shouldLimitWidth={true}
143+
format={format}
144+
isLeftCol={true}
145+
displayCredit={displayCredit}
146+
credit={credit}
147+
isOverlaid={false}
148+
/>
149+
</div>
150+
)}
151+
<div css={productInfoContainer}>
152+
<div css={brandNameFont}>{brandName}</div>
153+
<div css={productNameFont}>{productName}</div>
154+
<div css={priceFont}>
155+
<strong>{primaryPrice}</strong>
156+
</div>
136157
</div>
137-
)}
138-
<div css={productInfoContainer}>
139-
<div css={brandNameFont}>{brandName}</div>
140-
<div css={productNameFont}>{productName}</div>
141-
<div css={priceFont}>
142-
<strong>{primaryPrice}</strong>
158+
<div css={buttonOverride}>
159+
<ProductLinkButton
160+
dataComponent="leftcol-product-card-button"
161+
label={primaryLabel}
162+
url={primaryUrl}
163+
size={'small'}
164+
cssOverrides={css`
165+
min-width: 100%;
166+
`}
167+
></ProductLinkButton>
143168
</div>
169+
{customAttributes.length > 0 && (
170+
<div css={customAttributesContainer}>
171+
{customAttributes.map((customAttribute) => (
172+
<CustomAttribute
173+
key={customAttribute.name}
174+
name={customAttribute.name}
175+
value={customAttribute.value}
176+
/>
177+
))}
178+
</div>
179+
)}
144180
</div>
145-
<div css={buttonOverride}>
146-
<ProductLinkButton
147-
dataComponent="leftcol-product-card-button"
148-
label={stripHtmlFromString(primaryCta)}
149-
url={primaryUrl}
150-
size={'small'}
151-
cssOverrides={css`
152-
min-width: 100%;
153-
`}
154-
></ProductLinkButton>
155-
</div>
156-
{customAttributes.length > 0 && (
157-
<div css={customAttributesContainer}>
158-
{customAttributes.map((customAttribute) => (
159-
<CustomAttribute
160-
key={customAttribute.name}
161-
name={customAttribute.name}
162-
value={customAttribute.value}
163-
/>
164-
))}
165-
</div>
166-
)}
167-
</div>
168-
);
181+
);
182+
};

0 commit comments

Comments
 (0)