Updated StateLabel to include issueClosedNotPlanned and fix issueClosed colour (#2171)

* Updated StateLabel

* Add changeset

* Update test

* Update the test suites

Author: Andrew L

.changeset/chilly-frogs-act.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Support issues closed as not planned, and correct the standard issue closed backgroud colour

docs/content/StateLabel.md

@@ -12,6 +12,7 @@ Use StateLabel components to show the status of an issue or pull request.
 <>
   <StateLabel status="issueOpened">Open</StateLabel>
   <StateLabel status="issueClosed">Closed</StateLabel>
+  <StateLabel status="issueClosedNotPlanned">Closed</StateLabel>
   <StateLabel status="pullOpened">Open</StateLabel>
   <StateLabel status="pullClosed">Closed</StateLabel>
   <StateLabel status="pullMerged">Merged</StateLabel>
@@ -22,8 +23,8 @@ Use StateLabel components to show the status of an issue or pull request.
 
 ## Component props
 
-| Name    | Type              | Default  | Description                                                                                                    |
-| :------ | :---------------- | :------: | :------------------------------------------------------------------------------------------------------------- |
-| variant | String            | 'normal' | a value of `small` or `normal` results in a smaller or larger version of the StateLabel.                       |
-| status  | String            |          | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed`, `pullMerged`, `draft` or `issueDraft`. |
-| sx      | SystemStyleObject |    {}    | Style to be applied to the component                                                                           |
+| Name    | Type              | Default  | Description                                                                                                                             |
+| :------ | :---------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------------------- |
+| variant | String            | 'normal' | a value of `small` or `normal` results in a smaller or larger version of the StateLabel.                                                |
+| status  | String            |          | Can be one of `issueOpened`, `issueClosed`, `issueClosedNotPlanned`, `pullOpened`, `pullClosed`, `pullMerged`, `draft` or `issueDraft`. |
+| sx      | SystemStyleObject |    {}    | Style to be applied to the component                                                                                                    |

src/StateLabel.tsx

@@ -2,6 +2,7 @@ import {
   GitMergeIcon,
   GitPullRequestIcon,
   IssueClosedIcon,
+  SkipIcon,
   IssueDraftIcon,
   IssueOpenedIcon,
   QuestionIcon
@@ -18,6 +19,7 @@ const octiconMap = {
   issueOpened: IssueOpenedIcon,
   pullOpened: GitPullRequestIcon,
   issueClosed: IssueClosedIcon,
+  issueClosedNotPlanned: SkipIcon,
   pullClosed: GitPullRequestIcon,
   pullMerged: GitMergeIcon,
   draft: GitPullRequestIcon,
@@ -28,7 +30,11 @@ const colorVariants = variant({
   prop: 'status',
   variants: {
     issueClosed: {
-      backgroundColor: 'danger.emphasis',
+      backgroundColor: 'done.emphasis',
+      color: 'fg.onEmphasis'
+    },
+    issueClosedNotPlanned: {
+      backgroundColor: 'neutral.emphasis',
       color: 'fg.onEmphasis'
     },
     pullClosed: {

src/__tests__/StateLabel.test.tsx

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

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

@@ -189,7 +189,7 @@ exports[`StateLabel respects the status prop 2`] = `
   color: #ffffff;
   text-align: center;
   border-radius: 100px;
-  background-color: #cf222e;
+  background-color: #8250df;
   color: #ffffff;
   padding-left: 12px;
   padding-right: 12px;
@@ -231,6 +231,62 @@ exports[`StateLabel respects the status prop 3`] = `
   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: #6e7781;
+  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"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<path fill-rule=\\"evenodd\\" d=\\"M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm3.28 5.78a.75.75 0 00-1.06-1.06l-5.5 5.5a.75.75 0 101.06 1.06l5.5-5.5z\\"></path>",
+      }
+    }
+    fill="currentColor"
+    height={16}
+    role="img"
+    style={
+      Object {
+        "display": "inline-block",
+        "overflow": "visible",
+        "userSelect": "none",
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 16 16"
+    width={16}
+  />
+</span>
+`;
+
+exports[`StateLabel respects the status prop 4`] = `
+.c1 {
+  margin-right: 4px;
+}
+
 .c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;