Skip to content

Commit de79f73

Browse files
charleycampbellcharleycampbell
committed
- minor tweaks to inline card so its more aligned with the figma
- removed retailer from the price row (TBC) - reworded cta (this TBC) - updated storybook to reflect the likes/dislikes of product - added url cleaner
1 parent 9c76474 commit de79f73

File tree

5 files changed

+37
-58
lines changed

5 files changed

+37
-58
lines changed

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

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -34,25 +34,20 @@ const sampleProductCard: InlineProductCardProps = {
3434
display: ArticleDisplay.Standard,
3535
theme: Pillar.Lifestyle,
3636
},
37-
image: 'https://i.guim.co.uk/img/media/d8755abe62a318b62e2736b98383bf11762d6c91/0_0_2562_2562/master/2562.jpg?width=620&dpr=2&s=none&crop=none',
38-
primaryUrl:
39-
'https://go.skimresources.com/?id=114047X1572903&url=https%3A%2F%2Fwww.waitrose.com%2Fecom%2Fproducts%2Fkenko-mayonnaise%2F424830-807548-807549&sref=https://www.theguardian.com/thefilter/2025/jun/07/best-supermarket-mayonnaise-tom-hunt&xcust=referrer%7Cwww.theguardian.com%7CaccountId%7C114047X1572903',
40-
primaryCTA: '£4.40 for 300g at Waitrose',
41-
primaryPrice: '£4.40',
42-
primaryRetailer: 'Waitrose',
43-
secondaryCTA: '£5.00 at Ocado',
37+
image: 'https://media.guim.co.uk/ed32f52c10d742be18c4ff1b218dce611e71f57e/500_0_3000_3000/master/3000.jpg',
38+
primaryUrl: 'https://www.aircraft.com/lume',
39+
primaryCTA: 'Buy at AirCraft',
40+
primaryPrice: '£199.99',
41+
secondaryCTA: 'Buy at Amazon',
4442
secondaryUrl:
45-
'https://www.ocado.com/products/kenko-japanese-mayonnaise/534467011',
46-
brandName: 'Kenko',
47-
productName: 'Japanese mayonnaise',
43+
'https://www.amazon.co.uk/AirCraft-Home-Backlight-Oscillating-Circulator/dp/B0D8QNGB3M',
44+
brandName: 'AirCraft',
45+
productName: 'Lume',
4846
statistics: [
47+
{ name: 'What we love', value: 'It packs away pretty small' },
4948
{
50-
name: 'Rating',
51-
value: '4.8/5',
52-
},
53-
{
54-
name: 'Taste',
55-
value: 'sweet, sour, salty and has an umami-rich profile',
49+
name: 'What we don\t love',
50+
value: 'there’s nowhere to stow the remote control',
5651
},
5752
],
5853
};

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

