move product card buttons to separate file

Author: oliverabrahams

dotcom-rendering/src/components/InlineProductCard.tsx

@@ -14,9 +14,9 @@ import {
 import type { ArticleFormat } from '../lib/articleFormat';
 import { palette } from '../palette';
 import type { ProductImage } from '../types/content';
+import { ProductCardButtons } from './ProductCardButtons';
 import { ProductCardImage } from './ProductCardImage';
 import type { ProductCardCta } from './ProductElement';
-import { ProductLinkButton } from './ProductLinkButton';
 
 export type CustomAttributes = {
 	name: string;
@@ -213,37 +213,3 @@ export const InlineProductCard = ({
 		</div>
 	);
 };
-
-export const ProductCardButtons = ({
-	productCtas,
-	dataComponent,
-}: {
-	productCtas: ProductCardCta[];
-	dataComponent?: string;
-}) => {
-	return (
-		<>
-			{productCtas.map((productCta, index) => (
-				<ProductLinkButton
-					key={productCta.label}
-					label={productCta.label}
-					url={productCta.url}
-					priority={index === 0 ? 'primary' : 'tertiary'}
-					cssOverrides={
-						index === 0
-							? css`
-									width: 100%;
-							  `
-							: css`
-									width: 100%;
-									margin-top: ${space[1]}px;
-							  `
-					}
-					data-component={`${
-						dataComponent ?? 'product-card-button'
-					}-${index}`}
-				/>
-			))}
-		</>
-	);
-};

dotcom-rendering/src/components/LeftColProductCard.tsx

@@ -10,7 +10,7 @@ import {
 import type { ArticleFormat } from '../lib/articleFormat';
 import { palette } from '../palette';
 import type { ProductImage } from '../types/content';
-import { ProductCardButtons } from './InlineProductCard';
+import { ProductCardButtons } from './ProductCardButtons';
 import { ProductCardImage } from './ProductCardImage';
 import type { ProductCardCta } from './ProductElement';
 

dotcom-rendering/src/components/ProductCardButtons.tsx

@@ -0,0 +1,38 @@
+import { css } from '@emotion/react';
+import { space } from '@guardian/source/foundations';
+import type { ProductCardCta } from './ProductElement';
+import { ProductLinkButton } from './ProductLinkButton';
+
+export const ProductCardButtons = ({
+	productCtas,
+	dataComponent,
+}: {
+	productCtas: ProductCardCta[];
+	dataComponent?: string;
+}) => {
+	return (
+		<>
+			{productCtas.map((productCta, index) => (
+				<ProductLinkButton
+					key={productCta.label}
+					label={productCta.label}
+					url={productCta.url}
+					priority={index === 0 ? 'primary' : 'tertiary'}
+					cssOverrides={
+						index === 0
+							? css`
+									width: 100%;
+							  `
+							: css`
+									width: 100%;
+									margin-top: ${space[1]}px;
+							  `
+					}
+					data-component={`${
+						dataComponent ?? 'product-card-button'
+					}-${index}`}
+				/>
+			))}
+		</>
+	);
+};