add suffix Html to headings

Author: oliverabrahams

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

@@ -21,8 +21,8 @@ const ArticleElementComponent = getNestedArticleElement({
 const product = {
 	_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
 	elementId: 'b1f6e8e2-3f3a-4f0c-8d1e-5f3e3e3e3e3e',
-	primaryHeading: '<em>Best Kettle overall</em>',
-	secondaryHeading: 'Bosch Sky Kettle',
+	primaryHeadingHtml: '<em>Best Kettle overall</em>',
+	secondaryHeadingHtml: 'Bosch Sky Kettle',
 	brandName: 'Bosch',
 	productName: 'Sky Kettle',
 	image: productImage,
@@ -284,8 +284,8 @@ export const WithoutHeading = {
 	args: {
 		product: {
 			...product,
-			primaryHeading: '',
-			secondaryHeading: '',
+			primaryHeadingHtml: '',
+			secondaryHeadingHtml: '',
 		},
 	},
 } satisfies Story;
@@ -303,8 +303,8 @@ export const NoSecondaryHeading = {
 	args: {
 		product: {
 			...product,
-			primaryHeading: '<em>Primary heading only</em>',
-			secondaryHeading: '',
+			primaryHeadingHtml: '<em>Primary heading only</em>',
+			secondaryHeadingHtml: '',
 		},
 	},
 } satisfies Story;
@@ -313,8 +313,8 @@ export const NoPrimaryHeading = {
 	args: {
 		product: {
 			...product,
-			primaryHeading: '',
-			secondaryHeading: 'Secondary heading only',
+			primaryHeadingHtml: '',
+			secondaryHeadingHtml: 'Secondary heading only',
 		},
 	},
 } satisfies Story;
@@ -366,8 +366,8 @@ export const WithoutFields = {
 		product: {
 			...product,
 			image: undefined,
-			primaryHeading: '',
-			secondaryHeading: '',
+			primaryHeadingHtml: '',
+			secondaryHeadingHtml: '',
 			brandName: '',
 			productName: '',
 			productCtas: [],

dotcom-rendering/src/components/ProductElement.tsx

@@ -88,8 +88,10 @@ const Content = ({
 		shouldShowLeftColCard;
 	const subheadingHtml = parseHtml(
 		`<h2 id="${product.h2Id ?? product.elementId}">${
-			product.primaryHeading ? `${product.primaryHeading}<br />` : ''
-		} ${product.secondaryHeading || ''}</h2>`,
+			product.primaryHeadingHtml
+				? `${product.primaryHeadingHtml}<br />`
+				: ''
+		} ${product.secondaryHeadingHtml || ''}</h2>`,
 	);
 
 	const isSubheading = subheadingHtml.textContent

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

@@ -4,8 +4,8 @@ import { enhanceH2s } from './enhance-H2s';
 const mockProductElement: FEElement = {
 	_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
 	elementId: 'productMockId',
-	primaryHeading: 'Primary Heading',
-	secondaryHeading: 'Secondary Heading',
+	primaryHeadingHtml: 'Primary Heading',
+	secondaryHeadingHtml: 'Secondary Heading',
 	content: [],
 	customAttributes: [],
 	productCtas: [],
@@ -217,8 +217,8 @@ describe('Enhance h2 Embeds', () => {
 		const expectedOutput: ProductBlockElement[] = [
 			{
 				...mockProductElement,
-				primaryHeading: '<strong></strong>',
-				secondaryHeading: '',
+				primaryHeadingHtml: '<strong></strong>',
+				secondaryHeadingHtml: '',
 				h2Id: 'productMockId',
 			},
 		];

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

@@ -87,8 +87,10 @@ export const enhanceH2s = (elements: FEElement[]): FEElement[] => {
 			'model.dotcomrendering.pageElements.ProductBlockElement'
 		) {
 			const subheadingHtml = `<h2>${
-				element.primaryHeading ? `${element.primaryHeading}</br>` : ''
-			} ${element.secondaryHeading || ''}</h2>`;
+				element.primaryHeadingHtml
+					? `${element.primaryHeadingHtml}</br>`
+					: ''
+			} ${element.secondaryHeadingHtml || ''}</h2>`;
 
 			const h2Id = shouldUseElementId
 				? element.elementId

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

@@ -26,8 +26,8 @@ const productBlockElement: ProductBlockElement = {
 	starRating: '5',
 	productName: 'Sky Kettle',
 	image: productImage,
-	secondaryHeading: 'Best Kettle Overall',
-	primaryHeading: 'Bosch Sky Kettle',
+	secondaryHeadingHtml: 'Best Kettle Overall',
+	primaryHeadingHtml: 'Bosch Sky Kettle',
 	customAttributes: [
 		{ name: 'What we love', value: 'It packs away pretty small' },
 		{

dotcom-rendering/src/types/content.ts

@@ -476,8 +476,8 @@ export interface ProductBlockElement {
 	starRating: string;
 	productName: string;
 	image?: ProductImage;
-	secondaryHeading: string;
-	primaryHeading: string;
+	secondaryHeadingHtml: string;
+	primaryHeadingHtml: string;
 	customAttributes: ProductCustomAttribute[];
 	content: FEElement[];
 	h2Id?: string;