feat: renames Pagination to OffsetPagination with revised API

docs/migration.md

@@ -59,6 +59,13 @@ consider additional positioning prop support on a case-by-case basis.
 
 - `TooltipModal`: removed `popperModifiers` prop (see [note](#breaking-changes))
 
+#### @zendeskgarden/react-pagination
+
+- `Pagination`: renamed to `OffsetPagination`
+  - changed type export from `HTMLAttributes<HTMLUListElement>` to `HTMLAttributes<HTMLElement>`
+  - removed `transformPageProps` prop
+  - added `labels` prop
+
 #### @zendeskgarden/react-theming
 
 - Utility function `isRtl` has been removed. Use `props.theme.rtl` instead.

packages/pagination/README.md

@@ -18,7 +18,7 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
 
 ```jsx
 import { ThemeProvider } from '@zendeskgarden/react-theming';
-import { Pagination } from '@zendeskgarden/react-pagination';
+import { OffsetPagination } from '@zendeskgarden/react-pagination';
 
 initialState = {
   currentPage: 1
@@ -28,7 +28,7 @@ initialState = {
  * Place a `ThemeProvider` at the root of your React application
  */
 <ThemeProvider>
-  <Pagination
+  <OffsetPagination
     totalPages={11}
     currentPage={state.currentPage}
     onChange={currentPage => setState({ currentPage })}

packages/pagination/demo/offsetPagination.stories.mdx

@@ -0,0 +1,54 @@
+import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
+import { useArgs } from '@storybook/client-api';
+import { OffsetPagination } from '@zendeskgarden/react-pagination';
+import README from '../README.md';
+
+<Meta title="Packages/Pagination/OffsetPagination" component={OffsetPagination} />
+
+# API
+
+<ArgsTable />
+
+# Demo
+
+<Canvas>
+  <Story
+    name="OffsetPagination"
+    args={{
+      currentPage: 1,
+      totalPages: 11,
+      'aria-label': 'Pagination',
+      gap: 'Ellipsis indicating non-visible pages',
+      page: 'Page',
+      next: 'Next page',
+      previous: 'Previous page'
+    }}
+    argTypes={{
+      gap: { table: { category: 'Label' } },
+      page: { table: { category: 'Label' } },
+      next: { table: { category: 'Label' } },
+      previous: { table: { category: 'Label' } }
+    }}
+    parameters={{
+      design: {
+        allowFullscreen: true,
+        type: 'figma',
+        url: 'https://www.figma.com/file/6g87L4FdKZTA3knt3Rsfdx/Garden?node-id=172%3A13037'
+      }
+    }}
+  >
+    {args => {
+      const labels = {
+        renderPage: n => `${args.page} ${n}`,
+        gap: args.gap,
+        next: args.next,
+        previous: args.previous
+      };
+      const updateArgs = useArgs()[1];
+      const handleChange = currentPage => updateArgs({ currentPage });
+      return <OffsetPagination {...args} labels={labels} onChange={handleChange} />;
+    }}
+  </Story>
+</Canvas>
+
+<Markdown>{README}</Markdown>

packages/pagination/demo/stories/CursorPaginationStory.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import { CursorPagination, IPaginationProps } from '@zendeskgarden/react-pagination';
 
 interface IArgs extends IPaginationProps {
@@ -16,7 +16,7 @@ interface IArgs extends IPaginationProps {
   last: string;
 }
 
-export const CursorPaginationStory: Story<IArgs> = ({
+export const CursorPaginationStory: StoryFn<IArgs> = ({
   currentPage,
   totalPages,
   onChange,

packages/pagination/package.json

@@ -21,7 +21,6 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-pagination": "^1.0.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7"