Add index through clone

vtex · Oct 11, 2021 · 20cd7ad · 20cd7ad
1 parent 9ec4e65
commit 20cd7ad
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/packages/store-ui/src/molecules/Accordion/Accordion.test.tsx b/packages/store-ui/src/molecules/Accordion/Accordion.test.tsx
@@ -21,7 +21,7 @@ const TestAccordion = () => {
       indices={indices}
       onChange={onChange}
     >
-      <AccordionItem index={0}>
+      <AccordionItem>
         <AccordionButton>Clothing</AccordionButton>
         <AccordionPanel>
           <ul>
@@ -38,7 +38,7 @@ const TestAccordion = () => {
         </AccordionPanel>
       </AccordionItem>
 
-      <AccordionItem index={1}>
+      <AccordionItem>
         <AccordionButton>Sale</AccordionButton>
         <AccordionPanel>
           <ul>

diff --git a/packages/store-ui/src/molecules/Accordion/Accordion.tsx b/packages/store-ui/src/molecules/Accordion/Accordion.tsx
@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from 'react'
-import React, { forwardRef, createContext } from 'react'
+import type { HTMLAttributes, ReactElement } from 'react'
+import React, { cloneElement, forwardRef, createContext } from 'react'
 
 export interface AccordionProps
   extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
@@ -28,6 +28,11 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(
     onSelectPanel: onChange,
   }
 
+  const childrenWithIndex = React.Children.map(
+    children as ReactElement,
+    (child, index) => cloneElement(child, { index: child.props.index ?? index })
+  )
+
   return (
     <AccordionContext.Provider value={context}>
       <div
@@ -37,7 +42,7 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(
         role="region"
         {...props}
       >
-        {children}
+        {childrenWithIndex}
       </div>
     </AccordionContext.Provider>
   )

diff --git a/packages/store-ui/src/molecules/Accordion/stories/Accordion.stories.tsx b/packages/store-ui/src/molecules/Accordion/stories/Accordion.stories.tsx
@@ -25,7 +25,7 @@ const Caret = () => (
 )
 
 const Clothing = ({ icon }: { icon?: boolean }) => (
-  <AccordionItem index={0}>
+  <AccordionItem>
     <AccordionButton>
       Clothing {icon ? <Icon component={<Caret />} /> : null}
     </AccordionButton>
@@ -46,7 +46,7 @@ const Clothing = ({ icon }: { icon?: boolean }) => (
 )
 
 const Sale = ({ icon }: { icon?: boolean }) => (
-  <AccordionItem index={1}>
+  <AccordionItem>
     <AccordionButton>
       Sale {icon ? <Icon component={<Caret />} /> : null}
     </AccordionButton>