xchain-components/src/stories/XTabStory.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 { withInfo } from '@storybook/addon-info';
import XTab from 'components/XTab';
import XDisplayText from 'components/XDisplayText';
import XForm from 'components/XForm';
import XInput from 'components/XInput';


export default storiesOf('XTab', module)
  .addDecorator(withInfo)
  .add('Request Order Tab', () => {
    const panes = [
      { name: 'New Order', content: 'Tab 1 Content' },
      { name: 'Open Orders', content: 'Tab 2 Content' },
      { name: 'Approval Pending', content: 'Tab 3 Content' },
      { name: 'Rejected', content: 'Tab 3 Content' },
      { name: 'Processed', content: 'Tab 3 Content' },
    ];
    return (
      <XTab
        menuHeight="32px"
        tabPanes={panes}
      />
    );
  })
  .add('All order tab', () => {
    const text = (<XDisplayText displayText="component display" />);
    const panes = [
      {
        icon: 'box', iconColor: '#bd10e0', name: '37 Order', content: text,
      },
      {
        icon: 'clock outline', iconColor: '#ef3f4a', name: '14 past Required', content: 'Tab 2 Content',
      },
      {
        icon: 'shipping fast', iconColor: '#f76947', name: '2 Past Shipping', content: text,
      },
      {
        icon: 'clone', iconColor: '#8b572a', name: '7 Discrepancy', content: 'Tab 3 Content',
      },
    ];
    return (
      <XTab
        tabPanes={panes}
        secondary
        menuWidth="114px"
        menuHeight="70px"
        menuBorderRadius="6px"
        menuMargin="0px 2px"
        menuFontSize="12px"
      />
    );
  })
  .add('All order tabs', () => {
    const userName = <XInput placeholder="UserName" />;
    const password = <XInput placeholder="Password" />;
    const formFields = [
      {
        element: userName,
      },
      {
        element: password,
      },
    ];
    const panes = [
      {
        icon: 'box', iconColor: '#bd10e0', name: '37 Order', content: <XForm formFields={formFields} submitButtonText="Login" onFormSubmit={action('clicked')} />,
      },
      {
        icon: 'clock outline', iconColor: '#ef3f4a', name: '14 past Required', content: 'Tab 2 Content',
      },
      {
        icon: 'shipping fast', iconColor: '#f76947', name: '2 Past Shipping', content: 'Tab 3',
      },
      {
        icon: 'clone', iconColor: '#8b572a', name: '7 Discrepancy', content: 'Tab 3 Content',
      },
    ];
    return (
      <XTab
        tabPanes={panes}
        secondary
        menuWidth="114px"
        menuHeight="70px"
        menuBorderRadius="6px"
        menuMargin="0px 2px"
        menuFontSize="12px"
      />
    );
  })
  .add('All order tabs transparent', () => {
    const userName = <XInput placeholder="UserName" />;
    const password = <XInput placeholder="Password" />;
    const formFields = [
      {
        element: userName,
      },
      {
        element: password,
      },
    ];
    const panes = [
      {
        icon: 'box', iconColor: '#bd10e0', name: '37 Order', content: <XForm formFields={formFields} submitButtonText="Login" onFormSubmit={action('clicked')} />,
      },
      {
        icon: 'clock outline', iconColor: '#ef3f4a', name: '14 past Required', content: 'Tab 2 Content',
      },
      {
        icon: 'shipping fast', iconColor: '#f76947', name: '2 Past Shipping', content: 'Tab 3',
      },
      {
        icon: 'clone', iconColor: '#8b572a', name: '7 Discrepancy', content: 'Tab 3 Content',
      },
    ];
    return (
      <XTab
        paneBorderColor="transparent"
        paneBackGroundColor="transparent"
        tabPanes={panes}
        secondary
        menuWidth="114px"
        menuHeight="70px"
        menuBorderRadius="6px"
        menuMargin="0px 2px"
        menuFontSize="12px"
      />
    );
  }).add('blank tabs', () => {
    const text = (<XDisplayText displayText="component display" />);
    const panes = [
      { name: null, content: 'Tab 1 Content' },
      { name: null, content: 'Tab 2 Content' },
      { name: null, content: 'Tab 3 Content' },
      { name: null, content: 'Tab 3 Content' },
      { name: null, content: 'Tab 3 Content' },
    ];
    return (
      <XTab
        tabPanes={panes}
        secondary
        menuWidth="114px"
        menuHeight="5px"
        menuBorderRadius="6px"
        menuMargin="0px 2px"
        menuFontSize="12px"
      />
    );
  });