@primer/react/lib-esm/StateLabel/StateLabel.js

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import { AlertIcon, GitMergeQueueIcon, IssueDraftIcon, GitPullRequestDraftIcon, GitMergeIcon, GitPullRequestClosedIcon, SkipIcon, IssueClosedIcon, GitPullRequestIcon, IssueOpenedIcon, QuestionIcon } from '@primer/octicons-react';
import styled from 'styled-components';
import { variant } from 'styled-system';
import { get } from '../constants.js';
import sx from '../sx.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import Octicon from '../Octicon/Octicon.js';

const octiconMap = {
  issueOpened: IssueOpenedIcon,
  pullOpened: GitPullRequestIcon,
  issueClosed: IssueClosedIcon,
  issueClosedNotPlanned: SkipIcon,
  pullClosed: GitPullRequestClosedIcon,
  pullMerged: GitMergeIcon,
  draft: GitPullRequestDraftIcon,
  issueDraft: IssueDraftIcon,
  pullQueued: GitMergeQueueIcon,
  unavailable: AlertIcon,
  open: null,
  closed: null
};
const labelMap = {
  issueOpened: 'Issue',
  pullOpened: 'Pull request',
  issueClosed: 'Issue',
  issueClosedNotPlanned: 'Issue, not planned',
  pullClosed: 'Pull request',
  pullMerged: 'Pull request',
  draft: 'Pull request',
  issueDraft: 'Issue',
  pullQueued: 'Pull request',
  unavailable: '',
  open: '',
  closed: ''
};
const colorVariants = variant({
  prop: 'status',
  variants: {
    issueClosed: {
      backgroundColor: 'done.emphasis',
      color: 'fg.onEmphasis',
      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent)'
    },
    issueClosedNotPlanned: {
      backgroundColor: 'neutral.emphasis',
      color: 'fg.onEmphasis',
      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)'
    },
    pullClosed: {
      backgroundColor: 'closed.emphasis',
      color: 'fg.onEmphasis',
      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-closed-emphasis, transparent)'
    },
    pullMerged: {
      backgroundColor: 'done.emphasis',
      color: 'fg.onEmphasis',
      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent)'
    },
    pullQueued: {
      backgroundColor: 'attention.emphasis',
      color: 'fg.onEmphasis',
      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-attention-emphasis, transparent)'
    },
    issueOpened: {
      backgroundColor: 'open.emphasis',
      color: 'fg.onEmphasis',
      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent)'
    },
    pullOpened: {
      backgroundColor: 'open.emphasis',
      color: 'fg.onEmphasis',
      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent)'
    },
    draft: {
      backgroundColor: 'neutral.emphasis',
      color: 'fg.onEmphasis',
      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)'
    },
    issueDraft: {
      backgroundColor: 'neutral.emphasis',
      color: 'fg.onEmphasis',
      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)'
    },
    unavailable: {
      backgroundColor: 'neutral.emphasis',
      color: 'fg.onEmphasis',
      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)'
    },
    open: {
      backgroundColor: 'open.emphasis',
      color: 'fg.onEmphasis',
      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent)'
    },
    closed: {
      backgroundColor: 'done.emphasis',
      color: 'fg.onEmphasis',
      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent)'
    }
  }
});
const sizeVariants = variant({
  prop: 'variant',
  variants: {
    small: {
      paddingX: 2,
      paddingY: 1,
      fontSize: 0
    },
    normal: {
      paddingX: '12px',
      paddingY: 2,
      fontSize: 1
    }
  }
});
const StateLabelBase = styled.span.withConfig({
  displayName: "StateLabel__StateLabelBase",
  componentId: "sc-qthdln-0"
})(["display:inline-flex;align-items:center;font-weight:", ";line-height:16px;color:", ";text-align:center;border-radius:", ";", ";", ";", ";"], get('fontWeights.bold'), get('colors.canvas.default'), get('radii.3'), colorVariants, sizeVariants, sx);
function StateLabel(t0) {
  const $ = c(17);
  let children;
  let rest;
  let status;
  let t1;
  if ($[0] !== t0) {
    ({
      children,
      status,
      variant: t1,
      ...rest
    } = t0);
    $[0] = t0;
    $[1] = children;
    $[2] = rest;
    $[3] = status;
    $[4] = t1;
  } else {
    children = $[1];
    rest = $[2];
    status = $[3];
    t1 = $[4];
  }
  const variantProp = t1 === undefined ? "normal" : t1;
  let t2;
  if ($[5] !== variantProp) {
    t2 = variantProp === "small" ? {
      width: "1em"
    } : {};
    $[5] = variantProp;
    $[6] = t2;
  } else {
    t2 = $[6];
  }
  const octiconProps = t2;
  const noIconStatus = status === "open" || status === "closed";
  let t3;
  if ($[7] !== noIconStatus || $[8] !== octiconProps || $[9] !== status) {
    t3 = status && !noIconStatus && /*#__PURE__*/jsx(Octicon, {
      ...octiconProps,
      icon: octiconMap[status] || QuestionIcon,
      "aria-label": labelMap[status],
      sx: {
        mr: 1
      }
    });
    $[7] = noIconStatus;
    $[8] = octiconProps;
    $[9] = status;
    $[10] = t3;
  } else {
    t3 = $[10];
  }
  let t4;
  if ($[11] !== children || $[12] !== rest || $[13] !== status || $[14] !== t3 || $[15] !== variantProp) {
    t4 = /*#__PURE__*/jsxs(StateLabelBase, {
      ...rest,
      variant: variantProp,
      status: status,
      children: [t3, children]
    });
    $[11] = children;
    $[12] = rest;
    $[13] = status;
    $[14] = t3;
    $[15] = variantProp;
    $[16] = t4;
  } else {
    t4 = $[16];
  }
  return t4;
}

export { StateLabel as default };