@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
82 lines (81 loc) • 3.15 kB
JavaScript
import * as React from 'react';
import { createComponent } from '@workday/canvas-kit-react/common';
import { svgStencil } from './Svg';
import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
/**
* @deprecated `graphicStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `graphicStencil` instead.
*/
export const graphicStyles = ({ width, height, grow }) => {
if (grow) {
return {
width: '100%',
'& svg': {
width: '100%',
height: '100%',
},
};
}
if (width) {
return {
'& svg': {
width,
height: '100%',
},
};
}
else if (height) {
return {
'& svg': {
height,
width: '100%',
},
};
}
return {};
};
/**
* @deprecated `graphicStencil` will be removed in a future version. Use `graphicImageStencil` instead.
*/
export const graphicStencil = createStencil({
extends: svgStencil,
base: { name: "d5h417", styles: "box-sizing:border-box;" },
modifiers: {
grow: {
true: { name: "d5h418", styles: "width:100%;--width-svg-a30d66:100%;" }
}
}
}, "graphic-385fe4");
export const graphicImageStencil = createStencil({
vars: {
width: '',
height: '',
},
base: { name: "d5h419", styles: "box-sizing:border-box;width:var(--width-graphic-image-8fedc2);height:var(--height-graphic-image-8fedc2);display:inline-block;& [data-part=\"graphic-img\"]{width:var(--width-graphic-image-8fedc2);height:var(--height-graphic-image-8fedc2);max-width:100%;max-height:100%;}" },
modifiers: {
grow: {
true: { name: "d5h41a", styles: "width:100%;& [data-part=\"graphic-img\"]{width:100%;}" }
}
}
}, "graphic-image-8fedc2");
/**
* Account for nodejs environments. We use `btoa` which is a web api for encoding data and `Buffer` for nodejs environments.
* [`btoa` docs](https://developer.mozilla.org/en-US/docs/Web/API/Window/btoa)
* [`Buffer` docs](https://nodejs.org/api/buffer.html#buffers-and-character-encodings)
*/
export const base64Encoded = (str) => {
if (typeof window !== 'undefined' && typeof window.btoa === 'function') {
return window.btoa(str);
}
return Buffer.from(str, 'binary').toString('base64');
};
export const Graphic = createComponent('span')({
displayName: 'Graphic',
Component: ({ grow = false, width, height, src, srcset, alt, sizes, ...elemProps }, ref, Element) => {
return (React.createElement(Element, { ref: ref, ...handleCsProp(elemProps, graphicImageStencil({
grow,
width: typeof width === 'number' ? px2rem(width) : width,
height: typeof height === 'number' ? px2rem(height) : height,
})) },
React.createElement("img", { "data-part": "graphic-img", src: src.svg ? `data:image/svg+xml;base64,${base64Encoded(src.svg)}` : src.url, sizes: sizes, srcSet: srcset, alt: alt })));
},
});