xchain-components/src/stories/XButtonStory.js

Xchain Components

/* @flow */
/* eslint react/jsx-filename-extension: 0 */

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, text, object, boolean, number } from '@storybook/addon-knobs';
import { withInfo } from '@storybook/addon-info';
import XButton from 'components/XButton';

export default storiesOf('XButton', module)
  .addDecorator(withKnobs)
  .addDecorator(withInfo)
  .add('Request Order Button', () => (
    <XButton
      text="Request Order"
      fontSize="15px"
      borderRadius="2px"
      width="151px"
      height="32px"
      borderColor="#b6c0cb"
      onButtonClick={action('clicked')}
      iconName="hand paper"
      iconColor="#b6c0cb"
      iconFontSize="16px"
      textColor="#3b485c"

    />
  ))
  .add('Procure Button', () => (
    <XButton
      text="Procure"
      fontSize="15px"
      borderRadius="2px"
      width="108px"
      height="32px"
      borderColor="#00a1ff"
      backgroundColor="#00a1ff"
      onButtonClick={action('clicked')}
      textColor="#ffffff"
    />
  ))
  .add('Supply Button', () => (
    <XButton
      text="Supply"
      fontSize="15px"
      borderRadius="2px"
      width="108px"
      height="32px"
      borderColor="#b6c0cb"
      backgroundColor="transparent"
      onButtonClick={action('clicked')}
      textColor="#b6c0cb"
    />
  ))
  .add('Reject Button', () => (
    <XButton
      text="Reject"
      fontSize="12px"
      borderRadius="2px"
      width="98px"
      height="30px"
      borderColor="#f25935"
      backgroundColor="white"
      onButtonClick={action('clicked')}
      textColor="#f25935"
      iconName="thumbs down"
      iconColor="#f25935"
      iconFontSize="12px"
    />
  ))
  .add('Approve Button', () => (
    <XButton
      text="Approve"
      fontSize="12px"
      borderRadius="2px"
      width="98px"
      height="30px"
      borderColor="#1cbf0d"
      backgroundColor="white"
      onButtonClick={action('clicked')}
      textColor="#1cbf0d"
      iconName="thumbs up"
      iconColor="#1cbf0d"
      iconFontSize="15px"
    />
)).add('Right Icon Button', () => (
    <XButton
      text="Supply"
      fontSize="15px"
      borderRadius="2px"
      width="108px"
      height="32px"
      borderColor="#b6c0cb"
      backgroundColor="transparent"
      onButtonClick={action('clicked')}
      textColor="#b6c0cb"
      iconName="thumbs down"
      iconColor="#f25935"
      iconFontSize="12px"
      iconPosition="right"
    />
  ));