Skip to content

Product carousel card - V1 #14946

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
charleycampbell wants to merge 13 commits into
base: main
Choose a base branch
from
+461 −1
Draft

Product carousel card - V1 #14946

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
7ff741c
Adding new product card for the Carousel:
charleycampbell Nov 28, 2025
b393942
- Adds optional Read More which will anchor to the product element o…
charleycampbell Dec 1, 2025
c9f6023
fixing linting errors which failed the build
charleycampbell Dec 1, 2025
b5a46fa
fixing style lint build
charleycampbell Dec 1, 2025
31d208c
Update dotcom-rendering/src/components/ProductCarouselCard.tsx
charleycampbell Dec 4, 2025
284ab52
Update dotcom-rendering/src/components/ProductCarouselCard.tsx
charleycampbell Dec 4, 2025
3a93697
Update dotcom-rendering/src/components/ProductCarouselCard.tsx
charleycampbell Dec 4, 2025
6f21e66
Update dotcom-rendering/src/components/ProductCarouselCard.tsx
charleycampbell Dec 4, 2025
48c525a
Update dotcom-rendering/src/components/ProductCarouselCard.tsx
charleycampbell Dec 4, 2025
d73a85e
Update dotcom-rendering/src/components/ProductCarouselCard.tsx
charleycampbell Dec 4, 2025
6d6ea3f
Update dotcom-rendering/src/components/ProductCarouselCard.tsx
charleycampbell Dec 4, 2025
2bb58e9
adding dark mode colours to product card and added a couple of new pa…
charleycampbell Dec 5, 2025
e9ce400
Merge branch 'main' into filter/carousel-card
charleycampbell Dec 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion dotcom-rendering/src/components/ProductCardButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,14 @@ const getLabel = (cta: ProductCta): string => {

export const ProductCardButtons = ({
productCtas,
buttonLabelOverride,
}: {
productCtas: ProductCta[];
buttonLabelOverride?: string;
}) => (
<>
{productCtas.map((productCta, index) => {
const label = getLabel(productCta);
const label = buttonLabelOverride ?? getLabel(productCta);
Copy link
Contributor Author

@charleycampbell charleycampbell Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added this here as I think it would be good to re-use this button component but happy to have a discussion offline if we think there is another appraoch

Copy link
Contributor

@emma-imber emma-imber Dec 3, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should catch up with Alex H about this because the designs were put together before some of our chats about the CTA wording. It might be that this should now be aligned with the product cards and that we don't need this override? I will send a message over to check with him

return (
<ProductLinkButton
key={label}
Expand Down
300 changes: 300 additions & 0 deletions dotcom-rendering/src/components/ProductCarouselCard.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,300 @@
import type { Meta, StoryObj } from '@storybook/react-webpack5';
import { productImage } from '../../fixtures/manual/productImage';
import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
import type { ProductBlockElement } from '../types/content';
import { ProductCarouselCard } from './ProductCarouselCard';

const product = {
_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
elementId: 'b1f6e8e2-3f3a-4f0c-8d1e-5f3e3e3e3e3e',
primaryHeadingHtml: 'Best Kettle overall',
secondaryHeadingHtml: 'Bosch Sky Kettle',
brandName: 'Bosch',
productName: 'Sky Kettle',
image: productImage,
displayType: 'InlineWithProductCard',
lowestPrice: '£39.99',
customAttributes: [
{ name: 'What we love', value: 'It pours well and looks great' },
{
name: "What we don't love",
value: 'The handle feels a bit cheap compared to the rest of it',
},
],
productCtas: [
{
url: 'https://www.johnlewis.com/bosch-twk7203gb-sky-variable-temperature-kettle-1-7l-black/p3228625',
text: '',
retailer: 'John Lewis',
price: '£45.99',
},
{
url: 'https://www.amazon.co.uk/Bosch-TWK7203GB-Sky-Variable-Temperature/dp/B07Z8VQ2V6',
text: '',
retailer: 'Amazon',
price: '£39.99',
},
],
starRating: 'none-selected',
content: [
{
displayCredit: true,
_type: 'model.dotcomrendering.pageElements.ImageBlockElement',
role: 'inline',
media: {
allImages: [
{
index: 0,
fields: {
height: '3213',
width: '3213',
},
mediaType: 'Image',
mimeType: 'image/jpeg',
url: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/3213.jpg',
},
{
index: 1,
fields: {
isMaster: 'true',
height: '3213',
width: '3213',
},
mediaType: 'Image',
mimeType: 'image/jpeg',
url: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
},
{
index: 2,
fields: {
height: '2000',
width: '2000',
},
mediaType: 'Image',
mimeType: 'image/jpeg',
url: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/2000.jpg',
},
{
index: 3,
fields: {
height: '1000',
width: '1000',
},
mediaType: 'Image',
mimeType: 'image/jpeg',
url: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/1000.jpg',
},
{
index: 4,
fields: {
height: '500',
width: '500',
},
mediaType: 'Image',
mimeType: 'image/jpeg',
url: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/500.jpg',
},
{
index: 5,
fields: {
height: '140',
width: '140',
},
mediaType: 'Image',
mimeType: 'image/jpeg',
url: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/140.jpg',
},
],
},
elementId: '76686aa1-2e47-4616-b4ed-a88d0afe07ed',
imageSources: [
{
weighting: 'inline',
srcSet: [
{
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
width: 620,
},
{
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
width: 1240,
},
{
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
width: 605,
},
{
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
width: 1210,
},
{
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
width: 445,
},
{
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
width: 890,
},
],
},
{
weighting: 'thumbnail',
srcSet: [
{
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
width: 140,
},
{
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
width: 280,
},
{
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
width: 120,
},
{
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
width: 240,
},
],
},
{
weighting: 'supporting',
srcSet: [
{
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
width: 380,
},
{
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
width: 760,
},
{
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
width: 300,
},
{
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
width: 600,
},
{
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
width: 620,
},
{
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
width: 1240,
},
{
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
width: 605,
},
{
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
width: 1210,
},
{
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
width: 445,
},
{
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
width: 890,
},
],
},
],
data: {
alt: 'Testing Bosch Sky Kettle',
credit: 'Photograph: Rachel Ogden/The Guardian',
},
},
{
_type: 'model.dotcomrendering.pageElements.LinkBlockElement',
url: 'https://www.johnlewis.com/bosch-twk7203gb-sky-variable-temperature-kettle-1-7l-black/p3228625',
label: '£79.99 at John Lewis',
linkType: 'ProductButton',
},
{
_type: 'model.dotcomrendering.pageElements.LinkBlockElement',
url: 'https://www.amazon.co.uk/Bosch-TWK7203GB-Sky-Variable-Temperature/dp/B07Z8VQ2V6',
label: '£79.99 at Amazon',
linkType: 'ProductButton',
},
{
_type: 'model.dotcomrendering.pageElements.TextBlockElement',
html: '<p>Offering variable temperatures and a double-walled stainless-steel housing, the 3kW Sky is a brilliant blend of robust form and function. It boasts a low minimum boil (300ml), a keep-warm setting and touch controls.</p>',
elementId: '4a27eb68-6a03-4e82-a7d0-e4f1ef3ccb6f',
},
{
_type: 'model.dotcomrendering.pageElements.TextBlockElement',
html: '<p><strong>Why we love it<br></strong>I found it difficult to select a best kettle from so many that performed well, but the Bosch Sky clinched it because it’s such a good all-rounder that will suit most people. It pours well, has a button that’s within easy reach of the handle so it’s simple to open the lid without touching it, and it’s insulated so the exterior doesn’t become too hot to touch. From a design perspective, it has a more industrial feel than many others – no frippery here – but not too modern that it wouldn’t fit into most kitchens. Its display is thoughtfully designed, easy to keep clean and lights up as it heats.</p>',
elementId: 'f48f03d4-bece-4763-874b-4027a311643e',
},
{
_type: 'model.dotcomrendering.pageElements.TextBlockElement',
html: '<p>The exterior doesn’t get too hot (up to 40C), and while it wasn’t the fastest to boil in testing, it was only seconds behind the Dualit below. It clicked off at boiling point, and the water was still a toasty 78C 30 minutes later. At the hour point, it was 66C, and two hours 52C, meaning you’ll spend less time and energy reboiling.</p>',
elementId: 'df571922-33b1-416a-8b3d-ee756b638cc1',
},
{
_type: 'model.dotcomrendering.pageElements.TextBlockElement',
html: '<p><strong>It’s a shame that … </strong> its premium look ends at the handle, which seems cheap and plasticky next to the sleek aesthetic of the rest of it.</p>',
elementId: 'd98fc724-8908-46e2-acc6-4739ad4d5719',
},
],
} satisfies ProductBlockElement;

const meta = {
component: ProductCarouselCard,
title: 'Components/ProductCarouselCard',
args: {
product,
format: {
design: ArticleDesign.Standard,
display: ArticleDisplay.Standard,
theme: Pillar.Lifestyle,
},
showReadMore: true,
},
} satisfies Meta<typeof ProductCarouselCard>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default = {} satisfies Story;

export const WithoutReadMore = {
args: {
showReadMore: false,
},
} satisfies Story;

export const WithoutHeadingDisclaimerOrReadMore = {
args: {
product: {
...product,
primaryHeadingHtml: '',
},
showReadMore: false,
},
} satisfies Story;

export const WithLongHeadingProductNameAndCTA = {
args: {
product: {
...product,
primaryHeadingHtml: 'Super long product category review name',
productName:
'Sky Kettle with a super duper long name that goes on and on',
productCtas: [
{
url: 'https://www.johnlewis.com/bosch-twk7203gb-sky-variable-temperature-kettle-1-7l-black/p3228625',
text: '',
retailer: 'John Lewis with a very long name',
price: '£45.99',
},
],
},
},
};
Loading
Loading