terra-paginator - npm Package Compare versions

Comparing version 2.85.0 to 2.86.0

CHANGELOG.md

@@ -5,2 +5,7 @@ # Changelog
 
+## 2.86.0 - (October 3, 2023)
+
+* Added
+  * Added `hidePageCount` prop to hide page count provided by paginator.
+
 ## 2.85.0 - (September 19, 2023)
@@ -13,2 +18,3 @@
   * Updated all Paginator reduced views to align with the default views styling.
+  * Updated the description of `ariaLabelledBy` and `ariaLabel` props.
 
@@ -15,0 +21,0 @@ ## 2.84.0 - (August 18, 2023)

lib/_paginationUtils.js

@@ -7,7 +7,6 @@ "use strict";
 exports.pageSet = exports.calculatePages = void 0;
-var calculatePages = function calculatePages(totalCount, itemCountPerPage) {
+var calculatePages = exports.calculatePages = function calculatePages(totalCount, itemCountPerPage) {
   return itemCountPerPage ? Math.ceil(totalCount / itemCountPerPage) : totalCount;
 };
-exports.calculatePages = calculatePages;
-var pageSet = function pageSet(index, totalPages) {
+var pageSet = exports.pageSet = function pageSet(index, totalPages) {
   var sequence = [];
@@ -44,3 +43,2 @@ var numberShiftPoint = 7;
   });
-};
-exports.pageSet = pageSet;
+};

lib/_PaginatorButton.js

@@ -132,3 +132,2 @@ "use strict";
 PaginatorButton.propTypes = propTypes;
-var _default = PaginatorButton;
-exports.default = _default;
+var _default = exports.default = PaginatorButton;

lib/ControlledPaginator.js

@@ -56,7 +56,9 @@ "use strict";
   /**
-   * Allows user to set the heading id of the page.
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * Preferred method: Allows consumers to create an accessible name for the paginator by adding the ID of heading that describes paginator content.
    */
   ariaLabelledBy: _propTypes.default.string,
   /**
-   * Allows user to set the custom paginator label.
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * Allows consumers to create an accessible name for the paginator by adding a meaningful and descriptive text string.
    */
@@ -344,3 +346,2 @@ ariaLabel: _propTypes.default.string,
 Paginator.contextType = _terraThemeContext.default;
-var _default = (0, _reactIntl.injectIntl)(Paginator);
-exports.default = _default;
+var _default = exports.default = (0, _reactIntl.injectIntl)(Paginator);

lib/ControlledProgressivePaginator.js

@@ -54,7 +54,9 @@ "use strict";
   /**
-   * Allows user to set the heading id of the page.
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * Preferred method: Allows consumers to create an accessible name for the paginator by adding the ID of heading that describes paginator content.
    */
   ariaLabelledBy: _propTypes.default.string,
   /**
-   * Allows user to set the custom paginator label.
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * Allows consumers to create an accessible name for the paginator by adding a meaningful and descriptive text string.
    */
