@primer/components/lib/StateLabel.js

Primer react components

"use strict";

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

var _octiconsReact = require("@primer/octicons-react");

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

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

var _styledSystem = require("styled-system");

var _constants = require("./constants");

var _StyledOcticon = _interopRequireDefault(require("./StyledOcticon"));

var _sx = _interopRequireDefault(require("./sx"));

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

const octiconMap = {
  issueOpened: _octiconsReact.IssueOpenedIcon,
  pullOpened: _octiconsReact.GitPullRequestIcon,
  issueClosed: _octiconsReact.IssueClosedIcon,
  pullClosed: _octiconsReact.GitPullRequestIcon,
  pullMerged: _octiconsReact.GitMergeIcon,
  draft: _octiconsReact.GitPullRequestIcon
};
const colorVariants = (0, _styledSystem.variant)({
  prop: 'status',
  variants: {
    issueClosed: {
      backgroundColor: 'prState.closed.bg',
      color: 'prState.closed.text',
      borderColor: 'prState.closed.border'
    },
    pullClosed: {
      backgroundColor: 'prState.closed.bg',
      color: 'prState.closed.text',
      borderColor: 'prState.closed.border'
    },
    pullMerged: {
      backgroundColor: 'prState.merged.bg',
      color: 'prState.merged.text',
      borderColor: 'prState.merged.border'
    },
    issueOpened: {
      backgroundColor: 'prState.open.bg',
      color: 'prState.open.text',
      borderColor: 'prState.open.border'
    },
    pullOpened: {
      backgroundColor: 'prState.open.bg',
      color: 'prState.open.text',
      borderColor: 'prState.open.border'
    },
    draft: {
      backgroundColor: 'prState.draft.bg',
      color: 'prState.draft.text',
      borderColor: 'prState.draft.border'
    }
  }
});
const sizeVariants = (0, _styledSystem.variant)({
  prop: 'variant',
  variants: {
    small: {
      paddingX: 2,
      paddingY: 1,
      fontSize: 0
    },
    normal: {
      paddingX: '12px',
      paddingY: 2,
      fontSize: 1
    }
  }
});

const StateLabelBase = _styledComponents.default.span.withConfig({
  displayName: "StateLabel__StateLabelBase",
  componentId: "k4pd9e-0"
})(["display:inline-flex;align-items:center;font-weight:", ";line-height:16px;color:", ";text-align:center;border-radius:", ";border-width:1px;border-style:solid;", ";", ";", ";", ";"], (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('radii.3'), colorVariants, sizeVariants, _constants.COMMON, _sx.default);

function StateLabel({
  children,
  status,
  variant: variantProp,
  ...rest
}) {
  const octiconProps = variantProp === 'small' ? {
    width: '1em'
  } : {};
  return /*#__PURE__*/_react.default.createElement(StateLabelBase, _extends({}, rest, {
    variant: variantProp,
    status: status
  }), status && /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, _extends({
    mr: 1
  }, octiconProps, {
    icon: octiconMap[status] || _octiconsReact.QuestionIcon
  })), children);
}

StateLabel.displayName = "StateLabel";
StateLabel.defaultProps = {
  variant: 'normal'
};
var _default = StateLabel;
exports.default = _default;