@massds/mayflower-react/dist/Button/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"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
/**
 * Button module.
 * @module @massds/mayflower-react/Button
 */

var Button = function Button(button) {
  var _classNames;
  var buttonClasses = (0, _classnames["default"])((_classNames = {
    ma__button: true,
    'ma__button--uppercase': !button.uppercaseOverride
  }, _classNames["ma__button--" + button.usage] = button.usage, _classNames["ma__button--" + button.size] = button.size, _classNames["ma__button--" + button.theme] = button.theme, _classNames['ma__button--disabled'] = button.disabled, _classNames[button.classes.join(' ')] = button.classes, _classNames));
  var Element = button.href ? 'a' : 'button';
  var onClickCallback = function onClickCallback(e) {
    if (typeof button.onClick === 'function') {
      e.preventDefault();
      button.onClick(e);
    }
  };
  return /*#__PURE__*/_react["default"].createElement(Element, {
    className: buttonClasses,
    type: button.type,
    href: button.href,
    title: button.info,
    "aria-label": button.label,
    onClick: function onClick(e) {
      return onClickCallback(e);
    },
    disabled: button.disabled
  }, button.children ? button.children : button.text);
};
Button.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Custom click handler function. */
  onClick: _propTypes["default"].func,
  /** When populated with a url, this component renders an `<a>` vs a `<button>` */
  href: _propTypes["default"].string,
  /** The text which renders in the standard browser tooltip on hover */
  info: _propTypes["default"].string,
  /** Aria-label of the button */
  label: _propTypes["default"].string,
  /** Button or link 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']),
  /** Themes correspond to site color scheme i.e. sass variables */
  theme: _propTypes["default"].oneOf(['', 'c-primary-alt', 'c-highlight', 'c-gray-dark']),
  /** Button usage */
  usage: _propTypes["default"].oneOf(['', 'secondary', 'tertiary', 'quaternary']),
  /** Set `<button>` to disabled */
  disabled: _propTypes["default"].bool,
  /** Custom classnames appending to the button */
  classes: _propTypes["default"].arrayOf(_propTypes["default"].string),
  /** If true, the button text will use regular case */
  uppercaseOverride: _propTypes["default"].bool,
  children: _propTypes["default"].node
} : {};

// Only set defaults for the configuration variables which need to be opted in to activate.
Button.defaultProps = {
  href: '',
  type: '',
  size: '',
  theme: '',
  usage: '',
  disabled: false,
  classes: [''],
  uppercaseOverride: false
};
var _default = exports["default"] = Button;
module.exports = exports.default;