Merge pull request #46 from springload/chore/item-registration

Refactor - Version 2.0

Author: vincentaudebert

.gitignore

@@ -8,6 +8,7 @@
 core/static
 core/svg.html
 static
+yarn.lock
 
 # -------------------------------------------------
 # OS generated files
@@ -82,4 +83,4 @@ pages
 # -------------------------------------------------
 # Visual Studio Code
 # -------------------------------------------------
-.vscode/
+.vscode/

.nvmrc

@@ -1 +1 @@
-8
+8.9

.travis.yml

@@ -2,8 +2,6 @@ language: node_js
 cache:
   directories:
   - node_modules
-node_js:
-- 6
 script:
 - npm run test:coverage
 after_success:

CHANGELOG.md

@@ -4,6 +4,50 @@ Changelog
 > All notable changes to this project are documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [[v2.0.0]](https://github.com/springload/react-accessible-accordion/releases/tag/v2.0.0)
+
+Version 2.0 represents a total refactor, with a new context-based approach which should make this library more flexible, more maintainable and more comprehensively testable.
+
+As this is a major release, users should expect some breaking changes - though they should be limited to the removal of the `activeItems` prop (read more below).
+
+### Added
+
+- Exports `resetNextId` (https://github.com/springload/react-accessible-accordion/issues/41).
+
+### Fixed
+
+- Defect where controlled components' props were overridden by React.Children.map (https://github.com/springload/react-accessible-accordion/issues/33).
+- Defect where accordion crashed with unexpected `children` types (https://github.com/springload/react-accessible-accordion/issues/45).
+- Defect where React Accessible Accordion's components could not be extended.
+- Defect where the `children` of `Accordion` or `AccordionItem` could not be arbitrary.
+- Defect where `AccordionItem` had to be a child of `Accordion` (as opposed to to an arbitrary-level descendant).
+- Defect where `AccordionItemBody` and `AccordionItemTitle` had to be children of `AccordionItem` (as opposed to arbitrary-level descendants).
+
+### Removed:
+
+- 🚨 Breaking change 🚨 `activeItems` property is no longer supported.
+
+Control at the `Accordion` level (via the `activeItems` prop) and `AccordionItem` level (via the `expanded` prop) fought against one another, and choosing which control mechanism to give preference to would have been an arbitrary decision - and whichever way we went, we would have had test cases which demonstrated unusual/unpredictable behaviour. The `activeItems` mechanism was the obvious one to remove - it was arguably the "less React-y way", and we considered it more of a convenience than a feature. Crucially though, it fought too hard against the new architecture of the library, and keeping it would have prevented us enabling lots of other new features or resolving some of the issues that our users had raised.
+
+If you're currently using activeItems, you're upgrade path might look like this:
+
+```diff
+const items = ['Foo', 'Bar'];
+const activeItems = [0];
+
+return (
+-    <Accordion activeItems={activeItems} />
++    <Accordion />
+        {activeItems.forEach((item, i) => (
+-            <AccordionItem key={item}>{item}</AccordionItem>
++            <AccordionItem key={item} expanded={activeItems.includes(i)}>{item}</AccordionItem>
+        )}
+    </Accordion>
+);
+```
+
+Please don't hesitate to reach out to one of the maintainers (or raise an issue) if you're having trouble upgrading - we're happy to help!
+
 ## [[v1.0.1]](https://github.com/springload/react-accessible-accordion/releases/tag/v1.0.1)
 
 - Renders predictable `id` attributes.(https://github.com/springload/react-accessible-accordion/pull/29)

LICENSE

@@ -1,6 +1,6 @@
 # The MIT License (MIT)
 
-Copyright (c) 2017 Springload
+Copyright (c) 2018 Springload
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -4,7 +4,7 @@
 
 > Accessible Accordion component for React. Inspired by [rc-collapse](https://github.com/react-component/collapse) and [react-sanfona](https://github.com/daviferreira/react-sanfona). :mag::ok_hand:
 
-This is a work in progress. Feel free to contribute. [Try a demo now](https://springload.github.io/react-accessible-accordion/).
+Try a demo now](https://springload.github.io/react-accessible-accordion/).
 
 If you like accessible components, feel free to check this other repo [react-accessible-modal](https://github.com/springload/react-accessible-modal).
 
@@ -13,14 +13,12 @@ If you like accessible components, feel free to check this other repo [react-acc
 First, grab the package from npm:
 
 ```sh
-npm install --save react-accessible-accordion
-# react-accessible-accordion's peerDependencies:
-npm install --save react@^15.0.0 react-dom@^15.0.0
+npm install --save react-accessible-accordion react react-dom
 ```
 
 Then, import the editor and use it in your code. Here is a [basic example](https://springload.github.io/react-accessible-accordion/):
 
-```js
+```jsx
 import React from 'react';
 import ReactDOM from 'react-dom';
 
@@ -40,9 +38,7 @@ const Example = () => (
                 <h3>Simple title</h3>
             </AccordionItemTitle>
             <AccordionItemBody>
-                <p>
-                    Body content
-                </p>
+                <p>Body content</p>
             </AccordionItemBody>
         </AccordionItem>
         <AccordionItem>
@@ -51,9 +47,7 @@ const Example = () => (
                 <div>With a bit of description</div>
             </AccordionItemTitle>
             <AccordionItemBody>
-                <p>
-                    Body content
-                </p>
+                <p>Body content</p>
             </AccordionItemBody>
         </AccordionItem>
     </Accordion>
@@ -96,12 +90,6 @@ ReactDOM.render(<Example />, document.querySelector('[data-mount]'));
           <td>accordion</td>
           <td>CSS class(es) applied to the component</td>
       </tr>
-      <tr>
-          <td>activeItems</td>
-          <td>Array</td>
-          <td>[]</td>
-          <td>Indexes (or custom keys) to pre expand items. Can be changed dynamically. Doesn't have the priority against `AccordionItem - expanded` on first render.</td>
-      </tr>
     </tbody>
 </table>
 
@@ -137,12 +125,6 @@ ReactDOM.render(<Example />, document.querySelector('[data-mount]'));
           <td>null</td>
           <td>Class name for hidden body state</td>
       </tr>
-      <tr>
-          <td>customKey</td>
-          <td>String</td>
-          <td></td>
-          <td>Custom key to be used as a reference in `Accordion - activeItems`</td>
-        </tr>
     </tbody>
 </table>
 
@@ -204,6 +186,19 @@ ReactDOM.render(<Example />, document.querySelector('[data-mount]'));
     </tbody>
 </table>
 
+### resetNextUuid
+
+<table class="table table-bordered table-striped">
+    <tbody>
+      <tr>
+          <td>Function(void)</td>
+      </tr>
+      <tr>
+          <td>Resets the internal counter for Accordion items' identifiers (including `id` attributes). For use in test suites and isomorphic frameworks.</td>
+      </tr>
+    </tbody>
+</table>
+
 ## Accessibility
 
 ### What this project is doing accessibility-wise?
@@ -216,21 +211,21 @@ This project manages two types of Accordions, with single or multiple items open
 
 For this type of Accordion, you will get the following `role` set up on your elements:
 
-- Accordion: `tablist`
-- AccordionItem: no specific role
-- AccordionItemTitle: `tab`
-- AccordionItemBody: `tabpanel`
+* Accordion: `tablist`
+* AccordionItem: no specific role
+* AccordionItemTitle: `tab`
+* AccordionItemBody: `tabpanel`
 
 #### Multiple items
 
 For this type of Accordion, you will get the following `role` set up on your elements:
 
 > Use this with with props `accordion` set to `false` on `Accordion`.
 
-- Accordion: no specific role
-- AccordionItem: no specific role
-- AccordionItemTitle: `button`
-- AccordionItemBody: no specific role
+* Accordion: no specific role
+* AccordionItem: no specific role
+* AccordionItemTitle: `button`
+* AccordionItemBody: no specific role
 
 ## Development
 
@@ -284,17 +279,16 @@ git push origin master --tags
 npm publish
 ```
 
-
 # Browser support
 
 **Supported browser / device versions:**
 
-| Browser | Device/OS | Version | Notes |
-|---------|-----------|---------|-------|
-| Mobile Safari | iOS | latest ||
-| Chrome | Android | latest ||
-| IE | Windows | 11 ||
-| MS Edge | Windows | latest ||
-| Chrome | Desktop | latest ||
-| Firefox | Desktop | latest ||
-| Safari | OSX | latest ||
+| Browser       | Device/OS | Version | Notes |
+| ------------- | --------- | ------- | ----- |
+| Mobile Safari | iOS       | latest  |       |
+| Chrome        | Android   | latest  |       |
+| IE            | Windows   | 11      |       |
+| MS Edge       | Windows   | latest  |       |
+| Chrome        | Desktop   | latest  |       |
+| Firefox       | Desktop   | latest  |       |
+| Safari        | OSX       | latest  |       |