diff --git a/plugins/woocommerce-admin/packages/components/src/pagination/README.md b/plugins/woocommerce-admin/packages/components/src/pagination/README.md
index ec9a30d8507..e50d0a11f30 100644
--- a/plugins/woocommerce-admin/packages/components/src/pagination/README.md
+++ b/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.
diff --git a/plugins/woocommerce-admin/packages/components/src/pagination/index.js b/plugins/woocommerce-admin/packages/components/src/pagination/index.js
index 61ffb10c8a7..d1e47c98c5d 100644
--- a/plugins/woocommerce-admin/packages/components/src/pagination/index.js
+++ b/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 (
-
- { sprintf(
- __( 'Page %d of %d', 'woocommerce-admin' ),
- page,
- this.pageCount
- ) }
-
+ { showPageArrowsLabel && (
+
+ { sprintf(
+ __( 'Page %d of %d', 'woocommerce-admin' ),
+ page,
+ this.pageCount
+ ) }
+
+ ) }
{ this.renderPageArrows() }
- { this.renderPagePicker() }
- { this.renderPerPagePicker() }
+ { showPagePicker && this.renderPagePicker() }
+ { showPerPagePicker && this.renderPerPagePicker() }
);
}
@@ -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;
diff --git a/plugins/woocommerce-admin/packages/components/src/pagination/stories/index.js b/plugins/woocommerce-admin/packages/components/src/pagination/stories/index.js
new file mode 100644
index 00000000000..b1a0321adf3
--- /dev/null
+++ b/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 (
+
setPage( newPage ) }
+ onPerPageChange={ ( newPerPage ) => setPerPage( newPerPage ) }
+ />
+ );
+};