@helpscout/hsds-react/components/Modal/Modal.HeaderV2.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _classnames = _interopRequireDefault(require("classnames"));

var _Modal = require("./Modal.utils");

var _ModalHeaderV = require("./Modal.HeaderV2.css");

var _DotStepper = _interopRequireDefault(require("../DotStepper"));

var _Icon = _interopRequireDefault(require("../Icon"));

var _jsxRuntime = require("react/jsx-runtime");

var ModalHeaderV2 = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(ModalHeaderV2, _React$PureComponent);

  function ModalHeaderV2() {
    return _React$PureComponent.apply(this, arguments) || this;
  }

  var _proto = ModalHeaderV2.prototype;

  _proto.renderAlertStyle = function renderAlertStyle() {
    var _this$props = this.props,
        className = _this$props.className,
        children = _this$props.children,
        description = _this$props.description,
        title = _this$props.title,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["className", "children", "description", "title"]);
    var componentClassName = (0, _classnames.default)('c-ModalHeaderV2', className);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalHeaderV.AlertHeaderUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: componentClassName,
      placement: 'top',
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeaderV.AlertHeaderTitleUI, {
        children: title
      }), description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeaderV.AlertHeaderDescriptionUI, {
        children: description
      }) : null, children]
    }));
  };

  _proto.renderBrandedStyle = function renderBrandedStyle() {
    var _this$props2 = this.props,
        className = _this$props2.className,
        children = _this$props2.children,
        description = _this$props2.description,
        illo = _this$props2.illo,
        illoSize = _this$props2.illoSize,
        title = _this$props2.title,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props2, ["className", "children", "description", "illo", "illoSize", "title"]);
    var componentClassName = (0, _classnames.default)('c-ModalHeaderV2', className);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalHeaderV.BrandedHeaderUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: componentClassName,
      placement: 'top',
      children: [illo ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeaderV.BrandedHeaderImageUI, {
        size: illoSize,
        children: illo
      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeaderV.BrandedHeaderTitleUI, {
        children: title
      }), description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeaderV.HeaderDescriptionUI, {
        children: description
      }) : null, children]
    }));
  };

  _proto.renderSequenceStyle = function renderSequenceStyle() {
    var _this$props3 = this.props,
        className = _this$props3.className,
        children = _this$props3.children,
        description = _this$props3.description,
        illo = _this$props3.illo,
        numSteps = _this$props3.numSteps,
        step = _this$props3.step,
        title = _this$props3.title,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["className", "children", "description", "illo", "numSteps", "step", "title"]);
    var componentClassName = (0, _classnames.default)('c-ModalHeaderV2', className);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalHeaderV.BrandedHeaderUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: componentClassName,
      placement: 'top',
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeaderV.DotStepperUI, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DotStepper.default, {
          numSteps: numSteps,
          step: step
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeaderV.BrandedHeaderTitleUI, {
        children: title
      }), description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeaderV.HeaderDescriptionUI, {
        children: description
      }) : null, children]
    }));
  };

  _proto.render = function render() {
    var _this$props4 = this.props,
        className = _this$props4.className,
        children = _this$props4.children,
        description = _this$props4.description,
        icon = _this$props4.icon,
        iconSize = _this$props4.iconSize,
        kind = _this$props4.kind,
        title = _this$props4.title,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props4, ["className", "children", "description", "icon", "iconSize", "kind", "title"]);
    var componentClassName = (0, _classnames.default)('c-ModalHeaderV2', className);

    if (kind === _Modal.MODAL_KIND.BRANDED) {
      return this.renderBrandedStyle();
    } else if (kind === _Modal.MODAL_KIND.ALERT) {
      return this.renderAlertStyle();
    } else if (kind === _Modal.MODAL_KIND.SEQUENCE) {
      return this.renderSequenceStyle();
    }

    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalHeaderV.HeaderUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: componentClassName,
      placement: 'top',
      children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
        name: icon,
        size: iconSize
      }, icon) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeaderV.HeaderTitleUI, {
        children: title
      }), children]
    }));
  };

  return ModalHeaderV2;
}(_react.default.PureComponent);

ModalHeaderV2.defaultProps = {
  'data-cy': 'ModalHeaderV2',
  description: null,
  icon: null,
  iconSize: '24',
  illo: null,
  illoSize: 60,
  kind: _Modal.MODAL_KIND.DEFAULT,
  numSteps: 1,
  step: 1,
  title: 'Title'
};
ModalHeaderV2.propTypes = {
  /** Renders in version 2 Modals beneath the title. */
  description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),

  /** Renders as an `Icon` in the top left corner of a version 2 Modal header. */
  icon: _propTypes.default.string,

  /** The size to render the provided `Icon` in a version 2 Modal header. */
  iconSize: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

  /** Expects an `Illo` to be displayed in a version 2 Modal header. */
  illo: _propTypes.default.any,

  /** The size to render the provided `Illo` in a version 2 Modal header. */
  illoSize: _propTypes.default.number,

  /** The kind of version 2 Modal style to apply. (DEFAULT, BRANDED, ALERT, SEQUENCE). Default `DEFAULT` */
  kind: _propTypes.default.oneOf(['alert', 'default', 'branded', 'sequence']),

  /** Total number of steps to be used in a version 2 Sequence Modal. */
  numSteps: _propTypes.default.number,

  /** Current step to be used in a version 2 Sequence Modal. */
  step: _propTypes.default.number,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string
};
var _default = ModalHeaderV2;
exports.default = _default;