feat(Pagination): adds pager and simple pagination

Author: AllenBW

src/components/Pagination/Pager.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { noop } from '../../common/helpers';
+
+/**
+ * Pager component for Patternfly React
+ */
+const Pager = ({
+  baseClassName,
+  className,
+  messages,
+  disableNext,
+  onNextPage,
+  disablePrevious,
+  onPreviousPage
+}) => {
+  const classes = cx('pager', className);
+  return (
+    <ul className={classes}>
+      <li className={disablePrevious ? 'previous disabled' : 'previous'}>
+        <a
+          href="#"
+          className={disablePrevious ? 'disabled' : ''}
+          onClick={e => {
+            e.preventDefault();
+            if (!disablePrevious) {
+              onPreviousPage(e);
+            }
+          }}
+        >
+          <span className="i fa fa-angle-left" />
+          {messages.previousPage}
+        </a>
+      </li>
+      <li className={disableNext ? 'next disabled' : 'next'}>
+        <a
+          href="#"
+          className={disableNext ? 'disabled' : ''}
+          onClick={e => {
+            e.preventDefault();
+            if (!disableNext) {
+              onNextPage(e);
+            }
+          }}
+        >
+          {messages.nextPage}
+          <span className="i fa fa-angle-right" />
+        </a>
+      </li>
+    </ul>
+  );
+};
+Pager.propTypes = {
+  /** Base css class */
+  baseClassName: PropTypes.string,
+  /** Additional css classes */
+  className: PropTypes.string,
+  /** message text inputs for i18n */
+  messages: PropTypes.shape({
+    nextPage: PropTypes.string,
+    previousPage: PropTypes.string
+  }),
+  /** next button disabled */
+  disableNext: PropTypes.bool,
+  /** next page callback */
+  onNextPage: PropTypes.func,
+  /** previous button disabled */
+  disablePrevious: PropTypes.bool,
+  /** previous page callback */
+  onPreviousPage: PropTypes.func
+};
+Pager.defaultProps = {
+  baseClassName: 'content-view-pf-pagination',
+  className: '',
+  messages: {
+    nextPage: 'Next',
+    previousPage: 'Previous'
+  },
+  disableNext: false,
+  onNextPage: noop,
+  disablePrevious: false,
+  onPreviousPage: noop
+};
+export default Pager;

src/components/Pagination/Pager.test.js

@@ -0,0 +1,27 @@
+/* eslint-env jest */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { Pager } from './index';
+
+const testPagerSnapshot = props => <Pager {...props} />;
+
+test('Pager default renders properly', () => {
+  const component = renderer.create(testPagerSnapshot(Pager));
+  expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('Pager mini size renders properly', () => {
+  const component = renderer.create(
+    testPagerSnapshot({
+      className: 'pager-sm',
+      messages: {
+        nextPage: 'The Next Page',
+        previousPage: 'The Previous Page'
+      },
+      disableNext: true,
+      disablePrevious: true
+    })
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});

src/components/Pagination/Pagination.stories.js

@@ -12,7 +12,12 @@ import {
 import { inlineTemplate } from '../../../storybook/decorators/storyTemplates';
 import { DOCUMENTATION_URL } from '../../../storybook/constants';
 
-import { PaginationRow, Paginator, PAGINATION_VIEW_TYPES } from './index';
+import {
+  Pager,
+  PaginationRow,
+  Paginator,
+  PAGINATION_VIEW_TYPES
+} from './index';
 import {
   MockPaginationRow,
   mockPaginationSource
@@ -21,6 +26,47 @@ import {
 const stories = storiesOf('Pagination', module);
 stories.addDecorator(withKnobs);
 
+stories.add(
+  'Pager',
+  withInfo()(() => {
+    const story = (
+      <div>
+        <h2>Default size</h2>
+        <Pager
+          onNextPage={action('onNextPage')}
+          onPreviousPage={action('onPreviousPage')}
+        />
+        <hr />
+        <h2>Mini size</h2>
+        <Pager
+          className="pager-sm"
+          messages={{
+            nextPage: 'The Next Page',
+            previousPage: 'The Previous Page'
+          }}
+          onNextPage={action('onNextPage')}
+          onPreviousPage={action('onPreviousPage')}
+          disableNext={boolean('Next button disabled', true)}
+          disablePrevious={boolean('Previous button disabled', false)}
+        />
+      </div>
+    );
+    return inlineTemplate({
+      title: 'Pager',
+      documentationLink: `${
+        DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS
+      }#pagination`,
+      story,
+      description: (
+        <div>
+          Pager is a stateless functional component which previous and next
+          links. See Action Logger for details.
+        </div>
+      )
+    });
+  })
+);
+
 stories.add(
   'Pagination row',
   withInfo({

src/components/Pagination/__snapshots__/Pager.test.js.snap

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pager default renders properly 1`] = `
+<ul
+  className="pager"
+>
+  <li
+    className="previous"
+  >
+    <a
+      className=""
+      href="#"
+      onClick={[Function]}
+    >
+      <span
+        className="i fa fa-angle-left"
+      />
+      Previous
+    </a>
+  </li>
+  <li
+    className="next"
+  >
+    <a
+      className=""
+      href="#"
+      onClick={[Function]}
+    >
+      Next
+      <span
+        className="i fa fa-angle-right"
+      />
+    </a>
+  </li>
+</ul>
+`;
+
+exports[`Pager mini size renders properly 1`] = `
+<ul
+  className="pager pager-sm"
+>
+  <li
+    className="previous disabled"
+  >
+    <a
+      className="disabled"
+      href="#"
+      onClick={[Function]}
+    >
+      <span
+        className="i fa fa-angle-left"
+      />
+      The Previous Page
+    </a>
+  </li>
+  <li
+    className="next disabled"
+  >
+    <a
+      className="disabled"
+      href="#"
+      onClick={[Function]}
+    >
+      The Next Page
+      <span
+        className="i fa fa-angle-right"
+      />
+    </a>
+  </li>
+</ul>
+`;

src/components/Pagination/index.js

@@ -1,5 +1,6 @@
 import paginate from './paginate';
 import { PAGINATION_VIEW, PAGINATION_VIEW_TYPES } from './PaginationConstants';
+import Pager from './Pager';
 import Paginator from './Paginator';
 import PaginationRow from './PaginationRow';
 import PaginationRowAmountOfPages from './PaginationRowAmountOfPages';
@@ -20,6 +21,7 @@ PaginationRow.PAGINATION_VIEW_TYPES = PAGINATION_VIEW_TYPES;
 
 export {
   paginate,
+  Pager,
   Paginator,
   PAGINATION_VIEW,
   PAGINATION_VIEW_TYPES,