@massds/mayflower-react/dist/ButtonWithIcon/index.js

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _IconSearch = _interopRequireDefault(require("../Icon/IconSearch.js"));
var _IconCaretDown = _interopRequireDefault(require("../Icon/IconCaretDown.js"));
var _excluded = ["classes", "iconSize", "icon", "expanded", "capitalized", "usage", "theme", "setButtonRef", "text", "size"];
/**
 * ButtonWithIcon module.
 * @module @massds/mayflower-react/ButtonWithIcon
 * @requires module:@massds/mayflower-assets/scss/01-atoms/button-with-icon
 * @requires module:@massds/mayflower-assets/scss/01-atoms/button-search
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-icons
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-loc-icons
 */
// eslint-disable-next-line import/no-unresolved
// eslint-disable-next-line import/no-unresolved
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
var ButtonWithIcon = function ButtonWithIcon(props) {
  var _classNames;
  var _props$classes = props.classes,
    classes = _props$classes === void 0 ? [] : _props$classes,
    iconSize = props.iconSize,
    icon = props.icon,
    expanded = props.expanded,
    capitalized = props.capitalized,
    usage = props.usage,
    theme = props.theme,
    setButtonRef = props.setButtonRef,
    text = props.text,
    size = props.size,
    rest = _objectWithoutPropertiesLoose(props, _excluded);
  var buttonClasses = (0, _classnames["default"])((_classNames = {
    'ma__button-icon': true
  }, _classNames["ma__button-icon--" + size] = size, _classNames['ma__button-icon--expanded'] = expanded, _classNames['ma__button-icon--capitalized'] = capitalized, _classNames['ma__icon-small'] = iconSize === 'small' || (icon === null || icon === void 0 ? void 0 : icon.type) === _IconCaretDown["default"], _classNames['ma__button-search'] = (icon === null || icon === void 0 ? void 0 : icon.type) === _IconSearch["default"], _classNames['ma__button-search--secondary'] = (icon === null || icon === void 0 ? void 0 : icon.type) === _IconSearch["default"] && usage === 'secondary', _classNames["ma__button-icon--" + theme] = theme, _classNames["ma__button-icon--" + usage] = usage, _classNames[classes.join(' ')] = classes, _classNames));
  var buttonProps = _extends({}, rest, {
    className: buttonClasses,
    tabIndex: 0
  });
  var Element = rest.href ? 'a' : 'button';
  return /*#__PURE__*/_react["default"].createElement(Element, _extends({}, buttonProps, {
    ref: setButtonRef,
    "aria-expanded": expanded
  }), /*#__PURE__*/_react["default"].createElement("span", null, rest.children ? rest.children : text), icon && icon);
};
ButtonWithIcon.propTypes = process.env.NODE_ENV !== "production" ? {
  /** id for the button */
  id: _propTypes["default"].string,
  /** button or link content rendered in a span */
  children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].node]),
  /** When populated with a url, this component renders a <a> vs a <button> */
  href: _propTypes["default"].string,
  // Function to run on click of the button.
  onClick: _propTypes["default"].func,
  // Sets a reference to the button onto the passed node.
  setButtonRef: _propTypes["default"].oneOfType([
  // Either a function
  _propTypes["default"].func,
  // Or the instance of a DOM native element (see the note about SSR)
  _propTypes["default"].shape({
    current: _propTypes["default"].element
  })]),
  // Button text.
  text: _propTypes["default"].string,
  /** HTML `<button>` 'type' attribute  */
  type: _propTypes["default"].oneOf(['submit', 'reset', 'button', '']),
  /** Create a smaller button */
  size: _propTypes["default"].oneOf(['', 'small', 'large']),
  // Button classes.
  classes: _propTypes["default"].arrayOf(_propTypes["default"].string),
  // Icon to display within the button.
  icon: _propTypes["default"].element,
  // Adds expanded class to button if true.
  expanded: _propTypes["default"].bool,
  // Adds capitalized class to button if true.
  capitalized: _propTypes["default"].bool,
  /** The aria-label property is used to provide the label to any assistive
   * technologies. This is useful if the text value is not descriptive of the
   * button's functionality. */
  'aria-label': _propTypes["default"].string,
  /** Themes correspond to site color scheme i.e. sass variables */
  theme: _propTypes["default"].oneOf(['', 'c-primary', 'c-highlight', 'c-gray-dark', 'c-black', 'c-white']),
  /** Button usage */
  usage: _propTypes["default"].oneOf(['', 'secondary', 'tertiary', 'quaternary', 'quaternary-simple', 'alert']),
  /** Whether the button has a popup or not */
  'aria-haspopup': _propTypes["default"].bool
} : {};
var _default = exports["default"] = ButtonWithIcon;
module.exports = exports.default;