Add pullQueued state to StateLabel (#3244)

* Add pullQueued state to StateLabel

* Add snapshot for queued state

* Add changeset

* Correct status in docs

Co-authored-by: Josh Black <[email protected]>

---------

Co-authored-by: Josh Black <[email protected]>

Author: Bestra

.changeset/happy-rings-arrive.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add pullQueued state to StateLabel

docs/content/StateLabel.mdx

@@ -18,6 +18,7 @@ import data from '../../src/StateLabel/StateLabel.docs.json'
   <StateLabel status="pullOpened">Open</StateLabel>
   <StateLabel status="pullClosed">Closed</StateLabel>
   <StateLabel status="pullMerged">Merged</StateLabel>
+  <StateLabel status="pullQueued">Queued</StateLabel>
   <StateLabel status="draft">Draft</StateLabel>
   <StateLabel status="issueDraft">Draft</StateLabel>
 </>

src/StateLabel/StateLabel.features.stories.tsx

@@ -16,6 +16,7 @@ export const IssueDraft = () => <StateLabel status="issueDraft">Draft</StateLabe
 export const PullOpened = () => <StateLabel status="pullOpened">Open</StateLabel>
 export const PullClosed = () => <StateLabel status="pullClosed">Closed</StateLabel>
 export const PullMerged = () => <StateLabel status="pullMerged">Merged</StateLabel>
+export const Queued = () => <StateLabel status="pullQueued">Queued</StateLabel>
 export const Draft = () => <StateLabel status="draft">Draft</StateLabel>
 
 export const Small = () => (

src/StateLabel/StateLabel.tsx

@@ -6,6 +6,7 @@ import {
   IssueDraftIcon,
   IssueOpenedIcon,
   QuestionIcon,
+  GitMergeQueueIcon,
 } from '@primer/octicons-react'
 import React from 'react'
 import styled from 'styled-components'
@@ -24,6 +25,7 @@ const octiconMap = {
   pullMerged: GitMergeIcon,
   draft: GitPullRequestIcon,
   issueDraft: IssueDraftIcon,
+  pullQueued: GitMergeQueueIcon,
 }
 
 const colorVariants = variant({
@@ -45,6 +47,10 @@ const colorVariants = variant({
       backgroundColor: 'done.emphasis',
       color: 'fg.onEmphasis',
     },
+    pullQueued: {
+      backgroundColor: 'attention.emphasis',
+      color: 'fg.onEmphasis',
+    },
     issueOpened: {
       backgroundColor: 'open.emphasis',
       color: 'fg.onEmphasis',

src/StateLabel/__tests__/StateLabel.test.tsx

@@ -32,6 +32,7 @@ describe('StateLabel', () => {
     expect(render(<StateLabel status="issueClosed" />)).toMatchSnapshot()
     expect(render(<StateLabel status="issueClosedNotPlanned" />)).toMatchSnapshot()
     expect(render(<StateLabel status="pullMerged" />)).toMatchSnapshot()
+    expect(render(<StateLabel status="pullQueued" />)).toMatchSnapshot()
   })
 
   it('respects the variant prop', () => {

src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap

@@ -350,6 +350,62 @@ exports[`StateLabel respects the status prop 4`] = `
 </span>
 `;
 
+exports[`StateLabel respects the status prop 5`] = `
+.c1 {
+  margin-right: 4px;
+}
+
+.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-weight: 600;
+  line-height: 16px;
+  color: #ffffff;
+  text-align: center;
+  border-radius: 100px;
+  background-color: #9a6700;
+  color: #ffffff;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  font-size: 14px;
+}
+
+<span
+  className="c0"
+>
+  <svg
+    aria-hidden="true"
+    className="c1"
+    fill="currentColor"
+    focusable="false"
+    height={16}
+    role="img"
+    style={
+      {
+        "display": "inline-block",
+        "overflow": "visible",
+        "userSelect": "none",
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 16 16"
+    width={16}
+  >
+    <path
+      d="M3.75 4.5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM3 7.75a.75.75 0 0 1 1.5 0v2.878a2.251 2.251 0 1 1-1.5 0Zm.75 5.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm5-7.75a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm5.75 2.5a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-1.5 0a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"
+    />
+  </svg>
+</span>
+`;
+
 exports[`StateLabel respects the variant prop 1`] = `
 .c1 {
   margin-right: 4px;