feat(ComponentExample): add copy JSX button (#582)

docs/app/Components/ComponentDoc/ComponentExample.js

@@ -3,6 +3,7 @@ import _ from 'lodash'
 import React, { Component, createElement, isValidElement, PropTypes } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { html } from 'js-beautify'
+import copyToClipboard from 'copy-to-clipboard'
 
 import { exampleContext } from 'docs/app/utils'
 import { Label, Divider, Grid, Icon, Header } from 'src'
@@ -80,6 +81,12 @@ export default class ComponentExample extends Component {
     })
   }
 
+  copyToClipboard = () => {
+    const { sourceCode } = this.state
+    copyToClipboard(sourceCode)
+    alert('Copied to clipboard!')
+  }
+
   resetEditor = () => {
     const sourceCode = this.getOriginalSourceCode()
     this.setState({ sourceCode })
@@ -193,6 +200,15 @@ export default class ComponentExample extends Component {
     return (
       <Grid.Column style={style}>
         <Divider horizontal>
+          <Label
+            as='a'
+            basic
+            horizontal
+            color={error ? 'red' : 'green'}
+            icon='copy'
+            content={error ? 'See Error' : 'JSX'}
+            onClick={this.copyToClipboard}
+          />
           <Label
             as='a'
             basic

package.json

@@ -67,6 +67,7 @@
     "chai": "^3.3.0",
     "chai-enzyme": "^0.5.0",
     "connect-history-api-fallback": "^1.2.0",
+    "copy-to-clipboard": "^3.0.5",
     "cross-env": "^2.0.0",
     "css-loader": "^0.23.1",
     "del": "^2.2.2",