wix-style-react/dist/src/SectionHelper/SectionHelper.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Text = _interopRequireDefault(require("../Text"));
var _Button = _interopRequireDefault(require("../Button"));
var _CloseButton = _interopRequireDefault(require("../CloseButton"));
var _constants = require("./constants");
var _SectionHelperSt = require("./SectionHelper.st.css");
var _context = require("../WixStyleReactProvider/context");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/SectionHelper/SectionHelper.js";
/**
 * Used in pages where you need to explain or mention things about the content or actions
 */
class SectionHelper extends _react.default.PureComponent {
  render() {
    var {
      dataHook,
      showCloseButton,
      onClose,
      onAction,
      actionText,
      appearance,
      title,
      size,
      fullWidth,
      children
    } = this.props;
    var isExperimentalDark = appearance === _constants.Appearance.ExperimentalDark;
    return /*#__PURE__*/_react.default.createElement(_context.WixStyleReactContext.Consumer, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 31,
        columnNumber: 7
      }
    }, _ref => {
      var {
        newColorsBranding
      } = _ref;
      return /*#__PURE__*/_react.default.createElement("div", {
        "data-hook": dataHook,
        "data-appearance": appearance,
        className: (0, _SectionHelperSt.st)(_SectionHelperSt.classes.root, {
          appearance,
          withCloseBtn: showCloseButton && !!onClose,
          withTitle: !!title,
          fullWidth,
          size,
          newColorsBranding
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 33,
          columnNumber: 11
        }
      }, showCloseButton && onClose && /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _SectionHelperSt.st)(_SectionHelperSt.classes.close, {
          size
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 46,
          columnNumber: 15
        }
      }, /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
        dataHook: "sectionhelper-close-btn",
        size: "medium",
        skin: isExperimentalDark ? 'light' : 'dark',
        onClick: onClose,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 47,
          columnNumber: 17
        }
      })), title && /*#__PURE__*/_react.default.createElement("div", {
        className: _SectionHelperSt.classes.title,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 57,
          columnNumber: 15
        }
      }, /*#__PURE__*/_react.default.createElement(_Text.default, {
        light: isExperimentalDark,
        dataHook: "sectionhelper-title",
        size: "small",
        weight: "bold",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 58,
          columnNumber: 17
        }
      }, title)), /*#__PURE__*/_react.default.createElement("div", {
        className: _SectionHelperSt.classes.content,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 69,
          columnNumber: 13
        }
      }, /*#__PURE__*/_react.default.createElement(_Text.default, {
        size: "small",
        light: isExperimentalDark,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 70,
          columnNumber: 15
        }
      }, children)), onAction && actionText && /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _SectionHelperSt.st)(_SectionHelperSt.classes.action, {
          size
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 76,
          columnNumber: 15
        }
      }, /*#__PURE__*/_react.default.createElement(_Button.default, {
        size: size === 'small' ? 'tiny' : 'small',
        skin: isExperimentalDark ? 'standard' : 'dark',
        priority: isExperimentalDark ? 'primary' : 'secondary',
        onClick: onAction,
        dataHook: "sectionhelper-action-btn",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 77,
          columnNumber: 17
        }
      }, actionText)));
    });
  }
}
SectionHelper.displayName = 'SectionHelper';
SectionHelper.propTypes = {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: _propTypes.default.string,
  /** Sets the look and feel of the component */
  appearance: _propTypes.default.oneOf(['warning', 'standard', 'danger', 'success', 'premium', 'preview', 'experimentalDark']),
  /** Adds text as the title */
  title: _propTypes.default.node,
  /** Controls the component padding*/
  size: _propTypes.default.oneOf(['small', 'medium']),
  /** decide if to show the close button */
  showCloseButton: _propTypes.default.bool,
  /** When provided, will make a close button appear and invoke it upon click */
  onClose: _propTypes.default.func,
  /** When provided, will make an action button appear and invoke it upon click */
  onAction: _propTypes.default.func,
  /** Text label for the action button */
  actionText: _propTypes.default.string,
  /** Children to render */
  children: _propTypes.default.node,
  /** Set the content width to 100% */
  fullWidth: _propTypes.default.bool
};
SectionHelper.defaultProps = {
  showCloseButton: true,
  appearance: 'warning',
  fullWidth: false,
  size: 'medium'
};
var _default = exports.default = SectionHelper;
//# sourceMappingURL=SectionHelper.js.map