Add primary heading text to product element (#15088)

* add primaryHeadingText which is the primary heading with html removed and trailing `:` removed

Author: oliverabrahams

dotcom-rendering/src/components/ProductCarouselCard.stories.tsx

@@ -2,13 +2,15 @@ import { css } from '@emotion/react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { productImage } from '../../fixtures/manual/productImage';
 import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
+import { extractHeadingText } from '../model/enhanceProductElement';
 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',
+	primaryHeadingHtml: '<em>Best Kettle overall:<em/>',
+	primaryHeadingText: extractHeadingText('<em>Best Kettle overall:</em>'),
 	secondaryHeadingHtml: 'Bosch Sky Kettle',
 	brandName: 'Bosch',
 	productName: 'Sky Kettle',
@@ -277,7 +279,9 @@ export const WithLongHeadingProductNameAndCTA = {
 	args: {
 		product: {
 			...product,
-			primaryHeadingHtml: 'Super long product category review name',
+			primaryHeadingText: extractHeadingText(
+				'<em>Super long product: category review name:</em>',
+			),
 			productName:
 				'Sky Kettle with a super duper long name that goes on and on',
 			productCtas: [

dotcom-rendering/src/components/ProductCarouselCard.tsx

@@ -84,12 +84,9 @@ export const ProductCarouselCard = ({
 		<div css={baseCard}>
 			{hasHeading && (
 				<>
-					<div
-						css={productCarouselCardHeading}
-						dangerouslySetInnerHTML={{
-							__html: product.primaryHeadingHtml,
-						}}
-					/>
+					<div css={productCarouselCardHeading}>
+						{product.primaryHeadingText}
+					</div>
 					<div css={brandAndProductNameRow}>
 						<span css={brandAndProductNameInline}>
 							{product.brandName}{' '}

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

@@ -4480,6 +4480,9 @@
                 "primaryHeadingHtml": {
                     "type": "string"
                 },
+                "primaryHeadingText": {
+                    "type": "string"
+                },
                 "customAttributes": {
                     "type": "array",
                     "items": {

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

@@ -3968,6 +3968,9 @@
                 "primaryHeadingHtml": {
                     "type": "string"
                 },
+                "primaryHeadingText": {
+                    "type": "string"
+                },
                 "customAttributes": {
                     "type": "array",
                     "items": {

dotcom-rendering/src/model/enhanceProductElement.test.ts

@@ -1,4 +1,3 @@
-// typescript
 import type { ArticleFormat } from '../lib/articleFormat';
 import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
 import type {
@@ -26,8 +25,8 @@ const productBlockElement: ProductBlockElement = {
 	starRating: '5',
 	productName: 'Sky Kettle',
 	image: productImage,
-	secondaryHeadingHtml: 'Best Kettle Overall',
-	primaryHeadingHtml: 'Bosch Sky Kettle',
+	primaryHeadingHtml: '<em>Best Kettle: Overall:</em>',
+	secondaryHeadingHtml: 'Bosch Sky Kettle',
 	customAttributes: [
 		{ name: 'What we love', value: 'It packs away pretty small' },
 		{
@@ -167,4 +166,11 @@ describe('enhanceProductBlockElements', () => {
 
 		expect(enhancedElementWithNaN.lowestPrice).toEqual('£29.99');
 	});
+
+	it('extracts all html from primary heading and removes trailing `:` only', () => {
+		enhanceProductElement(elementsEnhancer)(inputElements);
+		expect(enhancedElements.primaryHeadingText).toEqual(
+			'Best Kettle: Overall',
+		);
+	});
 });

dotcom-rendering/src/model/enhanceProductElement.ts

@@ -1,3 +1,4 @@
+import { JSDOM } from 'jsdom';
 import type {
 	FEElement,
 	ProductBlockElement,
@@ -13,6 +14,7 @@ const enhanceProductBlockElement = (
 	...element,
 	content: elementsEnhancer(element.content),
 	lowestPrice: getLowestPrice(element.productCtas),
+	primaryHeadingText: extractHeadingText(element.primaryHeadingHtml),
 });
 
 /**
@@ -72,3 +74,15 @@ export const enhanceProductElement =
 	(elementsEnhancer: ElementsEnhancer) =>
 	(elements: FEElement[]): FEElement[] =>
 		elements.flatMap(enhance(elementsEnhancer));
+
+export const extractHeadingText = (headingHtml: string): string => {
+	return removeTrailingColon(extractText(headingHtml));
+};
+
+const removeTrailingColon = (text: string): string => {
+	return text.replace(/\s*:\s*$/, '');
+};
+
+const extractText = (html: string): string => {
+	return JSDOM.fragment(html).textContent?.trim() ?? '';
+};

dotcom-rendering/src/types/content.ts

@@ -480,6 +480,7 @@ export interface ProductBlockElement {
 	image?: ProductImage;
 	secondaryHeadingHtml: string;
 	primaryHeadingHtml: string;
+	primaryHeadingText?: string;
 	customAttributes: ProductCustomAttribute[];
 	content: FEElement[];
 	h2Id?: string;