Merge pull request #9257 from storybookjs/canvas-link

Make canvas link a link
storybookjs · Jan 8, 2020 · 6ce622f · 6ce622f
2 parents 9641759 + e1631f3
commit 6ce622f
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 12 deletions.
diff --git a/lib/components/src/bar/button.ts → lib/components/src/bar/button.tsx b/lib/components/src/bar/button.ts → lib/components/src/bar/button.tsx
@@ -1,11 +1,30 @@
-import { styled } from '@storybook/theming';
+import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+import { styled, isPropValid } from '@storybook/theming';
+
+interface ButtonProps
+  extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+  href?: void;
+}
+interface LinkProps
+  extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
+  href: string;
+}
+
+const ButtonOrLink = ({ children, ...restProps }: ButtonProps | LinkProps) =>
+  restProps.href != null ? (
+    <a {...(restProps as LinkProps)}>{children}</a>
+  ) : (
+    <button type="button" {...(restProps as ButtonProps)}>
+      {children}
+    </button>
+  );
 
 export interface TabButtonProps {
   active?: boolean;
   textColor?: string;
 }
 
-export const TabButton = styled.button<TabButtonProps>(
+export const TabButton = styled(ButtonOrLink, { shouldForwardProp: isPropValid })<TabButtonProps>(
   {
     whiteSpace: 'normal',
     display: 'inline-flex',
@@ -56,8 +75,9 @@ export interface IconButtonProps {
   active?: boolean;
 }
 
-export const IconButton = styled.button<IconButtonProps>(
+export const IconButton = styled(ButtonOrLink, { shouldForwardProp: isPropValid })<IconButtonProps>(
   ({ theme }) => ({
+    display: 'inline-flex',
     height: 40,
     background: 'none',
     color: 'inherit',

diff --git a/lib/components/src/blocks/Toolbar.tsx b/lib/components/src/blocks/Toolbar.tsx
@@ -1,7 +1,6 @@
-import React, { Fragment, FunctionComponent } from 'react';
+import React, { Fragment, FunctionComponent, MouseEvent } from 'react';
 import { styled } from '@storybook/theming';
 
-import { window } from 'global';
 import { FlexBar } from '../bar/bar';
 import { Icons } from '../icon/icon';
 import { IconButton } from '../bar/button';
@@ -26,7 +25,7 @@ const Zoom: FunctionComponent<ZoomProps> = ({ zoom, resetZoom }) => (
   <>
     <IconButton
       key="zoomin"
-      onClick={e => {
+      onClick={(e: MouseEvent<HTMLButtonElement>) => {
         e.preventDefault();
         zoom(0.8);
       }}
@@ -36,7 +35,7 @@ const Zoom: FunctionComponent<ZoomProps> = ({ zoom, resetZoom }) => (
     </IconButton>
     <IconButton
       key="zoomout"
-      onClick={e => {
+      onClick={(e: MouseEvent<HTMLButtonElement>) => {
         e.preventDefault();
         zoom(1.25);
       }}
@@ -46,7 +45,7 @@ const Zoom: FunctionComponent<ZoomProps> = ({ zoom, resetZoom }) => (
     </IconButton>
     <IconButton
       key="zoomreset"
-      onClick={e => {
+      onClick={(e: MouseEvent<HTMLButtonElement>) => {
         e.preventDefault();
         resetZoom();
       }}
@@ -60,7 +59,8 @@ const Zoom: FunctionComponent<ZoomProps> = ({ zoom, resetZoom }) => (
 const Eject: FunctionComponent<EjectProps> = ({ baseUrl, storyId }) => (
   <IconButton
     key="opener"
-    onClick={() => window.open(`${baseUrl}?id=${storyId}`)}
+    href={`${baseUrl}?id=${storyId}`}
+    target="_blank"
     title="Open canvas in new tab"
   >
     <Icons icon="share" />

diff --git a/lib/theming/package.json b/lib/theming/package.json
@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@emotion/core": "^10.0.20",
+    "@emotion/is-prop-valid": "^0.8.6",
     "@emotion/styled": "^10.0.17",
     "@storybook/client-logger": "5.3.0-rc.12",
     "core-js": "^3.0.1",

diff --git a/lib/theming/src/index.ts b/lib/theming/src/index.ts
@@ -8,6 +8,7 @@ export * from './types';
 
 export * from '@emotion/core';
 export * from 'emotion-theming';
+export { default as isPropValid } from '@emotion/is-prop-valid';
 
 export { createGlobal, createReset } from './global';
 export * from './create';

diff --git a/lib/ui/src/components/preview/preview.js b/lib/ui/src/components/preview/preview.js
@@ -154,9 +154,8 @@ const getTools = memoize(10)(
         render: () => (
           <IconButton
             key="opener"
-            onClick={() =>
-              window.open(`${baseUrl}?id=${storyId}${stringifyQueryParams(queryParams)}`)
-            }
+            href={`${baseUrl}?id=${storyId}${stringifyQueryParams(queryParams)}`}
+            target="_blank"
             title="Open canvas in new tab"
           >
             <Icons icon="share" />

diff --git a/yarn.lock b/yarn.lock
@@ -1857,11 +1857,23 @@
   dependencies:
     "@emotion/memoize" "0.7.3"
 
+"@emotion/is-prop-valid@^0.8.6":
+  version "0.8.6"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.6.tgz#4757646f0a58e9dec614c47c838e7147d88c263c"
+  integrity sha512-mnZMho3Sq8BfzkYYRVc8ilQTnc8U02Ytp6J1AwM6taQStZ3AhsEJBX2LzhA/LJirNCwM2VtHL3VFIZ+sNJUgUQ==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
 "@emotion/[email protected]":
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.3.tgz#5b6b1c11d6a6dddf1f2fc996f74cf3b219644d78"
   integrity sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow==
 
+"@emotion/[email protected]":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@emotion/native@^10.0.14":
   version "10.0.22"
   resolved "https://registry.yarnpkg.com/@emotion/native/-/native-10.0.22.tgz#db1495b4bb46263734d9a737e5a4c8017211eb14"