Add copy to clipboard buttons for usage. Closes #305.

cssnano · Dec 16, 2016 · 0f700f1 · 0f700f1
1 parent 2be47f1
commit 0f700f1
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 8 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -121,5 +121,9 @@
     "toml-loader": "^1.0.0",
     "webpack": "^1.12.1",
     "whatwg-fetch": "^0.11.0"
+  },
+  "dependencies": {
+    "react-clipboard-icon": "^0.2.1",
+    "react-clipboard.js": "^1.0.1"
   }
 }
diff --git a/docs/web_modules/layouts/Usage/index.css b/docs/web_modules/layouts/Usage/index.css
@@ -1,20 +1,54 @@
 .install {
-    display: block;
+    display: flex;
     border: 1px solid #adebc2;
     transition: 0.1s ease;
     transition-property: border;
     background: #fbfefc;
+
+    &:hover {
+        border-color: #40b97b;
+    }
+}
+
+.install a {
+    flex: 1;
     font-size: 1em;
     text-decoration: none;
     padding: 10px;
     color: #303030;
     font-family: Menlo, Monaco, Consolas, monospace;
+    transition: 0.1s ease;
+    transition-property: border-right, background;
+    border-right: 1px solid #fbfefc;
 
     &:before {
         content: '$ ';
     }
 
     &:hover {
-        border-color: #40b97b;
+        background: #d6f5e0;
+        border-right: 1px solid #40b97b;
+    }
+}
+
+.install button {
+    border: none;
+    border-left: 1px solid #fbfefc;
+    flex: 0 100px;
+    cursor: pointer;
+    background: #fbfefc;
+    padding: 10px;
+    font-size: 1em;
+    font-variant: small-caps;
+    transition: 0.1s ease;
+    transition-property: border-left, background;
+
+    & svg {
+        vertical-align: middle;
+    }
+
+    &:hover {
+        background: #d6f5e0;
+        border-left: 1px solid #40b97b;
     }
 }
diff --git a/docs/web_modules/layouts/Usage/index.js b/docs/web_modules/layouts/Usage/index.js
@@ -1,5 +1,7 @@
 import React, {Component, PropTypes} from "react";
 import Lowlight from 'react-lowlight';
+import ClipboardButton from 'react-clipboard.js';
+import ClipboardIcon from 'react-clipboard-icon';
 import js from 'highlight.js/lib/languages/javascript';
 import DangerousMarkdown from '../../DangerousMarkdown';
 import BasicPage from "../BasicPage";
@@ -35,12 +37,12 @@ export default class Optimisations extends Component {
                             <DangerousMarkdown>
                                 {wrapper.example}
                             </DangerousMarkdown>
-                            <a
-                                className={styles.install}
-                                href={wrapper.source}
-                            >
-                                {wrapper.install}
-                            </a>
+                            <div className={styles.install}>
+                                <a href={wrapper.source}>{wrapper.install}</a>
+                                <ClipboardButton data-clipboard-text={wrapper.install}>
+                                  <ClipboardIcon /> Copy
+                                </ClipboardButton>
+                            </div>
                             {alternate}
                         </div>
                     );