Add 'unavailable' status to StatusLabel (#3963)

* adds unavailable status to StateLabel

* adds changeset

* updates StateLabel docs with 'unavailable'

* test(vrt): update snapshots

---------

Co-authored-by: mperrotti <[email protected]>
Co-authored-by: Pavithra Kodmad <[email protected]>

.changeset/nervous-tomatoes-bow.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': minor
+---
+
+Adds "unavailable" status to StateLabel
+
+<!-- Changed components: StateLabel -->

e2e/components/StateLabel.test.ts

@@ -275,6 +275,33 @@ test.describe('StateLabel', () => {
     }
   })
 
+  test.describe('Unavailable', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-statelabel-features--unavailable',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`StateLabel.Unavailable.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-statelabel-features--unavailable',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+        })
+      })
+    }
+  })
+
   test.describe('Small', () => {
     for (const theme of themes) {
       test.describe(theme, () => {

src/StateLabel/StateLabel.docs.json

@@ -12,7 +12,7 @@
     },
     {
       "name": "status",
-      "type": "'issueOpened' | 'issueClosed' | 'issueClosedNotPlanned' | 'pullOpened' | 'pullClosed' | 'pullMerged' | 'draft' | 'issueDraft'",
+      "type": "'issueOpened' | 'issueClosed' | 'issueClosedNotPlanned' | 'pullOpened' | 'pullClosed' | 'pullMerged' | 'draft' | 'issueDraft' | 'unavailable'",
       "required": true
     },
     {

src/StateLabel/StateLabel.features.stories.tsx

@@ -18,6 +18,7 @@ export const PullClosed = () => <StateLabel status="pullClosed">Closed</StateLab
 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 Unavailable = () => <StateLabel status="unavailable">Unavailable</StateLabel>
 
 export const Small = () => (
   <StateLabel status="issueOpened" variant="small">

src/StateLabel/StateLabel.tsx

@@ -7,6 +7,7 @@ import {
   IssueOpenedIcon,
   QuestionIcon,
   GitMergeQueueIcon,
+  AlertIcon,
 } from '@primer/octicons-react'
 import React from 'react'
 import styled from 'styled-components'
@@ -26,6 +27,7 @@ const octiconMap = {
   draft: GitPullRequestIcon,
   issueDraft: IssueDraftIcon,
   pullQueued: GitMergeQueueIcon,
+  unavailable: AlertIcon,
 }
 
 const colorVariants = variant({
@@ -67,6 +69,10 @@ const colorVariants = variant({
       backgroundColor: 'neutral.emphasis',
       color: 'fg.onEmphasis',
     },
+    unavailable: {
+      backgroundColor: 'neutral.emphasis',
+      color: 'fg.onEmphasis',
+    },
   },
 })