@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
49 lines (48 loc) • 2.41 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { createSubcomponent } from '@workday/canvas-kit-react/common';
import { chevronUpIcon } from '@workday/canvas-system-icons-web';
import { useExpandableIcon } from './hooks/useExpandableIcon';
import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
import { useExpandableModel } from './hooks/useExpandableModel';
import { createStencil } from '@workday/canvas-kit-styling';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { system } from '@workday/canvas-tokens-web';
export const expandableIconStencil = createStencil({
extends: systemIconStencil,
base: { name: "6rem0", styles: "box-sizing:border-box;padding:var(--cnvs-sys-space-x1);" },
modifiers: {
isExpanded: {
true: { name: "2dr3gg", styles: "" },
false: { name: "3n0zo", styles: "" }
},
position: {
start: { name: "3fn345", styles: "" },
end: { name: "251gwb", styles: "" },
only: { name: "176h6q", styles: "" }
}
},
compound: [
{
modifiers: { position: 'end', isExpanded: false },
styles: { name: "3oqhnb", styles: "margin-inline-start:auto;transform:rotate(180deg);padding-inline-end:var(--cnvs-sys-space-x3);" }
},
{
modifiers: { position: 'end', isExpanded: true },
styles: { name: "2q3ryr", styles: "margin-inline-start:auto;padding-inline-start:var(--cnvs-sys-space-x3);" }
},
{
modifiers: { position: 'start', isExpanded: false },
styles: { name: "3zl4eg", styles: "margin-inline-end:var(--cnvs-sys-space-x2);transform:rotate(90deg);:dir(rtl){transform:rotate(-90deg);}" }
},
{
modifiers: { position: 'start', isExpanded: true },
styles: { name: "2ft9ap", styles: "margin-inline-end:var(--cnvs-sys-space-x2);transform:rotate(180deg);" }
}
]
}, "expandable-icon-a75423");
export const ExpandableIcon = createSubcomponent('span')({
modelHook: useExpandableModel,
elemPropsHook: useExpandableIcon,
})(({ icon, visible, iconPosition = 'start', ...elementProps }, Element) => {
return (_jsx(SystemIcon, { as: Element, icon: icon || chevronUpIcon, ...mergeStyles(elementProps, expandableIconStencil({ position: iconPosition, isExpanded: visible })) }));
});