Make customData available to interactive atoms (#16612)

* Make `customData` available to interactive atoms

* Add tests

* Add web test case

Author: frederickobrien

dotcom-rendering/src/components/InteractiveAtom.tsx

@@ -34,6 +34,7 @@ type InteractiveAtomType = {
 	elementCss?: string;
 	isMainMedia?: boolean;
 	title: string;
+	customData?: string;
 };
 
 export const InteractiveAtom = ({
@@ -43,6 +44,7 @@ export const InteractiveAtom = ({
 	elementCss,
 	isMainMedia,
 	title,
+	customData,
 }: InteractiveAtomType) => {
 	const { renderingTarget } = useConfig();
 
@@ -51,6 +53,7 @@ export const InteractiveAtom = ({
 			css={[containerStyles, !!isMainMedia && fullHeightStyles]}
 			data-atom-id={id}
 			data-atom-type="interactive"
+			{...(customData ? { 'data-atom-custom-data': customData } : {})}
 		>
 			<Island
 				priority="feature"

dotcom-rendering/src/components/InteractiveLayoutAtom.tsx

@@ -10,19 +10,22 @@ export type InteractiveLayoutAtomType = {
 	elementHtml?: string;
 	elementJs?: string;
 	elementCss?: string;
+	customData?: string;
 };
 
 export const InteractiveLayoutAtom = ({
 	id,
 	elementHtml,
 	elementJs,
 	elementCss,
+	customData,
 }: InteractiveLayoutAtomType) => (
 	<div
 		className="interactive interactive-atom"
 		css={containerStyles}
 		data-atom-id={id}
 		data-atom-type="interactive-layout"
+		{...(customData ? { 'data-atom-custom-data': customData } : {})}
 	>
 		{!!elementCss && (
 			<style

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

@@ -2522,6 +2522,9 @@
                         "thumbnail"
                     ],
                     "type": "string"
+                },
+                "customData": {
+                    "type": "string"
                 }
             },
             "required": [

dotcom-rendering/src/lib/interactiveAtoms.test.tsx

@@ -0,0 +1,64 @@
+import { render } from '@testing-library/react';
+import { ConfigProvider } from '../components/ConfigContext';
+import { InteractiveAtom } from '../components/InteractiveAtom';
+import { InteractiveLayoutAtom } from '../components/InteractiveLayoutAtom';
+
+const mockCustomData = JSON.stringify({ key: 'value' });
+
+describe('Interactive atom custom data attributes', () => {
+	it('should add custom data attribute to InteractiveAtom on web', () => {
+		const { container } = render(
+			<ConfigProvider
+				value={{
+					renderingTarget: 'Web',
+					darkModeAvailable: true,
+					assetOrigin: '/',
+					editionId: 'UK',
+				}}
+			>
+				<InteractiveAtom
+					id="test-id"
+					title="Test Title"
+					customData={mockCustomData}
+				/>
+			</ConfigProvider>,
+		);
+		const el = container.querySelector(
+			`[data-atom-custom-data='${mockCustomData}']`,
+		);
+		expect(el).toBeInTheDocument();
+	});
+
+	it('should add custom data attribute to InteractiveAtom on apps', () => {
+		const { container } = render(
+			<ConfigProvider
+				value={{
+					renderingTarget: 'Apps',
+					darkModeAvailable: true,
+					assetOrigin: '/',
+					editionId: 'UK',
+				}}
+			>
+				<InteractiveAtom
+					id="test-id"
+					title="Test Title"
+					customData={mockCustomData}
+				/>
+			</ConfigProvider>,
+		);
+		const el = container.querySelector(
+			`[data-atom-custom-data='${mockCustomData}']`,
+		);
+		expect(el).toBeInTheDocument();
+	});
+
+	it('should add custom data attribute to InteractiveLayoutAtom', () => {
+		const { container } = render(
+			<InteractiveLayoutAtom id="test-id" customData={mockCustomData} />,
+		);
+		const el = container.querySelector(
+			`[data-atom-custom-data='${mockCustomData}']`,
+		);
+		expect(el).toBeInTheDocument();
+	});
+});

dotcom-rendering/src/lib/renderElement.tsx

@@ -436,6 +436,7 @@ export const renderElement = ({
 						elementHtml={element.html}
 						elementJs={element.js}
 						elementCss={element.css}
+						customData={element.customData}
 					/>
 				);
 			}
@@ -447,6 +448,7 @@ export const renderElement = ({
 					elementJs={element.js}
 					elementCss={element.css}
 					title={element.title}
+					customData={element.customData}
 				/>
 			);
 		case 'model.dotcomrendering.pageElements.InteractiveBlockElement': {

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

@@ -1999,6 +1999,9 @@
                         "thumbnail"
                     ],
                     "type": "string"
+                },
+                "customData": {
+                    "type": "string"
                 }
             },
             "required": [

dotcom-rendering/src/types/content.ts

@@ -347,6 +347,7 @@ export interface InteractiveAtomBlockElement {
 	css?: string;
 	placeholderUrl?: string;
 	role?: RoleType | 'fullWidth';
+	customData?: string;
 }
 
 // Can't guarantee anything in interactiveBlockElement :shrug: