Merge pull request #6 from primer/release-1.0.2

Release 1.0.2
primer · Jul 27, 2018 · 4ea9fe2 · 4ea9fe2
2 parents 0f84146 + a2679b0
commit 4ea9fe2
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+# 1.0.2 (2018-07-20)
+
+#### :bug: Bug Fix
+* [#3](https://github.com/primer/primer-primitives/pull/6) Fix spacing to be an array instead of an object. ([@broccolini](https://github.com/broccolini))
+
+#### :memo: Documentation
+* [#3](https://github.com/primer/primer-primitives/pull/6) Add usage example to README. ([@broccolini](https://github.com/broccolini))
+
 # 1.0.1 (2018-05-10)
 
 #### :bug: Bug Fix

diff --git a/README.md b/README.md
@@ -19,6 +19,54 @@ This repository is distributed with [npm][npm]. After [installing npm][install-n
 $ npm install --save primer-primitives
 ```
 
+## Usage
+
+JSON is a highly interoperable format that can be used in many types of projects. You could write scripts to generate CSS, use with plugins for design tools, or import into a theme file for use with CSS-in-JS projects.
+
+### Example
+
+This shows an example for a React.js project. You can import Primer Primitives to provide theme values to a `ThemeProvider`. This is a great way of sharing system styles and can be achieved with popular CSS-in-JS libraries such as [styled-components](https://www.styled-components.com/) and [emotion](https://emotion.sh/).
+
+Here's an example using `styled-components`.
+
+```js
+import React from 'react'
+import styled, { ThemeProvider } from 'styled-components'
+import theme from 'primer-primitives'
+
+const Alert = styled.div`
+  color: ${props => props.theme.colors.green[9]};
+  background-color: ${props => props.theme.colors.green[2]};
+`
+
+const App = props => (
+  <ThemeProvider theme={theme}>
+    <Alert />
+  </ThemeProvider>
+)
+
+```
+
+When used with libraries like [styled-system](https://jxnblk.com/styled-system/), you can make Primer Primitives available to style functions. In this example, we've imported the color function to the component's styles argument. The color values are from the color JSON object in Primer Primitives.
+
+```js
+import React from 'react'
+import styled, { ThemeProvider } from 'styled-components'
+import theme from 'primer-primitives'
+import { color } from 'styled-system'
+
+const Alert = styled.div`
+  ${color}
+`
+
+const App = props => (
+  <ThemeProvider theme={theme}>
+    <Alert color='green.0' bg='green.2' />
+  </ThemeProvider>
+)
+
+```
+
 ## License
 
 [MIT](./LICENSE) &copy; [GitHub](https://github.com/)

diff --git a/modules/primer-primitives/package.json b/modules/primer-primitives/package.json
@@ -1,6 +1,6 @@
 {
   "name": "primer-primitives",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "main": "index.js",
   "repository": "https://github.com/primer/primer-primitives/tree/master/modules/primer-primitives",
@@ -20,7 +20,7 @@
   "homepage": "https://github.com/primer/primer-primitives#readme",
   "dependencies": {
     "primer-colors": "^1.0.1",
-    "primer-spacing": "^1.0.1",
+    "primer-spacing": "^1.0.2",
     "primer-typography": "^1.0.1"
   }
 }
diff --git a/modules/primer-spacing/package.json b/modules/primer-spacing/package.json
@@ -1,6 +1,6 @@
 {
   "name": "primer-spacing",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Spacing primitives for Primer design system",
   "main": "spacing.json",
   "repository": "https://github.com/primer/primer-primitives/tree/master/modules/primer-spacing",

diff --git a/modules/primer-spacing/spacing.json b/modules/primer-spacing/spacing.json
@@ -1,12 +1,10 @@
-{
-  "space": [
-    0,
-    4,
-    8,
-    16,
-    24,
-    32,
-    40,
-    48
-  ]
-}
+[
+  0,
+  4,
+  8,
+  16,
+  24,
+  32,
+  40,
+  48
+]