@hyphen/hyphen-components 2.13.0 → 2.14.0

package/src/components/Pagination/Pagination.test.tsx

@@ -169,8 +169,11 @@ describe('Pagination', () => {
       expect(ellipsisFound.length).toBe(2);
 
       const buttonsFound = screen.queryAllByRole('button');
-      expect(buttonsFound[2]).toHaveTextContent('...');
-      expect(buttonsFound[buttonsFound.length - 3]).toHaveTextContent('...');
+      expect(buttonsFound.length).toBe(8);
+      expect(ellipsisFound[0].previousElementSibling?.textContent).toBe('1');
+      expect(ellipsisFound[0].nextElementSibling?.textContent).toBe('4');
+      expect(ellipsisFound[1].previousElementSibling?.textContent).toBe('7');
+      expect(ellipsisFound[1].nextElementSibling?.textContent).toBe('12');
     });
   });
 

package/src/components/Pagination/Pagination.tsx

@@ -4,7 +4,6 @@ import { Box } from '../Box/Box';
 import { Button } from '../Button/Button';
 import {
   generatePages,
-  generatePageRange,
   generatePageTotal,
   generateActiveListRange,
 } from './Pagination.utilities';
@@ -72,34 +71,43 @@ export const Pagination: FC<PaginationProps> = ({
   numberOfPagesDisplayed = 5,
   prevPageText = 'Previous',
 }) => {
-  const pageTotal = useMemo(
-    () => generatePageTotal(totalItemsCount, itemsPerPage),
-    [totalItemsCount, itemsPerPage]
-  );
+  const pageTotal = useMemo(() => {
+    if (itemsPerPage <= 0) return 1;
+    return generatePageTotal(totalItemsCount, itemsPerPage);
+  }, [totalItemsCount, itemsPerPage]);
 
-  const pageRange = useMemo(
-    () => generatePageRange(numberOfPagesDisplayed, pageTotal),
-    [numberOfPagesDisplayed, pageTotal]
-  );
+  const validActivePage = Math.max(1, Math.min(activePage, pageTotal));
 
   const activeListRange = useMemo(
-    () => generateActiveListRange(activePage, totalItemsCount, itemsPerPage),
-    [activePage, totalItemsCount, itemsPerPage]
+    () =>
+      generateActiveListRange(validActivePage, totalItemsCount, itemsPerPage),
+    [validActivePage, totalItemsCount, itemsPerPage]
   );
 
   const pages = useMemo(
-    () =>
-      generatePages(pageRange, pageTotal, activePage, numberOfPagesDisplayed),
-    [pageRange, pageTotal, activePage, numberOfPagesDisplayed]
+    () => generatePages(pageTotal, validActivePage, numberOfPagesDisplayed),
+    [pageTotal, validActivePage, numberOfPagesDisplayed]
+  );
+
+  const paginationClassNames = useMemo(
+    () => classNames(className),
+    [className]
   );
 
+  const activeListRangeText = useMemo(() => {
+    if (totalItemsCount === 0) {
+      return 'No items to display';
+    }
+    return `Showing ${activeListRange.first}-${activeListRange.last} of ${totalItemsCount}`;
+  }, [activeListRange, totalItemsCount]);
+
   return (
     <Box
       as="nav"
       direction="row"
       alignItems="center"
       justifyContent="space-between"
-      className={classNames(className)}
+      className={paginationClassNames}
     >
       <Box
         direction="row"
@@ -110,16 +118,15 @@ export const Pagination: FC<PaginationProps> = ({
         <Button
           variant="secondary"
           size={isCompact ? 'sm' : 'md'}
-          isDisabled={activePage === 1}
-          onClick={() => onChange(activePage - 1)}
+          isDisabled={validActivePage === 1}
+          onClick={() => onChange(validActivePage - 1)}
         >
           {prevPageText}
         </Button>
         {arePagesVisible && (
           <Box direction="row" gap="2xs">
-            {pages.map(({ pageNumber, isPage }) => {
-              console.log(activePage, pageNumber, isPage);
-              return (
+            {pages.map(({ pageNumber, isPage }, index) => {
+              return isPage ? (
                 <Button
                   key={pageNumber}
                   onClick={() => onChange(pageNumber)}
@@ -130,8 +137,20 @@ export const Pagination: FC<PaginationProps> = ({
                   }}
                   className={className}
                 >
-                  {isPage ? pageNumber : '...'}
+                  {pageNumber}
                 </Button>
+              ) : (
+                <Box
+                  key={`ellipsis-${index}`}
+                  style={{
+                    display: 'flexk',
+                    minWidth: isCompact ? '33px' : '42px',
+                    justifyContent: 'space-around',
+                    alignItems: 'center',
+                  }}
+                >
+                  ...
+                </Box>
               );
             })}
           </Box>
@@ -139,8 +158,8 @@ export const Pagination: FC<PaginationProps> = ({
         <Button
           variant="secondary"
           size={isCompact ? 'sm' : 'md'}
-          isDisabled={activePage === pageTotal}
-          onClick={() => onChange(activePage + 1)}
+          isDisabled={validActivePage === pageTotal}
+          onClick={() => onChange(validActivePage + 1)}
         >
           {nextPageText}
         </Button>
@@ -153,8 +172,7 @@ export const Pagination: FC<PaginationProps> = ({
         }}
         fontSize={isCompact ? 'sm' : 'md'}
       >
-        {isTotalVisible &&
-          `Showing ${activeListRange.first}-${activeListRange.last} of ${totalItemsCount}`}
+        {isTotalVisible && activeListRangeText}
       </Box>
     </Box>
   );

package/src/components/Pagination/Pagination.utilities.test.ts

@@ -1,27 +1,9 @@
 import {
   generatePages,
-  generatePageRange,
   generatePageTotal,
   generateActiveListRange,
 } from './Pagination.utilities';
 
-describe('generatePageRange', () => {
-  it('returns the number of pages displayed if there are enough total pages', () => {
-    const pageRange = generatePageRange(3, 50);
-    expect(pageRange).toBe(3);
-  });
-
-  it('returns the page total if it is smaller than the number of pages displayed', () => {
-    const pageRange = generatePageRange(3, 2);
-    expect(pageRange).toBe(2);
-  });
-
-  it('returns the number of pages displayed if it is the same as total pages', () => {
-    const pageRange = generatePageRange(3, 3);
-    expect(pageRange).toBe(3);
-  });
-});
-
 describe('generatePageTotal', () => {
   it('returns correct number of pages for a variety of inputs', () => {
     const pageTotal1 = generatePageTotal(948, 20);
@@ -51,8 +33,8 @@ describe('generateActiveListRange', () => {
 
 describe('generatePages', () => {
   it('returns correct pages -- scenario 1', () => {
-    const pages = generatePages(3, 10, 3, 3);
-    expect(pages.length).toBe(5);
+    const pages = generatePages(10, 3, 3);
+    expect(pages.length).toBe(6);
 
     expect(pages[0].isPage).toBe(true);
     expect(pages[0].pageNumber).toBe(1);
@@ -63,22 +45,25 @@ describe('generatePages', () => {
     expect(pages[2].isPage).toBe(true);
     expect(pages[2].pageNumber).toBe(3);
 
-    expect(pages[3].isPage).toBe(false);
-    expect(pages[3].pageNumber).toBe(6);
+    expect(pages[3].isPage).toBe(true);
+    expect(pages[3].pageNumber).toBe(4);
 
-    expect(pages[4].isPage).toBe(true);
-    expect(pages[4].pageNumber).toBe(10);
+    expect(pages[4].isPage).toBe(false);
+    expect(pages[4].pageNumber).toBe(-1);
+
+    expect(pages[5].isPage).toBe(true);
+    expect(pages[5].pageNumber).toBe(10);
   });
 
   it('returns correct pages -- scenario 2', () => {
-    const pages = generatePages(3, 10, 6, 3);
+    const pages = generatePages(10, 6, 3);
     expect(pages.length).toBe(7);
 
     expect(pages[0].isPage).toBe(true);
     expect(pages[0].pageNumber).toBe(1);
 
     expect(pages[1].isPage).toBe(false);
-    expect(pages[1].pageNumber).toBe(3);
+    expect(pages[1].pageNumber).toBe(-1);
 
     expect(pages[2].isPage).toBe(true);
     expect(pages[2].pageNumber).toBe(5);
@@ -90,21 +75,21 @@ describe('generatePages', () => {
     expect(pages[4].pageNumber).toBe(7);
 
     expect(pages[5].isPage).toBe(false);
-    expect(pages[5].pageNumber).toBe(9);
+    expect(pages[5].pageNumber).toBe(-1);
 
     expect(pages[6].isPage).toBe(true);
     expect(pages[6].pageNumber).toBe(10);
   });
 
   it('returns correct pages -- scenario 3', () => {
-    const pages = generatePages(3, 10, 9, 3);
+    const pages = generatePages(10, 9, 3);
     expect(pages.length).toBe(5);
 
     expect(pages[0].isPage).toBe(true);
     expect(pages[0].pageNumber).toBe(1);
 
     expect(pages[1].isPage).toBe(false);
-    expect(pages[1].pageNumber).toBe(6);
+    expect(pages[1].pageNumber).toBe(-1);
 
     expect(pages[2].isPage).toBe(true);
     expect(pages[2].pageNumber).toBe(8);
@@ -117,7 +102,7 @@ describe('generatePages', () => {
   });
 
   it('returns the correct pages -- one less page range than total', () => {
-    const pages = generatePages(2, 3, 1, 2);
+    const pages = generatePages(3, 1, 2);
 
     expect(pages[0].isPage).toBe(true);
     expect(pages[0].pageNumber).toBe(1);

package/src/components/Pagination/Pagination.utilities.ts

@@ -4,70 +4,45 @@ export interface Page {
 }
 
 export const generatePages = (
-  pageRange: number,
   pageTotal: number,
   activePage: number,
   numberOfPagesDisplayed: number
 ): Page[] => {
+  const pageRange = Math.min(pageTotal, Math.max(1, numberOfPagesDisplayed));
   const pages: Page[] = [];
   let startingPage = 1;
   let endingPage = pageRange;
 
-  if (pageTotal <= pageRange) {
-    startingPage = 1;
-    endingPage = pageRange;
-  } else if (activePage + numberOfPagesDisplayed > pageTotal) {
-    startingPage = pageTotal - (numberOfPagesDisplayed - 1);
-    endingPage = startingPage + (numberOfPagesDisplayed - 1);
-  } else if (
-    activePage > numberOfPagesDisplayed &&
-    activePage + numberOfPagesDisplayed <= pageTotal
-  ) {
-    startingPage = activePage - Math.floor(numberOfPagesDisplayed / 2);
-    endingPage = startingPage + (numberOfPagesDisplayed - 1);
+  if (activePage + Math.floor(pageRange / 2) >= pageTotal) {
+    startingPage = Math.max(1, pageTotal - pageRange + 1);
+    endingPage = pageTotal;
+  } else {
+    startingPage = Math.max(1, activePage - Math.floor(pageRange / 2));
+    endingPage = Math.min(pageTotal, startingPage + pageRange - 1);
   }
 
   for (let i = startingPage; i <= endingPage; i += 1) {
     pages.push({ pageNumber: i, isPage: true });
   }
 
-  if (pageTotal > pages[pages.length - 1]?.pageNumber) {
-    const secondToLastPage =
-      pageTotal !== activePage + numberOfPagesDisplayed
-        ? activePage + numberOfPagesDisplayed
-        : pageTotal - 1;
-
-    // only add ellipsis if there are more than 0 pages between the final page and the rest of the pages
-    if (pageTotal > numberOfPagesDisplayed + 1) {
-      pages.push({ pageNumber: secondToLastPage, isPage: false });
+  // Handling ellipsis for overflow pages
+  if (endingPage < pageTotal) {
+    if (endingPage < pageTotal - 1) {
+      pages.push({ pageNumber: -1, isPage: false }); // represents ellipsis
     }
-
     pages.push({ pageNumber: pageTotal, isPage: true });
   }
 
-  if (activePage > numberOfPagesDisplayed) {
-    const threeDotsPage =
-      activePage - numberOfPagesDisplayed > 1
-        ? activePage - numberOfPagesDisplayed
-        : activePage - numberOfPagesDisplayed + 1;
-
-    pages.unshift(
-      { pageNumber: 1, isPage: true },
-      { pageNumber: threeDotsPage, isPage: false }
-    );
+  if (startingPage > 1) {
+    pages.unshift({ pageNumber: 1, isPage: true });
+    if (startingPage > 2) {
+      pages.splice(1, 0, { pageNumber: -1, isPage: false }); // represents ellipsis
+    }
   }
 
-  return [...pages];
+  return pages;
 };
 
-// Return the true page range in cases
-// where number of pages wanted for display is larger than the actual page total.
-export const generatePageRange = (
-  numberOfPagesDisplayed: number,
-  pageTotal: number
-): number =>
-  numberOfPagesDisplayed > pageTotal ? pageTotal : numberOfPagesDisplayed;
-
 export const generatePageTotal = (
   totalItemsCount: number,
   itemsPerPage: number
@@ -80,22 +55,9 @@ export const generateActiveListRange = (
   activePage: number,
   totalItemsCount: number,
   itemsPerPage: number
-): { first?: number; last?: number } => {
-  const activePageRange: { first?: number; last?: number } = {};
-
-  const pageTotal = generatePageTotal(totalItemsCount, itemsPerPage);
-
-  if (activePage === 1) {
-    activePageRange.first = 1;
-    activePageRange.last =
-      totalItemsCount > itemsPerPage ? itemsPerPage : totalItemsCount;
-  } else if (activePage < pageTotal) {
-    activePageRange.first = activePage * itemsPerPage - (itemsPerPage - 1);
-    activePageRange.last = activePage * itemsPerPage;
-  } else {
-    activePageRange.first = activePage * itemsPerPage - (itemsPerPage - 1);
-    activePageRange.last = totalItemsCount;
-  }
+): { first: number; last: number } => {
+  const first = (activePage - 1) * itemsPerPage + 1;
+  const last = Math.min(activePage * itemsPerPage, totalItemsCount);
 
-  return activePageRange;
+  return { first, last };
 };

package/src/styles/display.scss

@@ -27,6 +27,9 @@
 .display-table-cell {
   display: table-cell;
 }
+.display-contents {
+  display: contents;
+}
 
 @media (min-width: $size-breakpoint-tablet) {
   .display-inherit-tablet {
@@ -56,6 +59,9 @@
   .display-table-cell-tablet {
     display: table-cell;
   }
+  .display-contents-tablet {
+    display: contents;
+  }
 }
 
 @media (min-width: $size-breakpoint-desktop) {
@@ -86,6 +92,9 @@
   .display-table-cell-desktop {
     display: table-cell;
   }
+  .display-contents-desktop {
+    display: contents;
+  }
 }
 
 @media (min-width: $size-breakpoint-hd) {
@@ -116,4 +125,7 @@
   .display-table-cell-hd {
     display: table-cell;
   }
+  .display-contents-hd {
+    display: contents;
+  }
 }

package/src/types/index.ts

@@ -119,7 +119,8 @@ export type CssDisplayValue =
   | 'inline'
   | 'inherit'
   | 'grid'
-  | 'table-cell';
+  | 'table-cell'
+  | 'contents';
 
 export type CssTextAlignValue = 'left' | 'center' | 'right';