@workday/canvas-kit-labs-react/dist/es6/expandable/lib/ExpandableIcon.js

Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functi

import React from 'react';
import { createSubcomponent, filterOutProps, styled, } from '@workday/canvas-kit-react/common';
import { chevronUpIcon, chevronDownIcon } from '@workday/canvas-system-icons-web';
import { useExpandableIcon } from './hooks/useExpandableIcon';
import { SystemIcon } from '@workday/canvas-kit-react/icon';
import { colors, space } from '@workday/canvas-kit-react/tokens';
import { useExpandableModel } from './hooks/useExpandableModel';
const StyledEndIcon = styled(SystemIcon, {
    shouldForwardProp: filterOutProps(['visible']),
})({
    marginLeft: 'auto',
}, ({ visible }) => ({
    transform: !visible ? 'rotate(-180deg)' : undefined,
    padding: !visible
        ? `${space.xxxs} ${space.xs} ${space.xxxs} ${space.xxxs}`
        : `${space.xxxs} ${space.xxxs} ${space.xxxs} ${space.xs}`,
}));
const StyledStartIcon = styled(SystemIcon, {
    shouldForwardProp: filterOutProps(['visible']),
})({
    margin: `0 ${space.xxs} 0 0`,
    padding: space.xxxs,
}, ({ visible }) => ({
    transform: !visible ? 'rotate(-90deg)' : undefined,
}));
export const ExpandableIcon = createSubcomponent('span')({
    modelHook: useExpandableModel,
    elemPropsHook: useExpandableIcon,
})(({ icon, visible, iconPosition = 'start', ...elementProps }, Element) => iconPosition === 'end' ? (React.createElement(StyledEndIcon, { as: Element, fill: colors.licorice200, icon: icon || chevronUpIcon, visible: visible, ...elementProps })) : (React.createElement(StyledStartIcon, { as: Element, fill: colors.licorice200, icon: icon || chevronDownIcon, visible: visible, ...elementProps })));