@storybook/design-system/dist/components/tag/TagItem.js

Storybook design system

"use strict";

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

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

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

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

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

var _theming = require("@storybook/theming");

var _styles = require("../shared/styles");

var _animation = require("../shared/animation");

var _excluded = ["isLoading", "children"];

function randomString(min, max) {
  var length = Math.random() * (max - min) + min;
  return Math.round(Math.pow(36, length) + 1 - Math.random() * Math.pow(36, length)).toString(36).slice(1);
}

var TagItem = ( /*#__PURE__*/0, _theming.styled)(function (_ref) {
  var isLoading = _ref.isLoading,
      children = _ref.children,
      rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, rest, isLoading && {
    'aria-label': 'Loading tag'
  }), isLoading ? randomString(5, 12) : children);
}, process.env.NODE_ENV === "production" ? {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'theme' && prop !== 'as';
  },
  target: "esncmx60"
} : {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'theme' && prop !== 'as';
  },
  target: "esncmx60",
  label: "TagItem"
})("background:", _styles.color.bluelighter, ";border-color:transparent;border-radius:", _styles.spacing.borderRadius.small, "px;border-style:solid;border-width:1px;color:", _styles.color.darkest, ";display:inline-block;font-size:", _styles.typography.size.s2, "px;line-height:", _styles.typography.size.m1, "px;padding:6px 10px 4px 10px;position:relative;white-space:nowrap;", function (props) {
  return props.isLoading && /*#__PURE__*/(0, _theming.css)("cursor:progress!important;", _animation.inlineGlow, ";&:hover{color:transparent;}" + (process.env.NODE_ENV === "production" ? "" : ";label:TagItem;"));
}, ";");
exports.TagItem = TagItem;
TagItem.defaultProps = {
  isLoading: false
};