diff --git a/lib/components/Image/Image.d.ts b/lib/components/Image/Image.d.ts index af6acf0e..a66f414e 100644 --- a/lib/components/Image/Image.d.ts +++ b/lib/components/Image/Image.d.ts @@ -1,11 +1,13 @@ import React from 'react'; declare type Fit = 'cover' | 'contain'; -declare const Image: React.ForwardRefExoticComponent, "height" | "width" | "alt" | "src" | "fit" | "isStacked"> & { +declare type Background = 'white' | 'checkerboard'; +declare const Image: React.ForwardRefExoticComponent, "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>; export { Image }; diff --git a/lib/components/Image/Image.js b/lib/components/Image/Image.js index b704f5b6..a70f1384 100644 --- a/lib/components/Image/Image.js +++ b/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,'; -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 \ No newline at end of file diff --git a/lib/components/Image/Image.js.map b/lib/components/Image/Image.js.map index ac220a73..34176621 100644 --- a/lib/components/Image/Image.js.map +++ b/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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/package.json b/package.json index bb62b8c7..c1a646c7 100644 --- a/package.json +++ b/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": { diff --git a/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-image-background-correctly-1-snap.png b/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-image-background-correctly-1-snap.png new file mode 100644 index 00000000..2cf3134b Binary files /dev/null and b/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-image-background-correctly-1-snap.png differ diff --git a/src/components/Image/Image.stories.mdx b/src/components/Image/Image.stories.mdx index b50d4eba..cd406f5e 100644 --- a/src/components/Image/Image.stories.mdx +++ b/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. }} + +## 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. + + + + {args => { + return ( + <> + + + + ); + }} + + diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx index 011bbd17..d9d18d63 100644 --- a/src/components/Image/Image.tsx +++ b/src/components/Image/Image.tsx @@ -8,14 +8,16 @@ const EMPTY_IMAGE = 'data:image/svg+xml,` - 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( - ({fit = 'cover', isStacked = false, src, ...rest}: ImageProps, forwardedRef: Ref) => { + ( + {fit = 'cover', isStacked = false, background = 'white', src, ...rest}: ImageProps, + forwardedRef: Ref + ) => { return ( ( ref={forwardedRef} fit={fit} isStacked={isStacked} + background={background} {...rest} /> );