Merge pull request #266 from primer/contribution-docs

Add documentation on adding documentation

contributing.md

@@ -7,8 +7,9 @@
 4. [Component patterns](#component-patterns)
     * [Components with only system props](#components-with-only-system-props)
     * [Primer CSS components](#primer-css-components)
-5. [Deployment](#deployment)
-6. [Glossary](#glossary)
+5. [Writing Documentation](#writing-documentation)
+6. [Deployment](#deployment)
+7. [Glossary](#glossary)
 
 ## Code Style
 
@@ -170,6 +171,16 @@ In this case, you will need to deal explicitly with two props passed down from [
   * `className`: You _must_ render this prop, otherwise **your component will not be styled.**
   * `is`: This is what allows your component to render with arbitrary elements, and even other components. If you don't respect this prop, you should `delete Component.propTypes.is` to signal that it's not available.
 
+## Writing documentation
+
+We use [Next.js](https://github.com/zeit/next.js/) and [MDX Docs](https://github.com/jxnblk/mdx-docs/) to power our documentation site at [https://primer.style/components](https://primer.style/components/).
+
+To add a new component to our documentation site:
+
+1. Create a new file with the `.md` extension for your component in `pages/components/docs`.
+2. Copy & paste the template from `doc-template.md` & replace placeholder brackets with relevant information.
+3. Add the new file to the `index.js` in `pages/components/docs`
+
 ## Deployment
 We deploy the Primer Components site using [Now]. Install the Now CLI and log in with:
 

pages/components/docs/doc-template.md

@@ -0,0 +1,24 @@
+<!--
+# [Component Name]
+
+[General description of component]
+
+## Default example
+
+```.jsx
+[Add example of component here]
+```
+
+## System props
+
+[component] components get [system prop categories] system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+| Prop name | Type | Description
+| :- | :- | :- |
+
+
+export const meta = {
+  displayName: [display name]
+} -->