From 2919d56e0cdadee51e6436a247e16b8d4d6eae1e Mon Sep 17 00:00:00 2001 From: Marco Ciampini <marco.ciampo@gmail.com> Date: Mon, 31 Jan 2022 14:26:59 +0100 Subject: [PATCH] Update Storybook example to Controls --- .../components/src/spinner/stories/index.js | 50 ++++++++++--------- 1 file changed, 27 insertions(+), 23 deletions(-) diff --git a/packages/components/src/spinner/stories/index.js b/packages/components/src/spinner/stories/index.js index e897af72bc33d..8fd0716d2ade0 100644 --- a/packages/components/src/spinner/stories/index.js +++ b/packages/components/src/spinner/stories/index.js @@ -9,31 +9,35 @@ import { css } from '@emotion/react'; import { useCx } from '../../utils'; import { space } from '../../ui/utils/space'; import Spinner from '../'; -import { Spacer } from '../../spacer'; -export default { title: 'Components/Spinner', component: Spinner }; +const sizes = { + default: undefined, + medium: space( 20 ), + large: space( 40 ), +}; + +export default { + title: 'Components/Spinner', + component: Spinner, + argTypes: { + size: { + options: Object.keys( sizes ), + mapping: sizes, + control: { type: 'select' }, + }, + }, +}; -export const _default = () => { +const Template = ( { size } ) => { const cx = useCx(); - const mediumSpinner = cx( css` - width: ${ space( 20 ) }; - height: ${ space( 20 ) }; + const spinnerClassname = cx( css` + width: ${ size }; + height: ${ size }; ` ); - const largeSpinner = cx( css` - width: ${ space( 40 ) }; - height: ${ space( 40 ) }; - ` ); - return ( - <> - <Spacer marginBottom={ 6 }> - <Spinner /> - </Spacer> - <Spacer marginBottom={ 6 }> - <Spinner className={ mediumSpinner } /> - </Spacer> - <Spacer marginBottom={ 6 }> - <Spinner className={ largeSpinner } /> - </Spacer> - </> - ); + return <Spinner className={ spinnerClassname } />; +}; + +export const Default = Template.bind( {} ); +Default.args = { + size: 'default', };