simplify subheading in the product element. This also fixes a react warning about unique keys in the subheadings in the productElement.

Author: oliverabrahams

dotcom-rendering/src/components/ProductElement.tsx

@@ -2,12 +2,11 @@ import { css } from '@emotion/react';
 import { from } from '@guardian/source/foundations';
 import type { ReactNode } from 'react';
 import type { ArticleFormat } from '../lib/articleFormat';
-import { parseHtml } from '../lib/domUtils';
 import type { NestedArticleElement } from '../lib/renderElement';
 import type { ProductBlockElement } from '../types/content';
 import { ProductCardInline } from './ProductCardInline';
 import { ProductCardLeftCol } from './ProductCardLeftCol';
-import { buildElementTree } from './SubheadingBlockComponent';
+import { Subheading } from './Subheading';
 
 const contentContainer = css`
 	position: relative;
@@ -86,23 +85,10 @@ const Content = ({
 	const showLeftCol =
 		product.displayType === 'InlineWithProductCard' &&
 		shouldShowLeftColCard;
-	const subheadingHtml = parseHtml(
-		`<h2 id="${product.h2Id ?? product.elementId}">${
-			product.primaryHeadingHtml
-				? `${product.primaryHeadingHtml}<br />`
-				: ''
-		} ${product.secondaryHeadingHtml || ''}</h2>`,
-	);
 
-	const isSubheading = subheadingHtml.textContent
-		? subheadingHtml.textContent.trim().length > 0
-		: false;
 	return (
 		<div>
-			{isSubheading &&
-				Array.from(subheadingHtml.childNodes).map(
-					buildElementTree(format),
-				)}
+			<ProductSubheading product={product} format={format} />
 			<div css={contentContainer} data-spacefinder-role="nested">
 				{showLeftCol && (
 					<LeftColProductCardContainer>
@@ -131,3 +117,32 @@ const Content = ({
 		</div>
 	);
 };
+
+const ProductSubheading = ({
+	product,
+	format,
+}: {
+	product: ProductBlockElement;
+	format: ArticleFormat;
+}) => {
+	const subheadingHtml = `${
+		product.primaryHeadingHtml ? `${product.primaryHeadingHtml}<br />` : ''
+	} ${product.secondaryHeadingHtml || ''}`;
+
+	const isSubheading =
+		!!product.primaryHeadingText && !!product.secondaryHeadingText;
+
+	if (!isSubheading) {
+		return null;
+	}
+
+	return (
+		<Subheading
+			id={`${product.h2Id ?? product.elementId}`}
+			format={format}
+			topPadding={true}
+		>
+			<span dangerouslySetInnerHTML={{ __html: subheadingHtml }}></span>
+		</Subheading>
+	);
+};

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

@@ -4477,6 +4477,9 @@
                 "secondaryHeadingHtml": {
                     "type": "string"
                 },
+                "secondaryHeadingText": {
+                    "type": "string"
+                },
                 "primaryHeadingHtml": {
                     "type": "string"
                 },

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

@@ -3965,6 +3965,9 @@
                 "secondaryHeadingHtml": {
                     "type": "string"
                 },
+                "secondaryHeadingText": {
+                    "type": "string"
+                },
                 "primaryHeadingHtml": {
                     "type": "string"
                 },

dotcom-rendering/src/model/enhanceProductElement.ts

@@ -15,6 +15,7 @@ const enhanceProductBlockElement = (
 	content: elementsEnhancer(element.content),
 	lowestPrice: getLowestPrice(element.productCtas),
 	primaryHeadingText: extractHeadingText(element.primaryHeadingHtml),
+	secondaryHeadingText: extractHeadingText(element.secondaryHeadingHtml),
 });
 
 /**

dotcom-rendering/src/types/content.ts

@@ -479,6 +479,7 @@ export interface ProductBlockElement {
 	productName: string;
 	image?: ProductImage;
 	secondaryHeadingHtml: string;
+	secondaryHeadingText?: string;
 	primaryHeadingHtml: string;
 	primaryHeadingText?: string;
 	customAttributes: ProductCustomAttribute[];