add not showing headline

Author: oliverabrahams

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

@@ -22,7 +22,7 @@ const ArticleElementComponent = getNestedArticleElement({
 const product: ProductBlockElement = {
 	_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
 	elementId: 'b1f6e8e2-3f3a-4f0c-8d1e-5f3e3e3e3e3e',
-	primaryHeading: 'Best fan overall',
+	primaryHeading: '<em>Best fan overall</em>',
 	secondaryHeading: 'AirCraft Lume',
 	brandName: 'AirCraft',
 	productName: 'Lume',
@@ -467,6 +467,39 @@ export default meta;
 
 export const Default = {};
 
+export const withoutHeading: StoryFn = () => {
+	return (
+		<>
+			<ProductElement
+				product={{
+					...product,
+					primaryHeading: '',
+					secondaryHeading: '',
+				}}
+				format={{
+					design: ArticleDesign.Review,
+					display: ArticleDisplay.Showcase,
+					theme: Pillar.Lifestyle,
+				}}
+				ArticleElementComponent={ArticleElementComponent}
+			/>
+			<ProductElement
+				product={{
+					...product,
+					primaryHeading: `<em></em>`,
+					secondaryHeading: `<strong></strong>`,
+				}}
+				format={{
+					design: ArticleDesign.Review,
+					display: ArticleDisplay.Showcase,
+					theme: Pillar.Lifestyle,
+				}}
+				ArticleElementComponent={ArticleElementComponent}
+			/>
+		</>
+	);
+};
+
 export const MultipleProducts: StoryFn = () => {
 	return (
 		<>

dotcom-rendering/src/components/ProductElement.tsx

@@ -2,11 +2,12 @@ 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 { FEElement, ProductBlockElement } from '../types/content';
 import { InlineProductCard } from './InlineProductCard';
 import { LeftColProductCard } from './LeftColProductCard';
-import { SubheadingBlockComponent } from './SubheadingBlockComponent';
+import { buildElementTree } from './SubheadingBlockComponent';
 
 export type Product = {
 	primaryHeadline: string;
@@ -51,16 +52,26 @@ export const ProductElement = ({
 	ArticleElementComponent: NestedArticleElement;
 	format: ArticleFormat;
 }) => {
-	const subheadingHtml = `<h2>${product.primaryHeading || ''} ${
-		product.secondaryHeading || ''
-	}</h2>`;
+	const subheadingHtml = parseHtml(
+		`<h2 id="${product.h2Id ?? product.elementId}">${
+			product.primaryHeading || ''
+		} ${product.secondaryHeading || ''}</h2>`,
+	);
+
+	const isSubheading = subheadingHtml.textContent
+		? subheadingHtml.textContent.trim().length > 0
+		: false;
+
 	return (
 		<div
 			css={css`
 				position: relative;
 			`}
 		>
-			<SubheadingBlockComponent html={subheadingHtml} format={format} />
+			{isSubheading &&
+				Array.from(subheadingHtml.childNodes).map(
+					buildElementTree(format),
+				)}
 			<LeftColProductCardContainer>
 				<LeftColProductCard
 					brandName={product.brandName}

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

@@ -1,5 +1,5 @@
 import { JSDOM } from 'jsdom';
-import type { FEElement, SubheadingBlockElement } from '../types/content';
+import type { FEElement } from '../types/content';
 import { isLegacyTableOfContents } from './isLegacyTableOfContents';
 
 const shouldUseLegacyIDs = (elements: FEElement[]): boolean => {
@@ -11,8 +11,8 @@ const shouldUseLegacyIDs = (elements: FEElement[]): boolean => {
 	);
 };
 
-const extractText = (element: SubheadingBlockElement): string => {
-	const frag = JSDOM.fragment(element.html);
+export const extractText = (html: string): string => {
+	const frag = JSDOM.fragment(html);
 	if (!frag.firstElementChild) return '';
 	return frag.textContent?.trim() ?? '';
 };
@@ -47,11 +47,11 @@ export const slugify = (text: string): string => {
 /**
  * This function attempts to create a slugified string to use as the id. It fails over to elementId.
  */
-const generateId = (element: SubheadingBlockElement, existingIds: string[]) => {
-	const text = extractText(element);
-	if (!text) return element.elementId;
+const generateId = (elementId: string, html: string, existingIds: string[]) => {
+	const text = extractText(html);
+	if (!text) return elementId;
 	const slug = slugify(text);
-	if (!slug) return element.elementId;
+	if (!slug) return elementId;
 	const unique = getUnique(slug, existingIds);
 	existingIds.push(slug);
 	return unique;
@@ -71,7 +71,7 @@ export const enhanceH2s = (elements: FEElement[]): FEElement[] => {
 		) {
 			const id = shouldUseElementId
 				? element.elementId
-				: generateId(element, slugifiedIds);
+				: generateId(element.elementId, element.html, slugifiedIds);
 
 			const withId = element.html.replace(
 				'<h2>',
@@ -82,6 +82,19 @@ export const enhanceH2s = (elements: FEElement[]): FEElement[] => {
 				...element,
 				html: withId,
 			};
+		} else if (
+			element._type ===
+			'model.dotcomrendering.pageElements.ProductBlockElement'
+		) {
+			const subheadingHtml = `${element.primaryHeading || ''} ${
+				element.secondaryHeading || ''
+			}`;
+
+			const h2Id = shouldUseElementId
+				? element.elementId
+				: generateId(element.elementId, subheadingHtml, slugifiedIds);
+
+			return { ...element, h2Id };
 		} else {
 			// Otherwise, do nothing
 			return element;

dotcom-rendering/src/types/content.ts

@@ -488,6 +488,7 @@ export interface ProductBlockElement {
 	secondaryCta: string;
 	statistics: { name: string; value: string }[];
 	content: FEElement[];
+	h2Id?: string;
 }
 
 interface ProfileAtomBlockElement {