Add Nested stories to showcase babel-emotion-plugin

.storybook/.babelrc

@@ -1,10 +1,7 @@
 {
-  "presets": [
-    "env",
-    "react",
-    "flow"
-  ],
+  "presets": ["env", "react", "flow"],
   "plugins": [
+    "emotion",
     "transform-class-properties",
     "transform-flow-strip-types",
     "transform-object-rest-spread"

package.json

@@ -75,6 +75,7 @@
     "@storybook/addons": "^3.4.3",
     "@storybook/cli": "^3.4.11",
     "@storybook/react": "^3.4.3",
+    "babel-plugin-emotion": "^9.2.11",
     "coveralls": "3.0.0",
     "enzyme": "2.9.1",
     "np": "2.20.1",

stories/Nested.stories.js

@@ -0,0 +1,60 @@
+import React from 'react'
+import {storiesOf} from '@storybook/react'
+import styled from '../src'
+
+const stories = storiesOf('Nested', module)
+
+stories.add('Targeting another emotion component', () => {
+  const Child = styled('div')`
+    color: red;
+  `
+
+  const Parent = styled('div')`
+    ${Child} {
+      color: green;
+    }
+  `
+  return (
+    <div>
+      <h3>
+        Note:{' '}
+        <a href="https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion">
+          babel-plugin-emotion
+        </a>{' '}
+        is required for this.
+      </h3>
+      <Parent>
+        <Child>green</Child>
+      </Parent>
+      <Child>red</Child>
+    </div>
+  )
+})
+
+stories.add('Object styles', () => {
+  const Child = styled('div')({
+    color: 'red',
+  })
+
+  const Parent = styled('div')({
+    [Child]: {
+      color: 'green',
+    },
+  })
+
+  return (
+    <div>
+      <h3>
+        Note:{' '}
+        <a href="https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion">
+          babel-plugin-emotion
+        </a>{' '}
+        is required for this.
+      </h3>
+      <Parent>
+        <Child>green</Child>
+      </Parent>
+      <Child>red</Child>
+    </div>
+  )
+})