@helpscout/hsds-react/components/Toolbar/Toolbar.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.default = exports.Toolbar = 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 _Toolbar = _interopRequireDefault(require("./Toolbar.Block"));

var _Toolbar2 = _interopRequireDefault(require("./Toolbar.Item"));

var _Toolbar3 = _interopRequireDefault(require("./Toolbar.Shadow"));

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

var _Toolbar4 = require("./Toolbar.css");

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

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

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

  var _proto = Toolbar.prototype;

  _proto.getClassName = function getClassName() {
    var _this$props = this.props,
        className = _this$props.className,
        placement = _this$props.placement,
        shadow = _this$props.shadow,
        seamless = _this$props.seamless,
        size = _this$props.size,
        theme = _this$props.theme;
    return (0, _classnames.default)('c-Toolbar', placement && "is-placement-" + placement, seamless && 'is-seamless', shadow && 'has-shadow', size && "is-size-" + size, theme && "is-theme-" + theme, className);
  };

  _proto.renderShadow = function renderShadow() {
    var _this$props2 = this.props,
        placement = _this$props2.placement,
        shadow = _this$props2.shadow;
    return shadow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar3.default, {
      placement: placement
    }) : null;
  };

  _proto.render = function render() {
    var _this$props3 = this.props,
        children = _this$props3.children,
        className = _this$props3.className,
        placement = _this$props3.placement,
        shadow = _this$props3.shadow,
        seamless = _this$props3.seamless,
        size = _this$props3.size,
        theme = _this$props3.theme,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["children", "className", "placement", "shadow", "seamless", "size", "theme"]);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Toolbar4.WrapperUI, {
      className: "c-ToolbarWrapper",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar4.ToolbarUI, (0, _extends2.default)({}, rest, {
        className: this.getClassName(),
        children: children
      })), this.renderShadow()]
    });
  };

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

exports.Toolbar = Toolbar;
Toolbar.Block = _Toolbar.default;
Toolbar.Item = _Toolbar2.default;
Toolbar.Shadow = _Toolbar3.default;
Toolbar.className = 'c-Toolbar';
Toolbar.defaultProps = {
  'data-cy': 'Toolbar',
  placement: 'top',
  seamless: false,
  shadow: false,
  size: 'sm',
  theme: 'default'
};
Toolbar.propTypes = {
  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Determines the border placement on the component. */
  placement: _propTypes.default.oneOf(['top', 'bottom']),

  /** Renders a drop-shadow. */
  shadow: _propTypes.default.bool,

  /** Removes the border from the component. */
  seamless: _propTypes.default.bool,

  /** Determines the thematic colors of the component. */
  theme: _propTypes.default.oneOf(['default', 'note']),
  size: _propTypes.default.oneOf(['xl', 'lg', 'md', 'sm', 'xs']),

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