refactor: [M3-7537] - PaginationControls Storybook v7 Story (#9959)

* pagination story

* update comments and tests

* changeset

* fix page arg not taking effect

* Update packages/manager/src/components/PaginationControls/PaginationControls.stories.tsx

Co-authored-by: Banks Nussman <[email protected]>

* update import

---------

Co-authored-by: Banks Nussman <[email protected]>

packages/manager/.changeset/pr-9959-tech-stories-1701811015350.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+PaginationControls V7 story migration ([#9959](https://github.com/linode/manager/pull/9959))

packages/manager/src/components/PaginationControls/PaginationControls.stories.tsx

@@ -0,0 +1,34 @@
+import { useArgs } from '@storybook/preview-api';
+import * as React from 'react';
+
+import { PaginationControls } from './PaginationControls';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof PaginationControls>;
+
+export const PaginationControl: Story = {
+  args: {
+    count: 250,
+    page: 1,
+    pageSize: 25,
+  },
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [, setArgs] = useArgs();
+
+    return (
+      <PaginationControls
+        {...args}
+        onClickHandler={(page) => setArgs({ page })}
+      />
+    );
+  },
+};
+
+const meta: Meta<typeof PaginationControls> = {
+  component: PaginationControls,
+  title: 'Components/Pagination Control',
+};
+
+export default meta;

packages/manager/src/components/PaginationControls/PaginationControls.test.tsx

@@ -1,3 +1,4 @@
+import { fireEvent } from '@testing-library/react';
 import * as React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
@@ -12,12 +13,27 @@ const props = {
 };
 
 describe('PaginationControls', () => {
-  it('should render a button for each page', () => {
+  it('should render a button for each page and call the button handler when clicked', () => {
     const { getByText } = renderWithTheme(<PaginationControls {...props} />);
 
-    expect(getByText('1')).toBeInTheDocument();
-    expect(getByText('2')).toBeInTheDocument();
-    expect(getByText('3')).toBeInTheDocument();
-    expect(getByText('4')).toBeInTheDocument();
+    const p1 = getByText('1');
+    expect(p1).toBeInTheDocument();
+    fireEvent.click(p1);
+    expect(props.onClickHandler).toHaveBeenCalledTimes(1);
+
+    const p2 = getByText('2');
+    expect(p2).toBeInTheDocument();
+    fireEvent.click(p2);
+    expect(props.onClickHandler).toHaveBeenCalledTimes(2);
+
+    const p3 = getByText('3');
+    expect(p3).toBeInTheDocument();
+    fireEvent.click(p3);
+    expect(props.onClickHandler).toHaveBeenCalledTimes(3);
+
+    const p4 = getByText('4');
+    expect(p4).toBeInTheDocument();
+    fireEvent.click(p4);
+    expect(props.onClickHandler).toHaveBeenCalledTimes(4);
   });
 });

packages/manager/src/components/PaginationControls/PaginationControls.tsx

@@ -2,19 +2,35 @@ import Pagination from '@mui/material/Pagination';
 import * as React from 'react';
 
 export interface Props {
+  /**
+   * The number of items there are to display
+   */
   count: number;
+  /**
+   * The action to perform for changing pages
+   */
   onClickHandler: (page?: number) => void;
+  /**
+   * The page we are currently on
+   */
   page: number;
+  /**
+   * The size of the page - specifically, how many items to display on each page
+   */
   pageSize: number;
 }
 
+/**
+ * `PaginationControls` allows for pagination, enabling users to select a specific page from a range of pages. Note that this component
+ * only handles pagination and not displaying the relevant data for each page.
+ */
 export const PaginationControls = (props: Props) => {
   const { count, onClickHandler, page, pageSize } = props;
 
   return (
     <Pagination
-      data-qa-pagination-controls
       count={Math.ceil(count / pageSize)}
+      data-qa-pagination-controls
       onChange={(_, page) => onClickHandler(page)}
       page={page}
       shape="rounded"