diff --git a/dotcom-rendering/fixtures/manual/productBlockElement.ts b/dotcom-rendering/fixtures/manual/productBlockElement.ts new file mode 100644 index 00000000000..da2e0879658 --- /dev/null +++ b/dotcom-rendering/fixtures/manual/productBlockElement.ts @@ -0,0 +1,242 @@ +import type { ProductBlockElement } from '../../src/types/content'; +import { productImage } from './productImage'; + +export const exampleProduct: ProductBlockElement = { + _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: '

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.

', + elementId: '4a27eb68-6a03-4e82-a7d0-e4f1ef3ccb6f', + }, + { + _type: 'model.dotcomrendering.pageElements.TextBlockElement', + html: '

Why we love it
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.

', + elementId: 'f48f03d4-bece-4763-874b-4027a311643e', + }, + { + _type: 'model.dotcomrendering.pageElements.TextBlockElement', + html: '

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.

', + elementId: 'df571922-33b1-416a-8b3d-ee756b638cc1', + }, + { + _type: 'model.dotcomrendering.pageElements.TextBlockElement', + html: '

It’s a shame that … its premium look ends at the handle, which seems cheap and plasticky next to the sleek aesthetic of the rest of it.

', + elementId: 'd98fc724-8908-46e2-acc6-4739ad4d5719', + }, + ], +}; diff --git a/dotcom-rendering/src/components/ProductCarouselCard.stories.tsx b/dotcom-rendering/src/components/ProductCarouselCard.stories.tsx index 65bb4d2b842..8ba2251ab5c 100644 --- a/dotcom-rendering/src/components/ProductCarouselCard.stories.tsx +++ b/dotcom-rendering/src/components/ProductCarouselCard.stories.tsx @@ -1,255 +1,14 @@ import { css } from '@emotion/react'; import type { Meta, StoryObj } from '@storybook/react-webpack5'; -import { productImage } from '../../fixtures/manual/productImage'; +import { exampleProduct } from '../../fixtures/manual/productBlockElement'; 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: '

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.

', - elementId: '4a27eb68-6a03-4e82-a7d0-e4f1ef3ccb6f', - }, - { - _type: 'model.dotcomrendering.pageElements.TextBlockElement', - html: '

Why we love it
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.

', - elementId: 'f48f03d4-bece-4763-874b-4027a311643e', - }, - { - _type: 'model.dotcomrendering.pageElements.TextBlockElement', - html: '

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.

', - elementId: 'df571922-33b1-416a-8b3d-ee756b638cc1', - }, - { - _type: 'model.dotcomrendering.pageElements.TextBlockElement', - html: '

It’s a shame that … its premium look ends at the handle, which seems cheap and plasticky next to the sleek aesthetic of the rest of it.

', - elementId: 'd98fc724-8908-46e2-acc6-4739ad4d5719', - }, - ], -} satisfies ProductBlockElement; - const meta = { component: ProductCarouselCard, title: 'Components/ProductCarouselCard', args: { - product, + product: { ...exampleProduct, h2Id: 'h2-id' }, format: { design: ArticleDesign.Standard, display: ArticleDisplay.Standard, @@ -276,7 +35,8 @@ export const Default = {} satisfies Story; export const WithLongHeadingProductNameAndCTA = { args: { product: { - ...product, + ...exampleProduct, + h2Id: 'h2-id', primaryHeadingHtml: 'Super long product category review name', productName: 'Sky Kettle with a super duper long name that goes on and on', diff --git a/dotcom-rendering/src/components/ProductCarouselCard.tsx b/dotcom-rendering/src/components/ProductCarouselCard.tsx index f8235c386a0..cc9b660e354 100644 --- a/dotcom-rendering/src/components/ProductCarouselCard.tsx +++ b/dotcom-rendering/src/components/ProductCarouselCard.tsx @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; +import { isUndefined } from '@guardian/libs'; import { headlineBold20, headlineMedium17, @@ -18,17 +19,30 @@ export type ProductCarouselCardProps = { format: ArticleFormat; }; -const baseCard = css` - display: flex; - flex-direction: column; -`; - -const productCarouselCardHeading = css` +const headingFont = css` ${headlineBold20}; color: ${palette('--product-card-headline')}; `; -const brandAndProductName = css` +const headingArea = css` + grid-row: 1; +`; +const readMoreArea = css` + grid-row: 2; + padding-bottom: ${space[2]}px; +`; +const imageArea = css` + grid-row: 3; + img { + width: 100%; + height: auto; + } +`; +const belowImageArea = css` + grid-row: 4; +`; + +const brandNameFont = css` ${headlineMedium17}; `; @@ -38,7 +52,6 @@ const readMoreCta = css` text-decoration-color: ${palette('--product-card-read-more-decoration')}; color: ${palette('--product-card-read-more')}; text-underline-offset: 20%; - padding-bottom: ${space[2]}px; `; const priceStyle = css` @@ -51,24 +64,15 @@ const buttonWrapper = css` display: flex; flex-direction: column; gap: ${space[1]}px; + padding-bottom: ${space[4]}px; `; -const imageArea = css` - img { - width: 100%; - height: auto; - } -`; - -const brandAndProductNameRow = css` - line-height: 1.3; -`; - -const brandAndProductNameInline = css` +const brandAndProductNameFont = css` ${headlineMedium17}; + line-height: 1.3; `; -const productNameStyle = css` +const productNameFont = css` ${textSans17}; `; @@ -77,51 +81,66 @@ export const ProductCarouselCard = ({ format, }: ProductCarouselCardProps) => { const hasHeading = !!product.primaryHeadingHtml; - const firstCta = product.productCtas[0]; - + const h2Id = product.h2Id; + const productAndBrandName = [product.brandName, product.productName] + .filter(Boolean) + .join(' '); return ( -
- {hasHeading && ( - <> -
-
- - {product.brandName}{' '} - - - {product.productName} - -
- - )} -
Read more
+ <> +
+ {hasHeading && ( + <> +
+
+ {productAndBrandName} +
+ + )} +
+
+ {!isUndefined(h2Id) && + hasHeading && + product.displayType !== 'ProductCardOnly' && ( + event.stopPropagation()} + css={readMoreCta} + > + Read more + + )} +
- {!hasHeading && ( -
-
{product.brandName}
-
{product.productName}
-
- )} -
{firstCta?.price}
+
+ {!hasHeading && ( +
+
{product.brandName}
+
{product.productName}
+
+ )} - {firstCta && ( -
- -
- )} -
+ {firstCta && ( + <> +
{firstCta.price}
+
+ +
+ + )} +
+ ); }; diff --git a/dotcom-rendering/src/components/ScrollableCarousel.tsx b/dotcom-rendering/src/components/ScrollableCarousel.tsx index fa65901c707..8d6d7bead28 100644 --- a/dotcom-rendering/src/components/ScrollableCarousel.tsx +++ b/dotcom-rendering/src/components/ScrollableCarousel.tsx @@ -1,23 +1,50 @@ +import type { SerializedStyles } from '@emotion/react'; import { css } from '@emotion/react'; +import type { Breakpoint } from '@guardian/source/foundations'; import { from, space, until } from '@guardian/source/foundations'; import { useEffect, useRef, useState } from 'react'; import { nestedOphanComponents } from '../lib/ophan-helpers'; import { palette } from '../palette'; import { CarouselNavigationButtons } from './CarouselNavigationButtons'; -type GapSize = 'small' | 'medium' | 'large'; +type GapSize = 'small' | 'medium' | 'large' | 'none'; type GapSizes = { row: GapSize; column: GapSize }; - -type Props = { - children: React.ReactNode; - carouselLength: number; - visibleCarouselSlidesOnMobile: number; - visibleCarouselSlidesOnTablet: number; - sectionId?: string; - shouldStackCards?: { desktop: boolean; mobile: boolean }; - gapSizes?: GapSizes; +export type FixedSlideWidth = { + defaultWidth: number; + widthFromBreakpoints: { breakpoint: Breakpoint; width: number }[]; }; +export enum CarouselKind { + 'VisibleSlides', + 'FixedWidthSlides', +} + +type Props = + | { + kind: CarouselKind.VisibleSlides; + children: React.ReactNode; + isArticle?: boolean; + carouselLength: number; + visibleCarouselSlidesOnMobile: number; + visibleCarouselSlidesOnTablet: number; + fixedSlideWidth?: never; + sectionId?: string; + shouldStackCards?: { desktop: boolean; mobile: boolean }; + gapSizes?: GapSizes; + } + | { + kind: CarouselKind.FixedWidthSlides; + isArticle?: boolean; + children: React.ReactNode; + carouselLength: number; + visibleCarouselSlidesOnMobile?: never; + visibleCarouselSlidesOnTablet?: never; + fixedSlideWidth: FixedSlideWidth; + sectionId?: string; + shouldStackCards?: never; + gapSizes?: GapSizes; + }; + /** * Grid sizing values to calculate negative margin used to pull navigation * buttons outside of container into the outer grid column at wide breakpoint. @@ -25,6 +52,9 @@ type Props = { const gridGap = 20; const gridGapMobile = 10; +const baseContainerStyles = css` + position: relative; +`; /** * On mobile the carousel extends into the outer margins to use the full width * of the screen. From tablet onwards the carousel sits within the page grid. @@ -35,8 +65,7 @@ const gridGapMobile = 10; * left side so that the carousel extends into the the middle of the gutter * between the grid columns to meet the dividing line. */ -const containerStyles = css` - position: relative; +const frontContainerStyles = css` margin-left: -${gridGapMobile}px; margin-right: -${gridGapMobile}px; ${from.mobileLandscape} { @@ -52,25 +81,7 @@ const containerStyles = css` } `; -const carouselStyles = css` - display: grid; - width: 100%; - grid-auto-columns: 1fr; - grid-auto-flow: column; - overflow-x: auto; - overflow-y: hidden; - scroll-snap-type: x mandatory; - scroll-behavior: smooth; - overscroll-behavior: contain auto; - /** - * Hide scrollbars - * See: https://stackoverflow.com/a/38994837 - */ - ::-webkit-scrollbar { - display: none; /* Safari and Chrome */ - } - scrollbar-width: none; /* Firefox */ - +const frontCarouselStyles = css` padding-left: ${gridGapMobile}px; padding-right: ${gridGapMobile}px; scroll-padding-left: ${gridGapMobile}px; @@ -90,6 +101,26 @@ const carouselStyles = css` } `; +const baseCarouselStyles = css` + display: grid; + width: 100%; + grid-auto-columns: 1fr; + grid-auto-flow: column; + overflow-x: auto; + overflow-y: hidden; + scroll-snap-type: x mandatory; + scroll-behavior: smooth; + overscroll-behavior: contain auto; + /** + * Hide scrollbars + * See: https://stackoverflow.com/a/38994837 + */ + ::-webkit-scrollbar { + display: none; /* Safari and Chrome */ + } + scrollbar-width: none; /* Firefox */ +`; + const carouselGapStyles = (column: number, row: number) => { return css` column-gap: ${column}px; @@ -97,6 +128,17 @@ const carouselGapStyles = (column: number, row: number) => { `; }; +const subgridStyles = ({ subgridRows }: { subgridRows: number }) => css` + scroll-snap-align: start; + position: relative; + display: grid; + @supports (grid-template-rows: subgrid) { + grid-column: span 1; + grid-row: span ${subgridRows}; + grid-template-rows: subgrid; + } +`; + const itemStyles = css` display: flex; scroll-snap-align: start; @@ -151,6 +193,29 @@ const stackedCardRowsStyles = ({ } `; +const generateFixedWidthColumStyles = ({ + fixedSlideWidth, + carouselLength, +}: { + fixedSlideWidth: FixedSlideWidth; + carouselLength: number; +}) => { + const fixedWidths: SerializedStyles[] = []; + fixedWidths.push(css` + grid-template-columns: repeat( + ${carouselLength}, + ${fixedSlideWidth.defaultWidth}px + ); + `); + for (const { breakpoint, width } of fixedSlideWidth.widthFromBreakpoints) { + fixedWidths.push(css` + ${from[breakpoint]} { + grid-template-columns: repeat(${carouselLength}, ${width}px); + } + `); + } + return fixedWidths; +}; /** * Generates CSS styles for a grid layout used in a carousel. * @@ -163,7 +228,7 @@ const generateCarouselColumnStyles = ( totalCards: number, visibleCarouselSlidesOnMobile: number, visibleCarouselSlidesOnTablet: number, -) => { +): SerializedStyles => { const peepingCardWidth = space[8]; const cardGap = 20; const offsetPeepingCardWidth = @@ -220,6 +285,8 @@ const getGapSize = (gap: GapSize) => { return space[4]; case 'large': return space[5]; + case 'none': + return 0; } }; @@ -227,10 +294,13 @@ const getGapSize = (gap: GapSize) => { * A component used in the carousel fronts containers (e.g. small/medium/feature) */ export const ScrollableCarousel = ({ + kind, children, + isArticle = false, carouselLength, visibleCarouselSlidesOnMobile, visibleCarouselSlidesOnTablet, + fixedSlideWidth, sectionId, shouldStackCards = { desktop: false, mobile: false }, gapSizes = { column: 'large', row: 'large' }, @@ -239,7 +309,10 @@ export const ScrollableCarousel = ({ const [previousButtonEnabled, setPreviousButtonEnabled] = useState(false); const [nextButtonEnabled, setNextButtonEnabled] = useState(true); - const showNavigation = carouselLength > visibleCarouselSlidesOnTablet; + const showNavigation = + kind === CarouselKind.VisibleSlides + ? carouselLength > visibleCarouselSlidesOnTablet + : false; const scrollTo = (direction: 'left' | 'right') => { if (!carouselRef.current) return; @@ -368,17 +441,25 @@ export const ScrollableCarousel = ({ }, []); return ( -
+
    ); + +ScrollableCarousel.SubgridItem = ({ + subgridRows, + children, + borderColour = palette('--card-border-top'), +}: { + subgridRows: number; + children: React.ReactNode; + borderColour?: string; +}) => ( +
  1. + {children} +
    2. +); diff --git a/dotcom-rendering/src/components/ScrollableFeature.importable.tsx b/dotcom-rendering/src/components/ScrollableFeature.importable.tsx index 02dc8578233..1377ff0d79b 100644 --- a/dotcom-rendering/src/components/ScrollableFeature.importable.tsx +++ b/dotcom-rendering/src/components/ScrollableFeature.importable.tsx @@ -5,7 +5,7 @@ import type { DCRFrontCard, } from '../types/front'; import { FeatureCard } from './FeatureCard'; -import { ScrollableCarousel } from './ScrollableCarousel'; +import { CarouselKind, ScrollableCarousel } from './ScrollableCarousel'; type Props = { trails: DCRFrontCard[]; @@ -33,6 +33,7 @@ export const ScrollableFeature = ({ }: Props) => { return ( { return ( { + const fixedCardWidth: FixedSlideWidth = { + defaultWidth: 240, + widthFromBreakpoints: [ + { breakpoint: 'mobileMedium', width: 280 }, + { breakpoint: 'tablet', width: 220 }, + ], + }; + return ( + + {products.map((product: ProductBlockElement) => ( + + + + ))} + + ); +}; diff --git a/dotcom-rendering/src/components/ScrollableProducts.stories.tsx b/dotcom-rendering/src/components/ScrollableProducts.stories.tsx new file mode 100644 index 00000000000..5f391d5d356 --- /dev/null +++ b/dotcom-rendering/src/components/ScrollableProducts.stories.tsx @@ -0,0 +1,80 @@ +import { breakpoints } from '@guardian/source/foundations'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; +import { centreColumnDecorator } from '../../.storybook/decorators/gridDecorators'; +import { exampleProduct } from '../../fixtures/manual/productBlockElement'; +import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat'; +import { ScrollableProduct } from './ScrollableProduct.importable'; + +const meta = { + title: 'Article Carousel/Scrollable Products', + component: ScrollableProduct, + parameters: { + chromatic: { + viewports: [ + breakpoints.mobile, + breakpoints.tablet, + breakpoints.wide, + ], + }, + }, + args: { + products: [ + { ...exampleProduct, h2Id: 'product' }, + { + ...exampleProduct, + h2Id: 'product-1', + productName: 'Lorem ipsum dolor sit amet', + }, + { ...exampleProduct, h2Id: 'product-2' }, + { ...exampleProduct, h2Id: 'product-3' }, + { ...exampleProduct, h2Id: 'product-4' }, + ], + format: { + design: ArticleDesign.Review, + display: ArticleDisplay.Standard, + theme: Pillar.Lifestyle, + }, + }, + decorators: [centreColumnDecorator], + render: (args) => ( + <> + +

    + Product 0 +

    +
    + The standard Lorem Ipsum passage, used since the 1500s +
    +

    + Product 1 +

    +
    + The standard Lorem Ipsum passage, used since the 1500s +
    +

    + Product 2 +

    +
    + The standard Lorem Ipsum passage, used since the 1500s +
    +

    + Product 3 +

    +
    + The standard Lorem Ipsum passage, used since the 1500s +
    +

    + Product 4 +

    +
    + The standard Lorem Ipsum passage, used since the 1500s +
    + + ), +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const With5Cards = {} satisfies Story; diff --git a/dotcom-rendering/src/components/ScrollableSmall.importable.tsx b/dotcom-rendering/src/components/ScrollableSmall.importable.tsx index 2d21382c049..dc54e2646ad 100644 --- a/dotcom-rendering/src/components/ScrollableSmall.importable.tsx +++ b/dotcom-rendering/src/components/ScrollableSmall.importable.tsx @@ -4,7 +4,7 @@ import type { DCRFrontCard, } from '../types/front'; import { FrontCard } from './FrontCard'; -import { ScrollableCarousel } from './ScrollableCarousel'; +import { CarouselKind, ScrollableCarousel } from './ScrollableCarousel'; type Props = { trails: DCRFrontCard[]; @@ -63,6 +63,7 @@ export const ScrollableSmall = ({ return ( { <div css={cardsContainerStyles}> <ScrollableCarousel + kind={CarouselKind.VisibleSlides} carouselLength={Math.ceil(trails.length / 2)} visibleCarouselSlidesOnMobile={1} visibleCarouselSlidesOnTablet={2}