Add ProductCardImage.tsx

Author: oliverabrahams

dotcom-rendering/src/components/InlineProductCard.tsx

@@ -12,8 +12,7 @@ import {
 import type { ArticleFormat } from '../lib/articleFormat';
 import { palette } from '../palette';
 import type { ProductImage } from '../types/content';
-import { Caption } from './Caption';
-import { Picture } from './Picture';
+import { ProductCardImage } from './ProductCardImage';
 import type { ProductCardCta } from './ProductElement';
 import { ProductLinkButton } from './ProductLinkButton';
 
@@ -161,45 +160,11 @@ export const InlineProductCard = ({
 }: InlineProductCardProps) => {
 	return (
 		<div css={[isCardOnly && productCard, !isCardOnly && showcaseCard]}>
-			{!!image && (
-				<div>
-					{productCtas[0]?.url ? (
-						<a
-							href={productCtas[0].url}
-							target="_blank"
-							rel="noopener noreferrer"
-						>
-							<Picture
-								role={'productCard'}
-								format={format}
-								master={image.url}
-								alt={image.alt}
-								height={165}
-								width={165}
-								loading={'eager'}
-							/>
-						</a>
-					) : (
-						<Picture
-							role={'productCard'}
-							format={format}
-							master={image.url}
-							alt={image.alt}
-							height={165}
-							width={165}
-							loading={'eager'}
-						/>
-					)}
-					<Caption
-						shouldLimitWidth={true}
-						format={format}
-						isLeftCol={true}
-						displayCredit={image.displayCredit}
-						credit={image.credit}
-						isOverlaid={false}
-					/>
-				</div>
-			)}
+			<ProductCardImage
+				format={format}
+				image={image}
+				url={productCtas[0]?.url}
+			/>
 			<div css={productInfoContainer}>
 				<div css={primaryHeading}>{brandName}</div>
 				<div css={productNameStyle}>{productName}</div>

dotcom-rendering/src/components/LeftColProductCard.tsx

@@ -9,9 +9,8 @@ import {
 import type { ArticleFormat } from '../lib/articleFormat';
 import { palette } from '../palette';
 import type { ProductImage } from '../types/content';
-import { Caption } from './Caption';
 import { ProductCardButtons } from './InlineProductCard';
-import { Picture } from './Picture';
+import { ProductCardImage } from './ProductCardImage';
 import type { ProductCardCta } from './ProductElement';
 
 export type CustomAttributes = {
@@ -70,6 +69,11 @@ const buttonContainer = css`
 	min-width: 100%;
 `;
 
+const productImageCaption = css`
+	figcaption {
+		position: static;
+	}
+`;
 const customAttributesContainer = css`
 	border-top: 1px solid ${palette('--section-border')};
 	padding-top: ${space[3]}px;
@@ -102,51 +106,12 @@ export const LeftColProductCard = ({
 }: LeftColProductCardProps) => {
 	return (
 		<div css={card}>
-			{!!image && (
-				<div
-					css={css`
-						figcaption {
-							position: static;
-						}
-					`}
-				>
-					{productCtas[0]?.url ? (
-						<a
-							href={productCtas[0].url}
-							target="_blank"
-							rel="noopener noreferrer"
-						>
-							<Picture
-								role={'productCard'}
-								format={format}
-								master={image.url}
-								alt={image.alt}
-								height={220}
-								width={220}
-								loading={'eager'}
-							/>
-						</a>
-					) : (
-						<Picture
-							role={'productCard'}
-							format={format}
-							master={image.url}
-							alt={image.alt}
-							height={220}
-							width={220}
-							loading={'eager'}
-						/>
-					)}
-					<Caption
-						shouldLimitWidth={true}
-						format={format}
-						isLeftCol={true}
-						displayCredit={image.displayCredit}
-						credit={image.credit}
-						isOverlaid={false}
-					/>
-				</div>
-			)}
+			<ProductCardImage
+				format={format}
+				image={image}
+				url={productCtas[0]?.url}
+				css={productImageCaption}
+			/>
 			<div css={productInfoContainer}>
 				<div css={brandNameFont}>{brandName}</div>
 				<div css={productNameFont}>{productName}</div>

dotcom-rendering/src/components/ProductCardImage.tsx

@@ -0,0 +1,72 @@
+import { css } from '@emotion/react';
+import type { HTMLAttributes } from 'react';
+import type { ArticleFormat } from '../lib/articleFormat';
+import type { ProductImage } from '../types/content';
+import { Caption } from './Caption';
+import { Picture } from './Picture';
+
+interface ProductCardImageProps extends HTMLAttributes<HTMLDivElement> {
+	format: ArticleFormat;
+	image?: ProductImage;
+	url?: string;
+}
+
+export const ProductCardImage = ({
+	format,
+	image,
+	url,
+	...props
+}: ProductCardImageProps) => {
+	if (!image) {
+		return null;
+	}
+
+	return (
+		<div {...props}>
+			{url ? (
+				<a
+					href={url}
+					target="_blank"
+					rel="noopener noreferrer"
+					aria-disabled={true}
+					tabIndex={-1}
+					data-src-focus-disabled={true}
+					css={css`
+						&:focus {
+							box-shadow: none !important;
+						}
+					`}
+				>
+					<Picture
+						data-src-focus-disabled={true}
+						role={'productCard'}
+						format={format}
+						master={image.url}
+						alt={image.alt}
+						height={image.height}
+						width={image.width}
+						loading={'eager'}
+					/>
+				</a>
+			) : (
+				<Picture
+					role={'productCard'}
+					format={format}
+					master={image.url}
+					alt={image.alt}
+					height={image.height}
+					width={image.width}
+					loading={'eager'}
+				/>
+			)}
+			<Caption
+				shouldLimitWidth={true}
+				format={format}
+				isLeftCol={true}
+				displayCredit={image.displayCredit}
+				credit={image.credit}
+				isOverlaid={false}
+			/>
+		</div>
+	);
+};

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

@@ -282,6 +282,7 @@ const meta = {
 			theme: Pillar.Lifestyle,
 		},
 		ArticleElementComponent,
+		shouldShowLeftColCard: true,
 	},
 	decorators: [
 		(Story) => (