Replace at a glance with scrollable carousel

dotcom-rendering/src/components/ScrollableProduct.importable.tsx

@@ -318,7 +318,7 @@ export const ScrollableProduct = ({ products, format }: Props) => {
 				<div css={countStyles} id={'at-a-glance-carousel-count'}></div>
 			</div>
 			<div css={[baseContainerStyles]}>
-				<ol
+				<ul
 					ref={carouselRef}
 					css={carouselStyles}
 					data-heatphan-type="carousel"
@@ -337,7 +337,7 @@ export const ScrollableProduct = ({ products, format }: Props) => {
 							/>
 						</li>
 					))}
-				</ol>
+				</ul>
 				<CarouselNavigationButtons
 					previousButtonEnabled={previousButtonEnabled}
 					nextButtonEnabled={nextButtonEnabled}

dotcom-rendering/src/frontend/schemas/feArticle.json

@@ -873,6 +873,9 @@
                 },
                 {
                     "$ref": "#/definitions/ProductBlockElement"
+                },
+                {
+                    "$ref": "#/definitions/ProductCarouselElement"
                 }
             ]
         },
@@ -4613,6 +4616,25 @@
             ],
             "type": "string"
         },
+        "ProductCarouselElement": {
+            "type": "object",
+            "properties": {
+                "_type": {
+                    "type": "string",
+                    "const": "model.dotcomrendering.pageElements.ProductCarouselElement"
+                },
+                "matchedProducts": {
+                    "type": "array",
+                    "items": {
+                        "$ref": "#/definitions/ProductBlockElement"
+                    }
+                }
+            },
+            "required": [
+                "_type",
+                "matchedProducts"
+            ]
+        },
         "Block": {
             "type": "object",
             "properties": {

dotcom-rendering/src/lib/renderElement.tsx

@@ -43,6 +43,7 @@ import { PullQuoteBlockComponent } from '../components/PullQuoteBlockComponent';
 import { QandaAtom } from '../components/QandaAtom.importable';
 import { QAndAExplainers } from '../components/QAndAExplainers';
 import { RichLinkComponent } from '../components/RichLinkComponent.importable';
+import { ScrollableProduct } from '../components/ScrollableProduct.importable';
 import { SelfHostedVideoInArticle } from '../components/SelfHostedVideoInArticle';
 import { SoundcloudBlockComponent } from '../components/SoundcloudBlockComponent';
 import { SpotifyBlockComponent } from '../components/SpotifyBlockComponent.importable';
@@ -976,6 +977,15 @@ export const renderElement = ({
 					/>
 				</Island>
 			);
+		case 'model.dotcomrendering.pageElements.ProductCarouselElement':
+			return (
+				<Island priority="critical" defer={{ until: 'idle' }}>
+					<ScrollableProduct
+						products={element.matchedProducts}
+						format={format}
+					/>
+				</Island>
+			);
 		case 'model.dotcomrendering.pageElements.AudioBlockElement':
 		case 'model.dotcomrendering.pageElements.ContentAtomBlockElement':
 		case 'model.dotcomrendering.pageElements.GenericAtomBlockElement':

dotcom-rendering/src/model/block-schema.json

@@ -361,6 +361,9 @@
                 },
                 {
                     "$ref": "#/definitions/ProductBlockElement"
+                },
+                {
+                    "$ref": "#/definitions/ProductCarouselElement"
                 }
             ]
         },
@@ -4101,6 +4104,25 @@
             ],
             "type": "string"
         },
+        "ProductCarouselElement": {
+            "type": "object",
+            "properties": {
+                "_type": {
+                    "type": "string",
+                    "const": "model.dotcomrendering.pageElements.ProductCarouselElement"
+                },
+                "matchedProducts": {
+                    "type": "array",
+                    "items": {
+                        "$ref": "#/definitions/ProductBlockElement"
+                    }
+                }
+            },
+            "required": [
+                "_type",
+                "matchedProducts"
+            ]
+        },
         "Attributes": {
             "type": "object",
             "properties": {

dotcom-rendering/src/model/enhance-H2s.ts

@@ -47,7 +47,11 @@ export const slugify = (text: string): string => {
 /**
  * This function attempts to create a slugified string to use as the id. It fails over to elementId.
  */
-const generateId = (elementId: string, html: string, existingIds: string[]) => {
+export const generateId = (
+	elementId: string,
+	html: string,
+	existingIds: string[],
+): string => {
 	const text = extractText(html);
 	if (!text) return elementId;
 	const slug = slugify(text);

dotcom-rendering/src/model/enhance-product-carousel.test-helpers.ts

@@ -0,0 +1,49 @@
+import type { FEElement, ProductBlockElement } from '../types/content';
+
+export const linkElement = (url: string, label: string): FEElement =>
+	({
+		_type: 'model.dotcomrendering.pageElements.LinkBlockElement',
+		url,
+		label,
+	}) as FEElement;
+
+export const productElement = (urls: string[]): ProductBlockElement =>
+	({
+		_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
+		productCtas: urls.map((url) => ({ url })),
+	}) as ProductBlockElement;
+
+export const atAGlanceHeading = (): FEElement =>
+	({
+		_type: 'model.dotcomrendering.pageElements.SubheadingBlockElement',
+		text: 'At a glance',
+		html: 'At a glance',
+		elementId: 'at-a-glance',
+	}) as FEElement;
+
+export const dividerElement = (): FEElement =>
+	({
+		_type: 'model.dotcomrendering.pageElements.DividerBlockElement',
+		elementId: 'divider',
+	}) as FEElement;
+
+export const textElement = (html: string): FEElement =>
+	({
+		_type: 'model.dotcomrendering.pageElements.TextBlockElement',
+		html,
+		elementId: '4',
+	}) as FEElement;
+
+export type ProductCarouselTestElement = FEElement & {
+	_type: 'model.dotcomrendering.pageElements.ProductCarouselElement';
+	matchedProducts: ProductBlockElement[];
+};
+
+export const findCarousel = (
+	elements: FEElement[],
+): ProductCarouselTestElement | undefined =>
+	elements.find(
+		(el): el is ProductCarouselTestElement =>
+			el._type ===
+			'model.dotcomrendering.pageElements.ProductCarouselElement',
+	);