diff --git a/lib/ui/package.json b/lib/ui/package.json index c73a9202787f..99b5bf046c95 100644 --- 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 index 51226ec6aeca..646dd338d8df 100644 --- 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)( ), }, + { + match: p => p.viewMode === 'story', + render: () => ( + + copy( + `${window.location.origin}${ + window.location.pathname + }${baseUrl}?id=${storyId}${stringifyQueryParams(queryParams)}` + ) + } + title="Copy canvas link" + > + + + ), + }, ]); const filter = item =>