Add showPagePicker, showPerPagePicker props to Pagination component (https://github.com/woocommerce/woocommerce-admin/pull/3980)

* Add showPagePicker, showPerPagePicker props to Pagination

* Add new Pagination props to readme

* Add Pagination component story

* Move lonely moustache

* Add property for enabling/disabling the page arrows label

Co-authored-by: Jason Conroy <jason@findingsimple.com>

plugins/woocommerce-admin/packages/components/src/pagination/README.md

@@ -26,3 +26,6 @@ Name | Type | Default | Description
 `onPerPageChange` | Function | `noop` | A function to execute when the per page option is changed
 `total` | Number | `null` | (required) The total number of results
 `className` | String | `null` | Additional classNames
+`showPagePicker` | Boolean | `true` | Whether the page picker should be shown.
+`showPerPagePicker` | Boolean | `true` | Whether the per page picker should shown.
+`showPageArrowsLabel` | Boolean | `true` | Whether the page arrows label should be shown.

plugins/woocommerce-admin/packages/components/src/pagination/index.js

@@ -84,7 +84,7 @@ class Pagination extends Component {
 	}
 
 	renderPageArrows() {
-		const { page } = this.props;
+		const { page, showPageArrowsLabel } = this.props;
 
 		if ( this.pageCount <= 1 ) {
 			return null;
@@ -100,17 +100,19 @@ class Pagination extends Component {
 
 		return (
 			<div className="woocommerce-pagination__page-arrows">
-				<span
+				{ showPageArrowsLabel && (
-					className="woocommerce-pagination__page-arrows-label"
+					<span
-					role="status"
+						className="woocommerce-pagination__page-arrows-label"
-					aria-live="polite"
+						role="status"
-				>
+						aria-live="polite"
-					{ sprintf(
+					>
-						__( 'Page %d of %d', 'woocommerce-admin' ),
+						{ sprintf(
-						page,
+							__( 'Page %d of %d', 'woocommerce-admin' ),
-						this.pageCount
+							page,
-					) }
+							this.pageCount
-				</span>
+						) }
+					</span>
+				) }
 				<div className="woocommerce-pagination__page-arrows-buttons">
 					<IconButton
 						className={ previousLinkClass }
@@ -188,7 +190,7 @@ class Pagination extends Component {
 	}
 
 	render() {
-		const { total, perPage, className } = this.props;
+		const { total, perPage, className, showPagePicker, showPerPagePicker } = this.props;
 		this.pageCount = Math.ceil( total / perPage );
 
 		const classes = classNames( 'woocommerce-pagination', className );
@@ -207,8 +209,8 @@ class Pagination extends Component {
 		return (
 			<div className={ classes }>
 				{ this.renderPageArrows() }
-				{ this.renderPagePicker() }
+				{ showPagePicker && this.renderPagePicker() }
-				{ this.renderPerPagePicker() }
+				{ showPerPagePicker && this.renderPerPagePicker() }
 			</div>
 		);
 	}
@@ -239,11 +241,26 @@ Pagination.propTypes = {
 	 * Additional classNames.
 	 */
 	className: PropTypes.string,
+	/**
+	 * Whether the page picker should be rendered.
+	 */
+	showPagePicker: PropTypes.bool,
+	/**
+	 * Whether the perPage picker should be rendered.
+	 */
+	showPerPagePicker: PropTypes.bool,
+	/**
+	 * Whether the page arrows label should be rendered.
+	 */
+	showPageArrowsLabel: PropTypes.bool,
 };
 
 Pagination.defaultProps = {
 	onPageChange: noop,
 	onPerPageChange: noop,
+	showPagePicker: true,
+	showPerPagePicker: true,
+	showPageArrowsLabel: true,
 };
 
 export default Pagination;

plugins/woocommerce-admin/packages/components/src/pagination/stories/index.js

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { number, boolean } from '@storybook/addon-knobs';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Pagination from '../';
+
+export default {
+	title: 'WooCommerce Admin/components/Pagination',
+	component: Pagination,
+};
+
+export const Default = () => {
+
+	const [ statePage, setPage ] = useState( 2 );
+	const [ statePerPage, setPerPage ] = useState( 50 );
+
+	return (
+		<Pagination
+			page={ statePage }
+			perPage={ statePerPage }
+			total={ number( 'Total', 500 ) }
+			showPagePicker={ boolean( 'Page Picker', true ) }
+			showPerPagePicker={ boolean( 'Per Page Picker', true ) }
+			showPageArrowsLabel={ boolean( 'Page Arrows Label', true ) }
+			onPageChange={ ( newPage ) => setPage( newPage ) }
+			onPerPageChange={ ( newPerPage ) => setPerPage( newPerPage ) }
+		/>
+	);
+};