feat: redesign pagination component (#3035)

* feat: redesign Pagination component

* fix: remove unnecessary whitespace in next page button

Author: stevenpersia

lib/src/components/Icon/Sprite.tsx

@@ -11,6 +11,10 @@ export const arrows = [
   'arrow-to-right',
   'top-arrow-to-top',
   'arrow-to-bottom',
+  'angle-double-left',
+  'angle-double-right',
+  'angle-left',
+  'angle-right',
 ] as const
 
 export const actions = [

lib/src/components/Icon/icons.ts

@@ -0,0 +1,26 @@
+import { useState } from 'react'
+
+import { Pagination } from '@/components/Pagination'
+import type { PaginationProps } from '@/components/Pagination/types'
+
+const Example = () => {
+  const [page, setPage] = useState<PaginationProps['page']>(1)
+
+  return (
+    <Pagination
+      aria-label="Pagination with custom texts"
+      navigationTexts={{
+        firstPage: 'First',
+        lastPage: 'Last',
+        nextPage: 'Next',
+        previousPage: 'Previous',
+      }}
+      onChange={page => setPage(Number(page))}
+      page={page}
+      pageCount={5}
+      showEdgeControls
+    />
+  )
+}
+
+export default Example

lib/src/components/Pagination/docs/examples/custom-texts.tsx

@@ -0,0 +1,22 @@
+import { useState } from 'react'
+
+import { Pagination } from '@/components/Pagination'
+import type { PaginationProps } from '@/components/Pagination/types'
+
+const Example = () => {
+  const [page, setPage] = useState<PaginationProps['page']>(5)
+
+  return (
+    <Pagination
+      aria-label="First Last Pagination"
+      buttonFirstProps={{ title: 'Go to first page' }}
+      buttonLastProps={{ title: 'Go to last page' }}
+      onChange={page => setPage(Number(page))}
+      page={page}
+      pageCount={20}
+      showEdgeControls={true}
+    />
+  )
+}
+
+export default Example

lib/src/components/Pagination/docs/examples/first-last.tsx

@@ -1,15 +1,14 @@
-import * as React from 'react'
+import { useState } from 'react'
 
 import { Pagination } from '@/components/Pagination'
 import type { PaginationProps } from '@/components/Pagination/types'
 
 const Example = () => {
-  const [page, setPage] = React.useState<PaginationProps['page']>(8)
+  const [page, setPage] = useState<PaginationProps['page']>(8)
 
   return (
     <Pagination
       aria-label="Example Pagination"
-      dataTestId="pagination"
       getHref={page => `?page=${page}`}
       onChange={page => setPage(Number(page))}
       page={page}

lib/src/components/Pagination/docs/examples/overview.tsx

@@ -1,15 +1,14 @@
-import * as React from 'react'
+import { useState } from 'react'
 
 import { Pagination } from '@/components/Pagination'
 import type { PaginationProps } from '@/components/Pagination/types'
 
 const Example = () => {
-  const [page, setPage] = React.useState<PaginationProps['page']>(8)
+  const [page, setPage] = useState<PaginationProps['page']>(8)
 
   return (
     <Pagination
       aria-label="Range Pagination"
-      getHref={page => `?page=${page}`}
       onChange={page => setPage(Number(page))}
       page={page}
       pageCount={10}

lib/src/components/Pagination/docs/examples/range.tsx

@@ -0,0 +1,20 @@
+import { useState } from 'react'
+
+import { Pagination } from '@/components/Pagination'
+import type { PaginationProps } from '@/components/Pagination/types'
+
+const Example = () => {
+  const [page, setPage] = useState<PaginationProps['page']>(3)
+
+  return (
+    <Pagination
+      aria-label="Medium Size Pagination"
+      onChange={page => setPage(Number(page))}
+      page={page}
+      pageCount={10}
+      size="md"
+    />
+  )
+}
+
+export default Example

lib/src/components/Pagination/docs/examples/size.tsx

@@ -10,3 +10,21 @@ title: Pagination
 When your range display is above your pageCount, all the pages are shown.<br />Change range with `rangeDisplay`, by default it is `5`.
 
 <div data-playground="range.tsx" data-component="Pagination"></div>
+
+### First and Last buttons
+
+You can optionally display First and Last buttons by setting `showEdgeControls` to `true`. These buttons allow users to quickly jump to the first or last page, which is especially useful for large datasets with many pages.
+
+<div data-playground="first-last.tsx" data-component="Pagination"></div>
+
+### Size
+
+The Pagination component supports two different sizes: `md` and `lg` (default). Use the `size` prop to control the overall size of the pagination controls.
+
+<div data-playground="size.tsx" data-component="Pagination"></div>
+
+### Custom texts
+
+You can customize the text displayed on all navigation buttons using the `navigationTexts` prop.
+
+<div data-playground="custom-texts.tsx" data-component="Pagination"></div>

lib/src/components/Pagination/docs/index.mdx

@@ -1,6 +1,44 @@
 {
   "Pagination": {
     "props": {
+      "buttonFirstProps": {
+        "defaultValue": null,
+        "description": "",
+        "name": "buttonFirstProps",
+        "parent": {
+          "fileName": "welcome-ui/lib/src/components/Pagination/types.ts",
+          "name": "PaginationOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "welcome-ui/lib/src/components/Pagination/types.ts",
+            "name": "PaginationOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ButtonHTMLAttributes<HTMLButtonElement>"
+        }
+      },
+      "buttonLastProps": {
+        "defaultValue": null,
+        "description": "",
+        "name": "buttonLastProps",
+        "parent": {
+          "fileName": "welcome-ui/lib/src/components/Pagination/types.ts",
+          "name": "PaginationOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "welcome-ui/lib/src/components/Pagination/types.ts",
+            "name": "PaginationOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ButtonHTMLAttributes<HTMLButtonElement>"
+        }
+      },
       "buttonNextProps": {
         "defaultValue": null,
         "description": "",
@@ -96,6 +134,25 @@
           "name": "OlHTMLAttributes<HTMLOListElement>"
         }
       },
+      "navigationTexts": {
+        "defaultValue": null,
+        "description": "",
+        "name": "navigationTexts",
+        "parent": {
+          "fileName": "welcome-ui/lib/src/components/Pagination/types.ts",
+          "name": "PaginationOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "welcome-ui/lib/src/components/Pagination/types.ts",
+            "name": "PaginationOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "NavigationTexts"
+        }
+      },
       "onChange": {
         "defaultValue": null,
         "description": "",
@@ -173,6 +230,66 @@
         "type": {
           "name": "number"
         }
+      },
+      "showEdgeControls": {
+        "defaultValue": {
+          "value": false
+        },
+        "description": "",
+        "name": "showEdgeControls",
+        "parent": {
+          "fileName": "welcome-ui/lib/src/components/Pagination/types.ts",
+          "name": "PaginationOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "welcome-ui/lib/src/components/Pagination/types.ts",
+            "name": "PaginationOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "boolean",
+          "value": [
+            {
+              "value": "false"
+            },
+            {
+              "value": "true"
+            }
+          ]
+        }
+      },
+      "size": {
+        "defaultValue": {
+          "value": "lg"
+        },
+        "description": "",
+        "name": "size",
+        "parent": {
+          "fileName": "welcome-ui/lib/src/components/Pagination/types.ts",
+          "name": "PaginationOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "welcome-ui/lib/src/components/Pagination/types.ts",
+            "name": "PaginationOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "\"lg\" | \"md\"",
+          "value": [
+            {
+              "value": "\"lg\""
+            },
+            {
+              "value": "\"md\""
+            }
+          ]
+        }
       }
     }
   }