Add copy button for individual story

- Resolves storybookjs#6708
thollander · May 10, 2019 · 91978fe · 91978fe
1 parent 564b117
commit 91978fe
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 10 deletions.
diff --git a/lib/ui/package.json b/lib/ui/package.json
@@ -29,6 +29,7 @@
     "@storybook/core-events": "5.1.0-beta.0",
     "@storybook/router": "5.1.0-beta.0",
     "@storybook/theming": "5.1.0-beta.0",
+    "copy-to-clipboard": "^3.0.8",
     "core-js": "^3.0.1",
     "core-js-pure": "^3.0.1",
     "fast-deep-equal": "^2.0.1",

diff --git a/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot b/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots UI|Preview/Preview no tabs 1`] = `
 Array [
-  .emotion-22 {
+  .emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -39,7 +39,7 @@ Array [
   margin-left: 15px;
 }
 
-.emotion-21 {
+.emotion-24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -54,7 +54,7 @@ Array [
   margin-left: 30px;
 }
 
-.emotion-21 > * {
+.emotion-24 > * {
   margin-right: 15px;
 }
 
@@ -70,7 +70,7 @@ Array [
   fill: currentColor;
 }
 
-.emotion-23 {
+.emotion-26 {
   overflow-y: hidden;
   overflow-x: auto;
   color: #999999;
@@ -133,7 +133,7 @@ Array [
 }
 
 <div
-    class="emotion-23"
+    class="emotion-26"
     data-simplebar="true"
   >
     <div
@@ -343,7 +343,7 @@ Array [
 
 exports[`Storyshots UI|Preview/Preview with tabs 1`] = `
 Array [
-  .emotion-28 {
+  .emotion-31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -478,7 +478,7 @@ Array [
   border-bottom-color: #1EA7FD;
 }
 
-.emotion-27 {
+.emotion-30 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -493,7 +493,7 @@ Array [
   margin-left: 30px;
 }
 
-.emotion-27 > * {
+.emotion-30 > * {
   margin-right: 15px;
 }
 
@@ -509,7 +509,7 @@ Array [
   fill: currentColor;
 }
 
-.emotion-29 {
+.emotion-32 {
   overflow-y: hidden;
   overflow-x: auto;
   color: #999999;
@@ -579,7 +579,7 @@ Array [
 }
 
 <div
-    class="emotion-29"
+    class="emotion-32"
     data-simplebar="true"
   >
     <div

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 =>