Add copy button for individual story

- Resolves #6708
storybookjs · May 5, 2019 · a580bb6 · a580bb6
1 parent 87fd9b9
commit a580bb6
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/lib/ui/package.json b/lib/ui/package.json
@@ -30,6 +30,7 @@
     "@storybook/router": "5.1.0-alpha.39",
     "@storybook/theming": "5.1.0-alpha.39",
     "core-js": "^2.6.5",
+    "copy-to-clipboard": "^3.0.8",
     "fast-deep-equal": "^2.0.1",
     "fuse.js": "^3.4.4",
     "global": "^4.3.2",

diff --git a/lib/ui/src/components/preview/preview.js b/lib/ui/src/components/preview/preview.js
@@ -2,6 +2,7 @@ import window from 'global';
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import memoize from 'memoizerific';
+import copy from 'copy-to-clipboard';
 
 import { styled } from '@storybook/theming';
 import { SET_CURRENT_STORY } from '@storybook/core-events';
@@ -160,6 +161,24 @@ const getTools = memoize(10)(
           </IconButton>
         ),
       },
+      {
+        match: p => p.viewMode === 'story',
+        render: () => (
+          <IconButton
+            key="copy"
+            onClick={() =>
+              copy(
+                `${window.location.origin}${
+                  window.location.pathname
+                }${baseUrl}?id=${storyId}${stringifyQueryParams(queryParams)}`
+              )
+            }
+            title="Copy canvas link"
+          >
+            <Icons icon="copy" />
+          </IconButton>
+        ),
+      },
     ]);
 
     const filter = item =>