@procore/core-react/dist/Button/Button.js

React library of Procore Design Guidelines

var _excluded = ["block", "children", "disabled", "icon", "iconRight", "loading", "size", "type", "variant"],
  _excluded2 = ["block", "children", "disabled", "href", "icon", "iconRight", "size", "variant"];
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React from 'react';
import { useEventListener } from '../_hooks/EventListener';
import { mergeRefs } from '../_utils/mergeRefs';
import { StyledButton, StyledContent, StyledLabel, StyledLinkButton, StyledSpinner } from './Button.styles';
var SPINNER_VARIANT = {
  primary: 'white',
  secondary: 'gray15',
  tertiary: 'gray15',
  tertiaryContrast: 'gray15',
  UNSAFE_helixNav: 'white'
};
function warnIfIconOnlyButtonLacksAccessibleName(componentName, icon, iconRight, children, ariaLabel, ariaLabelledby) {
  if (process.env.NODE_ENV !== 'production') {
    var hasIcon = icon || iconRight;
    var hasChildren = React.Children.count(children) > 0;
    var hasAriaLabel = !!ariaLabel || !!ariaLabelledby;
    if (hasIcon && !hasChildren && !hasAriaLabel) {
      console.warn("".concat(componentName, ": Icon-only buttons must have an accessible name. ") + "Add an `aria-label` or `aria-labelledby` prop to describe the button's purpose.");
    }
  }
}
var ButtonContent = function ButtonContent(_ref) {
  var children = _ref.children,
    icon = _ref.icon,
    iconRight = _ref.iconRight,
    size = _ref.size,
    variant = _ref.variant;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledContent, null, /*#__PURE__*/React.isValidElement(icon) ? /*#__PURE__*/React.cloneElement(icon, _defineProperty({}, 'data-icon-prop', 'true')) : null, React.Children.map(children, function (child) {
    return /*#__PURE__*/React.createElement(StyledLabel, null, child);
  }), /*#__PURE__*/React.isValidElement(iconRight) ? /*#__PURE__*/React.cloneElement(iconRight, _defineProperty({}, 'data-icon-prop', 'true')) : null), /*#__PURE__*/React.createElement(StyledSpinner, {
    size: size === 'lg' ? 'md' : 'sm',
    color: variant ? SPINNER_VARIANT[variant] : 'gray15'
  }));
};

/**

 We use buttons to link to other pages or to trigger an action.
 Buttons clearly define what happens when a user clicks it.

 @since 10.19.0

 @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-button--demo)

 @see [Design Guidelines](https://design.procore.com/button)

 */
export var Button = /*#__PURE__*/React.forwardRef(function Button(_ref2, ref) {
  var _ref2$block = _ref2.block,
    block = _ref2$block === void 0 ? false : _ref2$block,
    children = _ref2.children,
    _ref2$disabled = _ref2.disabled,
    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
    icon = _ref2.icon,
    iconRight = _ref2.iconRight,
    _ref2$loading = _ref2.loading,
    loading = _ref2$loading === void 0 ? false : _ref2$loading,
    _ref2$size = _ref2.size,
    size = _ref2$size === void 0 ? 'md' : _ref2$size,
    _ref2$type = _ref2.type,
    type = _ref2$type === void 0 ? 'button' : _ref2$type,
    _ref2$variant = _ref2.variant,
    variant = _ref2$variant === void 0 ? 'primary' : _ref2$variant,
    props = _objectWithoutProperties(_ref2, _excluded);
  warnIfIconOnlyButtonLacksAccessibleName('Button', icon, iconRight, children, props['aria-label'], props['aria-labelledby']);
  return /*#__PURE__*/React.createElement(StyledButton, _extends({
    "data-a11y-skip": variant === 'primary' ? 'color-contrast' : undefined,
    tabIndex: 0
  }, props, {
    $block: block,
    disabled: disabled || loading,
    $loading: loading,
    $size: size,
    $variant: variant,
    type: type,
    ref: ref
  }), /*#__PURE__*/React.createElement(ButtonContent, {
    icon: icon,
    iconRight: iconRight,
    size: size,
    variant: variant
  }, children));
});
export var LinkButton = /*#__PURE__*/React.forwardRef(function LinkButton(_ref3, ref) {
  var _ref3$block = _ref3.block,
    block = _ref3$block === void 0 ? false : _ref3$block,
    children = _ref3.children,
    disabled_ = _ref3.disabled,
    href_ = _ref3.href,
    icon = _ref3.icon,
    iconRight = _ref3.iconRight,
    _ref3$size = _ref3.size,
    size = _ref3$size === void 0 ? 'md' : _ref3$size,
    _ref3$variant = _ref3.variant,
    variant = _ref3$variant === void 0 ? 'primary' : _ref3$variant,
    props = _objectWithoutProperties(_ref3, _excluded2);
  warnIfIconOnlyButtonLacksAccessibleName('LinkButton', icon, iconRight, children, props['aria-label'], props['aria-labelledby']);
  var innerRef = React.useRef(null);
  var mimicButtonRole = function mimicButtonRole(e) {
    var key = e.key;
    if (['Enter', 'Spacebar', ' '].indexOf(key) >= 0) {
      var _innerRef$current;
      // Prevents the page to scroll when "space" is pressed
      e.preventDefault();
      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.click();
    }
  };
  useEventListener({
    event: 'keydown',
    handler: mimicButtonRole,
    scope: innerRef
  });
  var disabled = props.as ? !!disabled_ : disabled_ || !href_;
  var href = disabled ? undefined : href_;
  return /*#__PURE__*/React.createElement(StyledLinkButton, _extends({
    "data-a11y-skip": variant === 'primary' ? 'color-contrast' : undefined,
    role: "button"
  }, props, {
    "aria-disabled": disabled,
    href: href,
    $disabled: disabled,
    $block: block,
    $size: size,
    $variant: variant,
    ref: mergeRefs(ref, innerRef)
  }), /*#__PURE__*/React.createElement(ButtonContent, {
    icon: icon,
    iconRight: iconRight,
    size: size,
    variant: variant
  }, children));
});
//# sourceMappingURL=Button.js.map