@redocly/theme/lib/components/Tag/Tag.js

Shared UI components lib

"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ContentWrapper = void 0;
exports.Tag = Tag;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
function Tag(_a) {
    var { children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)' } = _a, otherProps = __rest(_a, ["children", "color", "icon", "active", "closable", "tabIndex", "onClick", "onKeyDown", "onClose", "size", "borderless", "withStatusDot", "statusDotColor"]);
    return (react_1.default.createElement(TagWrapper, Object.assign({ tabIndex: tabIndex, "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick, onKeyDown: onKeyDown, hasCloseButton: closable }, otherProps),
        withStatusDot ? react_1.default.createElement(StatusDot, { color: statusDotColor }) : icon ? icon : null,
        react_1.default.createElement(exports.ContentWrapper, null, children),
        closable && (react_1.default.createElement(CloseButton, { onClick: (event) => {
                onClose === null || onClose === void 0 ? void 0 : onClose(event);
            } },
            react_1.default.createElement(CloseIcon_1.CloseIcon, null))),
        active && react_1.default.createElement(ActiveIcon, null)));
}
exports.ContentWrapper = styled_components_1.default.div `
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-wrap: nowrap;

  padding: var(--tag-content-padding);
  gap: var(--tag-content-gap);
`;
const CloseButton = styled_components_1.default.div `
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  border-radius: 0 var(--tag-border-radius) var(--tag-border-radius) 0;

  &:hover {
    background: var(--tag-close-button-bg-color-hover);
  }
`;
const TagWrapper = styled_components_1.default.div.attrs(({ className, color, size }) => ({
    className: (className || '') +
        ` tag-default ${color ? `tag-${color}` : ''} ${size ? `tag-size-${size}` : ''}`,
})) `
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-wrap: nowrap;
  position: relative;

  padding: var(--tag-padding);
  ${({ hasCloseButton }) => (hasCloseButton ? 'padding-right: 0;' : '')};
  margin: var(--tag-margin);

  &:last-child {
    margin-right: 0;
  }

  gap: var(--tag-gap);

  font-size: var(--tag-font-size);
  font-family: var(--tag-font-family);
  font-weight: var(--tag-font-weight);
  line-height: var(--tag-line-height);
  box-shadow: var(--tag-box-shadow);
  text-transform: var(--tag-text-transform);

  color: var(--tag-color);
  background-color: var(--tag-bg-color);
  ${({ borderless }) => borderless
    ? ''
    : 'border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);'}
  border-radius: var(--tag-border-radius);
`;
const StatusDot = styled_components_1.default.div `
  display: inline-block;
  width: var(--tag-badge-size);
  height: var(--tag-badge-size);
  border: var(--tag-badge-border-width) solid var(--tag-badge-border-color);
  border-radius: 50%;
  background-color: ${({ color }) => color};
`;
const ActiveIcon = (0, styled_components_1.default)(CheckmarkFilledIcon_1.CheckmarkFilledIcon) `
  width: 12px;
  height: 12px;
  position: absolute;
  right: -4px;
  top: -4px;
`;
//# sourceMappingURL=Tag.js.map