[Terra-Paginator] Added hidePageCount prop to hide default page count provided by Paginator

packages/terra-core-docs/CHANGELOG.md

@@ -3,7 +3,9 @@
 ## Unreleased
 
 * 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

packages/terra-core-docs/src/terra-dev-site/test/paginator/ProgressivePaginatorWithCustomLabel.test.jsx

@@ -5,15 +5,18 @@ 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);
   };
   return (
     <div>
       <Button id="total-count-button" text="Set Total Count to 45" onClick={() => { setTotalCount(45); }} />
-      {/* eslint-disable-next-line no-console */}
-      <ProgressivePaginator pageLabel="WebPage" totalCount={totalCount} onPageChange={changePages} selectedPage={currentPage} />
+      <Button id="hide-count-button" text="Hide Page Count" onClick={() => { setHidePageCount(true); setPageLabel('WebPage 444 of 445'); }} />
+      <Button id="clear-page-lable-button" text="clear Page label" onClick={() => { setPageLabel(undefined); }} />
+      <ProgressivePaginator pageLabel={pageLabel} hidePageCount={hidePageCount} totalCount={totalCount} onPageChange={changePages} selectedPage={currentPage} />
     </div>
   );
 };

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

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) ? <div>{pageLabel}</div> : <div>{intl.formatMessage({ id: messageId }, messageAttributes)}</div>;
 
     const fullViewChildren = (
       <>
-        <div>
-          {
-            intl.formatMessage({ id: messageId }, messageAttributes)
-          }
-        </div>
+        {pageDetails}
         <ul className={cx('progressive-list')}>
           {
             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) ? <div>{pageLabel}</div> : <div>{intl.formatMessage({ id: messageId }, messageAttributes)}</div>;
 
     const reducedViewChildren = (
       <>
-        <div>
-          {
-            intl.formatMessage({ id: messageId }, messageAttributes)
-          }
-        </div>
+        {pageDetails}
         <ul className={cx('progressive-list')}>
           {
             renderFirstandLastButton && (

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) ? <div>{pageLabel}</div> : <div>{intl.formatMessage({ id: messageId }, messageAttributes)}</div>;
 
     const fullViewChildren = (
       <>
-        <div>
-          {
-            intl.formatMessage({ id: messageId }, messageAttributes)
-          }
-        </div>
+        {pageDetails}
         <ul className={cx('progressive-list')}>
           {
             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) ? <div>{pageLabel}</div> : <div>{intl.formatMessage({ id: messageId }, messageAttributes)}</div>;
 
     const reducedViewChildren = (
       <>
-        <div>
-          {
-            intl.formatMessage({ id: messageId }, messageAttributes)
-          }
-        </div>
+        {pageDetails}
         <ul className={cx('progressive-list')}>
           {
             renderFirstandLastButton && (

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');
+    });
   });
 });