akeneo-design-system 0.1.239 → 0.1.240

package/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/lib/components/Image/Image.js

@@ -53,7 +53,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var theme_1 = require("../../theme");
 var EMPTY_IMAGE = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>';
-var ImageContainer = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n  border: 1px solid ", ";\n  object-fit: ", ";\n  box-sizing: border-box;\n\n  ", "\n\n  ", "\n"], ["\n  background: ", ";\n  border: 1px solid ", ";\n  object-fit: ", ";\n  box-sizing: border-box;\n\n  ", "\n\n  ", "\n"])), (0, theme_1.getColor)('white'), (0, theme_1.getColor)('grey', 80), function (_a) {
+var ImageContainer = styled_components_1.default.img(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  object-fit: ", ";\n  box-sizing: border-box;\n\n  ", "\n\n  ", "\n  \n  ", "\n"], ["\n  border: 1px solid ", ";\n  object-fit: ", ";\n  box-sizing: border-box;\n\n  ", "\n\n  ", "\n  \n  ", "\n"])), (0, theme_1.getColor)('grey', 80), function (_a) {
     var fit = _a.fit;
     return fit;
 }, function (_a) {
@@ -62,11 +62,15 @@ var ImageContainer = styled_components_1.default.img(templateObject_2 || (templa
 }, function (_a) {
     var isLoading = _a.isLoading;
     return isLoading && theme_1.placeholderStyle;
+}, function (_a) {
+    var background = _a.background;
+    return background === 'checkerboard'
+        ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          background-image: linear-gradient(45deg, ", " 25%, transparent 25%),\n            linear-gradient(135deg, ", " 25%, transparent 25%),\n            linear-gradient(45deg, transparent 75%, ", " 75%),\n            linear-gradient(135deg, transparent 75%, ", " 75%);\n          background-size: 25px 25px; /* Must be a square */\n          background-position: 0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; /* Must be half of one side of the square */\n        "], ["\n          background-image: linear-gradient(45deg, ", " 25%, transparent 25%),\n            linear-gradient(135deg, ", " 25%, transparent 25%),\n            linear-gradient(45deg, transparent 75%, ", " 75%),\n            linear-gradient(135deg, transparent 75%, ", " 75%);\n          background-size: 25px 25px; /* Must be a square */\n          background-position: 0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; /* Must be half of one side of the square */\n        "])), (0, theme_1.getColor)('grey', 60), (0, theme_1.getColor)('grey', 60), (0, theme_1.getColor)('grey', 60), (0, theme_1.getColor)('grey', 60)) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          background: ", ";\n        "], ["\n          background: ", ";\n        "])), (0, theme_1.getColor)(background));
 });
 var Image = react_1.default.forwardRef(function (_a, forwardedRef) {
-    var _b = _a.fit, fit = _b === void 0 ? 'cover' : _b, _c = _a.isStacked, isStacked = _c === void 0 ? false : _c, src = _a.src, rest = __rest(_a, ["fit", "isStacked", "src"]);
-    return (react_1.default.createElement(ImageContainer, __assign({ isLoading: null === src, src: src !== null && src !== void 0 ? src : EMPTY_IMAGE, ref: forwardedRef, fit: fit, isStacked: isStacked }, rest)));
+    var _b = _a.fit, fit = _b === void 0 ? 'cover' : _b, _c = _a.isStacked, isStacked = _c === void 0 ? false : _c, _d = _a.background, background = _d === void 0 ? 'white' : _d, src = _a.src, rest = __rest(_a, ["fit", "isStacked", "background", "src"]);
+    return (react_1.default.createElement(ImageContainer, __assign({ isLoading: null === src, src: src !== null && src !== void 0 ? src : EMPTY_IMAGE, ref: forwardedRef, fit: fit, isStacked: isStacked, background: background }, rest)));
 });
 exports.Image = Image;
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 //# sourceMappingURL=Image.js.map

