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',
 };