Pagination docs + preview

@stellar/design-system-website/docs/components/layout/_category_.json

@@ -0,0 +1,6 @@
+{
+  "label": "Layout",
+  "link": {
+    "type": "generated-index"
+  }
+}

@stellar/design-system-website/docs/components/layout/pagination.mdx

@@ -0,0 +1,24 @@
+---
+slug: /pagination
+---
+
+# Pagination
+
+<ComponentDescription componentName="Pagination" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Pagination">
+  <Pagination
+    currentPage={1}
+    itemCount={20}
+    pageSize={5}
+    setCurrentPage={() => {}}
+  />
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Pagination" />

@stellar/design-system-website/src/componentPreview/paginationPreview.tsx

@@ -0,0 +1,5 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const paginationPreview: ComponentPreview = {
+  options: [],
+};

@stellar/design-system-website/src/components/PreviewBlock/index.tsx

@@ -22,6 +22,7 @@ import { linkPreview } from "@site/src/componentPreview/linkPreview";
 import { loaderPreview } from "@site/src/componentPreview/loaderPreview";
 import { navButtonPreview } from "@site/src/componentPreview/navButtonPreview";
 import { notificationPreview } from "@site/src/componentPreview/notificationPreview ";
+import { paginationPreview } from "@site/src/componentPreview/paginationPreview";
 import { paragraphPreview } from "@site/src/componentPreview/paragraphPreview";
 import { profilePreview } from "@site/src/componentPreview/profilePreview";
 import { projectLogoPreview } from "@site/src/componentPreview/projectLogoPreview";
@@ -52,6 +53,7 @@ const previews: { [key: string]: ComponentPreview } = {
   Loader: loaderPreview,
   NavButton: navButtonPreview,
   Notification: notificationPreview,
+  Pagination: paginationPreview,
   Paragraph: paragraphPreview,
   Profile: profilePreview,
   ProjectLogo: projectLogoPreview,

@stellar/design-system/src/components/Pagination/index.tsx

@@ -2,19 +2,22 @@ import { IconButton } from "../IconButton";
 import { Icon } from "../../icons";
 import "./styles.scss";
 
-enum NavigationDirection {
-  PREV = "previous",
-  NEXT = "next",
-}
-
-interface PaginationProps {
+/** */
+export interface PaginationProps {
+  /** How many items per page */
   pageSize: number;
+  /** Total count of all items */
   itemCount: number;
+  /** Current page */
   currentPage: number;
+  /** Function to set current page */
   setCurrentPage: (currentPage: number) => void;
 }
 
-export const Pagination = ({
+/**
+ * Pagination provides a range of pages to display long lists of data.
+ */
+export const Pagination: React.FC<PaginationProps> = ({
   pageSize,
   itemCount,
   currentPage,
@@ -28,11 +31,8 @@ export const Pagination = ({
   const isFirstPage = currentPage === 1;
   const isLastPage = currentPage === pageCount;
 
-  const handlePageNavigation = (direction: NavigationDirection) => {
-    const newPage =
-      direction === NavigationDirection.PREV
-        ? currentPage - 1
-        : currentPage + 1;
+  const handlePageNavigation = (direction: "prev" | "next") => {
+    const newPage = direction === "prev" ? currentPage - 1 : currentPage + 1;
     setCurrentPage(newPage);
   };
 
@@ -51,17 +51,19 @@ export const Pagination = ({
         icon={<Icon.ChevronLeft />}
         altText="Previous page"
         disabled={isFirstPage}
-        onClick={() => handlePageNavigation(NavigationDirection.PREV)}
+        onClick={() => handlePageNavigation("prev")}
         {...customProps}
       />
       {`${currentPage} of ${pageCount}`}
       <IconButton
         icon={<Icon.ChevronRight />}
         altText="Next page"
         disabled={isLastPage}
-        onClick={() => handlePageNavigation(NavigationDirection.NEXT)}
+        onClick={() => handlePageNavigation("next")}
         {...customProps}
       />
     </div>
   );
 };
+
+Pagination.displayName = "Pagination";