xchain-components/src/stories/XFormStory.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 XForm from 'components/XForm';
import XInput from 'components/XInput';

export default storiesOf('XForm', module)
  .addDecorator(withInfo)
  .add('Single Field Form', () => {
    const userName = <XInput placeholder="UserName" />;
    const password = <XInput placeholder="Password" type="password"/>;
    const formFields = [
      {
        element: userName,
      },
      {
        element: password,
      },
    ];
    return (
      <XForm formFields={formFields} submitButtonText="Login" onFormSubmit={action('clicked')} clearButton/>
    );
  }).add('Group Field Form', () => {
    const userName = <XInput placeholder="UserName" />;
    const password = <XInput placeholder="Password" />;
    const formFields = [
      {
        groupOf: 2,
        element: [userName, password],
      },
      {
        groupOf: 'equal',
        element: [userName, password],
      },
    ];
    return(
      <XForm formFields={formFields} submitButtonText="Login" onFormSubmit={action('clicked')} />
    );
  });