From b59d7abef48fe25d08aadc89126cd163d2069268 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 6 Mar 2020 20:21:50 +0100 Subject: [PATCH 01/13] MIGRATE badge from css template literal to css objects --- lib/components/src/Badge/Badge.tsx | 113 +++++++++++++++-------------- 1 file changed, 58 insertions(+), 55 deletions(-) diff --git a/lib/components/src/Badge/Badge.tsx b/lib/components/src/Badge/Badge.tsx index fd0576ab6985..186d9caa8d71 100644 --- a/lib/components/src/Badge/Badge.tsx +++ b/lib/components/src/Badge/Badge.tsx @@ -1,63 +1,66 @@ import React, { FunctionComponent } from 'react'; -import { styled, css } from '@storybook/theming'; +import { styled } from '@storybook/theming'; -type BadgeWrapperProps = BadgeProps; +const BadgeWrapper = styled.div( + ({ theme }) => ({ + display: 'inline-block', + fontSize: 11, + lineHeight: '12px', + alignSelf: 'center', + padding: '4px 12px', + borderRadius: '3em', + fontWeight: theme.typography.weight.bold, + }), + { + svg: { + height: 12, + width: 12, + marginRight: 4, + marginTop: -2, -const BadgeWrapper = styled.div` - display: inline-block; - font-size: 11px; - line-height: 12px; - align-self: center; - padding: 4px 12px; - border-radius: 3em; - font-weight: ${props => props.theme.typography.weight.bold}; - - svg { - height: 12px; - width: 12px; - margin-right: 4px; - margin-top: -2px; - - path { - fill: currentColor; + path: { + fill: 'currentColor', + }, + }, + }, + ({ theme, status }) => { + switch (status) { + case 'critical': { + return { + color: theme.color.critical, + background: theme.background.critical, + }; + } + case 'negative': { + return { + color: theme.color.negative, + background: theme.background.negative, + }; + } + case 'warning': { + return { + color: theme.color.warning, + background: theme.background.warning, + }; + } + case 'neutral': { + return { + color: theme.color.dark, + background: theme.color.mediumlight, + }; + } + case 'positive': { + return { + color: theme.color.positive, + background: theme.background.positive, + }; + } + default: { + return {}; + } } } - - ${props => - props.status === 'critical' && - css` - color: ${props.theme.color.critical}; - background: ${props.theme.background.critical}; - `}; - - ${props => - props.status === 'negative' && - css` - color: ${props.theme.color.negative}; - background: ${props.theme.background.negative}; - `}; - - ${props => - props.status === 'warning' && - css` - color: ${props.theme.color.warning}; - background: ${props.theme.background.warning}; - `}; - - ${props => - props.status === 'neutral' && - css` - color: ${props.theme.color.dark}; - background: ${props.theme.color.mediumlight}; - `}; - - ${props => - props.status === 'positive' && - css` - color: ${props.theme.color.positive}; - background: ${props.theme.background.positive}; - `}; -`; +); export interface BadgeProps { status: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical'; From e7005cf49f1f7ee8e0882b2d52a20d2b3df6dd02 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 6 Mar 2020 20:10:12 +0100 Subject: [PATCH 02/13] REMOVE need for shadow prop --- lib/ui/src/components/layout/container.tsx | 3 +- lib/ui/src/components/layout/desktop.tsx | 119 +++++++++++---------- lib/ui/src/components/layout/draggers.tsx | 10 +- 3 files changed, 68 insertions(+), 64 deletions(-) diff --git a/lib/ui/src/components/layout/container.tsx b/lib/ui/src/components/layout/container.tsx index c6fcd354836b..0c42a598541e 100644 --- a/lib/ui/src/components/layout/container.tsx +++ b/lib/ui/src/components/layout/container.tsx @@ -510,7 +510,7 @@ class Layout extends Component { onDrag={this.resizeNav} onStop={this.unsetDrag} > - + )} @@ -539,7 +539,6 @@ class Layout extends Component { > ( - ({ - Panel, - Sidebar, - Preview, - Notifications, - pages, - options, - viewMode = undefined, - width = 0, - height = 0, - panelCount, - docsOnly = false, - }) => ( - - - {width && height ? ( - - {({ navProps, mainProps, panelProps, previewProps }) => ( - - - - - - +const Desktop = Object.assign( + React.memo( + ({ + Panel, + Sidebar, + Preview, + Notifications, + pages, + options, + viewMode = undefined, + width = 0, + height = 0, + panelCount, + docsOnly = false, + }) => ( + + + {width && height ? ( + + {({ navProps, mainProps, panelProps, previewProps }) => ( + + + + + + - + - {pages.map(({ key, route: Route, render: Content }) => ( - - - - ))} - - - )} - - ) : ( -
- )} - - ) + {pages.map(({ key, route: Route, render: Content }) => ( + + + + ))} + + + )} + + ) : ( +
+ )} + + ) + ), + { + displayName: 'DesktopLayout', + } ); -Desktop.displayName = 'DesktopLayout'; - export { Desktop }; diff --git a/lib/ui/src/components/layout/draggers.tsx b/lib/ui/src/components/layout/draggers.tsx index 0380bd7683c5..9fd3b6a545bd 100644 --- a/lib/ui/src/components/layout/draggers.tsx +++ b/lib/ui/src/components/layout/draggers.tsx @@ -1,7 +1,9 @@ import Draggable, { DraggableEvent, DraggableData } from 'react-draggable'; import { styled } from '@storybook/theming'; -const Handle = styled.div<{ isDragging: boolean; axis: 'x' | 'y'; shadow: 'top' | 'left' }>( +type Axis = 'x' | 'y'; + +const Handle = styled.div<{ isDragging: boolean; axis: Axis }>( ({ theme, isDragging }) => ({ zIndex: 10, position: 'absolute', @@ -35,8 +37,8 @@ const Handle = styled.div<{ isDragging: boolean; axis: 'x' | 'y'; shadow: 'top' width: '100%', marginTop: 0, }, - ({ shadow, isDragging }) => { - if (shadow === 'top') { + ({ axis, isDragging }) => { + if (axis === 'x') { const style = { backgroundImage: `radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)`, backgroundSize: '100% 50px', @@ -51,7 +53,7 @@ const Handle = styled.div<{ isDragging: boolean; axis: 'x' | 'y'; shadow: 'top' '&:hover': style, }; } - if (shadow === 'left') { + if (axis === 'y') { const style = { backgroundImage: `radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)`, backgroundSize: '50px 100%', From 0fad41972d5793dfce65125fed8fac96e926a04b Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 6 Mar 2020 10:21:55 +0100 Subject: [PATCH 03/13] IMPROVE typings of Button --- lib/components/src/Button/Button.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/components/src/Button/Button.tsx b/lib/components/src/Button/Button.tsx index 63e515b10d20..40d7d1965178 100644 --- a/lib/components/src/Button/Button.tsx +++ b/lib/components/src/Button/Button.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef } from 'react'; +import React, { forwardRef, FunctionComponent, ComponentProps } from 'react'; import { styled } from '@storybook/theming'; import { darken, lighten, rgba, transparentize } from 'polished'; @@ -226,7 +226,7 @@ const ButtonWrapper = styled.button( const ButtonLink = ButtonWrapper.withComponent('a'); -export const Button = Object.assign( +export const Button: FunctionComponent> = Object.assign( forwardRef(({ isLink, children, ...props }, ref) => { if (isLink) { return ( From 2c92063c760aa6f69bd685a17809f513006fd8ad Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 6 Mar 2020 20:50:15 +0100 Subject: [PATCH 04/13] ADD gray button --- lib/components/src/Button/Button.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/lib/components/src/Button/Button.tsx b/lib/components/src/Button/Button.tsx index 40d7d1965178..22e15a04bd51 100644 --- a/lib/components/src/Button/Button.tsx +++ b/lib/components/src/Button/Button.tsx @@ -7,6 +7,7 @@ export interface ButtonProps { primary?: boolean; secondary?: boolean; tertiary?: boolean; + gray?: boolean; inForm?: boolean; disabled?: boolean; small?: boolean; @@ -78,7 +79,7 @@ const ButtonWrapper = styled.button( ...(small ? { padding: 9 } : { padding: 12 }), } : {}, - ({ theme, primary, secondary }) => { + ({ theme, primary, secondary, gray }) => { let color; if (primary) { @@ -87,11 +88,14 @@ const ButtonWrapper = styled.button( if (secondary) { color = theme.color.secondary; } + if (gray) { + color = theme.color.medium; + } return color ? { background: color, - color: theme.color.lightest, + color: gray ? '#333333' : theme.color.inverseText, '&:hover': { background: darken(0.05, color), From 29bc5928bdaa59f987b49271255d22e04496fddf Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 5 Mar 2020 15:12:49 +0100 Subject: [PATCH 05/13] CHANGE Spaced to work across any type of children --- lib/components/src/spaced/Spaced.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/lib/components/src/spaced/Spaced.tsx b/lib/components/src/spaced/Spaced.tsx index 7666a4264932..c0354500b9cc 100644 --- a/lib/components/src/spaced/Spaced.tsx +++ b/lib/components/src/spaced/Spaced.tsx @@ -3,6 +3,9 @@ import { styled } from '@storybook/theming'; const toNumber = (input: any) => (typeof input === 'number' ? input : Number(input)); +const ignoreSsrWarning = + '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */'; + export interface ContainerProps { col?: number; row?: number; @@ -19,7 +22,7 @@ const Container = styled.div( marginLeft: col * theme.layoutMargin, verticalAlign: 'inherit', }, - '& > *:first-of-type': { + [`& > *:first-child${ignoreSsrWarning}`]: { marginLeft: 0, }, } @@ -27,7 +30,7 @@ const Container = styled.div( '& > *': { marginTop: row * theme.layoutMargin, }, - '& > *:first-of-type': { + [`& > *:first-child${ignoreSsrWarning}`]: { marginTop: 0, }, }, From 408067063ed45b01e90573e723d1b43e8e49d9ac Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 5 Mar 2020 14:09:38 +0100 Subject: [PATCH 06/13] ADD documentation for theme colors in dark & light --- lib/components/src/Colors/SideBySide.tsx | 18 +++ .../src/Colors/colorpalette.stories.mdx | 123 ++++++++++++++++++ 2 files changed, 141 insertions(+) create mode 100644 lib/components/src/Colors/SideBySide.tsx create mode 100644 lib/components/src/Colors/colorpalette.stories.mdx diff --git a/lib/components/src/Colors/SideBySide.tsx b/lib/components/src/Colors/SideBySide.tsx new file mode 100644 index 000000000000..e2e95e7b80dc --- /dev/null +++ b/lib/components/src/Colors/SideBySide.tsx @@ -0,0 +1,18 @@ +import { styled } from '@storybook/theming'; + +export const SideBySide = styled.div({ + display: 'grid', + gridColumnGap: 30, + gridTemplateColumns: '1fr 1fr', + + position: 'absolute', + width: '100vw', + height: '100vh', + overflow: 'auto', + top: 0, + left: 0, + + '& > *': { + padding: 20, + }, +}); diff --git a/lib/components/src/Colors/colorpalette.stories.mdx b/lib/components/src/Colors/colorpalette.stories.mdx new file mode 100644 index 000000000000..b7f2f8813db8 --- /dev/null +++ b/lib/components/src/Colors/colorpalette.stories.mdx @@ -0,0 +1,123 @@ +import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks'; + +import { themes, ThemeProvider, convert } from '@storybook/theming'; + +import { SideBySide } from './SideBySide'; + + + + +
+ + +Dark theme Colors + + + {Object.entries(convert(themes.dark).color).map(([k,v]) => { + if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) { + return ( + + ); + } else if (typeof v === 'object') { + return ( + (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {})} + /> + ); + } + return null; + })} + + +Dark theme Backgrounds + + + {Object.entries(convert(themes.dark).background).map(([k,v]) => { + if(k === 'color'){ + return null + } + if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) { + return ( + + ); + } else if (typeof v === 'object') { + const colors = Object.entries(v).reduce((acc, [key, value]) => (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {}); + return ( + + ); + } + return null; + })} + +
+
+ +Light theme Colors + + + {Object.entries(convert(themes.light).color).map(([k,v]) => { + if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) { + return ( + + ); + } else if (typeof v === 'object') { + return ( + (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {})} + /> + ); + } + return null; + })} + + +Light theme Backgrounds + + + {Object.entries(convert(themes.light).background).map(([k,v]) => { + if(k === 'color'){ + return null + } + if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) { + return ( + + ); + } else if (typeof v === 'object') { + const colors = Object.entries(v).reduce((acc, [key, value]) => (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {}); + return ( + + ); + } + return null; + })} + +
+ From 3d9230dbc8e6eec81572a44878ce0135664235c7 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 5 Mar 2020 14:10:06 +0100 Subject: [PATCH 07/13] CHANGE theme so when in dark mode lightest === darkest etc. --- lib/theming/src/convert.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/lib/theming/src/convert.ts b/lib/theming/src/convert.ts index c35030a6ae1d..da0666ded750 100644 --- a/lib/theming/src/convert.ts +++ b/lib/theming/src/convert.ts @@ -49,15 +49,15 @@ const createColors = (vars: ThemeVars): Color => ({ ultraviolet: color.ultraviolet, // Monochrome - lightest: color.lightest, - lighter: color.lighter, - light: color.light, - mediumlight: color.mediumlight, + lightest: vars.base === 'dark' ? color.darkest : color.lightest, + lighter: vars.base === 'dark' ? color.darker : color.lighter, + light: vars.base === 'dark' ? color.dark : color.light, + mediumlight: vars.base === 'dark' ? color.mediumdark : color.mediumlight, medium: color.medium, - mediumdark: color.mediumdark, - dark: color.dark, - darker: color.darker, - darkest: color.darkest, + mediumdark: vars.base === 'dark' ? color.mediumlight : color.mediumdark, + dark: vars.base === 'dark' ? color.light : color.dark, + darker: vars.base === 'dark' ? color.lighter : color.darker, + darkest: vars.base === 'dark' ? color.lightest : color.darkest, // For borders border: color.border, From 4d6b443e47065c5295e8957aa2c550a5263a6ae5 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 5 Mar 2020 15:12:08 +0100 Subject: [PATCH 08/13] IMPROVE theming on colors documentation page --- lib/components/src/Colors/colorpalette.stories.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/components/src/Colors/colorpalette.stories.mdx b/lib/components/src/Colors/colorpalette.stories.mdx index b7f2f8813db8..89116dcf34a4 100644 --- a/lib/components/src/Colors/colorpalette.stories.mdx +++ b/lib/components/src/Colors/colorpalette.stories.mdx @@ -1,6 +1,6 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks'; -import { themes, ThemeProvider, convert } from '@storybook/theming'; +import { themes, ThemeProvider, convert, ensure } from '@storybook/theming'; import { SideBySide } from './SideBySide'; @@ -8,7 +8,7 @@ import { SideBySide } from './SideBySide';
- + Dark theme Colors From 9e9ef39013e116887d99a69238acbd72cfe0dfe6 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 5 Mar 2020 11:32:02 +0100 Subject: [PATCH 09/13] IMPROVE typings of toolbar --- lib/components/src/blocks/Toolbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/src/blocks/Toolbar.tsx b/lib/components/src/blocks/Toolbar.tsx index af0efb6e4236..b3e9909b24f7 100644 --- a/lib/components/src/blocks/Toolbar.tsx +++ b/lib/components/src/blocks/Toolbar.tsx @@ -67,7 +67,7 @@ const Eject: FunctionComponent = ({ baseUrl, storyId }) => ( ); -const Bar = styled(props => )({ +const Bar = styled(FlexBar)({ position: 'absolute', left: 0, right: 0, From 77ef83c71e643066962e265c4e7e9c1cc6f87529 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 5 Mar 2020 11:31:36 +0100 Subject: [PATCH 10/13] FIX Loader not visible on dark backgrounds --- lib/components/src/Loader/Loader.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/lib/components/src/Loader/Loader.tsx b/lib/components/src/Loader/Loader.tsx index 01f7b5645006..a181f040ba03 100644 --- a/lib/components/src/Loader/Loader.tsx +++ b/lib/components/src/Loader/Loader.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { styled } from '@storybook/theming'; -import { transparentize, opacify } from 'polished'; import { rotate360 } from '../shared/animation'; const LoaderWrapper = styled.div(({ theme }) => ({ @@ -20,9 +19,11 @@ const LoaderWrapper = styled.div(({ theme }) => ({ zIndex: 4, borderWidth: 2, borderStyle: 'solid', - borderColor: transparentize(0.06, theme.appBorderColor), - borderTopColor: opacify(0.07, theme.appBorderColor), + borderColor: 'rgba(0, 0, 0, 0)', + borderTopColor: 'rgb(136, 136, 136)', animation: `${rotate360} 0.7s linear infinite`, + mixBlendMode: 'exclusion', + opacity: 0.7, })); export function Loader({ ...props }) { From 796807dcc7be6a3f7867e1d683ff54986b420fec Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 6 Mar 2020 21:56:24 +0100 Subject: [PATCH 11/13] IMPROVE typings of Loader && ADD size prop && make story clear it's using blend-mode --- lib/components/src/Loader/Loader.stories.tsx | 30 +++++++++++++++++- lib/components/src/Loader/Loader.tsx | 32 ++++++++------------ 2 files changed, 41 insertions(+), 21 deletions(-) diff --git a/lib/components/src/Loader/Loader.stories.tsx b/lib/components/src/Loader/Loader.stories.tsx index 33e4cca3b6f3..510fd5d1b0aa 100644 --- a/lib/components/src/Loader/Loader.stories.tsx +++ b/lib/components/src/Loader/Loader.stories.tsx @@ -2,4 +2,32 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { Loader } from './Loader'; -storiesOf('Basics/Loader', module).add('infinite state', () => ); +storiesOf('Basics/Loader', module) + .addDecorator(storyFn => ( +
+ + {storyFn()} +
+ )) + .add('infinite state', () => ) + .add('size adjusted', () => ); diff --git a/lib/components/src/Loader/Loader.tsx b/lib/components/src/Loader/Loader.tsx index a181f040ba03..b642833a279f 100644 --- a/lib/components/src/Loader/Loader.tsx +++ b/lib/components/src/Loader/Loader.tsx @@ -1,8 +1,8 @@ -import React from 'react'; +import React, { FunctionComponent, ComponentProps } from 'react'; import { styled } from '@storybook/theming'; import { rotate360 } from '../shared/animation'; -const LoaderWrapper = styled.div(({ theme }) => ({ +const LoaderWrapper = styled.div<{ size?: number }>(({ size = 32 }) => ({ borderRadius: '3em', cursor: 'progress', display: 'inline-block', @@ -12,27 +12,19 @@ const LoaderWrapper = styled.div(({ theme }) => ({ verticalAlign: 'top', top: '50%', left: '50%', - marginTop: -16, - marginLeft: -16, - height: 32, - width: 32, + marginTop: -(size / 2), + marginLeft: -(size / 2), + height: size, + width: size, zIndex: 4, borderWidth: 2, borderStyle: 'solid', - borderColor: 'rgba(0, 0, 0, 0)', - borderTopColor: 'rgb(136, 136, 136)', + borderColor: 'rgba(97, 97, 97, 0.29)', + borderTopColor: 'rgb(100,100,100)', animation: `${rotate360} 0.7s linear infinite`, - mixBlendMode: 'exclusion', - opacity: 0.7, + mixBlendMode: 'difference', })); -export function Loader({ ...props }) { - return ( - - ); -} +export const Loader: FunctionComponent> = props => ( + +); From be5d07fec87b4f01ddd10cd65a17779eac75f7ab Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 6 Mar 2020 23:37:01 +0100 Subject: [PATCH 12/13] FIX shadows --- lib/ui/src/components/layout/draggers.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/ui/src/components/layout/draggers.tsx b/lib/ui/src/components/layout/draggers.tsx index 9fd3b6a545bd..9d145bbb2039 100644 --- a/lib/ui/src/components/layout/draggers.tsx +++ b/lib/ui/src/components/layout/draggers.tsx @@ -38,7 +38,7 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis }>( marginTop: 0, }, ({ axis, isDragging }) => { - if (axis === 'x') { + if (axis === 'y') { const style = { backgroundImage: `radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)`, backgroundSize: '100% 50px', @@ -53,7 +53,7 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis }>( '&:hover': style, }; } - if (axis === 'y') { + if (axis === 'x') { const style = { backgroundImage: `radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)`, backgroundSize: '50px 100%', From eddbc0f6c5b6d9f5ac6883fe99378cbf736f52a6 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sat, 7 Mar 2020 00:04:06 +0100 Subject: [PATCH 13/13] ADD gray button to story --- lib/components/src/Button/Button.stories.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lib/components/src/Button/Button.stories.tsx b/lib/components/src/Button/Button.stories.tsx index 9eb18d888821..da248be179cb 100644 --- a/lib/components/src/Button/Button.stories.tsx +++ b/lib/components/src/Button/Button.stories.tsx @@ -36,6 +36,9 @@ storiesOf('Basics/Button', module).add('all buttons', () => ( +