add storybook knobs in loader overview example

cision · Aug 9, 2021 · c847702 · c847702
1 parent 520ffb3
commit c847702
Showing 1 changed file with 15 additions and 6 deletions.
diff --git a/src/components/Loader/story.tsx b/src/components/Loader/story.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { select } from '@storybook/addon-knobs';
 
 import Loader from './Loader';
 import Readme from './README.md';
@@ -27,12 +28,20 @@ storiesOf('Planets/Loader', module)
       sidebar: Readme,
     },
   })
-  .add('Overview', () => (
-    <FlexWrapper>
-      <Loader size="md" />
-      <Loader style={{ marginTop: '100px' }} />
-    </FlexWrapper>
-  ))
+  .add(
+    'Overview',
+    () => (
+      <FlexWrapper>
+        <Loader size={select('size', ['sm', 'md', 'lg', 'xl'], 'lg')} />
+      </FlexWrapper>
+    ),
+    {
+      info: {
+        inline: false,
+        source: true,
+      },
+    }
+  )
   .add(
     'Examples',
     () => (