Simplify subheading in the product element.

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

@@ -4,6 +4,7 @@ import { allModes } from '../../.storybook/modes';
 import { productImage } from '../../fixtures/manual/productImage';
 import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
 import { getNestedArticleElement } from '../lib/renderElement';
+import { extractHeadingText } from '../model/enhanceProductElement';
 import type { ProductBlockElement } from '../types/content';
 import { ProductElement } from './ProductElement';
 
@@ -23,7 +24,9 @@ const product = {
 	_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
 	elementId: 'b1f6e8e2-3f3a-4f0c-8d1e-5f3e3e3e3e3e',
 	primaryHeadingHtml: '<em>Best Kettle overall</em>',
+	primaryHeadingText: extractHeadingText('<em>Best Kettle overall</em>'),
 	secondaryHeadingHtml: 'Bosch Sky Kettle',
+	secondaryHeadingText: extractHeadingText('Bosch Sky Kettle'),
 	brandName: 'Bosch',
 	productName: 'Sky Kettle',
 	image: productImage,
@@ -296,7 +299,9 @@ export const WithoutHeading = {
 		product: {
 			...product,
 			primaryHeadingHtml: '',
+			primaryHeadingText: '',
 			secondaryHeadingHtml: '',
+			secondaryHeadingText: '',
 		},
 	},
 } satisfies Story;
@@ -316,6 +321,7 @@ export const NoSecondaryHeading = {
 			...product,
 			primaryHeadingHtml: '<em>Primary heading only</em>',
 			secondaryHeadingHtml: '',
+			secondaryHeadingText: '',
 		},
 	},
 } satisfies Story;
@@ -325,6 +331,7 @@ export const NoPrimaryHeading = {
 		product: {
 			...product,
 			primaryHeadingHtml: '',
+			primaryHeadingText: '',
 			secondaryHeadingHtml: 'Secondary heading only',
 		},
 	},

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[];