@age/quantum/Skeleton/sub-components/SkeletonTag.js

Catho react components

"use strict";

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _SkeletonBase = _interopRequireDefault(require("./SkeletonBase"));

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

var SkeletonTag = (0, _styledComponents.default)(_SkeletonBase.default).withConfig({
  displayName: "SkeletonTag",
  componentId: "xoddcf-0"
})(["border-radius:8px;margin-right:8px;", ""], function (_ref) {
  var size = _ref.size,
      _ref$theme = _ref.theme,
      baseFontSize = _ref$theme.baseFontSize,
      xxsmall = _ref$theme.spacing.xxsmall;
  var padding = xxsmall * 2;
  var heights = {
    small: baseFontSize * 0.875,
    medium: baseFontSize * 1.125,
    large: baseFontSize * 1.25
  };
  return "height: ".concat(heights[size] + padding, "px;");
});
SkeletonTag.displayName = 'SkeletonTag';
SkeletonTag.propTypes = {
  size: _propTypes.default.oneOf(['small', 'medium', 'large']).isRequired,
  theme: _propTypes.default.shape({
    baseFontSize: _propTypes.default.number,
    spacing: _propTypes.default.object
  }).isRequired
};
var _default = SkeletonTag;
exports.default = _default;