onClick custom but not publishing it yet as waiting for more info. It…

… should be manageable using onChange

README.md

@@ -168,6 +168,12 @@ We recommend that you copy them into your own app and modify them to suit your n
           <td>null</td>
           <td>Class name for hidden body state</td>
       </tr>
+      <tr>
+          <td>onClick</td>
+          <td>Function(key)</td>
+          <td>noop</td>
+          <td>Triggered on title click</td>
+      </tr>
     </tbody>
 </table>
 

src/AccordionItemTitle/accordion-item-title-wrapper.js

@@ -15,19 +15,22 @@ const defaultProps = {
 
 type AccordionItemTitleWrapperProps = ElementProps<'div'> & {
     hideBodyClassName: string,
+    onClick?: Function,
 };
 
-const AccordionItemTitleWrapper = (props: AccordionItemTitleWrapperProps) => (
-    <Subscribe to={[AccordionContainer, ItemContainer]}>
-        {(accordionStore, itemStore) => (
-            <AccordionItemTitle
-                {...props}
-                uuid={itemStore.state.uuid}
-                accordionStore={accordionStore}
-            />
-        )}
-    </Subscribe>
-);
+const AccordionItemTitleWrapper = (props: AccordionItemTitleWrapperProps) => {
+    return (
+        <Subscribe to={[AccordionContainer, ItemContainer]}>
+            {(accordionStore, itemStore) => (
+                <AccordionItemTitle
+                    {...props}
+                    uuid={itemStore.state.uuid}
+                    accordionStore={accordionStore}
+                />
+            )}
+        </Subscribe>
+    );
+};
 AccordionItemTitleWrapper.defaultProps = defaultProps;
 
 export default AccordionItemTitleWrapper;

src/AccordionItemTitle/accordion-item-title.js

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 type AccordionItemTitleProps = ElementProps<'div'> & {
     hideBodyClassName: string,
     uuid: string | number,
+    onClick: Function,
 };
 
 type AccordionItemTitleState = {};
@@ -17,7 +18,7 @@ class AccordionItemTitle extends Component<
     static accordionElementName = 'AccordionItemTitle';
 
     handleClick = () => {
-        const { uuid, accordionStore } = this.props;
+        const { uuid, accordionStore, onClick } = this.props;
         const { state } = accordionStore;
         const { accordion, onChange, items } = state;
         const foundItem = items.find(item => item.uuid === uuid);
@@ -33,6 +34,10 @@ class AccordionItemTitle extends Component<
                     .map(item => item.uuid),
             );
         }
+
+        if (onClick) {
+            onClick(uuid);
+        }
     };
 
     handleKeyPress = (evt: SyntheticKeyboardEvent<HTMLButtonElement>) => {
@@ -50,6 +55,7 @@ class AccordionItemTitle extends Component<
             className,
             hideBodyClassName,
             accordionStore,
+            onClick,
             ...rest
         } = this.props;
         const foundItem = items.find(item => item.uuid === uuid);

src/AccordionItemTitle/accordion-item-title.spec.js

@@ -214,4 +214,26 @@ describe('AccordionItemTitle', () => {
             ).length,
         ).toEqual(0);
     });
+
+    it('custom onClick event management', async () => {
+        const spyFct = jest.fn();
+        const wrapper = mount(
+            <Provider inject={[accordionContainer, itemContainer]}>
+                <AccordionItemTitle onClick={spyFct}>
+                    Fake Title
+                </AccordionItemTitle>
+            </Provider>,
+        );
+
+        wrapper.find('div').simulate('click');
+
+        expect(
+            accordionContainer.state.items.filter(
+                item => item.expanded === true,
+            ).length,
+        ).toEqual(1);
+
+        expect(spyFct.mock.calls.length).toEqual(1);
+        expect(spyFct.mock.calls[0][0]).toBe(0); // check uuid is passed
+    });
 });