@cimpress/react-components
Version:
React components to support the MCP styleguide
55 lines • 1.93 kB
JavaScript
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;
};
import { css, cx } from '@emotion/css';
import React from 'react';
import cvar from './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) => css `
color: ${cvar('color-text-inverse')};
padding: ${cvar(paddingTopBottomMap[size])} ${cvar(paddingTLeftRightMap[size])};
font: ${cvar(fontMap[size])};
background-color: ${cvar(backgroundColorMap[status])};
display: inline-block;
border-radius: ${cvar(borderRadiusMap[size])};
`;
export const Label = (_a) => {
var { className, text, status, size } = _a, props = __rest(_a, ["className", "text", "status", "size"]);
return (React.createElement("span", Object.assign({ className: cx('crc-label', labelCss(status || 'default', size || 'default'), className) }, props), text));
};
//# sourceMappingURL=Label.js.map