From 3b4fdaf3a999633892b33f2b9eff58ab4e4bb9e3 Mon Sep 17 00:00:00 2001
From: Lee Dunkley <56807262+leeBigCommerce@users.noreply.github.com>
Date: Wed, 27 Nov 2024 09:26:50 +1100
Subject: [PATCH] Rename Pagination component to OffsetPagination (#1597)

---
 .../OffsetPagination.tsx}                     | 12 +++----
 .../__snapshots__/spec.tsx.snap               |  8 ++---
 .../src/components/OffsetPagination/index.ts  | 12 +++++++
 .../{Pagination => OffsetPagination}/spec.tsx | 32 ++++++++---------
 .../styled.tsx                                |  0
 .../src/components/Pagination/index.ts        |  1 -
 .../StatefulTable/StatefulTable.tsx           |  8 ++---
 .../Table/TablePagination/TablePagination.tsx |  4 +--
 .../big-design/src/components/Table/types.ts  |  4 +--
 .../TablePagination/TablePagination.tsx       |  4 +--
 .../src/components/TableNext/types.ts         |  4 +--
 packages/big-design/src/components/index.ts   |  2 +-
 ...able.tsx => OffsetPaginationPropTable.tsx} |  6 ++--
 packages/docs/PropTables/TablePropTable.tsx   |  4 +--
 packages/docs/PropTables/index.ts             |  2 +-
 packages/docs/components/SideNav/SideNav.tsx  |  2 +-
 .../{pagination.tsx => offset-pagination.tsx} | 35 ++++++++++---------
 17 files changed, 77 insertions(+), 63 deletions(-)
 rename packages/big-design/src/components/{Pagination/Pagination.tsx => OffsetPagination/OffsetPagination.tsx} (93%)
 rename packages/big-design/src/components/{Pagination => OffsetPagination}/__snapshots__/spec.tsx.snap (99%)
 create mode 100644 packages/big-design/src/components/OffsetPagination/index.ts
 rename packages/big-design/src/components/{Pagination => OffsetPagination}/spec.tsx (91%)
 rename packages/big-design/src/components/{Pagination => OffsetPagination}/styled.tsx (100%)
 delete mode 100644 packages/big-design/src/components/Pagination/index.ts
 rename packages/docs/PropTables/{PaginationPropTable.tsx => OffsetPaginationPropTable.tsx} (88%)
 rename packages/docs/pages/{pagination.tsx => offset-pagination.tsx} (67%)

diff --git a/packages/big-design/src/components/Pagination/Pagination.tsx b/packages/big-design/src/components/OffsetPagination/OffsetPagination.tsx
similarity index 93%
rename from packages/big-design/src/components/Pagination/Pagination.tsx
rename to packages/big-design/src/components/OffsetPagination/OffsetPagination.tsx
index c0dbecb8c..b0378901c 100644
--- a/packages/big-design/src/components/Pagination/Pagination.tsx
+++ b/packages/big-design/src/components/OffsetPagination/OffsetPagination.tsx
@@ -11,17 +11,17 @@ import { Flex, FlexItem } from '../Flex';
 
 import { StyledButton } from './styled';
 
