Merge pull request #20 from helpscout/2.0.0

Fancy - v2.0.0
helpscout · Jul 3, 2018 · cd5f6b2 · cd5f6b2
2 parents 7bb2b9d + 496e646
commit cd5f6b2
Show file tree

Hide file tree

Showing 78 changed files with 5,238 additions and 4,926 deletions.
diff --git a/.storybook/.babelrc b/.storybook/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    "env",
+    "react",
+    "flow"
+  ],
+  "plugins": [
+    "transform-class-properties",
+    "transform-flow-strip-types",
+    "transform-object-rest-spread"
+  ]
+}
diff --git a/README.md b/README.md
@@ -2,14 +2,13 @@
 
 > A simple way to include CSS with React Components.
 
-- **Tiny**, around 4 KB gzipped
-- **One dependency** - ([Stylis](https://github.com/thysultan/stylis.js))
+- **[Emotion](https://github.com/emotion-js/emotion)**, under the hood.
 - **Write** plain ol' CSS. Period.
 - **Pre-processing** when you need it. Powered by [Stylis](https://github.com/thysultan/stylis.js).
-- **Uniquely** generated classNames, [CSS Modules](https://github.com/css-modules/css-modules) style.
 - **Integrate** with ease into your existing setup. No fiddling with Webpack required.
-- **HTML primitive** creation, [Styled Components](https://www.styled-components.com/) style.
+- **iFrame** support, out-of-the-box!
 - **Theming** support!
+- **Scoping**, to integrate into older (more hostile) CSS systems.
 
 ## 🔧 Installation
 
@@ -25,13 +24,6 @@ Here's a quick example of how you can compose regular CSS with your React compon
 import React from 'react'
 import styled from '@helpscout/fancy'
 
-const css = `
-  .Button {
-    background: white;
-    border: 1px solid #eee;
-  }
-`
-
 const Button = props => {
   const { children, styles, ...rest } = props
 
@@ -40,13 +32,21 @@ const Button = props => {
   </button>
 }
 
-export default styled(Button)(css)
+export default styled(Button)`
+  background: white;
+  border: 1px solid #eee;
+`
 ```
 
 ## 📘 Documentation
 
 [View the docs](./docs/) to get started with Fancy!
 
-## Migration
+## 💼 Migration
 
+- [From v1.x to v2.x](./docs/migration/migration-1x-2x.md)
 - [From v0.x to v1.x](./docs/migration/migration-0x-1x.md)
+
+## ❤️ Credit
+
+Many thanks to the folks who built [Emotion](https://github.com/emotion-js/emotion) and [Styled Components](https://github.com/styled-components/styled-components).
diff --git a/docs/README.md b/docs/README.md
@@ -1,11 +1,8 @@
 # Documentation
 
 - [Getting started](./getting-started.md)
-- [Nesting](./nesting.md)
-- [Dynamic styles](./dynamic-styles.md)
-- [Dynamic classNames](./dynamic-classnames.md)
+- [Usage](./usage.md)
+- [HTML primitives](./primitives.md)
+- [iFrames](./iframes.md)
 - [Theming](./theming.md)
 - [Scoping](./scoping.md)
-- [HTML primitives](./primitives.md)
-- [Component styling](./component-styling.md)
-- [Style interpolation](./style-interpolation.md)
diff --git a/docs/component-styling.md b/docs/component-styling.md
diff --git a/docs/dynamic-classnames.md b/docs/dynamic-classnames.md
diff --git a/docs/dynamic-styles.md b/docs/dynamic-styles.md
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -1,5 +1,7 @@
 # Getting started
 
+Under the hood, Fancy is powered by an enhanced fork of [Emotion](https://emotion.sh/). It can do everything that Emotion can!
+
 In this guide, we're going to be "fancifying" a React component with some basic CSS styles.
 
 ### Step 1: Import Fancy
@@ -14,11 +16,9 @@ import fancy from '@helpscout/fancy'
 Write your CSS styles as a string. This is default out-of-the-box CSS. Use things like `:hover`, `@media` queries, as you normally would!
 
 ```jsx
-const css = `
-  .Button {
-    background: white;
-    border: 1px solid #eee;
-  }
+;`
+  background: white;
+  border: 1px solid #eee;
 `
 ```
 
@@ -48,16 +48,12 @@ export default styled(Buton)(css)
 import React from 'react'
 import fancy from '@helpscout/fancy'
 
-const css = `
-  .Button {
-    background: white;
-    border: 1px solid #eee;
-  }
-`
-
 const Button = props => <button className="Button" {...props} />
 
-export default styled(Button)(css)
+export default styled(Button)`
+  background: white;
+  border: 1px solid #eee;
+`
 ```
 
 ### Results
@@ -66,15 +62,15 @@ export default styled(Button)(css)
 <html>
   <head>
     <style type='text/css'>
-    .Button {
+    .css-123nd1 {
       background: white;
       border: 1px solid #eee;
     }
     </style>
   </head>
   <body>
     ...
-    <button class='Button'>Button</button>
+    <button class='css-123nd1'>Button</button>
     ...
   </body>
 </html>
@@ -84,7 +80,5 @@ That's it! You're done 🙌. You've created a CSS-ready component.
 
 ## See also
 
-- [Primitives](./primitives.md)
-- [Component styling](./component-styling.md)
-- [Style interpolation](./style-interpolation.md)
+- [Scoping](./scoping.md)
 - [Theming](./theming.md)