UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

20 lines (19 loc) 1.87 kB
import { jsx as _jsx } from "react/jsx-runtime"; import { cornerShapeStencil, createSubcomponent, } from '@workday/canvas-kit-react/common'; import { mergeStyles } from '@workday/canvas-kit-react/layout'; import { Heading } from '@workday/canvas-kit-react/text'; import { createStencil, px2rem } from '@workday/canvas-kit-styling'; import { system } from '@workday/canvas-tokens-web'; import { useExpandableModel } from './hooks/useExpandableModel'; import { useExpandableTarget } from './hooks/useExpandableTarget'; export const expandableTargetStencil = createStencil({ extends: cornerShapeStencil, base: { name: "30nzun", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-color:var(--cnvs-sys-color-border-transparent);--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);border-width:0;display:flex;align-items:center;flex-direction:row;gap:var(--cnvs-sys-gap-none, var(--cnvs-sys-space-zero, 0));justify-content:start;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;width:100%;&:hover, &.hover{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:focus-visible, &.focus{outline:0.125rem solid var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}" } }, "expandable-target-6f2998"); export const ExpandableTarget = createSubcomponent('button')({ modelHook: useExpandableModel, elemPropsHook: useExpandableTarget, })(({ children, headingLevel, ...elementProps }, Element) => { const button = (_jsx(Element, { ...mergeStyles(elementProps, expandableTargetStencil()), children: children })); return headingLevel ? (_jsx(Heading, { size: "small", as: headingLevel, cs: { margin: 0 }, children: button })) : (button); });