Add copy button for individual story

[thollander]

Issue: #6708

What I did

Add copy button to get individual story link.

How to test

There should be a copy button on all stories.

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://monorepo-git-fork-thollander-6708-add-copy-button.storybook.now.sh

[shilman]

@thollander thanks for adding this! the snapshot tests are currently failing due to the change -- would you mind updating the snapshots with yarn test --core --update?

[thollander]

@shilman, sure ! thanks for the tip.

[ndelangen]

@domyen WDYT?

[ndelangen]

Code looks good to me, would like @domyen design eye on this.

[ajitbohra]

Looks good, small suggestion would be good to have some visual feedback that link is copied.

[thollander]

What kind of visual feedback would you put ?
Because you already have a visual feedback with the blue focus :

For instance on GitHub, you only have a blue border :

[domyen]

lgtm

[shilman]

Sneaking this into 5.1

[ndelangen]

Thanks for the contribution @thollander !

[thollander]

No problem @ndelangen !

[Hypnosphi]

@thollander @domyen can we instead make the "Open canvas" control a link instead of a button? Then we would get all the benefits of native HTML links, which include:

– Ability to copy the href from context menu
– Ability to open it in new tab or window using context menu or cmd/ctrl/shift+click or mouse wheel click
– Href is displayed in a corner of browser window on hover
– Builtin support for assistive technologies

[ndelangen]

That sounds like a good improvement indeed!

This would merge both use cases into a single piece of UI.
Maybe a tooltip would be in order?