From 4fb87e748abedd802977f5c7661ebcf333558176 Mon Sep 17 00:00:00 2001
From: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>
Date: Mon, 18 Nov 2024 18:08:59 -0300
Subject: [PATCH] fix: Added 1rem padding to pagination nav stories (#18049)

* fix: added new styles

* fix: fixed on different sizes

* fix: fixed itemsShown to be modular

* fix: fix

* test: added test for PaginationNav sizes

* fix: removed extra tests

---------

Co-authored-by: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com>
---
 .../PaginationNav/PaginationNav-test.js       | 29 +++++++++++++++++++
 .../PaginationNav/PaginationNav.stories.js    |  1 +
 .../PaginationNav/PaginationNav.tsx           | 22 ++++++++++++--
 .../src/components/PaginationNav/styles.scss  |  3 ++
 4 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 packages/react/src/components/PaginationNav/styles.scss

diff --git a/packages/react/src/components/PaginationNav/PaginationNav-test.js b/packages/react/src/components/PaginationNav/PaginationNav-test.js
index f8b54af15b92..40ab56e1a89a 100644
--- a/packages/react/src/components/PaginationNav/PaginationNav-test.js
+++ b/packages/react/src/components/PaginationNav/PaginationNav-test.js
@@ -22,6 +22,8 @@ Object.defineProperty(window, 'matchMedia', {
   })),
 });
 
+const prefix = 'cds';
+
 describe('PaginationNav', () => {
   describe('renders as expected - Component API', () => {
     it('should spread extra props onto outermost element', () => {
@@ -97,6 +99,33 @@ describe('PaginationNav', () => {
 
       expect(screen.getByLabelText('Next')).toBeDisabled();
     });
+
+    it('should render in small size and let user render 4 pages', () => {
+      render(<PaginationNav size="sm" totalItems={10} itemsShown={4} />);
+
+      expect(screen.getByLabelText('pagination')).toHaveClass(
+        `${prefix}--pagination-nav ${prefix}--layout--size-sm`
+      );
+      expect(screen.getByLabelText('Select Page number')).toBeInTheDocument();
+    });
+
+    it('should render in medium size and let user render 4 pages', () => {
+      render(<PaginationNav size="md" totalItems={10} itemsShown={4} />);
+
+      expect(screen.getByLabelText('pagination')).toHaveClass(
+        `${prefix}--pagination-nav ${prefix}--layout--size-md`
+      );
+      expect(screen.getByLabelText('Select Page number')).toBeInTheDocument();
+    });
+
+    it('should render in default (large) size and let user render 4 pages', () => {
+      render(<PaginationNav size="lg" totalItems={10} itemsShown={4} />);
+
+      expect(screen.getByLabelText('pagination')).toHaveClass(
+        `${prefix}--pagination-nav ${prefix}--layout--size-lg`
+      );
+      expect(screen.getByLabelText('Select Page number')).toBeInTheDocument();
+    });
   });
 
   describe('behaves as expected', () => {
diff --git a/packages/react/src/components/PaginationNav/PaginationNav.stories.js b/packages/react/src/components/PaginationNav/PaginationNav.stories.js
index 91d4729d9e60..4f6f1e601fec 100644
--- a/packages/react/src/components/PaginationNav/PaginationNav.stories.js
+++ b/packages/react/src/components/PaginationNav/PaginationNav.stories.js
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import PaginationNav from '../PaginationNav';
+import './styles.scss';
 
 export default {
   title: 'Components/PaginationNav',
diff --git a/packages/react/src/components/PaginationNav/PaginationNav.tsx b/packages/react/src/components/PaginationNav/PaginationNav.tsx
index 103bf44e89bb..542c7b092d7d 100644
--- a/packages/react/src/components/PaginationNav/PaginationNav.tsx
+++ b/packages/react/src/components/PaginationNav/PaginationNav.tsx
@@ -343,9 +343,24 @@ const PaginationNav = React.forwardRef<HTMLElement, PaginationNavProps>(
     const smMediaQuery = `(max-width: ${breakpoints.sm.width})`;
     const isSm = useMatchMedia(smMediaQuery);
 
+    let numberOfPages: number;
+
+    switch (size) {
+      case 'md':
+        numberOfPages = itemsShown === 4 ? itemsShown : 5;
+        break;
+      case 'sm':
+        numberOfPages = Math.max(4, Math.min(itemsShown, 7));
+        break;
+
+      default:
+        numberOfPages = 4;
+        break;
+    }
+
     const [currentPage, setCurrentPage] = useState(page);
     const [itemsDisplayedOnPage, setItemsDisplayedOnPage] = useState(
-      itemsShown >= 4 && !isSm ? itemsShown : 4
+      itemsShown >= 4 && !isSm ? itemsShown : numberOfPages
     );
 
     const [cuts, setCuts] = useState(
@@ -404,12 +419,13 @@ const PaginationNav = React.forwardRef<HTMLElement, PaginationNavProps>(
 
     // re-calculate cuts if props.totalItems or props.itemsShown change
     useEffect(() => {
-      const itemsToBeShown = itemsShown >= 4 && !isSm ? itemsShown : 4;
+      const itemsToBeShown =
+        itemsShown >= 4 && !isSm ? itemsShown : numberOfPages;
       setItemsDisplayedOnPage(Math.max(itemsToBeShown, 4));
       setCuts(
         calculateCuts(currentPage, totalItems, Math.max(itemsToBeShown, 4))
       );
-    }, [totalItems, itemsShown, isSm]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [totalItems, itemsShown, isSm, size]); // eslint-disable-line react-hooks/exhaustive-deps
 
     // update cuts if necessary whenever currentPage changes
     useEffect(() => {
diff --git a/packages/react/src/components/PaginationNav/styles.scss b/packages/react/src/components/PaginationNav/styles.scss
new file mode 100644
index 000000000000..676f9ee07d50
--- /dev/null
+++ b/packages/react/src/components/PaginationNav/styles.scss
@@ -0,0 +1,3 @@
+.sb-show-main.sb-main-padded {
+  padding: 1rem;
+}