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

const results = {
  card: {
    name: 'card',
    results: [
      {
        title: 'Hackett, Dickens and Pagac',
        description: 'Exclusive zero administration migration',
        image: 'https://s3.amazonaws.com/uifaces/faces/twitter/mocabyte/128.jpg',
        price: '$24.64',
      },
    ],
  },
  'hard drive': {
    name: 'hard drive',
    results: [
      {
        title: 'Hansen - Hoppe',
        description: 'Diverse next generation conglomeration',
        image: 'https://s3.amazonaws.com/uifaces/faces/twitter/geshan/128.jpg',
        price: '$34.32',
      },
    ],
  },
};

export default storiesOf('XSearch', module)
  .addDecorator(withInfo)
  .add('with placeholder', () => (
    <XSearch
      value="ha"
      results={results}
      handleResultSelect={action('clicked')}
      handleSearchChange={action('clicked')}
      isLoading={false}
    />
  ));