Fix pagination story and pagebutton highlight

presleyp · presleyp · commit 23fdc3c4f153 · 2022-10-25T18:15:26.000Z
diff --git a/site/src/components/PaginationWidget/PaginationWidget.stories.tsx b/site/src/components/PaginationWidget/PaginationWidget.stories.tsx
@@ -1,65 +1,53 @@
-import { action } from "@storybook/addon-actions"
 import { Story } from "@storybook/react"
 import { PaginationWidget, PaginationWidgetProps } from "./PaginationWidget"
+import { createPaginationRef } from "./utils"
 
 export default {
   title: "components/PaginationWidget",
   component: PaginationWidget,
+  argTypes: {
+    prevLabel: {
+      defaultValue: "Previous"
+    },
+    nextLabel: {
+      defaultValue: "Next"
+    },
+    paginationRef: {
+      defaultValue: createPaginationRef({ page: 1, limit: 12 })
+    },
+    numRecords: {
+      defaultValue: 200
+    }
+  }
 }
 
 const Template: Story<PaginationWidgetProps> = (
   args: PaginationWidgetProps,
 ) => <PaginationWidget {...args} />
 
-const defaultProps = {
-  prevLabel: "Previous",
-  nextLabel: "Next",
-  onPrevClick: action("previous"),
-  onNextClick: action("next"),
-  onPageClick: action("clicked"),
-}
-
 export const UnknownPageNumbers = Template.bind({})
 UnknownPageNumbers.args = {
-  ...defaultProps,
+  numRecords: undefined
 }
 
 export const LessThan8Pages = Template.bind({})
 LessThan8Pages.args = {
-  ...defaultProps,
   numRecords: 84,
-  numRecordsPerPage: 12,
-  activePage: 1,
 }
 
 export const MoreThan8Pages = Template.bind({})
-MoreThan8Pages.args = {
-  ...defaultProps,
-  numRecords: 200,
-  numRecordsPerPage: 12,
-  activePage: 1,
-}
 
 export const MoreThan7PagesWithActivePageCloseToStart = Template.bind({})
 MoreThan7PagesWithActivePageCloseToStart.args = {
-  ...defaultProps,
-  numRecords: 200,
-  numRecordsPerPage: 12,
-  activePage: 2,
+  paginationRef: createPaginationRef({ page: 2, limit: 12 })
 }
 
 export const MoreThan7PagesWithActivePageFarFromBoundaries = Template.bind({})
 MoreThan7PagesWithActivePageFarFromBoundaries.args = {
-  ...defaultProps,
-  numRecords: 200,
-  numRecordsPerPage: 12,
-  activePage: 4,
+  paginationRef: createPaginationRef({ page: 4, limit: 12 })
 }
 
 export const MoreThan7PagesWithActivePageCloseToEnd = Template.bind({})
 MoreThan7PagesWithActivePageCloseToEnd.args = {
-  ...defaultProps,
-  numRecords: 200,
-  numRecordsPerPage: 12,
-  activePage: 17,
+  paginationRef: createPaginationRef({ page: 17, limit: 12 })
 }
diff --git a/site/src/components/PaginationWidget/PaginationWidget.tsx b/site/src/components/PaginationWidget/PaginationWidget.tsx
@@ -66,7 +66,7 @@ export const PaginationWidget = ({
           <Cond>
             {buildPagedList(numPages, currentPage).map((page) =>
               typeof page !== "number" ? (
-                <PageButton key={`Page${page}`} placeholder="..." disabled />
+                <PageButton key={`Page${page}`} activePage={currentPage} placeholder="..." disabled />
               ) : (
                 <PageButton
                   key={`Page${page}`}
