Migrate Spinner to Storybook

ts/components/Spinner.md

@@ -1,47 +0,0 @@
-#### Normal, no size
-
-```jsx
-<util.ConversationContext theme={util.theme}>
-  <Spinner svgSize="normal" />
-  <div style={{ backgroundColor: '#2090ea' }}>
-    <Spinner svgSize="normal" />
-  </div>
-</util.ConversationContext>
-```
-
-#### Normal, with size
-
-```jsx
-<util.ConversationContext theme={util.theme}>
-  <Spinner svgSize="normal" size="100px" />
-  <div style={{ backgroundColor: '#2090ea' }}>
-    <Spinner svgSize="normal" size="100px" />
-  </div>
-</util.ConversationContext>
-```
-
-#### Small, no size
-
-```jsx
-<util.ConversationContext theme={util.theme}>
-  <Spinner svgSize="small" />
-  <div style={{ backgroundColor: '#2090ea' }}>
-    <Spinner svgSize="small" />
-  </div>
-</util.ConversationContext>
-```
-
-#### Small, sizes
-
-```jsx
-<util.ConversationContext theme={util.theme}>
-  <Spinner svgSize="small" size="20px" />
-  <div style={{ backgroundColor: '#2090ea' }}>
-    <Spinner svgSize="small" size="20px" />
-  </div>
-  <Spinner svgSize="small" size="14px" />
-  <div style={{ backgroundColor: '#2090ea' }}>
-    <Spinner svgSize="small" size="14px" />
-  </div>
-</util.ConversationContext>
-```

ts/components/Spinner.stories.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Props, Spinner, SpinnerDirections, SpinnerSvgSizes } from './Spinner';
+
+import { storiesOf } from '@storybook/react';
+import { select, text } from '@storybook/addon-knobs';
+
+const story = storiesOf('Components/Spinner', module);
+
+const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+  size: text('size', overrideProps.size || ''),
+  svgSize: select(
+    'svgSize',
+    SpinnerSvgSizes.reduce((m, s) => ({ ...m, [s]: s }), {}),
+    overrideProps.svgSize || 'normal'
+  ),
+  direction: select(
+    'direction',
+    SpinnerDirections.reduce((d, s) => ({ ...d, [s]: s }), {}),
+    overrideProps.direction
+  ),
+});
+
+story.add('Normal', () => {
+  const props = createProps();
+
+  return <Spinner {...props} />;
+});
+
+story.add('SVG Sizes', () => {
+  const props = createProps();
+
+  return SpinnerSvgSizes.map(svgSize => (
+    <Spinner key={svgSize} {...props} svgSize={svgSize} />
+  ));
+});
+
+story.add('Directions', () => {
+  const props = createProps();
+
+  return SpinnerDirections.map(direction => (
+    <Spinner key={direction} {...props} direction={direction} />
+  ));
+});

ts/components/Spinner.tsx

@@ -1,10 +1,20 @@
 import React from 'react';
 import classNames from 'classnames';
 
-interface Props {
+export const SpinnerSvgSizes = ['small', 'normal'] as const;
+export type SpinnerSvgSize = typeof SpinnerSvgSizes[number];
+
+export const SpinnerDirections = [
+  'outgoing',
+  'incoming',
+  'on-background',
+] as const;
+export type SpinnerDirection = typeof SpinnerDirections[number];
+
+export interface Props {
   size?: string;
-  svgSize: 'small' | 'normal';
+  svgSize: SpinnerSvgSize;
-  direction?: 'outgoing' | 'incoming' | 'on-background';
+  direction?: SpinnerDirection;
 }
 
 export class Spinner extends React.Component<Props> {