Add multiple left col card buttons

Author: oliverabrahams

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

@@ -80,3 +80,53 @@ export const SingleCta = () => (
 		lowestPrice={'£89.99'}
 	/>
 );
+
+export const ShortCta = () => (
+	<LeftColProductCard
+		{...sampleProductCard}
+		productCtas={[
+			{
+				url: 'https://www.theguardian.com',
+				label: '£8 at Z',
+			},
+		]}
+		lowestPrice={'£89.99'}
+	/>
+);
+
+export const LotsOfCtas = () => (
+	<LeftColProductCard
+		{...sampleProductCard}
+		productCtas={[
+			{
+				url: 'https://www.theguardian.com',
+				label: '£89.99 at Cotswolds Outdoors',
+			},
+			{
+				url: 'https://www.theguardian.com',
+				label: '£89 at Zara',
+			},
+			{
+				url: 'https://www.theguardian.com',
+				label: '£9 at Kenwood',
+			},
+			{
+				url: 'https://www.theguardian.com',
+				label: '£70 at Amazon',
+			},
+			{
+				url: 'https://www.theguardian.com',
+				label: '£12 for 10 at John Lewis',
+			},
+			{
+				url: 'https://www.theguardian.com',
+				label: '£30 at eBay',
+			},
+			{
+				url: 'https://www.theguardian.com',
+				label: '£45 at Etsy',
+			},
+		]}
+		lowestPrice={'£89.99'}
+	/>
+);

dotcom-rendering/src/components/ProductLinkButton.tsx

@@ -1,6 +1,5 @@
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
-import { space } from '@guardian/source/foundations';
 import type {
 	ButtonPriority,
 	ThemeButton,
@@ -64,10 +63,9 @@ export const ProductLinkButton = ({
 		>
 			<span
 				css={css`
-					text-align: center;
 					white-space: normal;
-					max-width: 100%;
-					padding: ${space[1]}px 0;
+					width: 100%;
+					padding: 10px 0 10px;
 				`}
 			>
 				{label}