fix: 773: Added visiblePageTotal prop to Pagination component.

src/Pagination/Pagination.Component.js

@@ -78,6 +78,18 @@ export const PaginationComponent = () => {
                     totalText='Dalmations' />
             </Example>
 
+            <Example
+                centered
+                description='Customize the total number of visible pages.'
+                title='Total Visible Pages'>
+                <Pagination
+                    initialPage={6}
+                    itemsPerPage={10}
+                    itemsTotal={200}
+                    onClick={handleClick}
+                    visiblePageTotal={15} />
+            </Example>
+
         </ComponentPage>
     );
 };

src/Pagination/Pagination.js

@@ -63,19 +63,40 @@ class Pagination extends Component {
     };
 
     // create pagination links
-    createPaginationLinks = numberOfPages => {
+    createPaginationLinks = (numberOfPages) => {
+        let linksToBeAdded = numberOfPages;
+        let pageNumberOffset = 1;
+
+        //if numberOfPages is more than noOfPages
+        if (numberOfPages > this.props.visiblePageTotal) {
+            linksToBeAdded = this.props.visiblePageTotal;
+            //highest page number possible
+            let maxPageNumber = this.state.selectedPage + Math.ceil(this.props.visiblePageTotal / 2);
+            //all but the last page, selected page is the center of selection
+            if (maxPageNumber <= numberOfPages) {
+                pageNumberOffset = this.state.selectedPage - Math.floor(this.props.visiblePageTotal / 2) + 1;
+            } else {
+                //last page,selected page is to the right of the center
+                pageNumberOffset = numberOfPages - Math.floor(this.props.visiblePageTotal) + 1;
+            }
+            //prevent negative values on first page
+            if (pageNumberOffset <= 0) {
+                pageNumberOffset = 1;
+            }
+        }
+
         // create an array with number of pages and fill it with links
-        const aPages = Array(numberOfPages)
+        const aPages = Array(linksToBeAdded)
             .fill()
             .map((link, index) => (
                 <a
                     {...this.props.linkProps}
-                    aria-selected={this.state.selectedPage === index + 1}
+                    aria-selected={this.state.selectedPage === index + pageNumberOffset}
                     className='fd-pagination__link'
                     href='#'
                     key={index}
                     onClick={this.pageClicked}>
-                    {index + 1}
+                    {index + pageNumberOffset}
                 </a>
             ));
         return aPages;
@@ -96,6 +117,7 @@ class Pagination extends Component {
             nextProps,
             onClick,
             initialPage,
+            visiblePageTotal,
             ...props
         } = this.props;
 
@@ -166,7 +188,8 @@ Pagination.propTypes = {
     }),
     nextProps: PropTypes.object,
     prevProps: PropTypes.object,
-    totalText: PropTypes.string
+    totalText: PropTypes.string,
+    visiblePageTotal: PropTypes.number
 };
 
 Pagination.defaultProps = {
@@ -177,7 +200,8 @@ Pagination.defaultProps = {
         next: 'Next',
         previous: 'Previous'
     },
-    totalText: 'items'
+    totalText: 'items',
+    visiblePageTotal: 10
 };
 
 Pagination.propDescriptions = {
@@ -192,7 +216,8 @@ Pagination.propDescriptions = {
     },
     nextProps: 'Additional props to be spread to the next arrow `<a>` element.',
     prevProps: 'Additional props to be spread to the previous arrow `<a>` element.',
-    totalText: 'Localized text to display next to the total number of items.  Used with `displayTotal`.'
+    totalText: 'Localized text to display next to the total number of items.  Used with `displayTotal`.',
+    visiblePageTotal: 'Total number of visible pages.'
 };
 
 export default Pagination;

src/Pagination/Pagination.test.js

@@ -57,6 +57,24 @@ describe('<Pagination />', () => {
             onClick={handleClick} />
     );
 
+    const visibleTotalPagesPagination = (
+        <Pagination itemsTotal={221}
+            onClick={handleClick}
+            visiblePageTotal={20} />
+    );
+
+    const visibleTotalPagesWithItemTotalPagination = (
+        <Pagination itemsPerPage={1} itemsTotal={10}
+            onClick={handleClick}
+            visiblePageTotal={20} />
+    );
+
+    const visibleTotalPagesZeroPagination = (
+        <Pagination itemsPerPage={0} itemsTotal={200}
+            onClick={handleClick}
+            visiblePageTotal={20} />
+    );
+
     test('create default Pagination component', () => {
         const component = renderer.create(defaultPagination);
         const tree = component.toJSON();
@@ -113,6 +131,27 @@ describe('<Pagination />', () => {
         expect(tree).toMatchSnapshot();
     });
 
+    test('create Pagination component with visibleTotalPages set', () => {
+        const component = renderer.create(visibleTotalPagesPagination);
+        const tree = component.toJSON();
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    test('create Pagination component with visibleTotalPages set to 20 and item per page set to 0', () => {
+        const component = renderer.create(visibleTotalPagesZeroPagination);
+        const tree = component.toJSON();
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    test('create Pagination component with visibleTotalPages set to 20 and totaPage = 10', () => {
+        const component = renderer.create(visibleTotalPagesWithItemTotalPagination);
+        const tree = component.toJSON();
+
+        expect(tree).toMatchSnapshot();
+    });
+
     test('navigate to previous page', () => {
         const wrapper = shallow(initialSetPagination);
         wrapper.setState({ selectedPage: 5 });
@@ -153,6 +192,16 @@ describe('<Pagination />', () => {
         expect(wrapper.state(['selectedPage'])).toEqual(4);
     });
 
+    test('create Pagination component with total pages = 20', () => {
+        const wrapper = shallow(visibleTotalPagesPagination);
+        expect(wrapper.find('a.fd-pagination__link').length).toEqual(22);
+    });
+
+    test('create Pagination component with total pages = 20 and itemTotal = 10', () => {
+        const wrapper = shallow(visibleTotalPagesWithItemTotalPagination);
+        expect(wrapper.find('a.fd-pagination__link').length).toEqual(12);
+    });
+
     describe('Prop spreading', () => {
         test('should allow props to be spread to the Pagination component', () => {
             let element = mount(