@@ -70,5 +72,12 @@ ariaLabel: _propTypes.default.string,
   /**
-   * Allows user to set custom page label. _(usage note: User must pass translated text)_.
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * 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.default.string
+  pageLabel: _propTypes.default.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.default.bool
 };
@@ -146,3 +155,4 @@ var ControlledProgressivePaginator = /*#__PURE__*/function (_React$Component) {
         ariaLabel = _this$props2.ariaLabel,
-        pageLabel = _this$props2.pageLabel;
+        pageLabel = _this$props2.pageLabel,
+        hidePageCount = _this$props2.hidePageCount;
       var totalPages = totalCount ? (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage) : 0;
@@ -156,5 +166,6 @@ var previousPageIndex = selectedPage === 1 ? 1 : selectedPage - 1;
         messageAttributes = _getPageLabel.messageAttributes;
-      var fullViewChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, intl.formatMessage({
+      var pageDetails = hidePageCount && pageLabel ? /*#__PURE__*/_react.default.createElement("div", null, pageLabel) : /*#__PURE__*/_react.default.createElement("div", null, intl.formatMessage({
         id: messageId
-      }, messageAttributes)), /*#__PURE__*/_react.default.createElement("ul", {
+      }, messageAttributes));
+      var fullViewChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, pageDetails, /*#__PURE__*/_react.default.createElement("ul", {
         className: cx('progressive-list')
@@ -233,3 +244,4 @@ }, renderFirstandLastButton && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaLabel = _this$props3.ariaLabel,
-        pageLabel = _this$props3.pageLabel;
+        pageLabel = _this$props3.pageLabel,
+        hidePageCount = _this$props3.hidePageCount;
       var totalPages = totalCount ? (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage) : 0;
@@ -243,5 +255,6 @@ var previousPageIndex = selectedPage === 1 ? 1 : selectedPage - 1;
         messageAttributes = _getPageLabel2.messageAttributes;
-      var reducedViewChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, intl.formatMessage({
+      var pageDetails = hidePageCount && pageLabel ? /*#__PURE__*/_react.default.createElement("div", null, pageLabel) : /*#__PURE__*/_react.default.createElement("div", null, intl.formatMessage({
         id: messageId
-      }, messageAttributes)), /*#__PURE__*/_react.default.createElement("ul", {
+      }, messageAttributes));
+      var reducedViewChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, pageDetails, /*#__PURE__*/_react.default.createElement("ul", {
         className: cx('progressive-list')
@@ -325,3 +338,2 @@ }, renderFirstandLastButton && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
 ControlledProgressivePaginator.contextType = _terraThemeContext.default;
-var _default = (0, _reactIntl.injectIntl)(ControlledProgressivePaginator);
-exports.default = _default;
+var _default = exports.default = (0, _reactIntl.injectIntl)(ControlledProgressivePaginator);

lib/Paginator.js

@@ -56,7 +56,9 @@ "use strict";
   /**
-   * Allows user to set the heading id of the page.
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * Preferred method: Allows consumers to create an accessible name for the paginator by adding the ID of heading that describes paginator content.
    */
   ariaLabelledBy: _propTypes.default.string,
   /**
-   * Allows user to set the custom paginator label.
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * Allows consumers to create an accessible name for the paginator by adding a meaningful and descriptive text string.
    */
@@ -352,3 +354,2 @@ ariaLabel: _propTypes.default.string,
 Paginator.contextType = _terraThemeContext.default;
-var _default = (0, _reactIntl.injectIntl)(Paginator);
-exports.default = _default;
+var _default = exports.default = (0, _reactIntl.injectIntl)(Paginator);

lib/ProgressivePaginator.js

@@ -54,7 +54,9 @@ "use strict";
   /**
-   * Allows user to set the heading id of the page.
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * Preferred method: Allows consumers to create an accessible name for the paginator by adding the ID of heading that describes paginator content.
    */
   ariaLabelledBy: _propTypes.default.string,
   /**
-   * Allows user to set the custom paginator label.
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * Allows consumers to create an accessible name for the paginator by adding a meaningful and descriptive text string.
    */
@@ -70,5 +72,12 @@ ariaLabel: _propTypes.default.string,
   /**
-   * Allows user to set custom page label. _(usage note: User must pass translated text)_.
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * 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.default.string
+  pageLabel: _propTypes.default.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.default.bool
 };
@@ -148,3 +157,4 @@ var ProgressivePaginator = /*#__PURE__*/function (_React$Component) {
         ariaLabel = _this$props2.ariaLabel,
-        pageLabel = _this$props2.pageLabel;
+        pageLabel = _this$props2.pageLabel,
+        hidePageCount = _this$props2.hidePageCount;
       var totalPages = totalCount ? (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage) : 0;
@@ -159,5 +169,6 @@ var selectedPage = this.state.selectedPage;
         messageAttributes = _getPageLabel.messageAttributes;
-      var fullViewChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, intl.formatMessage({
+      var pageDetails = hidePageCount && pageLabel ? /*#__PURE__*/_react.default.createElement("div", null, pageLabel) : /*#__PURE__*/_react.default.createElement("div", null, intl.formatMessage({
         id: messageId
-      }, messageAttributes)), /*#__PURE__*/_react.default.createElement("ul", {
+      }, messageAttributes));
+      var fullViewChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, pageDetails, /*#__PURE__*/_react.default.createElement("ul", {
         className: cx('progressive-list')
@@ -235,3 +246,4 @@ }, renderFirstandLastButton && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaLabel = _this$props3.ariaLabel,
-        pageLabel = _this$props3.pageLabel;
+        pageLabel = _this$props3.pageLabel,
+        hidePageCount = _this$props3.hidePageCount;
       var totalPages = totalCount ? (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage) : 0;
@@ -246,5 +258,6 @@ var selectedPage = this.state.selectedPage;
         messageAttributes = _getPageLabel2.messageAttributes;
-      var reducedViewChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, intl.formatMessage({
+      var pageDetails = hidePageCount && pageLabel ? /*#__PURE__*/_react.default.createElement("div", null, pageLabel) : /*#__PURE__*/_react.default.createElement("div", null, intl.formatMessage({
         id: messageId
-      }, messageAttributes)), /*#__PURE__*/_react.default.createElement("ul", {
+      }, messageAttributes));
+      var reducedViewChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, pageDetails, /*#__PURE__*/_react.default.createElement("ul", {
         className: cx('progressive-list')
@@ -328,3 +341,2 @@ }, renderFirstandLastButton && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
 ProgressivePaginator.contextType = _terraThemeContext.default;
-var _default = (0, _reactIntl.injectIntl)(ProgressivePaginator);
-exports.default = _default;
+var _default = exports.default = (0, _reactIntl.injectIntl)(ProgressivePaginator);

package.json

 {
   "name": "terra-paginator",
   "main": "lib/Paginator.js",
-  "version": "2.85.0",
+  "version": "2.86.0",
   "description": "Paginator to be used for data sets of known and unknown size. Provides first, last, previous, next, and paged functionality.",
@@ -52,3 +52,3 @@ "repository": {
   },
-  "gitHead": "04fcccf72b43ef5be7bb27d6bec329f762571e47"
+  "gitHead": "15402a168fe208a6a6ad899563df19e687c034af"
 }

src/ControlledPaginator.jsx

@@ -36,7 +36,9 @@ import React from 'react';
   /**
-   * Allows user to set the heading id of the page.
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * Preferred method: Allows consumers to create an accessible name for the paginator by adding the ID of heading that describes paginator content.
    */
   ariaLabelledBy: PropTypes.string,
   /**
-   * Allows user to set the custom paginator label.
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * Allows consumers to create an accessible name for the paginator by adding a meaningful and descriptive text string.
    */
@@ -43,0 +45,0 @@ ariaLabel: PropTypes.string,

src/ControlledProgressivePaginator.jsx

@@ -34,7 +34,9 @@ import React from 'react';
   /**
-   * Allows user to set the heading id of the page.
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * Preferred method: Allows consumers to create an accessible name for the paginator by adding the ID of heading that describes paginator content.
    */
   ariaLabelledBy: PropTypes.string,
   /**
-   * Allows user to set the custom paginator label.
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * Allows consumers to create an accessible name for the paginator by adding a meaningful and descriptive text string.
    */
@@ -48,5 +50,12 @@ ariaLabel: PropTypes.string,
   /**
-   * Allows user to set custom page label. _(usage note: User must pass translated text)_.
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * 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,
 };
@@ -110,2 +119,3 @@
       pageLabel,
+      hidePageCount,
     } = this.props;
@@ -119,10 +129,7 @@ const totalPages = (totalCount) ? calculatePages(totalCount, itemCountPerPage) : 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')}>
@@ -219,2 +226,3 @@ {
       pageLabel,
+      hidePageCount,
     } = this.props;
@@ -228,10 +236,7 @@ const totalPages = (totalCount) ? calculatePages(totalCount, itemCountPerPage) : 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')}>
@@ -238,0 +243,0 @@ {

src/Paginator.jsx

@@ -36,7 +36,9 @@ import React from 'react';
   /**
-   * Allows user to set the heading id of the page.
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * Preferred method: Allows consumers to create an accessible name for the paginator by adding the ID of heading that describes paginator content.
    */
   ariaLabelledBy: PropTypes.string,
   /**
-   * Allows user to set the custom paginator label.
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * Allows consumers to create an accessible name for the paginator by adding a meaningful and descriptive text string.
    */
@@ -43,0 +45,0 @@ ariaLabel: PropTypes.string,

src/ProgressivePaginator.jsx

@@ -34,7 +34,9 @@ import React from 'react';
   /**
-   * Allows user to set the heading id of the page.
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * Preferred method: Allows consumers to create an accessible name for the paginator by adding the ID of heading that describes paginator content.
    */
   ariaLabelledBy: PropTypes.string,
   /**
-   * Allows user to set the custom paginator label.
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * Allows consumers to create an accessible name for the paginator by adding a meaningful and descriptive text string.
    */
@@ -48,5 +50,12 @@ ariaLabel: PropTypes.string,
   /**
-   * Allows user to set custom page label. _(usage note: User must pass translated text)_.
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * 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,
 };
@@ -116,2 +125,3 @@
       pageLabel,
+      hidePageCount,
     } = this.props;
@@ -126,10 +136,7 @@ const totalPages = (totalCount) ? calculatePages(totalCount, itemCountPerPage) : 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')}>
@@ -225,2 +232,3 @@ {
       pageLabel,
+      hidePageCount,
     } = this.props;
@@ -235,10 +243,7 @@ const totalPages = (totalCount) ? calculatePages(totalCount, itemCountPerPage) : 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')}>
@@ -245,0 +250,0 @@ {

tests/wdio/paginator-spec.js

@@ -151,3 +151,13 @@ Terra.describeViewports('Paginator', ['tiny', 'medium', 'large'], () => {
     });
+
+    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');
+    });
   });
 });

No alert changes

Improved metrics

Total package byte prevSize

1338398

8.57%

Number of package files

152

4.11%

Lines of code

3709

1.23%

No dependency changes