UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

20 lines (19 loc) 1.43 kB
import { jsx as _jsx } from "react/jsx-runtime"; import { Avatar, avatarStencil } from '@workday/canvas-kit-react/avatar'; import { createSubcomponent } from '@workday/canvas-kit-react/common'; import { mergeStyles } from '@workday/canvas-kit-react/layout'; import { createStencil, px2rem } from '@workday/canvas-kit-styling'; import { system } from '@workday/canvas-tokens-web'; import { usePillModel } from './usePillModel'; export const pillAvatarStencil = createStencil({ extends: avatarStencil, base: { name: "1pnukk", styles: "box-sizing:border-box;flex:0 0 auto;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem));font-size:var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small));&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}" } }, "pill-avatar-b59a58"); export const PillAvatar = createSubcomponent('div')({ modelHook: usePillModel, })(({ size, ...elemProps }, Element, _model) => { return (_jsx(Avatar, { isDecorative: true, as: Element, size: px2rem(18), ...mergeStyles(elemProps, [ pillAvatarStencil(), _model.state.disabled ? 'disabled' : undefined, ]) })); });