feat: PR comment update

src/ChipCarousel/ChipCarousel.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';
 import ChipCarousel from '.';
 
@@ -8,36 +9,37 @@ const items = [
     props: {
       onClick: jest.fn(),
       children: 'Item 1',
+      'data-testid': 'chip',
     },
   },
   {
     props: {
       onClick: jest.fn(),
       children: 'Item 2',
+      'data-testid': 'chip',
     },
   },
   {
     props: {
       onClick: jest.fn(),
       children: 'Item 3',
+      'data-testid': 'chip',
     },
   },
   {
     props: {
       onClick: jest.fn(),
+      'data-testid': 'chip',
     },
   },
   'Test string',
 ];
 
-const mockScrollTo = jest.fn();
-Element.prototype.scrollTo = mockScrollTo;
-
 const ariaLabel = 'Test aria label';
 function TestingChipCarousel(props) {
   return (
     <IntlProvider locale="en">
-      <ChipCarousel ariaLabel={ariaLabel} items={items} {...props} />
+      <ChipCarousel data-testid="chip-carousel" ariaLabel={ariaLabel} items={items} {...props} />
     </IntlProvider>
   );
 }
@@ -46,22 +48,23 @@ describe('<ChipCarousel />', () => {
   it('should render the carousel correctly', () => {
     render(<TestingChipCarousel />);
 
-    const carousel = document.getElementsByClassName('pgn__chip-carousel');
-    expect(carousel.length).toBeGreaterThan(0);
+    const carousel = screen.getByTestId('chip-carousel');
+    expect(carousel).toBeTruthy();
 
-    const chipItems = document.getElementsByClassName('pgn__chip');
+    const chipItems = screen.queryAllByTestId('chip');
     expect(chipItems).toHaveLength(items.length - 2);
     for (let i = 0; i < chipItems.length - 2; i++) {
       expect(chipItems[i].textContent).toBe(items[i].props.children);
     }
   });
 
-  it('should call onClick when a chip item is clicked', () => {
+  it('should call onClick when a chip item is clicked', async () => {
     render(<TestingChipCarousel />);
 
-    const chipItems = document.getElementsByClassName('pgn__chip');
+    const chipItems = screen.getByTestId('chip-carousel');
     for (let i = 0; i < chipItems.length; i++) {
-      fireEvent.click(chipItems[i]);
+      // eslint-disable-next-line no-await-in-loop
+      await userEvent.click(chipItems[i]);
       expect(items[i].props.onClick).toHaveBeenCalledTimes(1);
     }
   });

src/ChipCarousel/README.md

@@ -17,10 +17,21 @@ The ``ChipCarousel`` component creates a scrollable horizontal block of chips wi
 
 ```jsx live
 () => {
-  const [offset, setOffset] = useState(120);
+  const MAX_PERCENTAGE = 100;
+  const MAX_FIXED = 1000;
+  const [offset, setOffset] = useState(50);
   const [offsetType, setOffsetType] = useState('fixed');
   const [gap, setGap] = useState(3)
 
+  const handleChangeOffsetType = (value) => {
+    const currentMax = offsetType === 'percentage' ? MAX_PERCENTAGE : MAX_FIXED
+    const newMax = value === 'percentage' ? MAX_PERCENTAGE : MAX_FIXED
+    const ration = offset / currentMax
+    const newOffset = Math.floor(newMax * ration)
+    setOffset(newOffset);
+    setOffsetType(value);
+  }
+
   return (
     <>
       {/* start example form block */}
@@ -31,22 +42,22 @@ The ``ChipCarousel`` component creates a scrollable horizontal block of chips wi
             setValue: setOffset,
             range: {
               min: 0,
-              max: offsetType === 'percentage' ? 100 : 1000,
+              max: offsetType === 'percentage' ? MAX_PERCENTAGE : MAX_FIXED,
               step: offsetType === 'percentage' ? 1 : 50,
             },
             name: 'offset'
           },
           {
             value: offsetType,
-            setValue: setOffsetType,
+            setValue: handleChangeOffsetType,
             options: ['percentage', 'fixed'],
             name: 'offsetType'
           },
           {
             value: gap,
             setValue: setGap,
             range: { min: 0, max: 6, step: 0.5 },
-            name: 'offset'
+            name: 'gap'
           },
         ]}
       />

src/Icon/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export interface IconProps {
+  src?: React.ReactElement | Function;
+  svgAttrs?: {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+  };
+  id?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  className?: string;
+  hidden?: boolean;
+  screenReaderText?: React.ReactNode;
+}
+
+declare const Icon: React.FC<IconProps>;
+
+export default Icon;