add data component to ProductLinkButton (#14565)

Add data component to ProductLinkButton

Co-authored-by: Charley Campbell 115992455+charleycampbell@users.noreply.github.com
Co-authored-by: Emma Imber 108270776+emma-imber@users.noreply.github.com
Co-authored-by: George Haberis george.haberis@guardian.co.uk

Author: oliverabrahams

dotcom-rendering/src/components/ProductLinkButton.tsx

@@ -8,6 +8,7 @@ import {
 type ProductLinkButtonProps = {
 	label: string;
 	url: string;
+	dataComponent?: string;
 };
 
 const linkButtonStyles = css`
@@ -19,7 +20,11 @@ const linkButtonStyles = css`
 	overflow-wrap: break-word;
 `;
 
-export const ProductLinkButton = ({ label, url }: ProductLinkButtonProps) => {
+export const ProductLinkButton = ({
+	label,
+	url,
+	dataComponent = 'in-body-product-link-button',
+}: ProductLinkButtonProps) => {
 	return (
 		<LinkButton
 			href={url}
@@ -32,6 +37,7 @@ export const ProductLinkButton = ({ label, url }: ProductLinkButtonProps) => {
 			data-link-name="in body link"
 			data-spacefinder-role="inline"
 			cssOverrides={[linkButtonStyles]}
+			data-component={dataComponent}
 		>
 			{label}
 		</LinkButton>