remove html from primary heading for carousel and horizontal cards

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/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

@@ -14,7 +14,7 @@ const enhanceProductBlockElement = (
 	...element,
 	content: elementsEnhancer(element.content),
 	lowestPrice: getLowestPrice(element.productCtas),
-	primaryHeadingText: getHeadingText(element.primaryHeadingHtml),
+	primaryHeadingText: extractHeadingText(element.primaryHeadingHtml),
 });
 
 /**
@@ -75,7 +75,7 @@ export const enhanceProductElement =
 	(elements: FEElement[]): FEElement[] =>
 		elements.flatMap(enhance(elementsEnhancer));
 
-const getHeadingText = (headingHtml: string): string => {
+export const extractHeadingText = (headingHtml: string): string => {
 	return removeTrailingColon(extractText(headingHtml));
 };