From 0a3e87ff726a5d75941517e13fd23e08e09cedf8 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Thu, 18 Nov 2021 16:17:06 -0800
Subject: [PATCH 1/5] Create ComponentChecklist doc component

---
 docs/content/{Box.md => Box.mdx} | 22 +++++++++
 docs/src/component-checklist.js  | 78 ++++++++++++++++++++++++++++++++
 2 files changed, 100 insertions(+)
 rename docs/content/{Box.md => Box.mdx} (76%)
 create mode 100644 docs/src/component-checklist.js

diff --git a/docs/content/Box.md b/docs/content/Box.mdx
similarity index 76%
rename from docs/content/Box.md
rename to docs/content/Box.mdx
index fd06f09675d..2858d40c818 100644
--- a/docs/content/Box.md
+++ b/docs/content/Box.mdx
@@ -1,10 +1,12 @@
 ---
 title: Box
+status: Alpha
 description: A low-level utility component that accepts styled system props to enable custom theme-aware styling
 source: https://github.com/primer/react/blob/main/src/Box.tsx
 ---
 
 import {Props} from '../src/props'
+import {ComponentChecklist} from '../src/component-checklist'
 import {Box} from '@primer/components'
 
 ```jsx live
@@ -72,3 +74,23 @@ Use Box to create [grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_
   </Box>
 </Box>
 ```
+
+## Component checklist
+
+<ComponentChecklist
+  items={{
+    propsDocumented: true,
+    noUnnecessaryDeps: true,
+    adaptsToThemes: true,
+    adaptsToScreenSizes: true,
+    fullTestCoverage: true,
+    usedInProduction: true,
+    usageExamplesDocumented: true,
+    designReviewed: null,
+    a11yReviewed: null,
+    stableApi: false,
+    addressedApiFeedback: false,
+    hasDesignGuidelines: null,
+    hasFigmaComponent: null
+  }}
+/>
diff --git a/docs/src/component-checklist.js b/docs/src/component-checklist.js
new file mode 100644
index 00000000000..e2dc01bd13d
--- /dev/null
+++ b/docs/src/component-checklist.js
@@ -0,0 +1,78 @@
+import {Box, StyledOcticon, Link} from '@primer/components'
+import {H3} from '@primer/gatsby-theme-doctocat/src/components/heading'
+import {CheckCircleFillIcon, CircleIcon, SkipIcon} from '@primer/octicons-react'
+import React from 'react'
+
+/** Render component maturity checklist in documentation pages */
+export function ComponentChecklist({items}) {
+  return (
+    <>
+      <H3>Alpha</H3>
+      <Checklist aria-describedby="alpha">
+        <Checklist.Item checked={items.propsDocumented}>Component props are documented.</Checklist.Item>
+        <Checklist.Item checked={items.noUnnecessaryDeps}>
+          Component does not have any unnecessary third-party dependencies.
+        </Checklist.Item>
+        <Checklist.Item checked={items.adaptsToThemes}>Component can adapt to different themes.</Checklist.Item>
+        <Checklist.Item checked={items.adaptsToScreenSizes}>
+          Component can adapt to different screen sizes.
+        </Checklist.Item>
+        <Checklist.Item checked={items.fullTestCoverage}>Component has 100% test coverage.</Checklist.Item>
+      </Checklist>
+      <H3>Beta</H3>
+      <Checklist aria-describedby="beta">
+        <Checklist.Item checked={items.usedInProduction}>Component is used in a production application.</Checklist.Item>
+        <Checklist.Item checked={items.usageExamplesDocumented}>Common usage examples are documented.</Checklist.Item>
+        <Checklist.Item checked={items.designReviewed}>
+          Component has been reviewed by a systems designer and any resulting issues have been addressed.
+        </Checklist.Item>
+        <Checklist.Item checked={items.a11yReviewed}>
+          Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.
+        </Checklist.Item>
+      </Checklist>
+      <H3>Stable</H3>
+      <Checklist aria-describedby="stable">
+        <Checklist.Item checked={items.apiIsStable}>
+          Component API has been stable with no breaking changes for at least one month.
+        </Checklist.Item>
+        <Checklist.Item checked={items.addressedApiFeedback}>
+          Feedback on API usability has been sought from developers using the component and any resulting issues have
+          been addressed.
+        </Checklist.Item>
+        <Checklist.Item checked={items.hasDesignGuidelines}>
+          Component has corresponding design guidelines documented in the{' '}
+          <Link href="https://primer.style/design/">interface guidelines</Link>.
+        </Checklist.Item>
+        <Checklist.Item checked={items.hasFigmaComponent}>
+          Component has corresponding Figma component in the Primer Web library.
+        </Checklist.Item>
+      </Checklist>
+    </>
+  )
+}
+
+// TODO: This component should live in Doctocat
+function Checklist({'aria-describedby': ariaDescribedby, children}) {
+  return (
+    <Box aria-describedby={ariaDescribedby} as="ul" display="grid" gridGap={2} p={0} m={0} mb={3}>
+      {children}
+    </Box>
+  )
+}
+
+Checklist.Item = ({checked, children}) => {
+  return (
+    <Box as="li" display="grid" gridTemplateColumns="auto 1fr" gridGap={2} sx={{listStyleType: 'none'}}>
+      <Box height="24px" display="flex" alignItems="center">
+        {checked ? (
+          <StyledOcticon aria-label="Completed" icon={CheckCircleFillIcon} sx={{color: 'success.fg'}} />
+        ) : checked === null ? (
+          <StyledOcticon aria-label="Not applicable" icon={SkipIcon} sx={{color: 'neutral.emphasis'}} />
+        ) : (
+          <StyledOcticon aria-label="To do" icon={CircleIcon} sx={{color: 'neutral.emphasis'}} />
+        )}
+      </Box>
+      <span>{children}</span>
+    </Box>
+  )
+}

