@massds/mayflower-react/dist/Button/index.mjs

React versions of Mayflower design system UI components

/**
 * Button module.
 * @module @massds/mayflower-react/Button
 */
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
const Button = button => {
  var _classNames;
  const buttonClasses = classNames((_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));
  const Element = button.href ? 'a' : 'button';
  const onClickCallback = e => {
    if (typeof button.onClick === 'function') {
      e.preventDefault();
      button.onClick(e);
    }
  };
  return /*#__PURE__*/React.createElement(Element, {
    className: buttonClasses,
    type: button.type,
    href: button.href,
    title: button.info,
    "aria-label": button.label,
    onClick: e => onClickCallback(e),
    disabled: button.disabled
  }, button.children ? button.children : button.text);
};
Button.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Custom click handler function. */
  onClick: PropTypes.func,
  /** When populated with a url, this component renders an `<a>` vs a `<button>` */
  href: PropTypes.string,
  /** The text which renders in the standard browser tooltip on hover */
  info: PropTypes.string,
  /** Aria-label of the button */
  label: PropTypes.string,
  /** Button or link text */
  text: PropTypes.string,
  /** HTML button 'type' attribute  */
  type: PropTypes.oneOf(['submit', 'reset', 'button', '']),
  /** Create a smaller button */
  size: PropTypes.oneOf(['', 'small', 'large']),
  /** Themes correspond to site color scheme i.e. sass variables */
  theme: PropTypes.oneOf(['', 'c-primary-alt', 'c-highlight', 'c-gray-dark']),
  /** Button usage */
  usage: PropTypes.oneOf(['', 'secondary', 'tertiary', 'quaternary']),
  /** Set `<button>` to disabled */
  disabled: PropTypes.bool,
  /** Custom classnames appending to the button */
  classes: PropTypes.arrayOf(PropTypes.string),
  /** If true, the button text will use regular case */
  uppercaseOverride: PropTypes.bool,
  children: PropTypes.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
};
export default Button;