@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
31 lines (30 loc) • 2.09 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
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: "39riq6", 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: "2qzr81", styles: "--color-system-icon-99ce3e:var(--cnvs-brand-primary-accent);opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
},
indeterminate: {
true: { name: "2ibg69", styles: "opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
},
variant: {
inverse: { name: "34bxnw", styles: "--color-system-icon-99ce3e:var(--cnvs-brand-primary-base);& > div{background-color:var(--cnvs-brand-primary-base);}" }
}
}
}, "checkbox-check-3954b5");
const indeterminateBoxStencil = createStencil({
base: { name: "2gno5o", 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-105dc4");
export const CheckboxCheck = createComponent('div')({
displayName: 'CheckboxCheck',
Component: ({ checked, error, indeterminate, variant }) => {
return (_jsx(CheckBackground, { error: error, children: _jsx("div", { ...checkboxCheckStencil({ checked, indeterminate, variant }), children: indeterminate ? (_jsx("div", { ...indeterminateBoxStencil() })) : (checked && _jsx(SystemIcon, { icon: checkSmallIcon })) }) }));
},
});