@cbinsights/fds/lib/components/Button/index.js

Form: A design system by CB Insights

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.THEMES = exports.SIZES = exports.Button = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireWildcard(require("react"));

var _classcat = _interopRequireDefault(require("classcat"));

var _baseElement = _interopRequireDefault(require("../../util/baseElement"));

var _react2 = require("../../icons/react");

var _excluded = ["theme", "size", "IconLeft", "IconRight", "Link", "disabled", "label", "isActive", "isLoading", "isDestructive", "isFullWidth", "hasCaret", "isBreakoutLink", "href"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var SIZES = ['s', 'm'];
exports.SIZES = SIZES;
var THEMES = ['blue', 'orange', 'outlined', 'outlined--blue', 'ghost'];
exports.THEMES = THEMES;
var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
  var _ref$theme = _ref.theme,
      theme = _ref$theme === void 0 ? 'blue' : _ref$theme,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'm' : _ref$size,
      IconLeft = _ref.IconLeft,
      IconRight = _ref.IconRight,
      Link = _ref.Link,
      disabled = _ref.disabled,
      label = _ref.label,
      isActive = _ref.isActive,
      isLoading = _ref.isLoading,
      isDestructive = _ref.isDestructive,
      isFullWidth = _ref.isFullWidth,
      hasCaret = _ref.hasCaret,
      isBreakoutLink = _ref.isBreakoutLink,
      href = _ref.href,
      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var Element = (0, _baseElement.default)({
    href: href,
    onClick: true,
    as: Link
  });

  var IconComponent = function IconComponent(_ref2) {
    var direction = _ref2.direction;
    var Icon = direction === 'left' ? IconLeft : IconRight;
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Icon && /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _classcat.default)([{
        'fdsButton--hidden': isLoading
      }, 'alignChild--center--center', "fdsButton-icon--".concat(direction)])
    }, /*#__PURE__*/_react.default.createElement(Icon, {
      customSize: size === 's' ? 16 : 18
    })));
  };

  var Icons = function Icons() {
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(IconComponent, {
      direction: "left"
    }), /*#__PURE__*/_react.default.createElement(IconComponent, {
      direction: "right"
    }));
  };

  return /*#__PURE__*/_react.default.createElement(Element, (0, _extends2.default)({}, rest, {
    ref: ref,
    className: (0, _classcat.default)([{
      'fdsButton--isDestructive': isDestructive,
      'fdsButton--loading': isLoading,
      'fdsButton--disabled': disabled,
      'fdsButton--isFullWidth': isFullWidth,
      'fdsButton--isActive': isActive && !disabled,
      breakoutLink: isBreakoutLink
    }, 'fdsButton', 'display--inlineFlex', 'rounded--all', 'alignChild--center--center', 'border--focus--noTransition', 'transition--default', "fdsButton--".concat(size), "fdsButton--".concat(theme)]),
    disabled: disabled && Element === 'button',
    href: href
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: "display--inlineFlex fdsButton--loading-spinnerWrapper"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classcat.default)({
      'fdsButton--loading-spinner': isLoading
    })
  }), /*#__PURE__*/_react.default.createElement("span", {
    className: (0, _classcat.default)([{
      'fdsButton--hidden': isLoading
    }, 'fdsButton-label'])
  }, label), /*#__PURE__*/_react.default.createElement(Icons, null), hasCaret && /*#__PURE__*/_react.default.createElement("div", {
    className: "margin--left--s alignChild--center--center"
  }, /*#__PURE__*/_react.default.createElement(_react2.CaretDownIcon, {
    customSize: 12
  }))));
});
exports.Button = Button;
Button.displayName = 'Button';
var _default = Button;
exports.default = _default;