@swrve/core/src/loader/loader.stories.js

Core set of Swrve UI Components

import React from 'react'
import { storiesOf } from '@storybook/react'
import { withKnobs, select } from '@storybook/addon-knobs'
import { withInfo } from '@storybook/addon-info'

import Loader from './loader'

const themeOptions = {
  primary: 'Primary',
  secondary: 'Secondary',
  warning: 'Warning',
  error: 'Error'
}

const sizeOptions = {
  '12': 'Medium',
  '16': 'Large',
  '24': 'XLarge'
}

storiesOf('Core|Loader', module)
  .addDecorator(withKnobs)
  .addDecorator(withInfo)
  .add('Primary Spinner', () => (
    <div className="m-8">
      <Loader
        use={select('Theme', themeOptions, 'primary')}
        size={select('Size', sizeOptions, '16')}
      />
    </div>
  ))
  .add('Secondary Spinner', () => (
    <div className="m-8">
      <Loader use="secondary" />
    </div>
  ))
  .add('Warning Spinner', () => (
    <div className="m-8">
      <Loader use="warning" />
    </div>
  ))
  .add('Error Spinner', () => (
    <div className="m-8">
      <Loader use="error" />
    </div>
  ))
  .add('Different size Spinner', () => (
    <div>
      <div className="m-8">
        <Loader size="12" />
      </div>
      <div className="m-8">
        <Loader size="16" />
      </div>
      <div className="m-8">
        <Loader size="24" />
      </div>
    </div>
  ))