diff --git a/src/components/Pagination/Pager.js b/src/components/Pagination/Pager.js
new file mode 100644
index 00000000000..b0c452b4600
--- /dev/null
+++ b/src/components/Pagination/Pager.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Icon } from '../Icon';
+import { noop } from '../../common/helpers';
+
+/**
+ * Pager component for Patternfly React
+ */
+const Pager = ({
+ baseClassName,
+ className,
+ messages,
+ disableNext,
+ onNextPage,
+ disablePrevious,
+ onPreviousPage
+}) => {
+ const classes = classNames('pager', className);
+ return (
+
+ );
+};
+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;
diff --git a/src/components/Pagination/Pager.test.js b/src/components/Pagination/Pager.test.js
new file mode 100644
index 00000000000..c1e1903eb6e
--- /dev/null
+++ b/src/components/Pagination/Pager.test.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { Pager } from './index';
+
+const testPagerSnapshot = props => ;
+
+test('Pager default renders properly', () => {
+ const component = mount(testPagerSnapshot(Pager));
+
+ expect(component.render()).toMatchSnapshot();
+});
+
+test('Pager mini size renders properly', () => {
+ const component = mount(
+ testPagerSnapshot({
+ className: 'pager-sm',
+ messages: {
+ nextPage: 'The Next Page',
+ previousPage: 'The Previous Page'
+ },
+ disableNext: true,
+ disablePrevious: true
+ })
+ );
+
+ expect(component.render()).toMatchSnapshot();
+});
+
+test('Pager buttons fire when enabled', () => {
+ let eventCount = 0;
+ const component = mount(
+ testPagerSnapshot({
+ onPreviousPage: () => eventCount++,
+ onNextPage: () => eventCount++
+ })
+ );
+
+ component
+ .find('a')
+ .first()
+ .simulate('click');
+ component
+ .find('a')
+ .last()
+ .simulate('click');
+
+ expect(eventCount).toBe(2);
+});
+
+test('Pager buttons do not fire when disabled', () => {
+ let eventCount = 0;
+ const component = mount(
+ testPagerSnapshot({
+ onPreviousPage: () => eventCount++,
+ onNextPage: () => eventCount++,
+ disableNext: true,
+ disablePrevious: true
+ })
+ );
+
+ component
+ .find('a')
+ .first()
+ .simulate('click');
+ component
+ .find('a')
+ .last()
+ .simulate('click');
+
+ expect(eventCount).toBe(0);
+});
diff --git a/src/components/Pagination/Pagination.stories.js b/src/components/Pagination/Pagination.stories.js
index c86f2602983..710b9c65a8c 100644
--- a/src/components/Pagination/Pagination.stories.js
+++ b/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,49 @@ import {
const stories = storiesOf('Pagination', module);
stories.addDecorator(withKnobs);
+stories.add(
+ 'Pager',
+ withInfo()(() => {
+ const story = (
+
+
Default size
+
+
+
Mini size
+
+
+ );
+ return inlineTemplate({
+ title: 'Pager',
+ documentationLink: `${
+ DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS
+ }#pagination`,
+ story,
+ description: (
+
+ Pager is a stateless functional component which previous and next
+ links. See Action Logger for details.
+
+ )
+ });
+ })
+);
+
stories.add(
'Pagination row',
withInfo({
diff --git a/src/components/Pagination/__snapshots__/Pager.test.js.snap b/src/components/Pagination/__snapshots__/Pager.test.js.snap
new file mode 100644
index 00000000000..d8c3f0fb174
--- /dev/null
+++ b/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`] = `
+
+`;
+
+exports[`Pager mini size renders properly 1`] = `
+
+`;
diff --git a/src/components/Pagination/index.js b/src/components/Pagination/index.js
index 59e78e1eb9a..20c1281822e 100644
--- a/src/components/Pagination/index.js
+++ b/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,