@hyphen/hyphen-components 2.12.4 → 2.13.1

package/dist/index.d.ts

@@ -30,6 +30,7 @@ export * from './components/Modal/Modal';
 export * from './components/Pagination/Pagination';
 export * from './components/Popover/Popover';
 export * from './components/RadioGroup/RadioGroup';
+export * from './components/RangeInput/RangeInput';
 export * from './components/ResponsiveProvider/ResponsiveProvider';
 export * from './components/SelectInput/SelectInput';
 export * from './components/SelectInputInset/SelectInputInset';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "2.12.4",
+  "version": "2.13.1",
   "license": "MIT",
   "author": {
     "name": "@hyphen"

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/components/RangeInput/RangeInput.mdx

@@ -0,0 +1,25 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import * as Stories from './RangeInput.stories';
+import {RangeInput} from "./RangeInput";
+
+<Meta of={Stories} />
+
+# RangeInput
+
+Use a RangeInput when a user is required to select a value within a range. It is ideal for this scenario because the range is displayed without having to interact.
+
+## Props
+
+<ArgTypes of={RangeInput} />
+
+## Default
+
+All that is required to render a basic version of the RangeInput is the input's unique `id`, a `value`, a `max`, and an `onChange` event handler passed to the `onChange` prop.
+
+<Canvas isExpanded of={Stories.Default} />
+
+### Disabled
+
+Use the `isDisabled` prop to disable the input.
+
+<Canvas of={Stories.Disabled} />

package/src/components/RangeInput/RangeInput.module.scss

@@ -0,0 +1,25 @@
+.slider {
+  appearance: none;
+  -webkit-appearance: none;
+  padding: 0 !important;
+  background-color: var(--color-base-grey-700);
+  border: none;
+  border-radius: 2.5rem;
+  height: var(--size-spacing-sm);
+  overflow: visible;
+}
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  height: var(--size-spacing-2xl);
+  width: var(--size-spacing-2xl);
+  background-color: var(--color-base-white);
+  border-radius: var(--size-percentage-50);
+  border: 0.125rem solid #0f172a;
+  cursor: pointer;
+}
+
+.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}

package/src/components/RangeInput/RangeInput.stories.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import type { Meta } from '@storybook/react';
+import { RangeInput } from './RangeInput';
+
+const meta: Meta<typeof RangeInput> = {
+  title: 'Components/RangeInput',
+  component: RangeInput,
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+};
+
+export default meta;
+
+export const Default = () => {
+  const [value, setValue] = useState(50);
+
+  return (
+    <>
+      <RangeInput
+        id="range"
+        value={value}
+        max={100}
+        onChange={(event) => setValue(+event.target.value)}
+      />
+      <p>Value: {value}</p>
+    </>
+  );
+};
+
+export const Disabled = () => {
+  const [value, setValue] = useState(50);
+
+  return (
+    <RangeInput
+      id="range-disabled"
+      value={value}
+      max={100}
+      onChange={(event) => setValue(+event.target.value)}
+      isDisabled={true}
+    />
+  );
+};

package/src/components/RangeInput/RangeInput.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { InputRangeProps, RangeInput } from './RangeInput';
+
+describe('RangeInput', () => {
+  const defaultProps: InputRangeProps = {
+    id: 'test-range',
+    value: 50,
+    max: 100,
+    onChange: jest.fn(),
+  };
+
+  test('should render the range input with correct attributes', () => {
+    render(<RangeInput {...defaultProps} />);
+    const rangeInput = screen.getByRole('slider');
+
+    expect(rangeInput).toBeInTheDocument();
+    expect(rangeInput).toHaveAttribute('id', 'test-range');
+    expect(rangeInput).toHaveAttribute('type', 'range');
+    expect(rangeInput).toHaveAttribute('min', '0');
+    expect(rangeInput).toHaveAttribute('value', '50');
+    expect(rangeInput).toHaveAttribute('max', '100');
+  });
+
+  test('should update the value when changed', async () => {
+    const onChangeMock = jest.fn();
+    render(<RangeInput {...defaultProps} onChange={onChangeMock} />);
+    const rangeInput = screen.getByRole('slider');
+
+    await fireEvent.change(rangeInput, { target: { value: '75' } });
+
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/RangeInput/RangeInput.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { FC } from 'react';
+import classNames from 'classnames';
+import styles from './RangeInput.module.scss';
+
+export interface InputRangeProps {
+  /**
+   * The input's id attribute.
+   */
+  id: string;
+  /**
+   * The value of the range.
+   */
+  value: number;
+  /**
+   * The maximum value of the range.
+   */
+  max: number;
+  /**
+   * Callback function to call on change event.
+   */
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * Custom class to be added to standard input classes.
+   */
+  className?: string;
+  /**
+   * If the input should be disabled and not focusable.
+   */
+  isDisabled?: boolean;
+}
+
+export const RangeInput: FC<InputRangeProps> = ({
+  value = 0,
+  max = 0,
+  id,
+  onChange,
+  className,
+  isDisabled = false,
+  ...restProps
+}) => {
+  const currentProgress = value > 0 ? (value / max) * 100 : 0;
+
+  return (
+    <input
+      {...restProps}
+      id={id}
+      type="range"
+      min="0"
+      value={value}
+      max={max}
+      aria-valuemax={max}
+      aria-valuenow={value}
+      aria-label="range input"
+      className={classNames(styles.slider, className, {
+        [styles.disabled]: isDisabled,
+      })}
+      onChange={onChange}
+      disabled={isDisabled}
+      style={{
+        background: `linear-gradient(to right, var(--color-base-grey-400) ${currentProgress}%, var(--color-base-grey-700) ${currentProgress}%)`,
+      }}
+    />
+  );
+};

package/src/index.ts

@@ -30,6 +30,7 @@ export * from './components/Modal/Modal';
 export * from './components/Pagination/Pagination';
 export * from './components/Popover/Popover';
 export * from './components/RadioGroup/RadioGroup';
+export * from './components/RangeInput/RangeInput';
 export * from './components/ResponsiveProvider/ResponsiveProvider';
 export * from './components/SelectInput/SelectInput';
 export * from './components/SelectInputInset/SelectInputInset';