wix-style-react
Version:
wix-style-react
72 lines • 3.52 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import Text from '../Text';
import Button from '../Button';
import CloseButton from '../CloseButton';
import { Appearance } from './constants';
import { classes, st } from './SectionHelper.st.css';
import { WixStyleReactContext } from '../WixStyleReactProvider/context';
/**
* Used in pages where you need to explain or mention things about the content or actions
*/
class SectionHelper extends React.PureComponent {
render() {
const { dataHook, showCloseButton, onClose, onAction, actionText, appearance, title, size, fullWidth, children, } = this.props;
const isExperimentalDark = appearance === Appearance.ExperimentalDark;
return (React.createElement(WixStyleReactContext.Consumer, null, ({ newColorsBranding }) => (React.createElement("div", { "data-hook": dataHook, "data-appearance": appearance, className: st(classes.root, {
appearance,
withCloseBtn: showCloseButton && !!onClose,
withTitle: !!title,
fullWidth,
size,
newColorsBranding,
}) },
showCloseButton && onClose && (React.createElement("div", { className: st(classes.close, { size }) },
React.createElement(CloseButton, { dataHook: "sectionhelper-close-btn", size: "medium", skin: isExperimentalDark ? 'light' : 'dark', onClick: onClose }))),
title && (React.createElement("div", { className: classes.title },
React.createElement(Text, { light: isExperimentalDark, dataHook: "sectionhelper-title", size: "small", weight: "bold" }, title))),
React.createElement("div", { className: classes.content },
React.createElement(Text, { size: "small", light: isExperimentalDark }, children)),
onAction && actionText && (React.createElement("div", { className: st(classes.action, { size }) },
React.createElement(Button, { size: size === 'small' ? 'tiny' : 'small', skin: isExperimentalDark ? 'standard' : 'dark', priority: isExperimentalDark ? 'primary' : 'secondary', onClick: onAction, dataHook: "sectionhelper-action-btn" }, actionText)))))));
}
}
SectionHelper.displayName = 'SectionHelper';
SectionHelper.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** Sets the look and feel of the component */
appearance: PropTypes.oneOf([
'warning',
'standard',
'danger',
'success',
'premium',
'preview',
'experimentalDark',
]),
/** Adds text as the title */
title: PropTypes.node,
/** Controls the component padding*/
size: PropTypes.oneOf(['small', 'medium']),
/** decide if to show the close button */
showCloseButton: PropTypes.bool,
/** When provided, will make a close button appear and invoke it upon click */
onClose: PropTypes.func,
/** When provided, will make an action button appear and invoke it upon click */
onAction: PropTypes.func,
/** Text label for the action button */
actionText: PropTypes.string,
/** Children to render */
children: PropTypes.node,
/** Set the content width to 100% */
fullWidth: PropTypes.bool,
};
SectionHelper.defaultProps = {
showCloseButton: true,
appearance: 'warning',
fullWidth: false,
size: 'medium',
};
export default SectionHelper;
//# sourceMappingURL=SectionHelper.js.map