Merge pull request #55 from springload/feature/respect-arbitrary-props

Feature/respect arbitrary props

Author: vincentaudebert

CHANGELOG.md

@@ -11,14 +11,10 @@
 
 ### Changed
 
+* Update all React components to accept arbitrary HTMLDivElement props (eg. 'lang', 'role' etc).
 * Upgrade all dev-dependencies except the eslint configs.
 * Replace snapshot tests with explicit assertions in AccordionItemBody and AccordionItemTitle.
 * Add specific assertions to tests in accordionStore.
-
-## [[v2.0.1]](https://github.com/springload/react-accessible-accordion/releases/tag/v2.0.1)
-
-### Changed
-
 * Minor syntax change in AccordionItemBody
 
 ## [[v2.0.0]](https://github.com/springload/react-accessible-accordion/releases/tag/v2.0.0)

src/Accordion/accordion.js

@@ -1,13 +1,11 @@
 // @flow
 
-import React, { Component, type Node } from 'react';
+import React, { Component, type ElementProps } from 'react';
 import { Provider } from 'mobx-react';
 import { createAccordionStore } from '../accordionStore/accordionStore';
 
-type AccordionProps = {
+type AccordionProps = ElementProps<'div'> & {
     accordion: boolean,
-    children: Node,
-    className: string,
     onChange: Function,
 };
 
@@ -25,14 +23,12 @@ class Accordion extends Component<AccordionProps, *> {
     });
 
     render() {
-        const { className, children } = this.props;
+        const { accordion: accordionProp, onChange, ...rest } = this.props;
         const { accordion } = this.accordionStore;
 
         return (
             <Provider accordionStore={this.accordionStore}>
-                <div role={accordion ? 'tablist' : null} className={className}>
-                    {children}
-                </div>
+                <div role={accordion ? 'tablist' : null} {...rest} />
             </Provider>
         );
     }

src/Accordion/accordion.spec.js

@@ -206,4 +206,10 @@ describe('Accordion', () => {
                 .length,
         ).toEqual(2);
     });
+
+    it('respects arbitrary user-defined props', () => {
+        const wrapper = mount(<Accordion lang="en" />);
+
+        expect(wrapper.find('div').instance().lang).toEqual('en');
+    });
 });

src/AccordionItem/accordion-item.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React, { Component } from 'react';
-import type { Node } from 'react';
+import type { ElementProps } from 'react';
 import { inject, observer, Provider } from 'mobx-react';
 import consecutive from 'consecutive';
 import classNames from 'classnames';
@@ -12,9 +12,7 @@ export function resetNextUuid() {
     nextUuid = consecutive();
 }
 
