Merge pull request #54 from primer/release-0.0.3-beta

v0.0.3-beta release tracking
primer · Jun 8, 2018 · 5f49fac · 5f49fac
2 parents 200ce11 + af299fc
commit 5f49fac
Show file tree

Hide file tree

Showing 44 changed files with 2,931 additions and 2,288 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -2,3 +2,7 @@ language: node_js
 
 node_js:
   - 8
+
+script:
+  - npm test
+  - npm run build
diff --git a/README.md b/README.md
@@ -26,6 +26,19 @@ Run app with: `npm run start`
 
 Build docs before publishing: `npm run build`
 
+### Testing
+
+We test our components with [Jest](https://facebook.github.io/jest/) and
+[react-test-renderer](https://reactjs.org/docs/test-renderer.html). You can run
+the tests locally with `npm test` (or `npm t`). To run the tests as you work,
+run Jest in watch mode with:
+
+```
+npm t -- --watch
+```
+
+See [`src/__tests__/example.js`](src/__tests/example.js) for an
+example of how we're testing our components.
 
 ## Principles
 

diff --git a/docs/CSS/index.html b/docs/CSS/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="generator" content="Compositor x0"><title>primer-react</title><style>*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif}</style></head><div id="root"><style>* { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+      line-height: 1.5;
+    }</style></div><script src="/primer-react/bundle.js"></script>
diff --git a/docs/GitHubAvatar/index.html b/docs/GitHubAvatar/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="generator" content="Compositor x0"><title>primer-react</title><style>*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif}</style></head><div id="root"><img class="avatar avatar-small" src="https://avatars.githubusercontent.com/undefined?v=3&amp;s=40" width="20" height="20"></div><script src="/primer-react/bundle.js"></script>
diff --git a/docs/Meta/index.html b/docs/Meta/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="generator" content="Compositor x0"><title>primer-react</title><style>*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif}</style></head><div id="root"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="generator" content="Compositor X0"><link rel="stylesheet" href="https://unpkg.com/primer-buttons/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-forms/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-layout/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-product/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-tooltips/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-utilities/build/build.css"><link rel="icon" href="assets/favicon.png"><link rel="apple-touch-icon" href="assets/apple-touch-icon.png"><meta name="og:title" content="Primer React"><meta name="description" content="Primer components built with React.js."></div><script src="/primer-react/bundle.js"></script>
diff --git a/docs/Page/index.html b/docs/Page/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="generator" content="Compositor x0"><title>primer-react</title><style>*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif}</style></head><div id="root"><head><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="generator" content="Compositor X0"><link rel="stylesheet" href="https://unpkg.com/primer-buttons/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-forms/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-layout/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-product/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-tooltips/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-utilities/build/build.css"><link rel="icon" href="assets/favicon.png"><link rel="apple-touch-icon" href="assets/apple-touch-icon.png"><meta name="og:title" content="Primer React"><meta name="description" content="Primer components built with React.js."><style>* { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+      line-height: 1.5;
+    }</style></head><body class="text-dark-gray"></body></div><script src="/primer-react/bundle.js"></script>
diff --git a/docs/Swatch/index.html b/docs/Swatch/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="generator" content="Compositor x0"><title>primer-react</title><style>*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif}</style></head><div id="root"><div match="[object Object]" location="[object Object]" history="[object Object]" staticcontext="[object Object]"><div class="m-1 mt-3 p-6"></div><h3 class="px-1 m-0 f4">.</h3><span class="px-1"></span></div></div><script src="/primer-react/bundle.js"></script>
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/index.html b/docs/index.html
diff --git a/examples/CSS.js b/examples/CSS.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import {theme} from '../src'
+
+const CSS = ({css}) => (
+  <style dangerouslySetInnerHTML={{__html: css}} />
+)
+
+const fonts = theme.fonts
+  .map(name => name.indexOf(' ') > -1 ? `"${name}"` : name)
+  .join(', ')
+
+CSS.defaultProps = {
+  css: `
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: ${fonts};
+      line-height: ${theme.lineHeight};
+    }
+  `
+}
+
+export default CSS
diff --git a/src/Meta.js → examples/Meta.js b/src/Meta.js → examples/Meta.js
@@ -1,18 +1,16 @@
 import React from 'react'
 
 const primerPackages = [
-  'primer-box',
-  'primer-breadcrumb',
+  // 'primer-box',
+  // 'primer-breadcrumb',
   'primer-buttons',
   'primer-forms',
   'primer-layout',
-  'primer-marketing',
-  'primer-navigation',
+  // 'primer-marketing',
+  // 'primer-navigation',
   'primer-product',
-  // 'primer-support',
   // 'primer-table',
   'primer-tooltips',
-  'primer-truncate',
   'primer-utilities',
 ]
 

diff --git a/src/Page.js → examples/Page.js b/src/Page.js → examples/Page.js
@@ -1,23 +1,16 @@
 import CSS from './CSS'
 import Meta from './Meta'
 import React from 'react'
-import theme from './theme'
-import {ThemeProvider} from 'styled-components'
 
 // Generic page wrapper component
 const Page = ({children}) => (
   <React.Fragment>
     <head>
-      <title>Primer React</title>
       <Meta />
       <CSS />
     </head>
-    <body>
-      <ThemeProvider theme={theme}>
-        <div className='text-dark-gray'>
-          {children}
-        </div>
-      </ThemeProvider>
+    <body className='text-dark-gray'>
+      {children}
     </body>
   </React.Fragment>
 )
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!DOCTYPE html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="generator" content="Compositor x0"><title>primer-react</title><style>*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif}</style></head><div id="root"><img class="avatar avatar-small" src="https://avatars.githubusercontent.com/undefined?v=3&s=40" width="20" height="20"></div><script src="/primer-react/bundle.js"></script>