Create ComponentChecklist component

[colebemis]

Adds a ComponentChecklist component in the /docs directory that will enable us to document the maturity of our components.

## 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
  }}
/>

Known issues

Here are list of known issues with ComponentChecklist that I think are out of scope for this PR:

• The component is not written in TypeScript. We don't have Gatsby configured to work with TypeScript yet so I wrote the component in vanilla JavaScript. Updating our Gatsby configuration to work with TypeScript felt out of scope for this PR.
• The ComponentChecklist component needs to be imported in every markdown file that uses it. I plan to make a change in Doctocat that will allow us to make ComponentChecklist globally available in all markdown files. Until I make that change, ComponentChecklist will need to be explicitly imported.
• ComponentChecklist items are hard to guess. You'll need to look at the definition of ComponentChecklist to know which checklist items to pass. I imagine most people will use ComponentChecklist by copying and pasting from other documentation pages, so I don't think this is a dealbreaker
• You need to add the checklist heading in markdown. The heading (i.e. ## Component checklist) needs to be written directly in the .md or .mdx file. The heading can't be included in the ComponentChecklist component because it won't be listed in the table of contents.

Open questions

• What should the heading of this checklist be? I'm using Component checklist for now but I'm open to other ideas.
• Is the n/a state for a checklist item visually clear? I'm using the same icon that we use to represent a "skipped" GitHub action.

Next steps

• Render this checklist on every component documentation page

Notes

This is a departure from my original implementation plan for component checklists. I wrote about why changed my implementation plan here.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 40d955c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	56.31 KB (0%)
dist/browser.umd.js	56.7 KB (0%)

[siddharthkp]

This looks good! No changes needed here, suggested changes in doctocat.

[colebemis]

@siddharthkp @jfuchs Is this n/a state more clear?

[siddharthkp]

Is this n/a state more clear?

It's very clear.

Bonus: now we make it pretty too 😋 I like the skip icon you had from octions! How do you feel about adding N/A to the text part?

[colebemis]

Better?

[siddharthkp]

Love it!

[rezrah]

Very cool @colebemis. As a name suggestion, how about "Component status", as provides more detailed explanation - and is directly related to - the status at the top of the page? Edit: NVM, you've updated it to this already, didn't see your updated screenshot 🥳