@wix/design-system
Version:
@wix/design-system
55 lines • 3.64 kB
JavaScript
import React, { useEffect } from 'react';
import { InfoCircle, StatusAlert, StatusComplete, StatusWarning, } from '@wix/wix-ui-icons-common';
import Text from '../Text';
import Button from '../Button';
import CloseButton from '../CloseButton';
import { SKIN, dataHooks, LAYOUT, SIZE, BORDER } from './constants';
import { classes, st } from './SectionHelper.st.css.js';
import deprecationLog from '../utils/deprecationLog';
import { useIcons } from '../WixDesignSystemIconThemeProvider';
const SectionHelper = ({ dataHook, showCloseButton = false, onClose, onAction, actionText, actionDisabled = false, appearance = SKIN.Warning, // TODO: add default to skin prop once appearance is removed
title, size = SIZE.Medium, fullWidth = false, children, layout = LAYOUT.Vertical, border = BORDER.Standard, showPrefixIcon = false, prefixIcon, ...props }) => {
const icons = useIcons('SectionHelper', {
InfoCircle,
StatusAlert,
StatusComplete,
StatusWarning,
});
const DEFAULT_ICONS = {
[SKIN.Standard]: React.createElement(icons.InfoCircle, null),
[SKIN.Success]: React.createElement(icons.StatusComplete, null),
[SKIN.Warning]: React.createElement(icons.StatusWarning, null),
[SKIN.Danger]: React.createElement(icons.StatusAlert, null),
[SKIN.Premium]: React.createElement(icons.InfoCircle, null),
[SKIN.Preview]: React.createElement(icons.InfoCircle, null),
[SKIN.ExperimentalDark]: React.createElement(icons.InfoCircle, null),
};
const skin = props.skin || appearance;
const isExperimentalDark = skin === SKIN.ExperimentalDark;
const icon = showPrefixIcon && (prefixIcon ?? DEFAULT_ICONS[skin]);
useEffect(() => {
if (appearance) {
deprecationLog('<SectionHelper/> - prop "appearance" is deprecated and will be removed in next major release, please use "skin" property instead.');
}
}, [appearance]);
return (React.createElement("div", { "data-hook": dataHook, "data-skin": skin, className: st(classes.root, {
skin,
withCloseBtn: showCloseButton,
fullWidth,
size,
border,
hasPrefix: showPrefixIcon,
}) },
showCloseButton && (React.createElement("div", { className: st(classes.close, { size }) },
React.createElement(CloseButton, { dataHook: dataHooks.closeButton, size: "medium", skin: isExperimentalDark ? 'light' : 'dark', onClick: onClose }))),
icon && (React.createElement(Text, { dataHook: dataHooks.prefix, className: st(classes.prefix), light: isExperimentalDark }, icon)),
React.createElement("div", { className: st(classes.content, { size, layout }) },
React.createElement("div", { className: st(classes.textContainer) },
title && (React.createElement("div", { className: classes.title },
React.createElement(Text, { className: classes.text, light: isExperimentalDark, dataHook: dataHooks.title, size: "small", weight: "bold" }, title))),
React.createElement(Text, { className: classes.text, size: "small", light: isExperimentalDark }, children)),
actionText && (React.createElement(Button, { className: st(classes.action), size: size === 'small' ? 'tiny' : 'small', skin: isExperimentalDark ? 'standard' : 'dark', priority: isExperimentalDark ? 'primary' : 'secondary', disabled: actionDisabled, onClick: onAction, dataHook: dataHooks.actionButton }, actionText)))));
};
SectionHelper.displayName = 'SectionHelper';
export default SectionHelper;
//# sourceMappingURL=SectionHelper.js.map