@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
32 lines (31 loc) • 2.13 kB
JavaScript
import * as React from 'react';
import { createComponent } from '@workday/canvas-kit-react/common';
import { createStencil, calc, px2rem } from '@workday/canvas-kit-styling';
import { brand, system } from '@workday/canvas-tokens-web';
import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
import { checkSmallIcon } from '@workday/canvas-system-icons-web';
import { CheckBackground } from './CheckBackground';
const checkboxCheckStencil = createStencil({
base: { name: "d5h43r", styles: "box-sizing:border-box;display:flex;flex-direction:column;max-width:100%;pointer-events:none;transition:transform 200ms ease, opacity 200ms ease;span{margin-inline-start:calc(0.375rem * -1);transition:margin 200ms ease;}opacity:var(--cnvs-sys-opacity-zero);transform:scale(0.5);" },
modifiers: {
checked: {
true: { name: "d5h43s", styles: "--color-system-icon-212f69:var(--cnvs-brand-primary-accent);opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
},
indeterminate: {
true: { name: "d5h43t", styles: "opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
},
variant: {
inverse: { name: "d5h43u", styles: "--color-system-icon-212f69:var(--cnvs-brand-primary-base);& > div{background-color:var(--cnvs-brand-primary-base);}" }
}
}
}, "checkbox-check-1e6620");
const indeterminateBoxStencil = createStencil({
base: { name: "d5h43v", styles: "box-sizing:border-box;width:0.625rem;height:calc(var(--cnvs-sys-space-x1) / 2);background-color:var(--cnvs-brand-primary-accent);" }
}, "indeterminate-box-c4442f");
export const CheckboxCheck = createComponent('div')({
displayName: 'CheckboxCheck',
Component: ({ checked, error, indeterminate, variant }) => {
return (React.createElement(CheckBackground, { error: error },
React.createElement("div", { ...checkboxCheckStencil({ checked, indeterminate, variant }) }, indeterminate ? (React.createElement("div", { ...indeterminateBoxStencil() })) : (checked && React.createElement(SystemIcon, { icon: checkSmallIcon })))));
},
});