From 7d814721d2b2e840525b692f0316624a58199cb9 Mon Sep 17 00:00:00 2001 From: Filipp Riabchun Date: Sat, 28 Dec 2019 21:16:35 +0100 Subject: [PATCH] Make canvas link a link --- .../src/bar/{button.ts => button.tsx} | 26 ++++++++++++++++--- lib/components/src/blocks/Toolbar.tsx | 12 ++++----- lib/theming/package.json | 1 + lib/theming/src/index.ts | 1 + lib/ui/src/components/preview/preview.js | 5 ++-- yarn.lock | 12 +++++++++ 6 files changed, 45 insertions(+), 12 deletions(-) rename lib/components/src/bar/{button.ts => button.tsx} (67%) diff --git a/lib/components/src/bar/button.ts b/lib/components/src/bar/button.tsx similarity index 67% rename from lib/components/src/bar/button.ts rename to lib/components/src/bar/button.tsx index da09d7ef5fca..e877e42f1f3d 100644 --- a/lib/components/src/bar/button.ts +++ b/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, HTMLButtonElement> { + href?: void; +} +interface LinkProps + extends DetailedHTMLProps, HTMLAnchorElement> { + href: string; +} + +const ButtonOrLink = ({ children, ...restProps }: ButtonProps | LinkProps) => + restProps.href != null ? ( + {children} + ) : ( + + ); export interface TabButtonProps { active?: boolean; textColor?: string; } -export const TabButton = styled.button( +export const TabButton = styled(ButtonOrLink, { shouldForwardProp: isPropValid })( { whiteSpace: 'normal', display: 'inline-flex', @@ -56,8 +75,9 @@ export interface IconButtonProps { active?: boolean; } -export const IconButton = styled.button( +export const IconButton = styled(ButtonOrLink, { shouldForwardProp: isPropValid })( ({ 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 index 0791d39c8a15..af0efb6e4236 100644 --- 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 = ({ zoom, resetZoom }) => ( <> { + onClick={(e: MouseEvent) => { e.preventDefault(); zoom(0.8); }} @@ -36,7 +35,7 @@ const Zoom: FunctionComponent = ({ zoom, resetZoom }) => ( { + onClick={(e: MouseEvent) => { e.preventDefault(); zoom(1.25); }} @@ -46,7 +45,7 @@ const Zoom: FunctionComponent = ({ zoom, resetZoom }) => ( { + onClick={(e: MouseEvent) => { e.preventDefault(); resetZoom(); }} @@ -60,7 +59,8 @@ const Zoom: FunctionComponent = ({ zoom, resetZoom }) => ( const Eject: FunctionComponent = ({ baseUrl, storyId }) => ( window.open(`${baseUrl}?id=${storyId}`)} + href={`${baseUrl}?id=${storyId}`} + target="_blank" title="Open canvas in new tab" > diff --git a/lib/theming/package.json b/lib/theming/package.json index c51d9c8409bc..828bfa52c67f 100644 --- 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.4", "core-js": "^3.0.1", diff --git a/lib/theming/src/index.ts b/lib/theming/src/index.ts index 4a8dd64f646e..7c6760d5ee45 100644 --- 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 index aa1461ad04e4..7591d476a62e 100644 --- a/lib/ui/src/components/preview/preview.js +++ b/lib/ui/src/components/preview/preview.js @@ -153,9 +153,8 @@ const getTools = memoize(10)( render: () => ( - window.open(`${baseUrl}?id=${storyId}${stringifyQueryParams(queryParams)}`) - } + href={`${baseUrl}?id=${storyId}${stringifyQueryParams(queryParams)}`} + target="_blank" title="Open canvas in new tab" > diff --git a/yarn.lock b/yarn.lock index 8b1a179f4b92..3aa2523d22fc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1752,11 +1752,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/memoize@0.7.3": 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/memoize@0.7.4": + 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"