package/lib/components/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAiC;AACjC,qEAA8C;AAC9C,qCAAuD;AAIvD,IAAM,WAAW,GAAG,8DAA8D,CAAC;AAInF,IAAM,cAAc,GAAG,2BAAM,CAAC,GAAG,2LAMhC,kBACe,EAAiB,yBACX,EAAoB,mBAC1B,EAAc,oCAG1B,EAKC,QAED,EAA8C,IACjD,KAbe,IAAA,gBAAQ,EAAC,OAAO,CAAC,EACX,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EAC1B,UAAC,EAAK;QAAJ,GAAG,SAAA;IAAM,OAAA,GAAG;AAAH,CAAG,EAG1B,UAAC,EAAW;QAAV,SAAS,eAAA;IACX,OAAA,SAAS,QACT,uBAAG,oLAAA,mCAC0B,EAAiB,iBAAkB,EAAoB,0BACjE,EAAiB,iBAAkB,EAAoB,SACzE,KAF4B,IAAA,gBAAQ,EAAC,OAAO,CAAC,EAAkB,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EACjE,IAAA,gBAAQ,EAAC,OAAO,CAAC,EAAkB,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,CACzE;AAJD,CAIC,EAED,UAAC,EAAW;QAAV,SAAS,eAAA;IAAM,OAAA,SAAS,IAAI,wBAAgB;AAA7B,CAA6B,CACjD,CAAC;AAwCF,IAAM,KAAK,GAAG,eAAK,CAAC,UAAU,CAC5B,UAAC,EAA4D,EAAE,YAAmC;IAAhG,IAAA,WAAa,EAAb,GAAG,mBAAG,OAAO,KAAA,EAAE,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAAE,GAAG,SAAA,EAAK,IAAI,cAA/C,2BAAgD,CAAD;IAC9C,OAAO,CACL,8BAAC,cAAc,aACb,SAAS,EAAE,IAAI,KAAK,GAAG,EACvB,GAAG,EAAE,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,WAAW,EACvB,GAAG,EAAE,YAAY,EACjB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,IAChB,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEM,sBAAK"}
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAiC;AACjC,qEAA8C;AAC9C,qCAAuD;AAIvD,IAAM,WAAW,GAAG,8DAA8D,CAAC;AAMnF,IAAM,cAAc,GAAG,2BAAM,CAAC,GAAG,kLAOhC,wBACqB,EAAoB,mBAC1B,EAAc,oCAG1B,EAKC,QAED,EAA8C,UAE9C,EAYK,IACR,KA1BqB,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EAC1B,UAAC,EAAK;QAAJ,GAAG,SAAA;IAAM,OAAA,GAAG;AAAH,CAAG,EAG1B,UAAC,EAAW;QAAV,SAAS,eAAA;IACX,OAAA,SAAS,QACT,uBAAG,oLAAA,mCAC0B,EAAiB,iBAAkB,EAAoB,0BACjE,EAAiB,iBAAkB,EAAoB,SACzE,KAF4B,IAAA,gBAAQ,EAAC,OAAO,CAAC,EAAkB,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EACjE,IAAA,gBAAQ,EAAC,OAAO,CAAC,EAAkB,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,CACzE;AAJD,CAIC,EAED,UAAC,EAAW;QAAV,SAAS,eAAA;IAAM,OAAA,SAAS,IAAI,wBAAgB;AAA7B,CAA6B,EAE9C,UAAC,EAAY;QAAX,UAAU,gBAAA;IACZ,OAAA,UAAU,KAAK,cAAc;QAC3B,CAAC,KAAC,uBAAG,whBAAA,uDAC0C,EAAoB,+DACnC,EAAoB,+EACJ,EAAoB,+DACnB,EAAoB,wMAGlE,KAN4C,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EACnC,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EACJ,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EACnB,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EAIrE,CAAC,KAAC,uBAAG,6GAAA,0BACa,EAAoB,aACnC,KADe,IAAA,gBAAQ,EAAC,UAAU,CAAC,CACnC;AAXL,CAWK,CACR,CAAC;AA6CF,IAAM,KAAK,GAAG,eAAK,CAAC,UAAU,CAC5B,UACE,EAAkF,EAClF,YAAmC;IADlC,IAAA,WAAa,EAAb,GAAG,mBAAG,OAAO,KAAA,EAAE,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAAE,kBAAoB,EAApB,UAAU,mBAAG,OAAO,KAAA,EAAE,GAAG,SAAA,EAAK,IAAI,cAArE,yCAAsE,CAAD;IAGrE,OAAO,CACL,8BAAC,cAAc,aACb,SAAS,EAAE,IAAI,KAAK,GAAG,EACvB,GAAG,EAAE,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,WAAW,EACvB,GAAG,EAAE,YAAY,EACjB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,IAClB,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEM,sBAAK"}

package/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": {

package/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>

package/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,6 +78,11 @@ 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;
   }
 >;
 
@@ -69,7 +90,10 @@ type ImageProps = Override<
  * 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}
@@ -77,6 +101,7 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
         ref={forwardedRef}
         fit={fit}
         isStacked={isStacked}
+        background={background}
         {...rest}
       />
     );