@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
40 lines (39 loc) • 2.8 kB
JavaScript
import * as React from 'react';
import { colors } from '@workday/canvas-kit-react/tokens';
import { SystemIcon, systemIconStencil } from './SystemIcon';
import { createComponent, pickForegroundColor } from '@workday/canvas-kit-react/common';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { calc, createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling';
import { base, system } from '@workday/canvas-tokens-web';
import { transformColorNameToToken } from './Svg';
export var SystemIconCircleSize;
(function (SystemIconCircleSize) {
SystemIconCircleSize[SystemIconCircleSize["xs"] = 16] = "xs";
SystemIconCircleSize[SystemIconCircleSize["s"] = 24] = "s";
SystemIconCircleSize[SystemIconCircleSize["m"] = 32] = "m";
SystemIconCircleSize[SystemIconCircleSize["l"] = 40] = "l";
SystemIconCircleSize[SystemIconCircleSize["xl"] = 64] = "xl";
SystemIconCircleSize[SystemIconCircleSize["xxl"] = 120] = "xxl";
})(SystemIconCircleSize || (SystemIconCircleSize = {}));
const systemIconCircleStencil = createStencil({
vars: {
containerSize: '',
backgroundColor: '',
iconColor: '',
},
base: { name: "d5h416", styles: "box-sizing:border-box;background:var(--backgroundColor-system-icon-circle-a3dd9b, var(--cnvs-base-palette-soap-200));display:flex;align-items:center;justify-content:center;padding:var(--cnvs-sys-space-zero);border:none;border-radius:var(--cnvs-sys-shape-round);overflow:hidden;width:var(--containerSize-system-icon-circle-a3dd9b, var(--cnvs-sys-space-x10));height:var(--containerSize-system-icon-circle-a3dd9b, var(--cnvs-sys-space-x10));--size-svg-a30d66:calc(var(--containerSize-system-icon-circle-a3dd9b, var(--cnvs-sys-space-x10)) * 0.625);--color-system-icon-212f69:var(--iconColor-system-icon-circle-a3dd9b);& img{width:100%;height:100%;}" }
}, "system-icon-circle-a3dd9b");
export const SystemIconCircle = createComponent('span')({
displayName: 'SystemIconCircle',
Component: ({ background, size, icon, shouldMirror, ...elemProps }, ref, Element) => {
// `pickForegroundColor` hasn't support to use css variables to generate foregroundColor
const backgroundFallback = background && !background.startsWith('--') ? background : colors.soap200;
const iconColor = pickForegroundColor(backgroundFallback, 'rgba(0,0,0,0.65)', colors.frenchVanilla100);
return (React.createElement("div", { ...mergeStyles(elemProps, systemIconCircleStencil({
containerSize: typeof size === 'number' ? px2rem(size) : size,
backgroundColor: transformColorNameToToken(background),
iconColor,
})) },
React.createElement(SystemIcon, { as: Element, ref: ref, icon: icon, shouldMirror: shouldMirror })));
},
});