Add 'Archived' to StateLabel

.changeset/ready-pears-call.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+StateLabel: Add new type: `archived`

packages/react/src/StateLabel/StateLabel.docs.json

@@ -57,6 +57,9 @@
     },
     {
       "id": "components-statelabel-features--closed"
+    },
+    {
+      "id": "components-statelabel-features--archived"
     }
   ],
   "importPath": "@primer/react",
@@ -68,7 +71,7 @@
     },
     {
       "name": "status",
-      "type": "'issueOpened' | 'issueClosed' | 'issueClosedNotPlanned' | 'pullOpened' | 'pullClosed' | 'pullMerged' | 'draft' | 'issueDraft' | 'pullQueued' | 'unavailable' | 'alertOpened' | 'alertFixed' | 'alertDismissed' | 'alertClosed' | 'open' | 'closed'",
+      "type": "'issueOpened' | 'issueClosed' | 'issueClosedNotPlanned' | 'pullOpened' | 'pullClosed' | 'pullMerged' | 'draft' | 'issueDraft' | 'pullQueued' | 'unavailable' | 'alertOpened' | 'alertFixed' | 'alertDismissed' | 'alertClosed' | 'open' | 'closed' | 'archived'",
       "required": true
     }
   ],

packages/react/src/StateLabel/StateLabel.features.stories.tsx

@@ -24,6 +24,7 @@ export const AlertOpened = () => <StateLabel status="alertOpened">Open</StateLab
 export const AlertFixed = () => <StateLabel status="alertFixed">Fixed</StateLabel>
 export const AlertDismissed = () => <StateLabel status="alertDismissed">Dismissed</StateLabel>
 export const AlertClosed = () => <StateLabel status="alertClosed">Closed</StateLabel>
+export const Archived = () => <StateLabel status="archived">Archived</StateLabel>
 
 export const Open = () => (
   <StateLabel status="open">

packages/react/src/StateLabel/StateLabel.figma.tsx

@@ -43,6 +43,7 @@ figma.connect(
         merged: 'pullMerged',
         queued: 'pullQueued',
         unavailable: 'unavailable',
+        archived: 'archived',
       }),
       text: figma.textContent('Label'),
     },

packages/react/src/StateLabel/StateLabel.module.css

@@ -120,6 +120,12 @@
   box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-closed-emphasis, transparent);
 }
 
+.StateLabel:where([data-status='archived']) {
+  background-color: var(--bgColor-neutral-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent);
+}
+
 .Icon {
   margin-right: var(--base-size-4);
 }

packages/react/src/StateLabel/StateLabel.tsx

@@ -1,4 +1,5 @@
 import {
+  ArchiveIcon,
   GitMergeIcon,
   GitPullRequestIcon,
   GitPullRequestClosedIcon,
@@ -37,9 +38,13 @@ const octiconMap = {
   alertClosed: ShieldXIcon,
   open: null,
   closed: null,
+  archived: ArchiveIcon,
 }
 
-const labelMap: Record<keyof typeof octiconMap, 'Issue' | 'Issue, not planned' | 'Pull request' | 'Alert' | ''> = {
+const labelMap: Record<
+  keyof typeof octiconMap,
+  'Issue' | 'Issue, not planned' | 'Pull request' | 'Alert' | 'Archived' | ''
+> = {
   issueOpened: 'Issue',
   pullOpened: 'Pull request',
   issueClosed: 'Issue',
@@ -54,6 +59,7 @@ const labelMap: Record<keyof typeof octiconMap, 'Issue' | 'Issue, not planned' |
   alertFixed: 'Alert',
   alertDismissed: 'Alert',
   alertClosed: 'Alert',
+  archived: 'Archived',
   open: '',
   closed: '',
 }

packages/react/src/StateLabel/__tests__/StateLabel.test.tsx

@@ -17,6 +17,7 @@ describe('StateLabel', () => {
     expect(HTMLRender(<StateLabel status="alertFixed" />).container).toMatchSnapshot()
     expect(HTMLRender(<StateLabel status="alertDismissed" />).container).toMatchSnapshot()
     expect(HTMLRender(<StateLabel status="alertClosed" />).container).toMatchSnapshot()
+    expect(HTMLRender(<StateLabel status="archived" />).container).toMatchSnapshot()
   })
 
   it('respects the deprecated variant prop', () => {
@@ -56,6 +57,12 @@ describe('StateLabel', () => {
     const screen4 = HTMLRender(<StateLabel status="alertClosed">Closed</StateLabel>)
     expect(screen4.getByLabelText('Alert')).toBeInTheDocument() // svg
     expect(screen4.getByText('Closed')).toBeInTheDocument() // text
+    screen4.unmount()
+
+    const screenArchived = HTMLRender(<StateLabel status="archived">Archived</StateLabel>)
+    expect(screenArchived.getByLabelText('Archived')).toBeInTheDocument() // svg
+    expect(screenArchived.getByText('Archived')).toBeInTheDocument() // text
+    screenArchived.unmount()
   })
   it('renders open status without an icon', () => {
     const screen = HTMLRender(<StateLabel status="open">Open</StateLabel>)

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

@@ -447,3 +447,31 @@ exports[`StateLabel > respects the status prop 9`] = `
   </span>
 </div>
 `;
+
+exports[`StateLabel > respects the status prop 10`] = `
+<div>
+  <span
+    class="prc-StateLabel-StateLabel-eEUJr"
+    data-size="medium"
+    data-status="archived"
+  >
+    <svg
+      aria-label="Archived"
+      class="octicon octicon-archive prc-StateLabel-Icon-UdR1Y"
+      display="inline-block"
+      fill="currentColor"
+      focusable="false"
+      height="16"
+      overflow="visible"
+      role="img"
+      style="vertical-align: text-bottom;"
+      viewBox="0 0 16 16"
+      width="16"
+    >
+      <path
+        d="M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v1.5A1.75 1.75 0 0 1 14.25 6H1.75A1.75 1.75 0 0 1 0 4.25ZM1.75 7a.75.75 0 0 1 .75.75v5.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-5.5a.75.75 0 0 1 1.5 0v5.5A1.75 1.75 0 0 1 13.25 15H2.75A1.75 1.75 0 0 1 1 13.25v-5.5A.75.75 0 0 1 1.75 7Zm0-4.5a.25.25 0 0 0-.25.25v1.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-1.5a.25.25 0 0 0-.25-.25ZM6.25 8h3.5a.75.75 0 0 1 0 1.5h-3.5a.75.75 0 0 1 0-1.5Z"
+      />
+    </svg>
+  </span>
+</div>
+`;