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}
    { renderFirstandLastButton && ( @@ -215,6 +219,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; @@ -223,14 +228,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 reducedViewChildren = ( <> -
    - { - intl.formatMessage({ id: messageId }, messageAttributes) - } -
    + {pageDetails}
      { renderFirstandLastButton && ( diff --git a/packages/terra-paginator/src/ProgressivePaginator.jsx b/packages/terra-paginator/src/ProgressivePaginator.jsx index 575ec8429c0..8816f6d1796 100644 --- a/packages/terra-paginator/src/ProgressivePaginator.jsx +++ b/packages/terra-paginator/src/ProgressivePaginator.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 ProgressivePaginator extends React.Component { @@ -114,6 +120,7 @@ class ProgressivePaginator extends React.Component { ariaLabelledBy, ariaLabel, pageLabel, + hidePageCount, } = this.props; const totalPages = (totalCount) ? calculatePages(totalCount, itemCountPerPage) : 0; const { selectedPage } = this.state; @@ -123,14 +130,11 @@ class ProgressivePaginator 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}
        { renderFirstandLastButton && ( @@ -221,6 +225,7 @@ class ProgressivePaginator extends React.Component { ariaLabelledBy, ariaLabel, pageLabel, + hidePageCount, } = this.props; const totalPages = (totalCount) ? calculatePages(totalCount, itemCountPerPage) : 0; const { selectedPage } = this.state; @@ -230,14 +235,11 @@ class ProgressivePaginator 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 reducedViewChildren = ( <> -
        - { - intl.formatMessage({ id: messageId }, messageAttributes) - } -
        + {pageDetails}
          { renderFirstandLastButton && ( diff --git a/packages/terra-paginator/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/paginator-spec/custom_page_label_with_custom_page_count.png b/packages/terra-paginator/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/paginator-spec/custom_page_label_with_custom_page_count.png new file mode 100644 index 00000000000..ca1b542f1c6 Binary files /dev/null and b/packages/terra-paginator/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/paginator-spec/custom_page_label_with_custom_page_count.png differ diff --git a/packages/terra-paginator/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/paginator-spec/custom_page_label_with_total_count.png b/packages/terra-paginator/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/paginator-spec/custom_page_label_with_total_count.png index be9bff38da9..bc295d0fab4 100644 Binary files a/packages/terra-paginator/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/paginator-spec/custom_page_label_with_total_count.png and b/packages/terra-paginator/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/paginator-spec/custom_page_label_with_total_count.png differ diff --git a/packages/terra-paginator/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/paginator-spec/custom_page_label_without_total_count.png b/packages/terra-paginator/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/paginator-spec/custom_page_label_without_total_count.png index 2d7aabe67a5..afe56f0c6af 100644 Binary files a/packages/terra-paginator/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/paginator-spec/custom_page_label_without_total_count.png and b/packages/terra-paginator/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/paginator-spec/custom_page_label_without_total_count.png differ diff --git a/packages/terra-paginator/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/paginator-spec/paginator_with_default_page_count.png b/packages/terra-paginator/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/paginator-spec/paginator_with_default_page_count.png new file mode 100644 index 00000000000..11c2123733c Binary files /dev/null and b/packages/terra-paginator/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/paginator-spec/paginator_with_default_page_count.png differ diff --git a/packages/terra-paginator/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/paginator-spec/custom_page_label_with_custom_page_count.png b/packages/terra-paginator/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/paginator-spec/custom_page_label_with_custom_page_count.png new file mode 100644 index 00000000000..4d6f6d44bb6 Binary files /dev/null and b/packages/terra-paginator/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/paginator-spec/custom_page_label_with_custom_page_count.png differ diff --git a/packages/terra-paginator/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/paginator-spec/custom_page_label_with_total_count.png b/packages/terra-paginator/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/paginator-spec/custom_page_label_with_total_count.png index 1cd7fff7de2..92a32084fa8 100644 Binary files a/packages/terra-paginator/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/paginator-spec/custom_page_label_with_total_count.png and b/packages/terra-paginator/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/paginator-spec/custom_page_label_with_total_count.png differ diff --git a/packages/terra-paginator/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/paginator-spec/custom_page_label_without_total_count.png b/packages/terra-paginator/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/paginator-spec/custom_page_label_without_total_count.png index d76c796eb30..4e288248878 100644 Binary files a/packages/terra-paginator/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/paginator-spec/custom_page_label_without_total_count.png and b/packages/terra-paginator/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/paginator-spec/custom_page_label_without_total_count.png differ diff --git a/packages/terra-paginator/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/paginator-spec/paginator_with_default_page_count.png b/packages/terra-paginator/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/paginator-spec/paginator_with_default_page_count.png new file mode 100644 index 00000000000..5499729bb9f Binary files /dev/null and b/packages/terra-paginator/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/paginator-spec/paginator_with_default_page_count.png differ diff --git a/packages/terra-paginator/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/paginator-spec/custom_page_label_with_custom_page_count.png b/packages/terra-paginator/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/paginator-spec/custom_page_label_with_custom_page_count.png new file mode 100644 index 00000000000..50a0d618539 Binary files /dev/null and b/packages/terra-paginator/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/paginator-spec/custom_page_label_with_custom_page_count.png differ diff --git a/packages/terra-paginator/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/paginator-spec/custom_page_label_with_total_count.png b/packages/terra-paginator/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/paginator-spec/custom_page_label_with_total_count.png index 898c80df185..b93f8f298f9 100644 Binary files a/packages/terra-paginator/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/paginator-spec/custom_page_label_with_total_count.png and b/packages/terra-paginator/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/paginator-spec/custom_page_label_with_total_count.png differ diff --git a/packages/terra-paginator/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/paginator-spec/custom_page_label_without_total_count.png b/packages/terra-paginator/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/paginator-spec/custom_page_label_without_total_count.png index a22d090d7a0..3dfcbde1add 100644 Binary files a/packages/terra-paginator/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/paginator-spec/custom_page_label_without_total_count.png and b/packages/terra-paginator/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/paginator-spec/custom_page_label_without_total_count.png differ diff --git a/packages/terra-paginator/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/paginator-spec/paginator_with_default_page_count.png b/packages/terra-paginator/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/paginator-spec/paginator_with_default_page_count.png new file mode 100644 index 00000000000..7013b08fb6a Binary files /dev/null and b/packages/terra-paginator/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/paginator-spec/paginator_with_default_page_count.png differ diff --git a/packages/terra-paginator/tests/wdio/paginator-spec.js b/packages/terra-paginator/tests/wdio/paginator-spec.js index f7baa0d71d1..71c13dea217 100644 --- a/packages/terra-paginator/tests/wdio/paginator-spec.js +++ b/packages/terra-paginator/tests/wdio/paginator-spec.js @@ -148,5 +148,15 @@ Terra.describeViewports('Controlled Paginator', ['large'], () => { $('#total-count-button').click(); Terra.validates.element('custom page label with total count'); }); + + it('should display custom page count with custom page label when hidePageCount is set to true', () => { + $('#hide-count-button').click(); + Terra.validates.element('custom page label with custom page count'); + }); + + it('should display progressive paginator with default page count when page label is not provided', () => { + $('#clear-page-lable-button').click(); + Terra.validates.element('paginator with default page count'); + }); }); });