resolve comments

Telefonica · Oct 9, 2023 · 169667a · 169667a
1 parent 99cddab
commit 169667a
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 35 deletions.
diff --git a/src/__tests__/accordion-test.tsx b/src/__tests__/accordion-test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import userEvent from '@testing-library/user-event';
-import {render, screen, waitFor} from '@testing-library/react';
+import {render, screen, waitForElementToBeRemoved} from '@testing-library/react';
 import {ThemeContextProvider, Text3, AccordionItem, Accordion} from '..';
 import {makeTheme} from './test-utils';
 
@@ -43,13 +43,31 @@ test('Accordion', async () => {
 });
 
 test('Accordion with index', async () => {
-    render(
-        <ThemeContextProvider theme={makeTheme()}>
-            <Accordion index={[0, 2]}>
+    const AccordionWrapper = () => {
+        const [index, setIndex] = React.useState<Array<number>>([0, 2]);
+
+        return (
+            <Accordion
+                index={index}
+                onChange={(item, value) => {
+                    if (value) {
+                        setIndex([...index, item]);
+                    } else {
+                        index.splice(index.indexOf(item), 1);
+                        setIndex([...index]);
+                    }
+                }}
+            >
                 {items.map((item) => (
                     <AccordionItem key={item.title} {...item} />
                 ))}
             </Accordion>
+        );
+    };
+
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <AccordionWrapper />
         </ThemeContextProvider>
     );
 
@@ -58,11 +76,13 @@ test('Accordion with index', async () => {
     expect(screen.getByText('Content 3')).toBeInTheDocument();
 
     await userEvent.click(screen.getByText('Title 1'));
+    await userEvent.click(screen.getByText('Title 2'));
     await userEvent.click(screen.getByText('Title 3'));
 
-    expect(screen.getByText('Content 1')).toBeInTheDocument();
-    expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
-    expect(screen.getByText('Content 3')).toBeInTheDocument();
+    /** We need to wait for CSS transition to finish in order for panel to be removed */
+    await waitForElementToBeRemoved(() => screen.queryByText('Content 1'));
+    expect(screen.getByText('Content 2')).toBeInTheDocument();
+    await waitForElementToBeRemoved(() => screen.queryByText('Content 3'));
 });
 
 test('Accordion with default index', async () => {
@@ -84,9 +104,7 @@ test('Accordion with default index', async () => {
     await userEvent.click(screen.getByText('Title 2'));
 
     /** We need to wait for CSS transition to finish in order for panel to be removed */
-    await waitFor(() => {
-        expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
-    });
+    await waitForElementToBeRemoved(() => screen.queryByText('Content 1'));
     expect(screen.getByText('Content 2')).toBeInTheDocument();
     expect(screen.getByText('Content 3')).toBeInTheDocument();
 });
@@ -111,9 +129,7 @@ test('Accordion with singleOpen', async () => {
     await userEvent.click(screen.getByText('Title 3'));
 
     /** We need to wait for CSS transition to finish in order for panel to be removed */
-    await waitFor(() => {
-        expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
-        expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
-    });
+    await waitForElementToBeRemoved(() => screen.queryByText('Content 1'));
+    await waitForElementToBeRemoved(() => screen.queryByText('Content 2'));
     expect(screen.getByText('Content 3')).toBeInTheDocument();
 });
diff --git a/src/accordion.css.ts b/src/accordion.css.ts
@@ -46,18 +46,6 @@ export const chevronContainer = style({
     alignItems: 'center',
 });
 
-export const openChevron = style({
-    display: 'flex',
-    transition: 'transform 0.4s',
-    transform: 'rotate(-90deg)',
-});
-
-export const closeChevron = style({
-    display: 'flex',
-    transition: 'transform 0.4s',
-    transform: 'rotate(90deg)',
-});
-
 export const panelContainer = style({
     display: 'grid',
 });

diff --git a/src/accordion.tsx b/src/accordion.tsx
@@ -136,10 +136,10 @@ const AccordionItemContent = React.forwardRef<TouchableElement, AccordionItemCon
             <div ref={itemRef} {...getPrefixedDataAttributes({...dataAttributes, 'accordion-item': true})}>
                 <BaseTouchable
                     ref={ref}
-                    className={classNames(styles.itemContent, {
-                        [styles.touchableBackground]: !isInverse,
-                        [styles.touchableBackgroundInverse]: isInverse,
-                    })}
+                    className={classNames(
+                        styles.itemContent,
+                        isInverse ? styles.touchableBackgroundInverse : styles.touchableBackground
+                    )}
                     onPress={() => {
                         if (itemIndex !== undefined) toogle(itemIndex);
                     }}
@@ -157,7 +157,7 @@ const AccordionItemContent = React.forwardRef<TouchableElement, AccordionItemCon
                                     <IconChevron
                                         size={24}
                                         transitionDuration={400}
-                                        className={isOpen ? styles.openChevron : styles.closeChevron}
+                                        direction={isOpen ? 'up' : 'down'}
                                         color={
                                             isInverse
                                                 ? skinVars.colors.inverse

diff --git a/src/icons/icon-chevron.tsx b/src/icons/icon-chevron.tsx
@@ -24,14 +24,13 @@ const IconChevronRightSvg: React.FC<IcnChevronRightSvgProps> = ({
         height={size}
         viewBox="0 0 24 24"
         className={className}
-        style={style}
+        style={{transform, transition: `transform ${transitionDuration}ms`, ...style}}
     >
         <path
-            style={{transition: `transform ${transitionDuration}ms,fill ${transitionDuration}ms`}}
+            style={{transition: `fill ${transitionDuration}ms`}}
             fill={color}
             fillRule="evenodd"
             d="M14.338 11.478a.75.75 0 0 1 0 1.044l-3.837 3.997a.75.75 0 1 1-1.082-1.038L12.76 12 9.42 8.52a.75.75 0 0 1 1.082-1.04l3.837 3.998z"
-            transform={transform}
         />
     </svg>
 );
@@ -66,7 +65,7 @@ const IconChevron: React.FC<Props> = ({
     const props = {
         size,
         color: fillColor,
-        transform: `rotate(${rotateAngleByDirection[direction]} 12 12)`,
+        transform: `rotate(${rotateAngleByDirection[direction]}deg)`,
         className,
         transitionDuration,
         style,