Merge pull request #343 from primer/q4-pumpkin-spice

Q4 Pumpkin Spice Release PR

Author: Emily

.github/main.workflow

@@ -1,17 +1,26 @@
 const {join} = require('path')
 const withPlugins = require('next-compose-plugins')
 const mdx = require('@zeit/next-mdx')
+const getPageMap = require('next-page-map')
+
+const pageExtensions = ['js', 'jsx', 'md', 'mdx']
+const pageMap = getPageMap(join(__dirname, 'pages'), pageExtensions)
 
 const assetPrefix = process.env.NOW_URL
 
 module.exports = withPlugins([
   mdx({extension: /\.mdx?$/})
 ], {
-  assetPrefix,
-  pageExtensions: ['js', 'jsx', 'md', 'mdx'],
-
+  /*
+   * Note: Prefixing assets with the fully qualified deployment URL
+   * makes them available even when the site is served from a path alias, as in
+   * <https://primer.style/components>
+   */
+  assetPrefix: process.env.NOW_URL,
+  pageExtensions,
   publicRuntimeConfig: {
-    assetPrefix
+    assetPrefix,
+    pageMap
   },
 
   webpack(config, {dev}) {

next.config.js

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "5.0.0-beta",
+  "version": "6.0.0-beta",
   "description": "Primer react components",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",
@@ -78,6 +78,7 @@
     "mdx-docs": "1.0.0-8",
     "next": "7.0.2",
     "next-compose-plugins": "2.1.1",
+    "next-page-map": "0.1.0",
     "node-sass": "4.9.3",
     "primer-forms": "2.1.4",
     "primer-layout": "1.4.9",

package-lock.json

@@ -1,12 +1,15 @@
 import React from 'react'
 import App, {Container} from 'next/app'
+import getConfig from 'next/config'
 import {Layout} from 'mdx-docs'
-import Octicon, {iconsByName} from '@githubprimer/octicons-react'
-import * as primerComponents from '..'
+import Octicon, {iconsByName, Pencil} from '@githubprimer/octicons-react'
 import * as docComponents from './doc-components'
 import Index from './index.mdx'
+import * as primerComponents from '..'
+import {repository} from '../package.json'
 
-const {BaseStyles, Box, Flex, Link} = primerComponents
+const {pageMap} = getConfig().publicRuntimeConfig
+const {BaseStyles, Box, Flex, Link, Text} = primerComponents
 const {SideNav, Header, IndexHero, customTheme} = docComponents
 
 const iconComponents = Object.keys(iconsByName).reduce((map, key) => {
@@ -15,6 +18,7 @@ const iconComponents = Object.keys(iconsByName).reduce((map, key) => {
 }, {})
 
 const DocLink = props => <Link nounderline {...props} />
+const editLinkBase = `https://github.com/${repository}/edit/master/pages`
 
 const components = {
   ...iconComponents,
@@ -38,6 +42,11 @@ export default class MyApp extends App {
 
   render() {
     const {pathname} = this.props.router
+    const filename = pageMap[pathname]
+    if (!filename) {
+      // eslint-disable-next-line no-console
+      console.warn(`pathname "${pathname}" doesn't exist in pageMap:`, pageMap)
+    }
     const {Component, page} = this.props
     const isIndex = pathname === '/' || pathname === '/components' || pathname === '/components/'
 
@@ -51,6 +60,17 @@ export default class MyApp extends App {
                 {isIndex && <IndexHero />}
                 <Box color="gray.9" maxWidth={1012} width={'100%'} my={6} mx={'auto'} px={6} className="markdown-body">
                   {isIndex ? <Index /> : <Component {...page} />}
+                  {filename && (
+                    <Box color="gray.5" borderColor="gray.2" borderTop={1} my={6} pt={2}>
+                      <Text mr={2}>
+                        <Octicon icon={Pencil} />
+                      </Text>
+                      <DocLink muted href={`${editLinkBase}${filename}`}>
+                        Edit this page
+                      </DocLink>{' '}
+                      on GitHub
+                    </Box>
+                  )}
                 </Box>
               </Box>
               <SideNav />

package.json

@@ -6,7 +6,14 @@ Avatars are images used to represent users and organizations on GitHub. They typ
 ## Default example
 
 ```.jsx
-<Avatar src="https://avatars.githubusercontent.com/primer" size={128} />
+<Avatar mb={4} src="https://avatars.githubusercontent.com/primer" size={128} />
+
+<Text is='p'>To create a Parent + Child avatar combination, wrap Avatars in AvatarPair:</Text>
+
+ <AvatarPair my={4}>
+  <Avatar src="https://avatars.githubusercontent.com/primer"/>
+  <Avatar src="https://avatars.githubusercontent.com/primer"/>
+ </AvatarPair>
 ```
 
 ## System props

pages/_app.js

@@ -1,11 +1,15 @@
 # Box
 
-The Box component serves as a wrapper component for most layout related needs.
+The Box component serves as a wrapper component for most layout related needs. Use Box to set values such as `display`,  `width`, `height`, and more. See the LAYOUT section of our [System Props](/components/docs/system-props) documentation for the full list of available props. In practice, this component is used frequently as a wrapper around other components to achieve Box Model related styling.
 
 ## Default example
 
 ```.jsx
-<Box display="inline-block" width="300px" bg="blue.4">This is a Box</Box>
+<Box>
+ <Label m={1}>Box can be used to create block level elements & more</Label>
+</Box>
+
+<Label m={1}>Default label</Label>
 ```
 
 ## System props
@@ -14,7 +18,9 @@ Box components get the `COMMON` and `LAYOUT` categories of system props. Read ou
 
 ## Component props
 
-Box does not get any additional props other than its system props mentioned above.
+| Prop name | Type | Default | Description |
+| :- | :- | :-: | :- |
+| is | String | `div` | sets the HTML tag for the component|
 
 
 export const meta = {displayName: 'Box'}

pages/components/docs/Avatar.md

@@ -1,5 +1,10 @@
 # Buttons
 
+
+`Button` is used for actions, like in forms, while `Link` is used for destinations, or moving from one page to another.
+
+In special cases where you'd like to use a `<a>` styled like a Button, use `<Button is='a'>` and provide an `href`.
+
 ## Default examples
 
 ```.jsx
@@ -15,12 +20,12 @@ Button components get `COMMON` system props. Read our [System Props](/components
 
 ## Component props
 
-| Prop name | Type | Description |
-| :- | :- | :- |
-| is | String | sets the HTML tag for the component, defaults to `button` |
-| disabled | Boolean | sets the `disabled` attribute on the Button |
-| grouped | Boolean | allows you to use Button in a line of Buttons without duplicate borders |
-| onClick | Function | function to be called when Button is clicked |
-| size | String | use `sm` for a small Button, or `large` for a large Button
+| Prop name | Type | Default | Description |
+| :- | :- | :-: | :- |
+| is | String | `button` | sets the HTML tag for the component |
+| disabled | Boolean |  | sets the `disabled` attribute on the Button |
+| grouped | Boolean | | allows you to use Button in a line of Buttons without duplicate borders |
+| onClick | Function | | function to be called when Button is clicked |
+| size | String | | use `sm` for a small Button, or `large` for a large Button
 
 export const meta = {displayName: 'Button'}

pages/components/docs/Box.md

@@ -18,7 +18,7 @@ CircleBadge components get `COMMON` system props. Read our [System Props](/compo
 
 | Name | Type | Default | Description |
 | :- | :- | :-: | :- |
-| is | String | | sets the HTML tag for the component, defaults to `div` |
+| is | String | `div` | sets the HTML tag for the component |
 | size | String or Number | | Use `small`, `medium`, or `large` for default sizes, or provide a custom size |
 
 

pages/components/docs/Button.md

@@ -18,8 +18,16 @@ FilterList components get `COMMON` system props. Read our [System Props](/compon
 
 ## Component props
 
+#### FilterList
 | Name | Type | Default | Description |
 | :- | :- | :-: | :- |
 | small | Boolean | false | Used to create a smaller version of the standard FilterList|
 
+#### FilterList.Item
+| Name | Type | Default | Description |
+| :- | :- | :-: | :- |
+| count | Number |  | Number to be displayed in the list item |
+| is | String |`a`| sets the HTML tag for the component |
+| selected | Boolean | | Used to set selected style |
+
 export const meta = {displayName: 'FilterList'}