@appearhere/bloom/components/Pagination/Pagination.story.js

Appear Here's pattern library and styleguide

import PropTypes from 'prop-types';
import React from 'react';
import { storiesOf, action } from '@storybook/react';
import { withKnobs, number } from '@storybook/addon-knobs';

import Pagination from './Pagination';
import PaginationTrack from './PaginationTrack';

const SimplePagination = props => (
  <Pagination {...props}>
    <PaginationTrack {...props} />
  </Pagination>
);

const PageButton = ({ onClick, page }) => (
  <button onClick={(e) => { onClick(e, page); }} >
    { page }
  </button>
);
PageButton.propTypes = { onClick: PropTypes.func, page: PropTypes.any };

const NextButton = ({ onClick, page }) => (
  <button onClick={(e) => { onClick(e, page); }} >
    Next
  </button>
);
NextButton.propTypes = { onClick: PropTypes.func, page: PropTypes.any };

const PreviousButton = ({ onClick, page }) => (
  <button onClick={(e) => { onClick(e, page); }} >
    Previous
  </button>
);
PreviousButton.propTypes = { onClick: PropTypes.func, page: PropTypes.any };

const EventedPagination = props => (
  <Pagination
    NextComponent={NextButton}
    PreviousComponent={PreviousButton}
    arrowProps={{ onClick: action('click arrow') }}
    {...props}
  >
    <PaginationTrack
      LinkComponent={PageButton}
      linkProps={{ onClick: action('click page') }}
      {...props}
    />
  </Pagination>
);


const stories = storiesOf('Pagination', module);
stories.addDecorator(withKnobs);

stories.add('With track', () => (
  <SimplePagination
    currentPage={number('current page', 1)}
    totalPages={number('total pages', 10)}
    displayRange={number('track range', 3)}
  />
))
.add('Evented pagination', () => (
  <EventedPagination
    currentPage={number('current page', 1)}
    totalPages={number('total pages', 10)}
    displayRange={number('track range', 3)}
  />
));