@wix/design-system
Version:
@wix/design-system
82 lines • 4.21 kB
JavaScript
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
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';
const DEFAULT_ICONS = {
[SKIN.Standard]: React.createElement(InfoCircle, null),
[SKIN.Success]: React.createElement(StatusComplete, null),
[SKIN.Warning]: React.createElement(StatusWarning, null),
[SKIN.Danger]: React.createElement(StatusAlert, null),
[SKIN.Premium]: React.createElement(InfoCircle, null),
[SKIN.Preview]: React.createElement(InfoCircle, null),
[SKIN.ExperimentalDark]: React.createElement(InfoCircle, null),
};
const SectionHelper = ({ dataHook, showCloseButton = false, onClose, onAction, actionText, 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 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', onClick: onAction, dataHook: dataHooks.actionButton }, actionText)))));
};
SectionHelper.displayName = 'SectionHelper';
SectionHelper.propTypes = {
dataHook: PropTypes.string,
appearance: PropTypes.oneOf([
'warning',
'standard',
'danger',
'success',
'premium',
'preview',
'experimentalDark',
]),
skin: PropTypes.oneOf([
'warning',
'standard',
'danger',
'success',
'premium',
'preview',
'experimentalDark',
]),
title: PropTypes.node,
size: PropTypes.oneOf(['small', 'medium']),
showCloseButton: PropTypes.bool,
onClose: PropTypes.func,
onAction: PropTypes.func,
actionText: PropTypes.string,
children: PropTypes.node,
fullWidth: PropTypes.bool,
layout: PropTypes.oneOf(['vertical', 'horizontal']),
border: PropTypes.oneOf(['standard', 'topBottom']),
showPrefixIcon: PropTypes.any,
prefixIcon: PropTypes.any,
};
export default SectionHelper;
//# sourceMappingURL=SectionHelper.js.map