✨(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.

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,6 +151,7 @@ export const Pagination = ({
           size="small"
         />
       </div>
+      {displayGoto && (
         <div className="c__pagination__goto">
           <form
             onSubmit={(e) => {
@@ -169,6 +173,7 @@ export const Pagination = ({
             />
           </form>
         </div>
+      )}
     </div>
   );
 };