@cainthus/alex-library/stories/badge/badge.stories.jsx

Component React library for Cainthus - Alex Dashboard.

import React from 'react';
import { storiesOf } from '@storybook/react';
import { select, text } from '@storybook/addon-knobs';
import Badge from '../../src/lib/Badge/Badge';

const stories = storiesOf('Badge', module);

const themeOptions = {
  primary: 'primary',
  secondary: 'secondary',
  bright: 'bright',
  success: 'success',
  warn: 'warn',
  transparent: 'transparent'
};

const weightOptions = {
  bold: 'bold',
  normal: 'normal',
  light: 'light',
  lighter: 'lighter'
};

const component = () => (
  <Badge
    theme={select('Theme', themeOptions, 'primary')}
    weight={select('Weight', weightOptions, 'normal')}
    className={text('Classname', 'app-custom-classname')}
  >
    { text('Children', 'Insert your text...') }
  </Badge>
);

const config = { info: 'Some simple component' }
stories.addWithJSX('Component', component, config);