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

React versions of Mayflower design system UI components

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

/**
 * 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
 */
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames"; // eslint-disable-next-line import/no-unresolved

import IconSearch from "../Icon/IconSearch.mjs"; // eslint-disable-next-line import/no-unresolved

import IconChevron from "../Icon/IconChevron.mjs";

const ButtonWithIcon = props => {
  var _classNames;

  const _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, ["classes", "iconSize", "icon", "expanded", "capitalized", "usage", "theme", "setButtonRef", "text", "size"]);

  const buttonClasses = classNames((_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) === IconChevron, _classNames['ma__button-search'] = (icon === null || icon === void 0 ? void 0 : icon.type) === IconSearch, _classNames['ma__button-search--secondary'] = (icon === null || icon === void 0 ? void 0 : icon.type) === IconSearch && usage === 'secondary', _classNames["ma__button-icon--" + theme] = theme, _classNames["ma__button-icon--" + usage] = usage, _classNames[classes.join(' ')] = classes, _classNames));

  const buttonProps = _extends({}, rest, {
    className: buttonClasses,
    tabIndex: 0
  });

  const Element = rest.href ? 'a' : 'button';
  return /*#__PURE__*/React.createElement(Element, _extends({}, buttonProps, {
    ref: setButtonRef,
    "aria-expanded": expanded
  }), /*#__PURE__*/React.createElement("span", null, rest.children ? rest.children : text), icon && icon);
};

ButtonWithIcon.propTypes = process.env.NODE_ENV !== "production" ? {
  /** id for the button */
  id: PropTypes.string,

  /** button or link content rendered in a span */
  children: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),

  /** When populated with a url, this component renders a <a> vs a <button> */
  href: PropTypes.string,
  // Function to run on click of the button.
  onClick: PropTypes.func,
  // Sets a reference to the button onto the passed node.
  setButtonRef: PropTypes.oneOfType([// Either a function
  PropTypes.func, // Or the instance of a DOM native element (see the note about SSR)
  PropTypes.shape({
    current: PropTypes.object
  })]),
  // Button text.
  text: PropTypes.string,

  /** HTML `<button>` 'type' attribute  */
  type: PropTypes.oneOf(['submit', 'reset', 'button', '']),

  /** Create a smaller button */
  size: PropTypes.oneOf(['', 'small', 'large']),
  // Button classes.
  classes: PropTypes.arrayOf(PropTypes.string),
  // Icon to display within the button.
  icon: PropTypes.element,
  // Adds expanded class to button if true.
  expanded: PropTypes.bool,
  // Adds capitalized class to button if true.
  capitalized: PropTypes.bool,
  // Defines the size, default size fits the most square icons and "small" setting is specific for the chevron icon.
  iconSize: PropTypes.oneOf(['', 'small']),

  /** 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.string,

  /** Themes correspond to site color scheme i.e. sass variables */
  theme: PropTypes.oneOf(['', 'c-primary', 'c-highlight', 'c-gray-dark', 'c-black', 'c-white']),

  /** Button usage */
  usage: PropTypes.oneOf(['', 'secondary', 'tertiary', 'quaternary', 'quaternary-simple', 'alert']),

  /** Whether the button has a popup or not */
  'aria-haspopup': PropTypes.bool
} : {};
export default ButtonWithIcon;