sorted h2 ids

added in more storybooks for different scenarios

Author: charleycampbell

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

@@ -349,6 +349,39 @@ export const withoutHeading: StoryFn = () => {
 	);
 };
 
+export const emptyHeadingsOnly: StoryFn = () => {
+	return (
+		<>
+			<ProductElement
+				product={{
+					...product,
+					primaryHeading: '',
+					secondaryHeading: 'Secondary heading only',
+				}}
+				format={{
+					design: ArticleDesign.Review,
+					display: ArticleDisplay.Showcase,
+					theme: Pillar.Lifestyle,
+				}}
+				ArticleElementComponent={ArticleElementComponent}
+			/>
+			<ProductElement
+				product={{
+					...product,
+					primaryHeading: 'Primary Heading',
+					secondaryHeading: '',
+				}}
+				format={{
+					design: ArticleDesign.Review,
+					display: ArticleDisplay.Showcase,
+					theme: Pillar.Lifestyle,
+				}}
+				ArticleElementComponent={ArticleElementComponent}
+			/>
+		</>
+	);
+};
+
 export const displayTypeProductCardOnly: StoryFn = () => {
 	return (
 		<>

dotcom-rendering/src/components/ProductElement.tsx

@@ -58,18 +58,9 @@ export const ProductElement = ({
 	format: ArticleFormat;
 }) => {
 	const subheadingHtml = parseHtml(
-		[
-			product.primaryHeading
-				? `<h2 id="${product.h2Id ?? product.elementId}-primary">${
-						product.primaryHeading
-				  }</h2>`
-				: '',
-			product.secondaryHeading
-				? `<h2 id="${product.h2Id ?? product.elementId}-secondary">${
-						product.secondaryHeading
-				  }</h2>`
-				: '',
-		].join(''),
+		`<h2 id="${product.h2Id ?? product.elementId}">${
+			product.primaryHeading ? `${product.primaryHeading}</br>` : ''
+		} ${product.secondaryHeading || ''}</h2>`,
 	);
 
 	const isSubheading = subheadingHtml.textContent