From 3b26f3505bfead24c9ba371acb1d6212263c3002 Mon Sep 17 00:00:00 2001 From: Supreeth Date: Sat, 30 Sep 2023 21:02:37 +0530 Subject: [PATCH] [Terra-Paginator] Added `hidePageCount` prop to hide default page count provided by Paginator (#3924) Co-authored-by: SM051274 --- packages/terra-core-docs/CHANGELOG.md | 5 ++ .../paginator/ProgressivePaginator.3.doc.mdx | 4 ++ ...ressivePaginatorCustomPageCountExample.jsx | 56 ++++++++++++++++++ ...ressivePaginatorCustomPageLabelExample.jsx | 55 +++++++++++++++++ ...ogressivePaginatorWithCustomLabel.test.jsx | 7 ++- packages/terra-paginator/CHANGELOG.md | 3 + .../src/ControlledProgressivePaginator.jsx | 22 +++---- .../src/ProgressivePaginator.jsx | 22 +++---- ...stom_page_label_with_custom_page_count.png | Bin 0 -> 12831 bytes .../custom_page_label_with_total_count.png | Bin 8177 -> 12301 bytes .../custom_page_label_without_total_count.png | Bin 6666 -> 10803 bytes .../paginator_with_default_page_count.png | Bin 0 -> 11627 bytes ...stom_page_label_with_custom_page_count.png | Bin 0 -> 12709 bytes .../custom_page_label_with_total_count.png | Bin 8264 -> 12248 bytes .../custom_page_label_without_total_count.png | Bin 6604 -> 10578 bytes .../paginator_with_default_page_count.png | Bin 0 -> 11715 bytes ...stom_page_label_with_custom_page_count.png | Bin 0 -> 13302 bytes .../custom_page_label_with_total_count.png | Bin 8650 -> 12947 bytes .../custom_page_label_without_total_count.png | Bin 6945 -> 11248 bytes .../paginator_with_default_page_count.png | Bin 0 -> 12233 bytes .../tests/wdio/paginator-spec.js | 10 ++++ 21 files changed, 162 insertions(+), 22 deletions(-) create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/paginator/example/ProgressivePaginatorCustomPageCountExample.jsx create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/paginator/example/ProgressivePaginatorCustomPageLabelExample.jsx create mode 100644 packages/terra-paginator/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/paginator-spec/custom_page_label_with_custom_page_count.png create mode 100644 packages/terra-paginator/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/paginator-spec/paginator_with_default_page_count.png create mode 100644 packages/terra-paginator/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/paginator-spec/custom_page_label_with_custom_page_count.png create mode 100644 packages/terra-paginator/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/paginator-spec/paginator_with_default_page_count.png create mode 100644 packages/terra-paginator/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/paginator-spec/custom_page_label_with_custom_page_count.png create mode 100644 packages/terra-paginator/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/paginator-spec/paginator_with_default_page_count.png diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md index c5bf60ebb19..ce22242c749 100644 --- a/packages/terra-core-docs/CHANGELOG.md +++ b/packages/terra-core-docs/CHANGELOG.md @@ -2,8 +2,13 @@ ## Unreleased +* Added + * Added progressive paginator examples for custom page label and page count. + * Updated + * Updated test example to validate `hidePageCount` prop. * Updated terra-list examples to demonstrate arrow key navigation within list and list sections. + ## 1.42.0 - (September 26, 2023) * Updated diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/paginator/ProgressivePaginator.3.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/paginator/ProgressivePaginator.3.doc.mdx index 081b0ca69d7..2953af387eb 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/paginator/ProgressivePaginator.3.doc.mdx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/paginator/ProgressivePaginator.3.doc.mdx @@ -1,6 +1,8 @@ import { Badge } from 'terra-paginator/package.json?dev-site-package'; import ProgressivePaginatorExample from './example/ProgressivePaginatorExample?dev-site-example'; +import ProgressivePaginatorCustomPageLabelExample from './example/ProgressivePaginatorCustomPageLabelExample?dev-site-example'; +import ProgressivePaginatorCustomPageCountExample from './example/ProgressivePaginatorCustomPageCountExample?dev-site-example'; import ProgressivePaginatorWithoutTotalCountExample from './example/ProgressivePaginatorWithoutTotalCountExample?dev-site-example'; import ProgressivePaginatorPropsTable from 'terra-paginator/lib/ProgressivePaginator?dev-site-props-table'; @@ -30,6 +32,8 @@ import ProgressivePaginator from 'terra-paginator/lib/ProgressivePaginator'; ## Examples + + ## Progressive Paginator Props diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/paginator/example/ProgressivePaginatorCustomPageCountExample.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/paginator/example/ProgressivePaginatorCustomPageCountExample.jsx new file mode 100644 index 00000000000..18b5f74a99c --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/paginator/example/ProgressivePaginatorCustomPageCountExample.jsx @@ -0,0 +1,56 @@ +import React from 'react'; +import Dialog from 'terra-dialog'; +import ProgressivePaginator from 'terra-paginator/lib/ProgressivePaginator'; +import classNames from 'classnames/bind'; +import styles from './PaginatorExampleCommon.module.scss'; + +const cx = classNames.bind(styles); +const totalCount = 450; + +const buildPage = () => { + const fullContent = [

Patients are requesting greater affordability and efficiency in healthcare. With procedures performed in an ambulatory surgery center costing up to 60% less compared to a hospital outpatient department (1), the demand for these facilities is increasing. In fact, the U.S. ambulatory surgery center market is expected to see a 6.9 % compound annual growth rate, reaching $33 billion by 2028. (2) Cerner understands the urgency to grow in the ambulatory surgery center market while continuing to deliver excellent care. Healthcare IT products can help improve clinician efficiency and patient outcomes, as well as enhance communication and data exchange between ambulatory surgery center providers and patients.

]; + + return ( + fullContent + ); +}; + +class ProgressivePaginatorCustomPageCountExample extends React.Component { + constructor(props) { + super(props); + + this.state = { + content: buildPage(), + currentPage: 1, + pageLabel: `Summary 1 in ${totalCount}`, + }; + + this.changePages = this.changePages.bind(this); + } + + changePages(index) { + this.setState({ currentPage: index }); + this.setState({ pageLabel: `Summary ${index} of total ${totalCount}` }); + } + + render() { + return ( +
+ + Progressive Paginator With Custom PageLabel and Page Count + +)} + // eslint-disable-next-line react/prop-types + footer={} + > + {this.state.content} + + Note: Ensure translated string is provided for pageLabel to make it accessible in different locales +
+ ); + } +} + +export default ProgressivePaginatorCustomPageCountExample; diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/paginator/example/ProgressivePaginatorCustomPageLabelExample.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/paginator/example/ProgressivePaginatorCustomPageLabelExample.jsx new file mode 100644 index 00000000000..19f876e58a0 --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/paginator/example/ProgressivePaginatorCustomPageLabelExample.jsx @@ -0,0 +1,55 @@ +import React from 'react'; +import Dialog from 'terra-dialog'; +import ProgressivePaginator from 'terra-paginator/lib/ProgressivePaginator'; +import classNames from 'classnames/bind'; +import styles from './PaginatorExampleCommon.module.scss'; + +const cx = classNames.bind(styles); +const totalCount = 450; +const pageLabel = 'Summary'; + +const buildPage = () => { + const fullContent = [

Patients are requesting greater affordability and efficiency in healthcare. With procedures performed in an ambulatory surgery center costing up to 60% less compared to a hospital outpatient department (1), the demand for these facilities is increasing. In fact, the U.S. ambulatory surgery center market is expected to see a 6.9 % compound annual growth rate, reaching $33 billion by 2028. (2) Cerner understands the urgency to grow in the ambulatory surgery center market while continuing to deliver excellent care. Healthcare IT products can help improve clinician efficiency and patient outcomes, as well as enhance communication and data exchange between ambulatory surgery center providers and patients.

]; + + return ( + fullContent + ); +}; + +class ProgressivePaginatorCustomPageLabelExample extends React.Component { + constructor(props) { + super(props); + + this.state = { + content: buildPage(), + currentPage: 1, + }; + + this.changePages = this.changePages.bind(this); + } + + changePages(index) { + this.setState({ currentPage: index }); + } + + render() { + return ( +
+ + Progressive Paginator With Custom Page Label + +)} + // eslint-disable-next-line react/prop-types + footer={} + > + {this.state.content} + + Note: Ensure translated string is provided for pageLabel to make it accessible in different locales +
+ ); + } +} + +export default ProgressivePaginatorCustomPageLabelExample; diff --git a/packages/terra-core-docs/src/terra-dev-site/test/paginator/ProgressivePaginatorWithCustomLabel.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/paginator/ProgressivePaginatorWithCustomLabel.test.jsx index 3fb99269e17..c6ba06b8389 100644 --- a/packages/terra-core-docs/src/terra-dev-site/test/paginator/ProgressivePaginatorWithCustomLabel.test.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/test/paginator/ProgressivePaginatorWithCustomLabel.test.jsx @@ -5,6 +5,8 @@ import ProgressivePaginator from 'terra-paginator/lib/ProgressivePaginator'; const ProgressivePaginatorWithCustomLabel = () => { const [totalCount, setTotalCount] = useState(); const [currentPage, setCurrentPage] = useState(1); + const [hidePageCount, setHidePageCount] = useState(false); + const [pageLabel, setPageLabel] = useState('WebPage'); const changePages = (index) => { setCurrentPage(index); @@ -12,8 +14,9 @@ const ProgressivePaginatorWithCustomLabel = () => { return (
); }; diff --git a/packages/terra-paginator/CHANGELOG.md b/packages/terra-paginator/CHANGELOG.md index 3dc958dbb8f..7a5cd285126 100644 --- a/packages/terra-paginator/CHANGELOG.md +++ b/packages/terra-paginator/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Added + * Added `hidePageCount` prop to hide page count provided by paginator. + ## 2.85.0 - (September 19, 2023) * Added diff --git a/packages/terra-paginator/src/ControlledProgressivePaginator.jsx b/packages/terra-paginator/src/ControlledProgressivePaginator.jsx index f1f595859c0..0cad7ca02fe 100644 --- a/packages/terra-paginator/src/ControlledProgressivePaginator.jsx +++ b/packages/terra-paginator/src/ControlledProgressivePaginator.jsx @@ -50,6 +50,12 @@ const propTypes = { * Allows user to set custom page label. _(usage note: User must pass translated text)_. It should not contain page number and total count details, which will lead to conflicts with built-in accessibility ARIA contexts. */ pageLabel: PropTypes.string, + /** + * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue) + * When specified allows user to set custom page count. User should provide custom page count as part `pageLabel` for best accessibility practices. + * _(usage note: when `pageLabel` is not provided page count will not be hidden and default page count is displayed for best accessibility practices)_. + */ + hidePageCount: PropTypes.bool, }; class ControlledProgressivePaginator extends React.Component { @@ -108,6 +114,7 @@ class ControlledProgressivePaginator extends React.Component { ariaLabelledBy, ariaLabel, pageLabel, + hidePageCount, } = this.props; const totalPages = (totalCount) ? calculatePages(totalCount, itemCountPerPage) : 0; const previousPageIndex = selectedPage === 1 ? 1 : selectedPage - 1; @@ -116,14 +123,11 @@ class ControlledProgressivePaginator extends React.Component { const renderFirstandLastButton = totalCount > 0; const { messageId, messageAttributes } = getPageLabel(pageLabel, selectedPage, totalPages); + const pageDetails = (hidePageCount && pageLabel) ?
{pageLabel}
:
{intl.formatMessage({ id: messageId }, messageAttributes)}
; const fullViewChildren = ( <> -
- { - intl.formatMessage({ id: messageId }, messageAttributes) - } -
+ {pageDetails}