-export interface PaginationLocalization {
+export interface OffsetPaginationLocalization {
   previousPage: string;
   nextPage: string;
 }
 
-const defaultLocalization: PaginationLocalization = {
+const defaultLocalization: OffsetPaginationLocalization = {
   previousPage: 'Previous page',
   nextPage: 'Next page',
 };
 
-export interface PaginationProps extends MarginProps {
+export interface OffsetPaginationProps extends MarginProps {
   currentPage: number;
   itemsPerPage: number;
   itemsPerPageOptions: number[];
@@ -29,7 +29,7 @@ export interface PaginationProps extends MarginProps {
   onPageChange(page: number): void;
   onItemsPerPageChange(range: number): void;
   label?: string;
-  localization?: PaginationLocalization;
+  localization?: OffsetPaginationLocalization;
   getRangeLabel?(start: number, end: number, totalItems: number): string;
 }
 
@@ -41,7 +41,7 @@ const defaultGetRangeLabel = (start: number, end: number, totalItems: number): s
   return `${start} - ${end} of ${totalItems}`;
 };
 
-export const Pagination: React.FC<PaginationProps> = memo(
+export const OffsetPagination: React.FC<OffsetPaginationProps> = memo(
   ({
     itemsPerPage,
     currentPage,
@@ -162,4 +162,4 @@ export const Pagination: React.FC<PaginationProps> = memo(
   },
 );
 
-Pagination.displayName = 'Pagination';
+OffsetPagination.displayName = 'OffsetPagination';
diff --git a/packages/big-design/src/components/Pagination/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/OffsetPagination/__snapshots__/spec.tsx.snap
similarity index 99%
rename from packages/big-design/src/components/Pagination/__snapshots__/spec.tsx.snap
rename to packages/big-design/src/components/OffsetPagination/__snapshots__/spec.tsx.snap
index 4a73ec6ac..5d62657ab 100644
--- a/packages/big-design/src/components/Pagination/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/OffsetPagination/__snapshots__/spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`render pagination component 1`] = `
+exports[`render offset pagination component 1`] = `
 .c7 {
   vertical-align: middle;
   height: 2rem;
@@ -430,7 +430,7 @@ exports[`render pagination component 1`] = `
 </div>
 `;
 
-exports[`render pagination component with invalid page info 1`] = `
+exports[`render offset pagination component with invalid page info 1`] = `
 .c7 {
   vertical-align: middle;
   height: 2rem;
@@ -860,7 +860,7 @@ exports[`render pagination component with invalid page info 1`] = `
 </div>
 `;
 
-exports[`render pagination component with invalid range info 1`] = `
+exports[`render offset pagination component with invalid range info 1`] = `
 .c7 {
   vertical-align: middle;
   height: 2rem;
@@ -1291,7 +1291,7 @@ exports[`render pagination component with invalid range info 1`] = `
 </div>
 `;
 
-exports[`render pagination component with no items 1`] = `
+exports[`render offset pagination component with no items 1`] = `
 .c7 {
   vertical-align: middle;
   height: 2rem;
diff --git a/packages/big-design/src/components/OffsetPagination/index.ts b/packages/big-design/src/components/OffsetPagination/index.ts
new file mode 100644
index 000000000..ae5be4f83
--- /dev/null
+++ b/packages/big-design/src/components/OffsetPagination/index.ts
@@ -0,0 +1,12 @@
+import { OffsetPagination, type OffsetPaginationProps } from './OffsetPagination';
+
+export { OffsetPagination, type OffsetPaginationProps } from './OffsetPagination';
+
+/**
+ * @deprecated This component has been renamed to `OffsetPagination`. Please import and use `OffsetPagination` instead.
+ */
+export const Pagination = OffsetPagination;
+/**
+ * @deprecated This type definition has been renamed to `OffsetPaginationProps`. Please import and use `OffsetPaginationProps` instead.
+ */
+export type PaginationProps = OffsetPaginationProps;
diff --git a/packages/big-design/src/components/Pagination/spec.tsx b/packages/big-design/src/components/OffsetPagination/spec.tsx
similarity index 91%
rename from packages/big-design/src/components/Pagination/spec.tsx
rename to packages/big-design/src/components/OffsetPagination/spec.tsx
index ad4adf0dc..96c31c2d3 100644
--- a/packages/big-design/src/components/Pagination/spec.tsx
+++ b/packages/big-design/src/components/OffsetPagination/spec.tsx
@@ -4,13 +4,13 @@ import React from 'react';
 
 import 'jest-styled-components';
 
-import { Pagination } from './index';
+import { OffsetPagination } from './index';
 
-test('render pagination component', async () => {
+test('render offset pagination component', async () => {
   const changePage = jest.fn();
   const changeRange = jest.fn();
   const { findByRole } = render(
-    <Pagination
+    <OffsetPagination
       currentPage={1}
       itemsPerPage={3}
       itemsPerPageOptions={[2, 3, 5]}
@@ -25,11 +25,11 @@ test('render pagination component', async () => {
   expect(pagination).toMatchSnapshot();
 });
 
-test('render pagination component with invalid page info', async () => {
+test('render offset pagination component with invalid page info', async () => {
   const changePage = jest.fn();
   const changeRange = jest.fn();
   const { findByRole } = render(
-    <Pagination
+    <OffsetPagination
       currentPage={-2}
       itemsPerPage={3}
       itemsPerPageOptions={[2, 3, 5]}
@@ -45,11 +45,11 @@ test('render pagination component with invalid page info', async () => {
   expect(pagination).toMatchSnapshot();
 });
 
-test('render pagination component with invalid range info', async () => {
+test('render offset pagination component with invalid range info', async () => {
   const changePage = jest.fn();
   const changeRange = jest.fn();
   const { findByRole } = render(
-    <Pagination
+    <OffsetPagination
       currentPage={1}
       itemsPerPage={-5}
       itemsPerPageOptions={[2, 3, 5]}
@@ -64,11 +64,11 @@ test('render pagination component with invalid range info', async () => {
   expect(pagination).toMatchSnapshot();
 });
 
-test('render pagination component with no items', async () => {
+test('render offset pagination component with no items', async () => {
   const changePage = jest.fn();
   const changeRange = jest.fn();
   const { findByRole } = render(
-    <Pagination
+    <OffsetPagination
       currentPage={1}
       itemsPerPage={3}
       itemsPerPageOptions={[2, 3, 5]}
@@ -82,7 +82,7 @@ test('render pagination component with no items', async () => {
   expect(pagination).toMatchSnapshot();
 });
 
-test('render pagination component while overriding button labels', async () => {
+test('render offset pagination component while overriding button labels', async () => {
   const getRangeLabel = (first: number, last: number, totalItems: number) => {
     return `[Custom label] ${first}-${last} of ${totalItems}`;
   };
@@ -90,7 +90,7 @@ test('render pagination component while overriding button labels', async () => {
   const changeRange = jest.fn();
 
   render(
-    <Pagination
+    <OffsetPagination
       currentPage={1}
       getRangeLabel={getRangeLabel}
       itemsPerPage={3}
@@ -118,7 +118,7 @@ test('trigger range change', async () => {
   const changePage = jest.fn();
   const changeRange = jest.fn();
   const { findByText } = render(
-    <Pagination
+    <OffsetPagination
       currentPage={1}
       itemsPerPage={2}
       itemsPerPageOptions={[2, 3, 5]}
@@ -142,7 +142,7 @@ test('trigger page decrease', async () => {
   const changeRange = jest.fn();
 
   render(
-    <Pagination
+    <OffsetPagination
       currentPage={2}
       itemsPerPage={3}
       itemsPerPageOptions={[2, 3, 5]}
@@ -173,7 +173,7 @@ test('trigger page increase', async () => {
   const changeRange = jest.fn();
 
   render(
-    <Pagination
+    <OffsetPagination
       currentPage={1}
       itemsPerPage={3}
       itemsPerPageOptions={[2, 3, 5]}
@@ -204,7 +204,7 @@ test('current itemsPerPage highlighted', async () => {
   const changeRange = jest.fn();
 
   render(
-    <Pagination
+    <OffsetPagination
       currentPage={2}
       itemsPerPage={3}
       itemsPerPageOptions={[2, 3, 5]}
@@ -228,7 +228,7 @@ test('renders localized labels', async () => {
   const changeRange = jest.fn();
 
   render(
-    <Pagination
+    <OffsetPagination
       currentPage={1}
       getRangeLabel={(start: number, end: number, totalItems: number): string => {
         return `${start} - ${end} de ${totalItems}`;
diff --git a/packages/big-design/src/components/Pagination/styled.tsx b/packages/big-design/src/components/OffsetPagination/styled.tsx
similarity index 100%
rename from packages/big-design/src/components/Pagination/styled.tsx
rename to packages/big-design/src/components/OffsetPagination/styled.tsx
diff --git a/packages/big-design/src/components/Pagination/index.ts b/packages/big-design/src/components/Pagination/index.ts
deleted file mode 100644
index 6f3c5b937..000000000
--- a/packages/big-design/src/components/Pagination/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Pagination, type PaginationProps } from './Pagination';
diff --git a/packages/big-design/src/components/StatefulTable/StatefulTable.tsx b/packages/big-design/src/components/StatefulTable/StatefulTable.tsx
index 9fd86ea28..2eaa17357 100644
--- a/packages/big-design/src/components/StatefulTable/StatefulTable.tsx
+++ b/packages/big-design/src/components/StatefulTable/StatefulTable.tsx
@@ -3,8 +3,8 @@ import React, { useCallback, useEffect, useMemo, useReducer } from 'react';
 import { useDidUpdate } from '../../hooks';
 import { typedMemo } from '../../utils';
 import { Box } from '../Box';
-import { PaginationProps } from '../Pagination';
-import { PaginationLocalization } from '../Pagination/Pagination';
+import { PaginationProps } from '../OffsetPagination';
+import { OffsetPaginationLocalization } from '../OffsetPagination/OffsetPagination';
 import { PillTabItem, PillTabs, PillTabsProps } from '../PillTabs';
 import { Search } from '../Search';
 import { SearchLocalization } from '../Search/types';
@@ -20,9 +20,9 @@ import {
 import { createReducer, createReducerInit } from './reducer';
 
 type Localization =
-  | PaginationLocalization
+  | OffsetPaginationLocalization
   | SearchLocalization
-  | (PaginationLocalization & SearchLocalization);
+  | (OffsetPaginationLocalization & SearchLocalization);
 
 const defaultLocalization: Localization = {
   nextPage: 'Next page',
diff --git a/packages/big-design/src/components/Table/TablePagination/TablePagination.tsx b/packages/big-design/src/components/Table/TablePagination/TablePagination.tsx
index 05450c63c..32e651062 100644
--- a/packages/big-design/src/components/Table/TablePagination/TablePagination.tsx
+++ b/packages/big-design/src/components/Table/TablePagination/TablePagination.tsx
@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 
-import { Pagination } from '../../Pagination';
+import { OffsetPagination } from '../../OffsetPagination';
 import { TablePaginationProps } from '../types';
 
 import { StyledPaginationContainer } from './styled';
@@ -19,7 +19,7 @@ export const TablePagination: React.FC<TablePaginationProps> = memo(
   }) => {
     return (
       <StyledPaginationContainer flexShrink={0}>
-        <Pagination
+        <OffsetPagination
           currentPage={currentPage}
           getRangeLabel={getRangeLabel}
           itemsPerPage={itemsPerPage}
diff --git a/packages/big-design/src/components/Table/types.ts b/packages/big-design/src/components/Table/types.ts
index a21695694..e2a967281 100644
--- a/packages/big-design/src/components/Table/types.ts
+++ b/packages/big-design/src/components/Table/types.ts
@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 
 import { MarginProps } from '../../helpers';
-import { PaginationProps } from '../Pagination';
+import { OffsetPaginationProps } from '../OffsetPagination';
 
 import { TableColumnDisplayProps } from './helpers';
 
@@ -38,7 +38,7 @@ export interface TableColumn<T> extends TableColumnDisplayProps {
   withPadding?: boolean;
 }
 
-export type TablePaginationProps = Omit<PaginationProps, keyof MarginProps>;
+export type TablePaginationProps = Omit<OffsetPaginationProps, keyof MarginProps>;
 
 interface Localization {
   ascendingOrder: string;
diff --git a/packages/big-design/src/components/TableNext/TablePagination/TablePagination.tsx b/packages/big-design/src/components/TableNext/TablePagination/TablePagination.tsx
index 05450c63c..32e651062 100644
--- a/packages/big-design/src/components/TableNext/TablePagination/TablePagination.tsx
+++ b/packages/big-design/src/components/TableNext/TablePagination/TablePagination.tsx
@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 
-import { Pagination } from '../../Pagination';
+import { OffsetPagination } from '../../OffsetPagination';
 import { TablePaginationProps } from '../types';
 
 import { StyledPaginationContainer } from './styled';
@@ -19,7 +19,7 @@ export const TablePagination: React.FC<TablePaginationProps> = memo(
   }) => {
     return (
       <StyledPaginationContainer flexShrink={0}>
-        <Pagination
+        <OffsetPagination
           currentPage={currentPage}
           getRangeLabel={getRangeLabel}
           itemsPerPage={itemsPerPage}
diff --git a/packages/big-design/src/components/TableNext/types.ts b/packages/big-design/src/components/TableNext/types.ts
index c7b0ec980..c2c0d9d7e 100644
--- a/packages/big-design/src/components/TableNext/types.ts
+++ b/packages/big-design/src/components/TableNext/types.ts
@@ -1,7 +1,7 @@
 import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
 
 import { MarginProps } from '../../helpers';
-import { PaginationProps } from '../Pagination';
+import { OffsetPaginationProps } from '../OffsetPagination';
 
 import { TableColumnDisplayProps } from './helpers';
 
@@ -54,7 +54,7 @@ export interface TableColumn<T> extends TableColumnDisplayProps {
   withPadding?: boolean;
 }
 
-export type TablePaginationProps = Omit<PaginationProps, keyof MarginProps>;
+export type TablePaginationProps = Omit<OffsetPaginationProps, keyof MarginProps>;
 
 interface Localization {
   ascendingOrder: string;
diff --git a/packages/big-design/src/components/index.ts b/packages/big-design/src/components/index.ts
index ce9fc0216..f47a0f697 100644
--- a/packages/big-design/src/components/index.ts
+++ b/packages/big-design/src/components/index.ts
@@ -21,7 +21,7 @@ export * from './Link';
 export * from './Message';
 export * from './Modal';
 export * from './MultiSelect';
-export * from './Pagination';
+export * from './OffsetPagination';
 export * from './Panel';
 export * from './PillTabs';
 export * from './Popover';
diff --git a/packages/docs/PropTables/PaginationPropTable.tsx b/packages/docs/PropTables/OffsetPaginationPropTable.tsx
similarity index 88%
rename from packages/docs/PropTables/PaginationPropTable.tsx
rename to packages/docs/PropTables/OffsetPaginationPropTable.tsx
index 825fa805a..b36da6e07 100644
--- a/packages/docs/PropTables/PaginationPropTable.tsx
+++ b/packages/docs/PropTables/OffsetPaginationPropTable.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Prop, PropTable, PropTableWrapper } from '../components';
 
-const paginationProps: Prop[] = [
+const offsetPaginationProps: Prop[] = [
   {
     name: 'itemsPerPage',
     types: 'number',
@@ -60,6 +60,6 @@ const paginationProps: Prop[] = [
   },
 ];
 
-export const PaginationPropTable: React.FC<PropTableWrapper> = (props) => {
-  return <PropTable propList={paginationProps} title="Pagination" {...props} />;
+export const OffsetPaginationPropTable: React.FC<PropTableWrapper> = (props) => {
+  return <PropTable propList={offsetPaginationProps} title="Pagination" {...props} />;
 };
diff --git a/packages/docs/PropTables/TablePropTable.tsx b/packages/docs/PropTables/TablePropTable.tsx
index 0059bb534..cdd931162 100644
--- a/packages/docs/PropTables/TablePropTable.tsx
+++ b/packages/docs/PropTables/TablePropTable.tsx
@@ -45,8 +45,8 @@ const tableProps: Prop[] = [
   },
   {
     name: 'pagination',
-    types: <NextLink href="/pagination">Pagination</NextLink>,
-    description: 'See pagination component for details.',
+    types: <NextLink href="/offset-pagination">OffsetPagination</NextLink>,
+    description: 'See offset pagination component for details.',
   },
   {
     name: 'selectable',
diff --git a/packages/docs/PropTables/index.ts b/packages/docs/PropTables/index.ts
index 12dcdb7ee..5f5380a40 100644
--- a/packages/docs/PropTables/index.ts
+++ b/packages/docs/PropTables/index.ts
@@ -23,7 +23,7 @@ export * from './MessagePropTable';
 export * from './ModalPropTable';
 export * from './MultiSelectPropTable';
 export * from './PaddingPropTable';
-export * from './PaginationPropTable';
+export * from './OffsetPaginationPropTable';
 export * from './PanelPropTable';
 export * from './PillTabsPropTable';
 export * from './PopoverPropTable';
diff --git a/packages/docs/components/SideNav/SideNav.tsx b/packages/docs/components/SideNav/SideNav.tsx
index ef13bec41..0a5573703 100644
--- a/packages/docs/components/SideNav/SideNav.tsx
+++ b/packages/docs/components/SideNav/SideNav.tsx
@@ -60,7 +60,7 @@ export const SideNav: React.FC = () => {
                 <SideNavLink href="/accordion-panel">Accordion Panel</SideNavLink>
                 <SideNavLink href="/collapse">Collapse</SideNavLink>
                 <SideNavLink href="/modal">Modal</SideNavLink>
-                <SideNavLink href="/pagination">Pagination</SideNavLink>
+                <SideNavLink href="/offset-pagination">OffsetPagination</SideNavLink>
                 <SideNavLink href="/panel">Panel</SideNavLink>
                 <SideNavLink href="/statefulTable">StatefulTable</SideNavLink>
                 <SideNavLink href="/statefulTree">StatefulTree</SideNavLink>
diff --git a/packages/docs/pages/pagination.tsx b/packages/docs/pages/offset-pagination.tsx
similarity index 67%
rename from packages/docs/pages/pagination.tsx
rename to packages/docs/pages/offset-pagination.tsx
index 275a10ff8..75084d19b 100644
--- a/packages/docs/pages/pagination.tsx
+++ b/packages/docs/pages/offset-pagination.tsx
@@ -1,28 +1,31 @@
-import { H1, Pagination, Panel, Text } from '@bigcommerce/big-design';
+import { H1, OffsetPagination, Panel, Text } from '@bigcommerce/big-design';
 import React, { useEffect, useState } from 'react';
 
 import { Code, CodePreview, GuidelinesTable, List } from '../components';
-import { MarginPropTable, PaginationPropTable } from '../PropTables';
+import { MarginPropTable, OffsetPaginationPropTable } from '../PropTables';
 
-const PaginationPage = () => {
+const OffsetPaginationPage = () => {
   return (
     <>
-      <H1>Pagination</H1>
+      <H1>OffsetPagination</H1>
 
       <Panel header="Overview" headerId="overview">
         <Text>
-          <Code primary>Pagination</Code> is used to divide a long list or table into several pages,
-          indicating other pages exist and allowing the user to access them. This makes the content
-          easier to read and ensures faster loading time. The user can easily navigate through the
-          pages in order, or jump to any page in the list. The user can also select the number of
-          results they want to see on each page, giving them more control over the way they view the
-          data.
+          <Code primary>OffsetPagination</Code> is used to divide a long list or table into several
+          pages, indicating other pages exist and allowing the user to access them. This makes the
+          content easier to read and ensures faster loading time. The user can easily navigate
+          through the pages in order, or jump to any page in the list. The user can also select the
+          number of results they want to see on each page, giving them more control over the way
+          they view the data.
         </Text>
         <Text bold>When to use:</Text>
         <List>
           <List.Item>
             On tables that contain more than 25 number of rows of data/content.{' '}
           </List.Item>
+          <List.Item>
+            When the data/content uses an offset, rather than cursor-based, form of pagination.
+          </List.Item>
         </List>
       </Panel>
 
@@ -51,7 +54,7 @@ const PaginationPage = () => {
 
             return (
               <>
-                <Pagination
+                <OffsetPagination
                   currentPage={page}
                   itemsPerPage={range}
                   itemsPerPageOptions={ranges}
@@ -72,21 +75,21 @@ const PaginationPage = () => {
       </Panel>
 
       <Panel header="Props" headerId="props">
-        <PaginationPropTable inheritedProps={<MarginPropTable collapsible />} />
+        <OffsetPaginationPropTable inheritedProps={<MarginPropTable collapsible />} />
       </Panel>
 
       <Panel header="Do's and Don'ts" headerId="guidelines">
         <GuidelinesTable
           discouraged={[
             <>
-              Don’t place <Code primary>Pagination</Code> below a table.
+              Don’t place <Code primary>OffsetPagination</Code> below a table.
             </>,
             'Don’t show dropdown arrow when there are less than 10 items.',
           ]}
           recommended={[
             <>
-              Place <Code primary>Pagination</Code> directly above the header of the table that it
-              controls, right aligned.
+              Place <Code primary>OffsetPagination</Code> directly above the header of the table
+              that it controls, right aligned.
             </>,
             'Disable dropdown options greater than the option that will show the total number of results (e.g., if there are 42 results, the highest option should be 50).',
             'Dropdown increments should be multiples of 10 and in increments that make sense for the context.',
@@ -97,4 +100,4 @@ const PaginationPage = () => {
   );
 };
 
-export default PaginationPage;
+export default OffsetPaginationPage;