Merge pull request #349 from primer/q4-cool-zoo

Q4 Cool Zoo Release PR

Author: Emily

README.md

@@ -1,12 +1,24 @@
-# Primer Components
+<p align="center">
+  <img width="300px" src="https://user-images.githubusercontent.com/10384315/48589167-39d6b400-e8ef-11e8-9183-c69de4fe477f.png">
+</p>
 
-[Primer](https://primer.github.io/) React components
+<h1 align="center">Primer Components</h1>
+
+<p align="center">React components for the Primer Design System</p>
+
+![npm](https://img.shields.io/npm/v/@primer/components.svg)
+![GitHub contributors](https://img.shields.io/github/contributors/primer/components.svg)
+![GitHub last commit](https://img.shields.io/github/last-commit/primer/components.svg)
+![GitHub](https://img.shields.io/github/license/primer/components.svg)
+[![Join us in Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/primer)
 
 ## Status
 
-**⚠️ This project is WIP and not ready for production use yet!**
+**⚠️ This project is a work in progress and is not ready for production use yet!**
+
+## Documentation
 
-Currently we link to the latest build of [Primer CSS] so that we may use current Primer styles to start to build components. This does not include `primer-base` so as to avoid unwanted base overrides.
+Our documentation site lives at [primer.style/components](https://primer.style/components). You'll be able to find the information listed in this README as well as detailed docs for each component, our theme, and system props.
 
 ## Installation
 
@@ -18,8 +30,6 @@ npm install @primer/components
 
 ## Usage
 
-**If you are upgrading from a version before `1.0.0-beta`, please read the [migration docs](migrating.md).**
-
 All of our components are exported by name from `@primer/components`, so you can import them with:
 
 ```js
@@ -31,9 +41,7 @@ import {
 } from '@primer/components'
 ```
 
-### Styling
-
-This project uses [emotion] to generate static CSS for most component styles, but still relies on [Primer CSS] for some classname-based styles that haven't yet been ported over. Components that haven't yet been ported over rely on [a subset of Primer CSS](https://github.com/primer/components/blob/master/src/primer-components.scss) that's globally injected at import time.
+Primer Components come with all the necessary CSS built-in, so you don't need to worry about including [Primer CSS].
 
 #### Base styles
 

contributing.md

@@ -84,10 +84,10 @@ export default withSystemProps(
 Categories of system props are exported from `src/system-props`:
 
 * `COMMON` includes color and spacing (margin and padding) props
-* `TYPOGRAPHY` includes `COMMON` and font family, font weight, and line-height
-* `POSITION` includes `COMMON` and positioning props
-* `FLEX_CONTAINER` includes `COMMON` and flexbox props for containers
-* `FLEX_ITEM` includes `COMMON` and flexbox props for items in a flex container
+* `TYPOGRAPHY` includes font family, font weight, and line-height props
+* `POSITION` includes positioning props
+* `FLEX_CONTAINER` includes flexbox props for containers
+* `FLEX_ITEM` includes flexbox props for items in a flex container
 
 ### Components with only system props
 
@@ -148,7 +148,7 @@ Alternatively, you can create the component from scratch using `withSystemProps(
 
 ```jsx
 import classnames from 'classnames'
-import {withSystemProps, LAYOUT} from './system-props'
+import {withSystemProps, LAYOUT, COMMON} from './system-props'
 
 function FancyBox({flashing, className, is: Tag, ...rest}) {
   return (
@@ -163,7 +163,7 @@ FancyBox.propTypes = {
   flashing: PropTypes.bool
 }
 
-export default withSystemProps(FancyBox, LAYOUT)
+export default withSystemProps(FancyBox, [...LAYOUT, ...COMMON])
 ```
 
 In this case, you will need to deal explicitly with two props passed down from [emotion] and [system-components], respectively:

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "6.0.1-beta",
+  "version": "7.0.0-beta",
   "description": "Primer react components",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",
@@ -36,7 +36,7 @@
   "author": "GitHub, Inc.",
   "license": "MIT",
   "dependencies": {
-    "@githubprimer/octicons-react": "8.0.0",
+    "@githubprimer/octicons-react": "8.1.2",
     "babel-plugin-macros": "2.4.2",
     "classnames": "^2.2.5",
     "d3-shape": "^1.2.0",

package.json

@@ -5,7 +5,6 @@ import getConfig from 'next/config'
 import {Layout} from 'mdx-docs'
 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'
 
@@ -49,7 +48,7 @@ export default class MyApp extends App {
       console.warn(`pathname "${pathname}" doesn't exist in pageMap:`, pageMap)
     }
     const {Component, page} = this.props
-    const isIndex = pathname === '/' || pathname === '/components' || pathname === '/components/'
+    const hasHero = ['/components', '/components/'].includes(pathname)
 
     return (
       <BaseStyles>
@@ -61,9 +60,9 @@ export default class MyApp extends App {
             <Header />
             <Flex display={['block', 'block', 'flex', 'flex']} flexDirection="row-reverse">
               <Box width="100%">
-                {isIndex && <IndexHero />}
+                {hasHero && <IndexHero />}
                 <Box color="gray.9" maxWidth={1012} width={'100%'} my={6} mx={'auto'} px={6} className="markdown-body">
-                  {isIndex ? <Index /> : <Component {...page} />}
+                  <Component {...page} />
                   {filename && (
                     <Box color="gray.5" borderColor="gray.2" borderTop={1} my={6} pt={2}>
                       <Text mr={2}>

pages/_app.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import Document, {Head, Main, NextScript} from 'next/document'
+import Document, {Main, NextScript} from 'next/document'
 import {ServerStyleSheet} from 'styled-components'
 import {extractCritical} from 'emotion-server'
 import {getAssetPath} from './doc-components'
@@ -11,7 +11,7 @@ export default class MyDocument extends Document {
     const page = renderPage(App => props => sheet.collectStyles(<App {...props} />))
     return {
       ...page,
-      styles: (
+      styleTags: (
         <>
           <style id="primer-css">
             {utilities}
@@ -25,11 +25,12 @@ export default class MyDocument extends Document {
   }
 
   render() {
-    const {styles} = this.props
+    const {styleTags} = this.props
 
     return (
       <html lang="en">
-        <Head>
+        <head>
+          <title>Primer Components</title>
           <script async src="https://www.googletagmanager.com/gtag/js?id=UA-126681523-1" />
           <script async href={getAssetPath('analytics.js')} />
           <meta charSet="utf8" />
@@ -48,8 +49,8 @@ export default class MyDocument extends Document {
           <meta property="og:image:height" content="630" />
           <meta property="twitter:card" content="summary_large_image" />
           <meta property="twitter:site" content="@githubprimer" />
-          {styles}
-        </Head>
+          {styleTags}
+        </head>
         <body>
           <Main />
           <NextScript />

pages/_document.js

@@ -14,6 +14,11 @@ BorderBox components get `COMMON` and `LAYOUT` system props. Read our [System Pr
 
 ## Component props
 
-BorderBox does not get any additional props other than the system props mentioned above.
+| Prop name | Type | Default | Description |
+| :- | :- | :-: | :- |
+| border | String | 'borders.1' (from theme) | Sets the border, use theme values or provide your own. |
+| borderColor | String | 'gray.2' (from theme) | Sets the border color, use theme values or provide your own. |
+| borderRadius | String or Number| 'radii.1' (from theme)| Sets the border radius, use theme values or provide your own. |
+| boxShadow | String | | Sets box shadow, use theme values or provide your own. |
 
 export const meta = { displayName: 'BorderBox'}

pages/components/docs/BorderBox.md

@@ -1,15 +1,22 @@
+import {COMMON, LAYOUT, TYPOGRAPHY, FLEX_CONTAINER, FLEX_ITEM, POSITION} from '../../../src/system-props.js'
+import {PropsList} from '../../doc-components'
+
 # System Props
 
 
 Primer Components utilize what we call "system props" to apply a standard set of props to each component. Using [styled-system](https://github.com/jxnblk/styled-system), groups of props are automatically applied to each component. Most components get the `COMMON` set of props which give the component access to color and space props (margin, padding, color and background color). These groups correspond to the `color` and `space` functions from `styled-system` which can be referenced in the styled system [table of style functions](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#core).
 
 To check which system props each component includes, check the documentation for that component.
 
+
+
 ### System Prop Categories
 
 | Category       | Included Props           | styled-system docs  |
 |-----|--------|--------|
-| `COMMON`| space, color | [styled-system core docs](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#core) |
-| `TYPOGRAPHY`| fontFamily, fontSize, fontWeight, lineHeight & all `COMMON` props | [styled-system typography docs](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#typography) |
-| `LAYOUT` | borders, borderColor, borderRadius, boxShadow, <br/> display, size, width, height, minWidth, minHeight, <br/> maxWidth, maxHeight, verticalAlign & all `COMMON` props      | [styled-system layout docs](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#layout) <br/> [styled-system misc docs](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#misc) |
-| `POSITION` | position, zIndex, top, right, bottom, left | [styled-system position docs](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#position)
+| `COMMON`| <PropsList systemProps={COMMON}/>| [styled-system core docs](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#core) |
+| `TYPOGRAPHY`| <PropsList systemProps={TYPOGRAPHY}/> | [styled-system typography docs](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#typography) |
+| `LAYOUT` | <PropsList systemProps={LAYOUT}/>| [styled-system layout docs](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#layout) <br/> [styled-system misc docs](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#misc) |
+| `POSITION` | <PropsList systemProps={POSITION}/>| [styled-system position docs](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#position)
+| `FLEX_CONTAINER` | <PropsList systemProps={FLEX_CONTAINER}/> | [styled-system flexbox docs](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#flexbox) |
+| `FLEX_ITEM` | <PropsList systemProps={FLEX_ITEM}/> | [styled-system flexbox docs](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#flexbox) |

pages/components/docs/system-props.md

@@ -1,3 +1,45 @@
-import Index from '../index.mdx'
+# Getting Started
 
-<Index />
+**⚠️ This project is not production-ready yet!** Public beta planned for October 2018.
+
+Install Primer Components in your application:
+
+```
+npm i @primer/components
+```
+
+# Usage
+
+All of our components are exported by name from `@primer/components`, so you can import them with:
+
+```js
+import {
+  Box,
+  Button,
+  Heading,
+  Text
+} from '@primer/components'
+```
+
+## Styling
+
+This project uses [emotion] under the hood to generate static CSS from _some_ component styles, but still relies on [Primer CSS] for some component styles that haven't yet been ported over.
+
+To ensure proper styling, you'll need to link to the most recent build of [Primer CSS] in one of the following ways:
+
+1. If you're using webpack, you can install [style-loader](https://github.com/webpack-contrib/style-loader) and [css-loader](), `import 'primer/build/build.css'` in your bundle, and include the following in your webpack config's `module.rules` list:
+
+    ```js
+    {
+      test: /\.css$/,
+      use: ['style-loader', 'css-loader']
+    }
+    ```
+
+1. **For pre-production applications**, you can link directly to [the build on unpkg.com](https://unpkg.com/primer/build/build.css).
+
+1. Otherwise, you can `npm install --save primer` and either or link `node_modules/primer/build/build.css` to your source directory.
+
+
+[emotion]: https://emotion.sh/
+[Primer CSS]: https://github.com/primer/primer

pages/components/index.mdx

@@ -0,0 +1,10 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const PropsList = ({systemProps}) => <div>{systemProps.join(', ')}</div>
+
+PropsList.propTypes = {
+  systemProps: PropTypes.arrayOf(PropTypes.string)
+}
+
+export default PropsList