moving setting the data-component upstream (#14877)

Author: oliverabrahams

dotcom-rendering/src/components/ProductCardButtons.tsx

@@ -8,10 +8,8 @@ const getLabel = (cta: ProductCta): string => {
 
 export const ProductCardButtons = ({
 	productCtas,
-	dataComponent,
 }: {
 	productCtas: ProductCta[];
-	dataComponent?: string;
 }) => (
 	<>
 		{productCtas.map((productCta, index) => {
@@ -24,11 +22,6 @@ export const ProductCardButtons = ({
 					minimisePadding={true}
 					priority={index === 0 ? 'primary' : 'tertiary'}
 					fullwidth={true}
-					dataComponent={
-						dataComponent
-							? `${dataComponent}-${index + 1}`
-							: undefined
-					}
 				/>
 			);
 		})}

dotcom-rendering/src/components/ProductCardInline.tsx

@@ -182,7 +182,9 @@ export const ProductCardInline = ({
 
 	return (
 		<div
-			data-component="product-card-inline"
+			data-component={`product-card-type-inline${
+				isCardOnly ? '-only' : ''
+			}`}
 			css={[
 				isCardOnly ? productCard : showcaseCard,
 				shouldShowLeftColCard && !isCardOnly && hideFromWide,
@@ -212,10 +214,7 @@ export const ProductCardInline = ({
 				)}
 			</div>
 			<div css={buttonWrapper}>
-				<ProductCardButtons
-					productCtas={productCtas}
-					dataComponent={'inline-product-card-button'}
-				/>
+				<ProductCardButtons productCtas={productCtas} />
 			</div>
 			{hasCustomAttributes && (
 				<div css={customAttributesContainer}>

dotcom-rendering/src/components/ProductCardLeftCol.tsx

@@ -119,10 +119,7 @@ export const ProductCardLeftCol = ({
 				)}
 			</div>
 			<div css={buttonContainer}>
-				<ProductCardButtons
-					productCtas={productCtas}
-					dataComponent={'left-col-product-card-button'}
-				/>
+				<ProductCardButtons productCtas={productCtas} />
 			</div>
 			{customAttributes.length > 0 && (
 				<div css={customAttributesContainer}>

dotcom-rendering/src/components/ProductLinkButton.tsx

@@ -55,7 +55,7 @@ export const ProductLinkButton = ({
 	fullwidth = false,
 	minimisePadding = false,
 	priority = 'primary',
-	dataComponent = 'in-body-product-link-button',
+	dataComponent,
 }: ProductLinkButtonProps) => {
 	const cssOverrides: SerializedStyles[] = [
 		heightAutoStyle,
@@ -74,11 +74,11 @@ export const ProductLinkButton = ({
 			icon={<SvgArrowRightStraight />}
 			theme={theme}
 			data-ignore="global-link-styling"
-			data-link-name="in body link"
+			data-component={dataComponent}
+			data-link-name={`product link button ${priority}`}
 			data-spacefinder-role="inline"
 			size={size}
 			cssOverrides={cssOverrides}
-			data-component={dataComponent}
 		>
 			<span
 				css={css`

dotcom-rendering/src/lib/renderElement.tsx

@@ -583,6 +583,7 @@ export const renderElement = ({
 						<ProductLinkButton
 							label={element.label}
 							url={element.url}
+							dataComponent={'in-body-product-link-button'}
 						/>
 					)}
 				</>