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 <[email protected]>

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', () => {

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',

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(() => {

packages/react/src/components/PaginationNav/styles.scss

@@ -0,0 +1,3 @@
+.sb-show-main.sb-main-padded {
+  padding: 1rem;
+}