cinnecta-ui/lib/components/Tag.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _withStyles = require("../helpers/withStyles");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var Tag = function Tag(_ref) {
  var children = _ref.children,
      css = _ref.css,
      label = _ref.label,
      styles = _ref.styles;
  return _react.default.createElement("div", css(styles.tag), children || label);
};

var TagWithStyles = (0, _withStyles.withStyles)(function (_ref2) {
  var color = _ref2.color,
      units = _ref2.units,
      font = _ref2.font,
      fontSize = _ref2.fontSize,
      radius = _ref2.radius,
      breakpoint = _ref2.breakpoint;
  return {
    tag: _defineProperty({
      appearance: 'none',
      borderWidth: 0,
      background: color.blueGrayLighter,
      display: 'inline-block',
      paddingTop: 5,
      paddingRight: 8,
      paddingBottom: 5,
      paddingLeft: 8,
      borderRadius: radius,
      fontSize: fontSize.small.small,
      color: color.blueGrayDark,
      outline: 0,
      position: 'relative',
      marginLeft: units(0.125),
      marginRight: units(0.125),
      marginBottom: units(0.5),
      fontWeight: 500,
      lineHeight: 1,
      fontFamily: font.default,
      boxSizing: 'border-box',
      overflow: 'hidden',
      whiteSpace: 'nowrap'
    }, breakpoint.large, {
      fontSize: fontSize.large.small
    }),
    tag_soft: {
      background: color.blueGrayLighter,
      color: color.primary
    },
    tag_mono: {
      background: color.transparent,
      borderColor: color.black,
      borderWidth: 1,
      borderStyle: 'solid',
      color: color.black
    },
    tag_primary: {
      background: color.primary
    },
    tag_secondary: {
      background: color.transparent,
      borderColor: color.secondary,
      borderWidth: 1,
      borderStyle: 'solid',
      color: color.secondary
    },
    tag_inverse: {
      background: color.white,
      color: color.primary,
      borderWidth: 0
    },
    tag_outline: {}
  };
})(Tag);
var _default = TagWithStyles;
exports.default = _default;