@dnanpm/styleguide/build/cjs/components/Label/Label.js

DNA Styleguide repository provides the set of components and theme object used in various DNA projects.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var React = require('react');
var styledComponents = require('styled-components');
var theme = require('../../themes/theme.js');
var styledUtils = require('../../utils/styledUtils.js');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefaultCompat(React);

const colorsMap = {
    campaign: theme.default.color.background.pink.E01,
    new: theme.default.color.background.lemon.default,
    presale: theme.default.color.background.orange.default,
    other: theme.default.color.background.sky.default,
};
const StyledLabel = styledComponents.styled.span `
    display: inline-block;
    color: ${theme.default.color.text.black};
    background-color: ${({ type }) => colorsMap[type]};
    font-size: ${theme.default.fontSize.s};
    font-weight: ${theme.default.fontWeight.bold};
    line-height: ${theme.default.lineHeight.s};
    padding: ${styledUtils.getDividedSize(theme.default.base.baseWidth, 5)}
        ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
    text-align: center;
    text-transform: uppercase;
    border-radius: ${theme.default.radius.pill};
    margin: 0;
`;
const Label = (_a) => {
    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
    const HeadingTag = props.headingLevel || 'span';
    return (React__default.default.createElement(StyledLabel, { as: HeadingTag, type: props.type, className: props.className, "data-testid": dataTestId }, props.children));
};

exports.default = Label;