Extract from 1e2368e449985cea4736cdd6729e07f096a6cb07

lib/components/Image/Image.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
 declare type Fit = 'cover' | 'contain';
-declare const Image: React.ForwardRefExoticComponent<Omit<React.ImgHTMLAttributes<HTMLImageElement>, "height" | "width" | "alt" | "src" | "fit" | "isStacked"> & {
+declare type Background = 'white' | 'checkerboard';
+declare const Image: React.ForwardRefExoticComponent<Omit<React.ImgHTMLAttributes<HTMLImageElement>, "height" | "width" | "alt" | "src" | "fit" | "isStacked" | "background"> & {
     src: string | null;
     alt: string;
     width?: number | undefined;
     height?: number | undefined;
     fit?: Fit | undefined;
     isStacked?: boolean | undefined;
+    background?: Background | undefined;
 } & React.RefAttributes<HTMLImageElement>>;
 export { Image };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "akeneo-design-system",
-  "version": "0.1.239",
+  "version": "0.1.240",
   "description": "Akeneo design system",
   "main": "lib/index.js",
   "scripts": {

src/components/Image/Image.stories.mdx

@@ -71,3 +71,21 @@ When the `src` prop is set to `null`, the Image will display itself as loading.
     }}
   </Story>
 </Canvas>
+
+## Variation on background
+
+When the `background` prop is set to `checkerboard`, the Image will display a checkerboard background behind the transparent image.
+The background will be white otherwise.
+
+<Canvas>
+  <Story name="Background">
+    {args => {
+      return (
+        <>
+          <Image {...args} background="white" src="https://doodleipsum.com/200x140/outline?i=63527485e69dea481bb541d7f1da73fe" />
+          <Image {...args} background="checkerboard" src="https://doodleipsum.com/200x140/outline?i=63527485e69dea481bb541d7f1da73fe" />
+        </>
+      );
+    }}
+  </Story>
+</Canvas>

src/components/Image/Image.tsx

@@ -8,14 +8,16 @@ const EMPTY_IMAGE = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/
 
 type Fit = 'cover' | 'contain';
 
+type Background = 'white' | 'checkerboard';
+
 const ImageContainer = styled.img<
   {
     fit: Fit;
     isStacked: boolean;
     isLoading: boolean;
+    background: Background;
   } & AkeneoThemedProps
 >`
-  background: ${getColor('white')};
   border: 1px solid ${getColor('grey', 80)};
   object-fit: ${({fit}) => fit};
   box-sizing: border-box;
@@ -28,6 +30,20 @@ const ImageContainer = styled.img<
     `}
 
   ${({isLoading}) => isLoading && placeholderStyle}
+  
+  ${({background}) =>
+    background === 'checkerboard'
+      ? css`
+          background-image: linear-gradient(45deg, ${getColor('grey', 60)} 25%, transparent 25%),
+            linear-gradient(135deg, ${getColor('grey', 60)} 25%, transparent 25%),
+            linear-gradient(45deg, transparent 75%, ${getColor('grey', 60)} 75%),
+            linear-gradient(135deg, transparent 75%, ${getColor('grey', 60)} 75%);
+          background-size: 25px 25px; /* Must be a square */
+          background-position: 0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; /* Must be half of one side of the square */
+        `
+      : css`
+          background: ${getColor(background)};
+        `}
 `;
 
 type ImageProps = Override<
@@ -62,21 +78,30 @@ type ImageProps = Override<
      * Should the image appear as a stack of multiple images.
      */
     isStacked?: boolean;
+
+    /**
+     * Should the image appear with a background or not
+     */
+    background?: Background;
   }
 >;
 
 /**
  * Image allow to embed an image in a page.
  */
 const Image = React.forwardRef<HTMLImageElement, ImageProps>(
-  ({fit = 'cover', isStacked = false, src, ...rest}: ImageProps, forwardedRef: Ref<HTMLImageElement>) => {
+  (
+    {fit = 'cover', isStacked = false, background = 'white', src, ...rest}: ImageProps,
+    forwardedRef: Ref<HTMLImageElement>
+  ) => {
     return (
       <ImageContainer
         isLoading={null === src}
         src={src ?? EMPTY_IMAGE}
         ref={forwardedRef}
         fit={fit}
         isStacked={isStacked}
+        background={background}
         {...rest}
       />
     );