@wix/design-system
Version:
@wix/design-system
38 lines • 2.15 kB
JavaScript
import React, { useContext } from 'react';
import { CaretDown, CaretRight } from '@wix/wix-ui-icons-common/system';
import Button from '../../../Button';
import TextButton from '../../../TextButton';
import { BUTTON_TYPES, DATA_HOOKS, SKINS } from '../../constants';
import { useIcons } from '../../../WixDesignSystemIconThemeProvider';
import { WixDesignSystemContext } from '../../../WixDesignSystemProvider/context';
import { st, classes } from './AccordionItemCaret.st.css.js';
const AccordionItemCaret = ({ showLabel, buttonType, skin, open, disabled, hover, collapseLabel, expandLabel, }) => {
const icons = useIcons('AccordionItemCaret', {
CaretDown,
CaretRight,
});
const { mobile } = useContext(WixDesignSystemContext);
const skinProp = skin === SKINS.neutral ? 'dark' : 'standard';
const isLabelShown = showLabel === 'always' || hover || mobile;
const label = open ? collapseLabel : expandLabel;
if (buttonType === BUTTON_TYPES.node && isLabelShown && label) {
return React.createElement("div", { "data-hook": DATA_HOOKS.toggleButton }, label);
}
if (buttonType === BUTTON_TYPES.button &&
label &&
// For this buttonType, showLabel default is 'always' if undefined.
(showLabel === 'hover' ? hover || mobile : true)) {
return (React.createElement(Button, { skin: skinProp, size: "tiny", priority: open ? 'secondary' : 'primary', disabled: disabled, dataHook: DATA_HOOKS.toggleButton, children: label }));
}
if (buttonType === BUTTON_TYPES.textButton) {
const suffixIcon = open ? React.createElement(icons.CaretDown, null) : React.createElement(icons.CaretRight, null);
return (React.createElement(TextButton, { className: st(classes.textButton, {
withLabel: !!(isLabelShown && label),
isHovered: hover,
disabled,
}), skin: skinProp, size: "tiny", suffixIcon: suffixIcon, disabled: disabled, dataHook: DATA_HOOKS.toggleButton, children: isLabelShown && label }));
}
return null;
};
export default AccordionItemCaret;
//# sourceMappingURL=AccordionItemCaret.js.map