xchain-components/src/stories/XDropdownStory.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 XDropdown from 'components/XDropdown';

const menusText = [
  {
    key: '1',
    value: 'a',
    text: 'aaaaaaa',
    icon: 'home',
  },
  {
    key: '2',
    value: 'b',
    text: 'bbbbbbb',
  },
];

export default storiesOf('XDropdown', module)
  .addDecorator(withInfo)
  .add('Product Hierarchy dropdown', () => (
    <XDropdown value={menusText[0].value} menuItems={menusText} placeholder="Product" search onChange={action('changed')} />
  ))
  .add('Product dropdown', () => (
    <XDropdown
      value={menusText[0].value}
      menuItems={menusText}
      placeholder="Product"
      search
      onChange={action('changed')
    }
    />
  ))
  .add('search icon dropdown', () => (
    <XDropdown value={menusText[0].value} menuItems={menusText} placeholder="Product" search onChange={action('changed')} />
  ))
  .add('Product dropdown', () => (
    <XDropdown
      value={menusText[0].value}
      menuItems={menusText}
      placeholder="Product"
      search
      iconName="search"
      onChange={action('changed')
    }
    />
  ));