-type AccordionItemProps = {
-    children: Node,
-    className: string,
+type AccordionItemProps = ElementProps<'div'> & {
     hideBodyClassName: string,
     accordionStore: Store,
     disabled: boolean,
@@ -59,8 +57,10 @@ class AccordionItem extends Component<AccordionItemProps, *> {
         const {
             className,
             hideBodyClassName,
-            children,
             accordionStore,
+            disabled,
+            expanded: expandedProp,
+            ...rest
         } = this.props;
 
         const currentItem = accordionStore.items.find(
@@ -78,9 +78,8 @@ class AccordionItem extends Component<AccordionItemProps, *> {
                     className={classNames(className, {
                         [hideBodyClassName]: !expanded && hideBodyClassName,
                     })}
-                >
-                    {children}
-                </div>
+                    {...rest}
+                />
             </Provider>
         );
     }

src/AccordionItem/accordion-item.spec.js

@@ -131,7 +131,7 @@ describe('AccordionItem', () => {
         const tree = renderer
             .create(
                 <Provider accordionStore={accordionStore}>
-                    <AccordionItem accordion={false}>
+                    <AccordionItem>
                         <AccordionItemTitle>
                             <div>Fake title</div>
                         </AccordionItemTitle>
@@ -150,7 +150,7 @@ describe('AccordionItem', () => {
         const tree = renderer
             .create(
                 <Provider accordionStore={accordionStore}>
-                    <AccordionItem accordion={false}>
+                    <AccordionItem>
                         <AccordionItemTitle>
                             <div>Fake title</div>
                         </AccordionItemTitle>
@@ -301,4 +301,14 @@ describe('AccordionItem', () => {
 
         expect(accordionStore.items.length).toEqual(0);
     });
+
+    it('respects arbitrary user-defined props', () => {
+        const wrapper = mount(
+            <Provider accordionStore={accordionStore}>
+                <AccordionItem lang="en" />
+            </Provider>,
+        );
+
+        expect(wrapper.find('div').instance().lang).toEqual('en');
+    });
 });

src/AccordionItemBody/accordion-item-body.js

@@ -1,7 +1,6 @@
 // @flow
 
-import React from 'react';
-import type { Node } from 'react';
+import React, { type ElementProps } from 'react';
 import classNames from 'classnames';
 import { inject, observer } from 'mobx-react';
 import { type Store } from '../accordionStore/accordionStore';
@@ -11,16 +10,20 @@ const defaultProps = {
     hideBodyClassName: 'accordion__body--hidden',
 };
 
-type AccordionItemBodyProps = {
-    children: Node,
-    className: string,
+type AccordionItemBodyProps = ElementProps<'div'> & {
     hideBodyClassName: string,
     accordionStore: Store,
     uuid: string | number,
 };
 
 const AccordionItemBody = (props: AccordionItemBodyProps) => {
-    const { uuid, children, className, hideBodyClassName } = props;
+    const {
+        accordionStore,
+        uuid,
+        className,
+        hideBodyClassName,
+        ...rest
+    } = props;
     const { items, accordion } = props.accordionStore;
     const foundItem = items.find(item => item.uuid === uuid);
     if (!foundItem) return null;
@@ -41,9 +44,8 @@ const AccordionItemBody = (props: AccordionItemBodyProps) => {
             aria-hidden={ariaHidden}
             aria-labelledby={ariaLabelledby}
             role={role}
-        >
-            {children}
-        </div>
+            {...rest}
+        />
     );
 };
 

src/AccordionItemBody/accordion-item-body.spec.js

@@ -70,4 +70,13 @@ describe('AccordionItemBody', () => {
             wrapper.findWhere(item => item.className === className).length,
         ).toEqual(0);
     });
+
+    it('respects arbitrary user-defined props', () => {
+        const wrapper = mount(
+            <Provider accordionStore={accordionStore} uuid={uuid}>
+                <AccordionItemBody lang="en" />
+            </Provider>,
+        );
+        expect(wrapper.find('div').instance().lang).toEqual('en');
+    });
 });

src/AccordionItemTitle/accordion-item-title.js

@@ -1,14 +1,11 @@
 // @flow
 
-import React, { Component } from 'react';
-import type { Node } from 'react';
+import React, { Component, type ElementProps } from 'react';
 import classNames from 'classnames';
 import { inject, observer } from 'mobx-react';
 import { type Store } from '../accordionStore/accordionStore';
 
-type AccordionItemTitleProps = {
-    children: Node,
-    className: string,
+type AccordionItemTitleProps = ElementProps<'div'> & {
     hideBodyClassName: string,
     accordionStore: Store,
     uuid: string | number,
@@ -57,7 +54,13 @@ class AccordionItemTitle extends Component<
 
     render() {
         const { items, accordion } = this.props.accordionStore;
-        const { uuid, children, className, hideBodyClassName } = this.props;
+        const {
+            uuid,
+            className,
+            hideBodyClassName,
+            accordionStore,
+            ...rest
+        } = this.props;
         const foundItem = items.find(item => item.uuid === uuid);
         if (!foundItem) return null;
 
@@ -82,9 +85,8 @@ class AccordionItemTitle extends Component<
                     tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
                     onKeyPress={this.handleKeyPress}
                     disabled={disabled}
-                >
-                    {children}
-                </div>
+                    {...rest}
+                />
             );
         }
         return (
@@ -98,9 +100,8 @@ class AccordionItemTitle extends Component<
                 tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
                 onKeyPress={this.handleKeyPress}
                 disabled={disabled}
-            >
-                {children}
-            </div>
+                {...rest}
+            />
         );
     }
 }

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

@@ -149,4 +149,18 @@ describe('AccordionItemTitle', () => {
             wrapper.findWhere(item => item.className === className).length,
         ).toEqual(0);
     });
+
+    it('respects arbitrary user-defined props', () => {
+        const wrapper = mount(
+            <AccordionItemTitle
+                accordionStore={accordionStore}
+                uuid="item-one-uuid"
+                lang="en"
+            >
+                Fake Title
+            </AccordionItemTitle>,
+        );
+
+        expect(wrapper.find('div').instance().lang).toEqual('en');
+    });
 });