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

export default storiesOf('XAccordion', module)
  .addDecorator(withInfo)
  .add('Accordion', () => {
    const text = (<XDisplayText displayText="component title" />);
    const text2 = (
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
        <XDisplayText displayText="component content" />
      </div>
    );
    const accordions = [
      { title: text, content: text2, onClickAccordion: action('clicked') },
      { title: text, content: text2, onClickAccordion: action('clicked') },
      { title: text, content: text2, onClickAccordion: action('clicked') },
      { title: text, content: text2, onClickAccordion: action('clicked') },
    ];
    return (
      <div style={{ backgroundColor: 'blue', width: '300px', maxheight: '100px' }}>
        <XAccordion
          accordionHasLineBreak
          activeIndex={0}
          accordions={accordions}
          headerHasDivider
        />
      </div>
    );
  });