@cimpress/react-components/dist/src/Label.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.Label = void 0;
const css_1 = require("@emotion/css");
const react_1 = __importDefault(require("react"));
const cvar_1 = __importDefault(require("./theme/cvar"));
const backgroundColorMap = {
    success: 'color-background-success',
    info: 'color-background-info',
    warning: 'color-background-warning',
    danger: 'color-background-error',
    default: 'color-interactive',
    primary: 'color-interactive',
};
const paddingTopBottomMap = {
    sm: 'spacing-2',
    lg: 'spacing-4',
    default: 'spacing-4',
};
const paddingTLeftRightMap = {
    sm: 'spacing-8',
    lg: 'spacing-16',
    default: 'spacing-12',
};
const fontMap = {
    sm: 'text-label-small',
    lg: 'text-label-large',
    default: 'text-label-default',
};
const borderRadiusMap = {
    sm: 'spacing-8',
    lg: 'spacing-16',
    default: 'spacing-12',
};
const labelCss = (status, size) => (0, css_1.css) `
  color: ${(0, cvar_1.default)('color-text-inverse')};
  padding: ${(0, cvar_1.default)(paddingTopBottomMap[size])} ${(0, cvar_1.default)(paddingTLeftRightMap[size])};
  font: ${(0, cvar_1.default)(fontMap[size])};
  background-color: ${(0, cvar_1.default)(backgroundColorMap[status])};
  display: inline-block;
  border-radius: ${(0, cvar_1.default)(borderRadiusMap[size])};
`;
const Label = (_a) => {
    var { className, text, status, size } = _a, props = __rest(_a, ["className", "text", "status", "size"]);
    return (react_1.default.createElement("span", Object.assign({ className: (0, css_1.cx)('crc-label', labelCss(status || 'default', size || 'default'), className) }, props), text));
};
exports.Label = Label;
//# sourceMappingURL=Label.js.map