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

Form: A design system by CB Insights

"use strict";

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

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

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

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

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

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

var _DenyIcon = _interopRequireDefault(require("../../icons/react/DenyIcon"));

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

var _excluded = ["size", "theme", "Link", "Icon", "isActive", "label", "subtitle", "onClose"];
var THEMES = ['blue', 'gray', 'outline'];
exports.THEMES = THEMES;
var SIZES = ['s', 'm'];
exports.SIZES = SIZES;

var Chip = function Chip(_ref) {
  var _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'm' : _ref$size,
      _ref$theme = _ref.theme,
      theme = _ref$theme === void 0 ? 'gray' : _ref$theme,
      Link = _ref.Link,
      Icon = _ref.Icon,
      isActive = _ref.isActive,
      label = _ref.label,
      subtitle = _ref.subtitle,
      onClose = _ref.onClose,
      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var Element = (0, _baseElement.default)({
    href: rest.href,
    onClick: true,
    as: Link
  });
  var rootClass = (0, _classcat.default)([{
    'fdsChip--active': isActive
  }, 'fdsChip', 'border--focus--noTransition', 'transition--default', "fdsChip--".concat(size), "fdsChip--".concat(theme)]);
  return /*#__PURE__*/_react.default.createElement(Element, (0, _extends2.default)({}, rest, {
    className: rootClass
  }), Icon && /*#__PURE__*/_react.default.createElement("div", {
    className: "fdsChip-icon"
  }, /*#__PURE__*/_react.default.createElement(Icon, {
    customSize: size === 'm' ? 16 : 14
  })), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", {
    className: "fdsChip-label"
  }, label), subtitle && /*#__PURE__*/_react.default.createElement("span", {
    className: "fdsChip-subtitle"
  }, subtitle)), onClose && /*#__PURE__*/_react.default.createElement("span", {
    role: "button",
    tabIndex: 0,
    className: "fdsChip-close border--focus",
    onClick: function onClick(e) {
      onClose(e);
      e.stopPropagation();
      e.preventDefault();
    }
  }, /*#__PURE__*/_react.default.createElement(_DenyIcon.default, {
    customSize: 10
  })));
};

var _default = Chip;
exports.default = _default;