made controlled paginator example

packages/terra-paginator/src/ControlledPaginator.jsx

@@ -26,12 +26,12 @@ const propTypes = {
    * Total number of all items being paginated.
    * Required when using itemCountPerPage and selectedPage.
    */
-  totalCount: PropTypes.number.isRequired,
+  totalCount: PropTypes.number,
   /**
    * Total number of items per page.
    * Required when using selectedPage and totalCount.
    */
-  itemCountPerPage: PropTypes.number.isRequired,
+  itemCountPerPage: PropTypes.number,
   /**
    * @private
    * The intl object to be injected for translations.

packages/terra-paginator/src/terra-dev-site/doc/example/ControlledPaginatorNoPagesExample.jsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import Dialog from 'terra-dialog';
+import Button from 'terra-button';
+import ControlledPaginator from 'terra-paginator/lib/ControlledPaginator';
+import classNames from 'classnames/bind';
+import styles from './ControlledPaginatorCommon.module.scss';
+
+const cx = classNames.bind(styles);
+
+const fillArray = (value, len) => {
+  const arr = [];
+  for (let i = 0; i < len; i += 1) {
+    arr.push(<p key={Math.floor(Math.random() * Math.floor(100000))}>{value}</p>);
+  }
+  return arr;
+};
+
+const buildPage = () => {
+  let fullContent = [];
+  const content = ('Lorem ipsum dolor sit amet, consectetur adipiscing elit. '
+    + 'Fusce porttitor ullamcorper nisi, vel tincidunt dui pharetra vel. '
+    + 'Morbi eu rutrum nibh, sit amet placerat libero. Integer vel dapibus nibh. '
+    + 'Donec tempor mi vitae lorem congue, ut ultrices metus feugiat. Sed non commodo felis. '
+    + 'Aliquam eget maximus dui, ut rhoncus augue.');
+
+  fullContent = fillArray(content, 10);
+
+  return (
+    fullContent
+  );
+};
+
+const ControlledPaginatorExample = () => {
+  const [content, setContent] = useState(buildPage());
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const changePages = (index) => {
+    setCurrentPage(index);
+  }
+
+  return (
+    <div className={cx('paginator-wrapper')}>
+        <Dialog
+          header={(
+            <h1>
+              Page
+              {currentPage}
+            </h1>
+            )}
+          footer={<ControlledPaginator onPageChange={changePages} selectedPage={currentPage} />}
+        >
+          <div>
+            <Button text="Set Page to 9" onClick={() => { setCurrentPage(9); }} />
+            <Button text="Set Page to 15" onClick={() => { setCurrentPage(15); }} />
+            <Button text="Set Page to 45" onClick={() => { setCurrentPage(45); }} />
+          </div>
+          {content}
+        </Dialog>
+    </div>
+  );
+}
+
+export default ControlledPaginatorExample;

packages/terra-paginator/src/terra-dev-site/doc/paginator/PaginatorControlled.2.doc.mdx

@@ -1,6 +1,7 @@
 import { Badge } from 'terra-paginator/package.json?dev-site-package';
 
-import ControlledPaginatorExample from './example/ControlledPaginatorExample?dev-site-example';
+import ControlledPaginatorExample from '../example/ControlledPaginatorExample?dev-site-example';
+import ControlledPaginatorNoPagesExample from '../example/ControlledPaginatorNoPagesExample?dev-site-example';
 
 import ControlledPaginatorPropsTable from 'terra-paginator/src/ControlledPaginator?dev-site-props-table';
 
@@ -30,6 +31,7 @@ import ControlledPaginator from 'terra-paginator/lib/ControlledPaginator';
 
 ## Examples
 <ControlledPaginatorExample />
+<ControlledPaginatorNoPagesExample />
 
 ## Controlled Paginator Props
 <ControlledPaginatorPropsTable />

packages/terra-paginator/src/terra-dev-site/doc/paginator/ProgressivePaginatorControlled.4.doc.mdx

@@ -1,6 +1,6 @@
 import { Badge } from 'terra-paginator/package.json?dev-site-package';
 
-import ControlledProgressivePaginatorExample from './example/ControlledProgressivePaginatorExample?dev-site-example';
+import ControlledProgressivePaginatorExample from '../example/ControlledProgressivePaginatorExample?dev-site-example';
 import ControlledProgressivePaginatorWithoutTotalCountExample from '../example/ControlledProgressivePaginatorWithoutTotalCountExample?dev-site-example';
 
 import ControlledProgressivePaginatorPropsTable from 'terra-paginator/src/ControlledProgressivePaginator?dev-site-props-table';

packages/terra-paginator/src/terra-dev-site/test/paginator/ControlledPaginatorNoPages.test.jsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import Button from 'terra-button';
+import classNames from 'classnames/bind';
+import ControlledPaginator from '../../../ControlledPaginator';
+import styles from './ControlledPaginatorTestCommon.module.scss';
+
+const cx = classNames.bind(styles);
+
+const ControlledPaginatorExample = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const changePages = (index) => {
+    setCurrentPage(index);
+  }
+
+  return (
+    <div className={cx('paginator-wrapper')}>
+       <Button id="button-9" text="Set Page to 9" onClick={() => { setCurrentPage(9); }} />
+       <Button id="button-15" text="Set Page to 15" onClick={() => { setCurrentPage(15); }} />
+       <Button id="button-45" text="Set Page to 45" onClick={() => { setCurrentPage(45); }} />
+       <ControlledPaginator onPageChange={changePages} selectedPage={currentPage} />
+    </div>
+   );
+}
+
+export default ControlledPaginatorExample;

packages/terra-paginator/tests/wdio/paginator-spec.js

@@ -39,6 +39,29 @@ Terra.describeViewports('Controlled Paginator', ['large'], () => {
       Terra.validates.element('2');
     });
 
+    it('should toggle the pages when the left arrow is clicked', () => {
+      browser.click('[class*="previous"]');
+      Terra.validates.element('3');
+    });
+  }); 
+
+  describe('Controlled Paginator without Total count', () => {
+    it('displays initial selected page', () => {
+      browser.url('/raw/tests/terra-paginator/paginator/controlled-paginator-no-pages');
+      browser.moveToObject('#root', 0, 700); // move cursor to remove focus styles
+      Terra.validates.element('0');
+    });
+
+    it('should toggle page change when the props are updated', () => {
+      browser.click('#button-9');
+      Terra.validates.element('1');
+    });
+
+    it('should toggle the pages when the right arrow is clicked', () => {
+      browser.click('[class*="next"]');
+      Terra.validates.element('2');
+    });
+
     it('should toggle the pages when the left arrow is clicked', () => {
       browser.click('[class*="previous"]');
       Terra.validates.element('3');