✨(react) make Pagination goto input optionnal

Based on a recent request we needed to make it optionnal in order to
have simpler pagination in some cases.

Closes #183

.changeset/rude-scissors-peel.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+make Pagination goto input optionnal

packages/react/src/components/Pagination/_index.scss

@@ -3,6 +3,7 @@
 .c__pagination {
   display: flex;
   gap: 2rem;
+  height: 3.5rem;
 
   &__list {
     display: flex;

packages/react/src/components/Pagination/index.mdx

@@ -53,6 +53,13 @@ You can also set the page programmatically, for example, if you want to use a qu
   <Story id="components-pagination--force-page"/>
 </Canvas>
 
+
+### Hide go to input
+
+You can also hide the go to input if you don't want to allow the user to go to a specific page or to have a simpler pagination.
+
+<Canvas of={Stories.WithoutGoto}/>
+
 ### Things to know
 
 - The pagination will never render if the number of pages is less than 2.
@@ -65,4 +72,4 @@ You can also set the page programmatically, for example, if you want to use a qu
 
 ### `usePagination` hook
 
-<ArgTypes of={usePagination} />
+<ArgTypes of={usePagination} />

packages/react/src/components/Pagination/index.spec.tsx

@@ -201,4 +201,20 @@ describe("<Pagination/>", () => {
       screen.getByRole("button", { name: "You are currently on page 1" }),
     );
   });
+  it("can hide go to input", async () => {
+    const LocalWrapper = () => {
+      const pagination = usePagination({
+        defaultPage: 50,
+        defaultPagesCount: 100,
+      });
+      return (
+        <CunninghamProvider>
+          <Pagination {...pagination} displayGoto={false} />
+        </CunninghamProvider>
+      );
+    };
+
+    render(<LocalWrapper />);
+    expect(document.querySelector(".c__pagination__goto")).toBeNull();
+  });
 });

packages/react/src/components/Pagination/index.stories.tsx

@@ -71,3 +71,11 @@ export const ForcePage = () => {
   }, []);
   return <Pagination {...pagination} />;
 };
+
+export const WithoutGoto = () => {
+  const pagination = usePagination({
+    defaultPagesCount: 100,
+    defaultPage: 50,
+  });
+  return <Pagination {...pagination} displayGoto={false} />;
+};

packages/react/src/components/Pagination/index.tsx

@@ -13,6 +13,8 @@ export interface PaginationProps {
   /** Total number of items per page */
   // eslint-disable-next-line react/no-unused-prop-types
   pageSize: number;
+  /** Display the goto input */
+  displayGoto?: boolean;
 }
 
 export const usePagination = ({
@@ -43,6 +45,7 @@ export const Pagination = ({
   page,
   onPageChange,
   pagesCount = 0,
+  displayGoto = true,
 }: PaginationProps) => {
   const { t } = useCunningham();
   const [gotoValue, setGotoValue] = useState("");
@@ -148,27 +151,29 @@ export const Pagination = ({
           size="small"
         />
       </div>
-      <div className="c__pagination__goto">
+      {displayGoto && (
-        <form
+        <div className="c__pagination__goto">
-          onSubmit={(e) => {
+          <form
-            e.preventDefault();
+            onSubmit={(e) => {
-            gotoPage();
+              e.preventDefault();
-          }}
+              gotoPage();
-        >
+            }}
-          <Input
+          >
-            type="number"
+            <Input
-            label={t("components.pagination.goto_label")}
+              type="number"
-            aria-label={t("components.pagination.goto_label_aria")}
+              label={t("components.pagination.goto_label")}
-            size={2}
+              aria-label={t("components.pagination.goto_label_aria")}
-            value={gotoValue}
+              size={2}
-            onChange={(e) => setGotoValue(e.target.value)}
+              value={gotoValue}
-            min={1}
+              onChange={(e) => setGotoValue(e.target.value)}
-            max={pagesCount}
+              min={1}
-            onBlur={() => gotoPage()}
+              max={pagesCount}
-            onFocus={(e) => e.target.select()}
+              onBlur={() => gotoPage()}
-          />
+              onFocus={(e) => e.target.select()}
-        </form>
+            />
-      </div>
+          </form>
+        </div>
+      )}
     </div>
   );
 };