@cimpress/react-components/dist/src/Tag.js

React components to support the MCP styleguide

"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.Tag = void 0;
const react_1 = __importDefault(require("react"));
const css_1 = require("@emotion/css");
const cvar_1 = __importDefault(require("./theme/cvar"));
const internal_1 = require("./internal");
const tagBase = (0, css_1.css) `
  display: inline-flex;
  align-items: center;
  background-color: ${(0, cvar_1.default)('color-background')};
  border: 1px solid ${(0, cvar_1.default)('color-border-default')};
  border-radius: ${(0, cvar_1.default)('spacing-24')};
  padding: calc((${(0, cvar_1.default)('spacing-24')} - ${(0, cvar_1.default)('line-height-default')} - 2px) / 2) ${(0, cvar_1.default)('spacing-12')};
  font: ${(0, cvar_1.default)('text-label-default')};
  color: ${(0, cvar_1.default)('color-text-label')};
  &:hover {
    border: 1px solid ${(0, cvar_1.default)('color-button-primary')};
  }
`;
const tagLarge = (0, css_1.css) `
  font: ${(0, cvar_1.default)('text-label-large')};
  padding: calc((${(0, cvar_1.default)('spacing-32')} - ${(0, cvar_1.default)('line-height-large')} - 2px) / 2) ${(0, cvar_1.default)('spacing-16')};
  border-radius: ${(0, cvar_1.default)('spacing-32')};
`;
const tagSmall = (0, css_1.css) `
  font: ${(0, cvar_1.default)('text-label-small')};
  padding: calc((${(0, cvar_1.default)('spacing-16')} - ${(0, cvar_1.default)('line-height-small')} - 2px) / 2) ${(0, cvar_1.default)('spacing-8')};
  border-radius: ${(0, cvar_1.default)('spacing-16')};
`;
const counterBase = (0, css_1.css) `
  display: inline-flex;
  align-items: center;
  background-color: ${(0, cvar_1.default)('color-button-primary')};
  border-radius: 4px;
  padding: calc((${(0, cvar_1.default)('spacing-24')} - ${(0, cvar_1.default)('line-height-default')}) / 2) ${(0, cvar_1.default)('spacing-12')};
  font: ${(0, cvar_1.default)('text-label-default')};
  color: ${(0, cvar_1.default)('color-text-inverse')};
`;
const counterLarge = (0, css_1.css) `
  font: ${(0, cvar_1.default)('text-label-large')};
  padding: calc((${(0, cvar_1.default)('spacing-32')} - ${(0, cvar_1.default)('line-height-large')}) / 2) ${(0, cvar_1.default)('spacing-16')};
`;
const counterSmall = (0, css_1.css) `
  font: ${(0, cvar_1.default)('text-label-small')};
  padding: calc((${(0, cvar_1.default)('spacing-16')} - ${(0, cvar_1.default)('line-height-small')}) / 2) ${(0, cvar_1.default)('spacing-8')};
`;
function Tag(props) {
    const handleClick = () => {
        props.onRemoveClick && props.onRemoveClick(props.value);
    };
    const { className = '', label, onRemoveClick, removable, size: tagSize = 'default', value, variant = 'default' } = props, rest = __rest(props, ["className", "label", "onRemoveClick", "removable", "size", "value", "variant"]); // eslint-disable-line no-unused-vars
    const buttonIconSize = {
        sm: 8,
        default: 12,
        lg: 16,
    };
    const buttonSize = {
        sm: (0, cvar_1.default)('spacing-8'),
        default: (0, cvar_1.default)('spacing-12'),
        lg: (0, cvar_1.default)('spacing-16'),
    };
    const removeButton = (0, css_1.css) `
    height: ${buttonSize[tagSize]};
    width: ${buttonSize[tagSize]};
    color: ${(0, cvar_1.default)('color-button-primary')};
    margin-left: ${(0, cvar_1.default)('spacing-16')};
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
  `;
    const isTag = variant === 'default';
    const isCounter = variant === 'counter';
    const tagClass = (0, css_1.cx)('crc-tag', {
        [tagBase]: isTag,
        [tagLarge]: isTag && tagSize === 'lg',
        [tagSmall]: isTag && tagSize === 'sm',
        [counterBase]: isCounter,
        [counterLarge]: isCounter && tagSize === 'lg',
        [counterSmall]: isCounter && tagSize === 'sm',
    }, className);
    return (react_1.default.createElement("span", Object.assign({ className: tagClass }, rest),
        label !== undefined ? label : value,
        removable && (react_1.default.createElement("button", { className: removeButton, onClick: handleClick },
            react_1.default.createElement(internal_1.Close, { color: (0, cvar_1.default)('color-button-primary'), width: `${buttonIconSize[tagSize]}px` })))));
}
exports.Tag = Tag;
//# sourceMappingURL=Tag.js.map