Add guidance for writing minimum-viable component docs (#700)

* adds guideance for writing minimum-viable component docs

* de-duplicates headings

* rms duplicate info from CONTRIBUTING.md

* Update content/guides/contribute/documentation.mdx

Co-authored-by: Josh Black <[email protected]>

* Update content/guides/contribute/documentation.mdx

---------

Co-authored-by: Josh Black <[email protected]>

Author: mperrotti

CONTRIBUTING.md

@@ -4,18 +4,4 @@ You can read about different ways to contribute to the Primer Design System in [
 
 If you are designing new components, please read the [design contribution guidelines](https://primer.style/contribute/design).
 
-If you are writing documentation, please read the [documentation guidelines](https://primer.style/contribute/documentation).
-
-## Design guidelines template
-Even though some guidelines follow a different format, most can use the following template as a starting point. Required sections are indicated.
-
-💡 The [action list component](https://primer.style/components/action-list) documentation is a good example of design guidelines.
-
-| Section                  | Description                                                                        | Notes                                                                                                                                           |
-|--------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------|
-| Name / Title (required)         | Name of the component                                                                                                        | Use the singular form. Keep it as short as possible. Use sentence case ("Select menu", and not "SelectMenu").                                                                                                   |
-| Description (required)  | In a sentence, what is this component used for.                      | It should allow the reader to decide if they should continue reading or move on. Avoid going into specific usage and implementation detail. Don’t include guidelines. Don’t repeat words from the title to describe the content. |
-| Anatomy (required)       | A labelled image of the most representative view(s) of the component, followed by a glossary of the constituent parts.                                                               | What smaller components constitute the larger pattern.                  |
-| Usage (required)         | List of dos and donts covering the most important ways of how to (and not) use the component. This section can also be referred to as **Options**.        | Consider when and how this component could be used incorrectly, what are the ideal ways of using it, special cases, alternative components (include links if needed).                                        |
-| Hierarchy and placement            | Where to use the component and how it interacts with the rest of the UI.                                                                              | Include images and dos and donts of how the component should be used within the UI.         |
-| Accessibility            | Accessibility considerations when using the component.                                                                              | Include keyboard navigation, descriptions, common mistakes to avoid.         |
+If you are writing documentation, please read the [documentation guidelines](https://primer.style/contribute/documentation). |

content/components/component-documentation-guidelines/component-MVP-documentation-guidelines.md

@@ -169,6 +169,57 @@ The description appears directly under the title of the component. It may be aut
 #### Related components and patterns
 
 Any components or patterns that you may want to reference as related to this component. This could include components that are similar, or components that are used in conjunction with this component. See [Autocomplete](/components/autocomplete#related-components-and-patterns) as an example.
+
+### Minimum-viable component documentation
+
+One of the strategies to help Primer documentation become self-serve is to accurately represent the breadth of patterns and components we have available through our documentation.
+
+To do this, we are increasing our coverage to include 100% of available-for-use components temporarily in the primer/design repository. Executing on this plan requires us to be practical and concise in terms of the depth of the documentation. In order to ensure we can reach 100% coverage, we're using a "minimum-viable documentation" approach.
+
+Minimum-viable documentation should be:
+
+- Accurate
+- Informative but concise
+- Visible
+
+#### Minimum-viable component documentation structure
+
+Aside from components we deem to be high touch and therefore requiring more in-depth documentation, the majority of components that are missing usage guidelines will be documented with the following minimum requirements:
+
+##### Minimum-viable description
+
+- brief text describing what the component is
+- link to available implementations
+- image, if applicable
+
+##### Minimum-viable usage guidance
+
+- proper usage guides
+- visual examples, such as an image or gif demonstrating what the component is
+
+#### Add more documentation if it's readily available
+
+If more information (than required above) is easily accessible and doesn't require a huge time investment to include, it should be added to to the minimum-viable component documentation. Some examples of this include listing out related components, cross-linking to Accessibility guidelines, and more.
+
+### Tips and tricks
+
+- A great starting off point is to consolidate existing documentation for the component that's already available. Places to look:
+  - Figma ([Primer Web file](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=179%3A3870))
+  - [CSS documentation](https://primer.style/css/)
+  - [React Storybook](https://primer.style/react/storybook/?path=/story/)
+  - [Rails Lookbook](https://primer.style/view-components/lookbook)
+  - [Interface guidelines component documentation](/components)
+  - [Interface guidelines UI pattern documentation](/ui-patterns)
+  - [Interface guidelines Accessibility documentation](/guides/accessibility)
+  - Related components that may have guidelines applicable to your component
+  - Take a look at an existing component that was documented using this approach, such as [Action menu](/components/action-menu)
+
+#### Recommendations for tackling this work quickly and efficiently
+
+- Work in pairs or with a small group. Dedicate 1-2 components per person, with each person in the group responsible for reviewing the others' PRs.
+- Timebox each component to x hour(s) for writing, x hour(s) for reviewing, and x hour(s) for writing revisions.
+- If you feel blocked by a lack of information about the component to write useful documentation, move on to documenting a different component until we can get the context we need.
+
 ## Review process
 
 All pull requests for new and updated guidelines should be reviewed and approved by a member of the Design Infrastructure team.