@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
73 lines (72 loc) • 3.08 kB
JavaScript
import * as React from 'react';
import { colors, BrandingColor } from '@workday/canvas-kit-react/tokens';
import { CanvasIconTypes } from '@workday/design-assets-types';
import { Svg, svgStencil } from './Svg';
import { createComponent } from '@workday/canvas-kit-react/common';
import { handleCsProp, createStencil, px2rem, cssVar } from '@workday/canvas-kit-styling';
import { base } from '@workday/canvas-tokens-web';
/**
* @deprecated `appletIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `appletIconStencil` instead.
*/
export const appletIconStyles = ({ color = BrandingColor.Blueberry, }) => {
// Check if valid color
if (!Object.keys(BrandingColor)
.map(color => BrandingColor[color])
.includes(color)) {
throw Error(`Color "${color}" not found`);
}
const colorNames = {
100: `${color}100`,
200: `${color}200`,
300: `${color}300`,
400: `${color}400`,
500: `${color}500`,
};
return {
'& .color-100': {
fill: colors.frenchVanilla100,
},
'& .color-200': {
fill: colors[colorNames[200]],
},
'& .color-300': {
fill: colors[colorNames[300]],
},
'& .color-400': {
fill: colors[colorNames[400]],
},
'& .color-400-alpha-20': {
fill: colors[colorNames[400]],
},
'& .color-500': {
fill: colors[colorNames[500]],
},
};
};
export const appletIconStencil = createStencil({
extends: svgStencil,
vars: {
color200: '',
color300: '',
color400: '',
color500: '',
},
base: { name: "d5h414", styles: "box-sizing:border-box;--size-svg-a30d66:5.75rem;& .color-100{fill:var(--cnvs-base-palette-french-vanilla-100);}& .color-200{fill:var(--color200-applet-icon-757179, var(--cnvs-base-palette-blueberry-200));}& .color-300{fill:var(--color300-applet-icon-757179, var(--cnvs-base-palette-blueberry-300));}& .color-400{fill:var(--color400-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}& .color-400-alpha-20{fill:var(--color400-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}& .color-500{fill:var(--color500-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}" }
}, "applet-icon-757179");
export const AppletIcon = createComponent('span')({
displayName: 'AppletIcon',
Component: ({ size, icon, color, ...elemProps }, ref, Element) => {
const colors = color && {
color200: base[`${color}200`],
color300: base[`${color}300`],
color400: base[`${color}400`],
color500: base[`${color}500`],
};
return (React.createElement(Svg, { src: icon, type: CanvasIconTypes.Applet, as: Element, ref: ref, ...handleCsProp(elemProps, [
appletIconStencil({ ...colors, size: size ? px2rem(size) : undefined }),
]) }));
},
subComponents: {
Colors: BrandingColor,
},
});