updated example with count to display

packages/terra-core-docs/CHANGELOG.md

@@ -1,10 +1,10 @@
 # Changelog
 
 ## Unreleased
-* Updated
- * Updated `terra-arrange` examples to use `terra-form-radio`.
 
 * Updated
+  * Updated `terra-arrange` examples to use `terra-form-radio`.
+  * Updated `terra-paginator` custom page label and count example to display correct page count.
   * Updated `terra-list` examples to include `isTabFocusDisabled` prop.
   * Removed `terra-table` as a dependency as the docs have now moved to `terra-framework-docs`.
 

packages/terra-core-docs/src/terra-dev-site/doc/paginator/example/ProgressivePaginatorCustomPageCountExample.jsx

@@ -6,6 +6,7 @@ import styles from './PaginatorExampleCommon.module.scss';
 
 const cx = classNames.bind(styles);
 const totalCount = 450;
+const itemCountPerPage = 10;
 
 const buildPage = () => {
   const fullContent = [<p>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.</p>];
@@ -22,15 +23,15 @@ class ProgressivePaginatorCustomPageCountExample extends React.Component {
     this.state = {
       content: buildPage(),
       currentPage: 1,
-      pageLabel: `Summary 1 in ${totalCount}`,
+      pageLabel: `Summary 1 in ${Math.abs(totalCount / itemCountPerPage)}`,
     };
 
     this.changePages = this.changePages.bind(this);
   }
 
   changePages(index) {
     this.setState({ currentPage: index });
-    this.setState({ pageLabel: `Summary ${index} of total ${totalCount}` });
+    this.setState({ pageLabel: `Summary ${index} of total ${Math.abs(totalCount / itemCountPerPage)}` });
   }
 
   render() {
@@ -43,7 +44,7 @@ class ProgressivePaginatorCustomPageCountExample extends React.Component {
             </h1>
 )}
           // eslint-disable-next-line react/prop-types
-          footer={<ProgressivePaginator onPageChange={this.changePages} selectedPage={this.state.currentPage} totalCount={totalCount} itemCountPerPage={10} ariaLabelledBy="progressive_paginator_header_id" pageLabel={this.state.pageLabel} hidePageCount />}
+          footer={<ProgressivePaginator onPageChange={this.changePages} selectedPage={this.state.currentPage} totalCount={totalCount} itemCountPerPage={itemCountPerPage} ariaLabelledBy="progressive_paginator_header_id" pageLabel={this.state.pageLabel} hidePageCount />}
         >
           {this.state.content}
         </Dialog>