From 567349abb280716a68ff7f945737bcaa32af09a9 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Fri, 19 Nov 2021 10:50:55 -0800
Subject: [PATCH 2/5] Rename "Component status" heading

---
 docs/content/Box.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/Box.mdx b/docs/content/Box.mdx
index 2858d40c818..ef04c948642 100644
--- a/docs/content/Box.mdx
+++ b/docs/content/Box.mdx
@@ -75,7 +75,7 @@ Use Box to create [grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_
 </Box>
 ```
 
-## Component checklist
+## Component status
 
 <ComponentChecklist
   items={{

From 6af57d29bd3e4a5bcfbca15ca06874ba58502323 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Fri, 19 Nov 2021 11:04:38 -0800
Subject: [PATCH 3/5] Update n/a style

---
 docs/src/component-checklist.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/src/component-checklist.js b/docs/src/component-checklist.js
index e2dc01bd13d..2b558fd0c1b 100644
--- a/docs/src/component-checklist.js
+++ b/docs/src/component-checklist.js
@@ -1,4 +1,4 @@
-import {Box, StyledOcticon, Link} from '@primer/components'
+import {Box, StyledOcticon, Link, Text} from '@primer/components'
 import {H3} from '@primer/gatsby-theme-doctocat/src/components/heading'
 import {CheckCircleFillIcon, CircleIcon, SkipIcon} from '@primer/octicons-react'
 import React from 'react'
@@ -67,12 +67,15 @@ Checklist.Item = ({checked, children}) => {
         {checked ? (
           <StyledOcticon aria-label="Completed" icon={CheckCircleFillIcon} sx={{color: 'success.fg'}} />
         ) : checked === null ? (
-          <StyledOcticon aria-label="Not applicable" icon={SkipIcon} sx={{color: 'neutral.emphasis'}} />
+          <StyledOcticon icon={SkipIcon} sx={{color: 'fg.subtle'}} />
         ) : (
-          <StyledOcticon aria-label="To do" icon={CircleIcon} sx={{color: 'neutral.emphasis'}} />
+          <StyledOcticon aria-label="To do" icon={CircleIcon} sx={{color: 'fg.subtle'}} />
         )}
       </Box>
-      <span>{children}</span>
+      <Text color={checked === null ? 'fg.subtle' : 'fg.default'}>
+        {checked === null ? <Text color="fg.subtle">N/A: </Text> : null}
+        {children}
+      </Text>
     </Box>
   )
 }

From 9d7199615646abe73294887de06230334778791b Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Fri, 19 Nov 2021 11:05:10 -0800
Subject: [PATCH 4/5] Update docs/src/component-checklist.js

---
 docs/src/component-checklist.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/component-checklist.js b/docs/src/component-checklist.js
index 2b558fd0c1b..008b7b3a4c5 100644
--- a/docs/src/component-checklist.js
+++ b/docs/src/component-checklist.js
@@ -3,7 +3,7 @@ import {H3} from '@primer/gatsby-theme-doctocat/src/components/heading'
 import {CheckCircleFillIcon, CircleIcon, SkipIcon} from '@primer/octicons-react'
 import React from 'react'
 
-/** Render component maturity checklist in documentation pages */
+/** Render component status checklist in documentation pages */
 export function ComponentChecklist({items}) {
   return (
     <>

From 40d955cd8e9bc9e7d97a1edd11a06864cf6a0c7b Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Fri, 19 Nov 2021 12:41:44 -0800
Subject: [PATCH 5/5] Update docs/content/Box.mdx

---
 docs/content/Box.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/Box.mdx b/docs/content/Box.mdx
index ef04c948642..29f413b4567 100644
--- a/docs/content/Box.mdx
+++ b/docs/content/Box.mdx
@@ -1,6 +1,6 @@
 ---
 title: Box
-status: Alpha
+status: Beta
 description: A low-level utility component that accepts styled system props to enable custom theme-aware styling
 source: https://github.com/primer/react/blob/main/src/Box.tsx
 ---