Lines changed: 21 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
from,
44
headlineMedium20,
55
space,
6-
textSans14,
6+
textSans15,
77
textSans17,
88
} from '@guardian/source/foundations';
99
import type { ReactNode } from 'react';
@@ -19,8 +19,8 @@ export type Statistics = {
1919

2020
const card = css`
2121
background-color: ${palette('--product-card-background')};
22-
padding: ${space[4]}px;
23-
column-gap: ${space[2]}px;
22+
padding: ${space[2]}px ${space[3]}px ${space[3]}px ${space[3]}px;
23+
column-gap: 10px;
2424
display: grid;
2525
max-width: 100%;
2626
min-width: 100%;
@@ -47,18 +47,17 @@ export type InlineProductCardProps = {
4747
primaryCTA: string;
4848
primaryUrl: string;
4949
primaryPrice: string;
50-
primaryRetailer: string;
5150
secondaryCTA?: string;
5251
secondaryUrl?: string;
5352
statistics: Statistics[];
5453
};
5554

5655
const productInfoContainer = css`
5756
${textSans17};
58-
white-space: normal;
59-
display: grid;
60-
height: 117px;
61-
min-height: fit-content;
57+
display: flex;
58+
flex-direction: column;
59+
align-items: flex-start;
60+
gap: ${space[2]}px;
6261
`;
6362

6463
const primaryHeading = css`
@@ -68,53 +67,42 @@ const primaryHeading = css`
6867
const statisticsContainer = css`
6968
grid-column: span 2;
7069
border-top: 1px solid ${palette('--section-border')};
71-
padding-top: ${space[3]}px;
7270
display: grid;
73-
grid-template-columns: 1fr 1fr;
74-
gap: ${space[2]}px;
71+
grid-template-columns: 1fr;
72+
gap: 2px;
7573
`;
7674

7775
const Statistic = ({ name, value }: Statistics) => (
7876
<div
7977
css={css`
80-
${textSans14};
81-
margin-top: 4px;
78+
${textSans15};
79+
margin-top: ${space[2]}px;
8280
`}
8381
>
84-
{name}: <br /> <strong>{value}</strong>
82+
<strong>{name}</strong> <br /> {value}
8583
</div>
8684
);
8785

8886
const ButtonContainer = ({ children }: { children: ReactNode }) => (
8987
<div
9088
css={css`
9189
grid-column: span 2;
90+
display: flex;
91+
flex-direction: column;
92+
gap: ${space[1]}px;
93+
padding-bottom: ${space[2]}px;
9294
`}
9395
>
9496
{children}
9597
</div>
9698
);
9799

98-
const RetailerLink = ({ url, retailer }: { url: string; retailer: string }) => (
99-
<a
100-
css={css`
101-
color: ${palette('--article-text')};
102-
border-bottom: 1px solid ${palette('--article-link-border')};
103-
text-decoration: none;
104-
:hover,
105-
:active {
106-
border-bottom: 1px solid ${palette('--article-text')};
107-
}
108-
`}
109-
href={url}
110-
>
111-
{retailer}
112-
</a>
113-
);
114100
const ProductInfoContainer = ({ children }: { children: ReactNode }) => (
115101
<div css={productInfoContainer}>{children}</div>
116102
);
117103

104+
const stripHtml = (html: string) => html.replace(/<[^>]+>/g, '');
105+
118106
export const InlineProductCard = ({
119107
format,
120108
brandName,
@@ -123,7 +111,6 @@ export const InlineProductCard = ({
123111
primaryCTA,
124112
primaryUrl,
125113
primaryPrice,
126-
primaryRetailer,
127114
secondaryCTA,
128115
secondaryUrl,
129116
statistics,
@@ -144,25 +131,23 @@ export const InlineProductCard = ({
144131
<div css={primaryHeading}>{brandName}</div>
145132
<div>{productName}</div>
146133
<div>
147-
<strong>{primaryPrice}</strong> from{' '}
148-
<RetailerLink url={primaryUrl} retailer={primaryRetailer} />
134+
<strong>{primaryPrice}</strong>
149135
</div>
150136
</ProductInfoContainer>
151137
<ButtonContainer>
152138
<ProductLinkButton
153-
label={primaryCTA}
139+
label={stripHtml(primaryCTA)}
154140
url={primaryUrl}
155141
cssOverrides={css`
156142
width: 100%;
157-
margin-bottom: 10px;
158143
`}
159144
/>
160145
{!!secondaryCTA && !!secondaryUrl && (
161146
<ProductLinkButton
162147
cssOverrides={css`
163148
width: 100%;
164149
`}
165-
label={secondaryCTA}
150+
label={stripHtml(secondaryCTA)}
166151
url={secondaryUrl}
167152
priority={'tertiary'}
168153
/>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@ const sampleProductCard: LeftColProductCardProps = {
3535
primaryUrl: 'https://www.aircraft.com/lume',
3636
primaryPrice: '£199.99',
3737
statistics: [
38-
{ name: 'We love', value: 'It packs away pretty small' },
38+
{ name: 'What we love', value: 'It packs away pretty small' },
3939
{
40-
name: 'We dont love',
40+
name: "What we don't love",
4141
value: 'there’s nowhere to stow the remote control',
4242
},
4343
],

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,13 +43,13 @@ const product: ProductBlockElement = {
4343
starRating: 'none-selected',
4444
secondaryProductUrl:
4545
'https://www.amazon.co.uk/Devola-16-Inch-Desk-Fan/dp/B0B3Z9K5XH?tag=theguardianbookshop-21&ascsubtag=trd-10001-1b2f-00000-00000-a0000-00000-00000-00000',
46-
secondaryCta: '£132.99 at Amazon',
46+
secondaryCta: 'Buy at Amazon',
4747
secondaryPrice: '£132.99',
4848
secondaryRetailer: 'Amazon',
4949
statistics: [
50-
{ name: 'We love', value: 'It packs away pretty small' },
50+
{ name: 'What we love', value: 'It packs away pretty small' },
5151
{
52-
name: 'We dont love',
52+
name: "What we don't love",
5353
value: 'there’s nowhere to stow the remote control',
5454
},
5555
],

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,6 @@ export const ProductElement = ({
101101
image={product.image.url}
102102
primaryUrl={product.primaryProductUrl}
103103
primaryPrice={product.primaryPrice}
104-
primaryRetailer={product.primaryRetailer}
105104
primaryCTA={product.primaryCta}
106105
secondaryCTA={product.secondaryCta}
107106
secondaryUrl={product.secondaryProductUrl}

0 commit comments

Comments
 (0)