diff --git a/src/lib/components/Pagination/Pagination.test.tsx b/src/lib/components/Pagination/Pagination.test.tsx
index c7ef4db..66b4890 100644
--- a/src/lib/components/Pagination/Pagination.test.tsx
+++ b/src/lib/components/Pagination/Pagination.test.tsx
@@ -16,7 +16,9 @@ it("renders without crashing", () => {
totalPages={10}
/>,
);
- expect(screen.getByRole("navigation", { name: "pagination"})).toBeInTheDocument();
+ expect(
+ screen.getByRole("navigation", { name: "pagination" }),
+ ).toBeInTheDocument();
});
it("displays the current page number in the input box", () => {
@@ -33,7 +35,24 @@ it("displays the current page number in the input box", () => {
);
expect(screen.getByRole("spinbutton")).toHaveValue(1);
-})
+});
+
+it("allows for a custom accessible label", () => {
+ render(
+ ,
+ );
+
+ expect(screen.getByLabelText("Custom label")).toBeInTheDocument();
+});
it("disables the buttons and input box when the disabled prop is true", () => {
render(
@@ -51,7 +70,7 @@ it("disables the buttons and input box when the disabled prop is true", () => {
expect(screen.getByRole("spinbutton")).toBeDisabled();
expect(screen.getByRole("button", { name: "Next page" })).toBeDisabled();
expect(screen.getByRole("button", { name: "Previous page" })).toBeDisabled();
-})
+});
it("disables the 'Previous page' button when on the first page", () => {
render(
@@ -67,7 +86,7 @@ it("disables the 'Previous page' button when on the first page", () => {
);
expect(screen.getByRole("button", { name: "Previous page" })).toBeDisabled();
-})
+});
it("disables the 'Next page' button when on the last page", () => {
render(
@@ -83,7 +102,7 @@ it("disables the 'Next page' button when on the last page", () => {
);
expect(screen.getByRole("button", { name: "Next page" })).toBeDisabled();
-})
+});
it("can call a function when the 'Next page' button is pressed", async () => {
const onNextClick = vi.fn();
@@ -102,7 +121,7 @@ it("can call a function when the 'Next page' button is pressed", async () => {
await userEvent.click(screen.getByRole("button", { name: "Next page" }));
expect(onNextClick).toHaveBeenCalled();
-})
+});
it("can call a function when the 'Previous page' button is pressed", async () => {
const onPreviousClick = vi.fn();
@@ -121,7 +140,7 @@ it("can call a function when the 'Previous page' button is pressed", async () =>
await userEvent.click(screen.getByRole("button", { name: "Previous page" }));
expect(onPreviousClick).toHaveBeenCalled();
-})
+});
it("can call a function when the input box's value is changed", async () => {
const onInputChange = vi.fn();
@@ -141,7 +160,7 @@ it("can call a function when the input box's value is changed", async () => {
await userEvent.clear(screen.getByRole("spinbutton"));
expect(onInputChange).toHaveBeenCalled();
-})
+});
it("can call a function when the input box is blurred", async () => {
const onInputBlur = vi.fn();
@@ -165,4 +184,4 @@ it("can call a function when the input box is blurred", async () => {
// blur the input
await userEvent.click(screen.getByText("of 10"));
expect(onInputBlur).toHaveBeenCalled();
-})
+});
diff --git a/src/lib/components/Pagination/Pagination.tsx b/src/lib/components/Pagination/Pagination.tsx
index fe57316..6a9c6eb 100644
--- a/src/lib/components/Pagination/Pagination.tsx
+++ b/src/lib/components/Pagination/Pagination.tsx
@@ -2,12 +2,14 @@ import { ChangeEvent, useState } from "react";
import "./Pagination.scss";
import { Button, Icon, Input } from "@canonical/react-components";
+import classNames from "classnames";
-export interface PaginationProps {
+export interface PaginationProps extends React.AriaAttributes {
+ className?: string;
currentPage: number | undefined;
error?: string;
- disabled: boolean;
- onInputBlur: () => void;
+ disabled?: boolean;
+ onInputBlur?: () => void;
onInputChange: (e: ChangeEvent) => void;
onNextClick: () => void;
onPreviousClick: () => void;
@@ -15,6 +17,7 @@ export interface PaginationProps {
}
export const Pagination: React.FC = ({
+ className,
currentPage,
error,
disabled,
@@ -23,9 +26,13 @@ export const Pagination: React.FC = ({
onNextClick,
onPreviousClick,
totalPages,
+ ...props
}: PaginationProps) => {
return (
-