Skip to content

Commit

Permalink
Merge a88c20a into 07bb1cc
Browse files Browse the repository at this point in the history
  • Loading branch information
ryami333 committed Feb 21, 2018
2 parents 07bb1cc + a88c20a commit 0bee613
Show file tree
Hide file tree
Showing 29 changed files with 1,910 additions and 8,047 deletions.
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
core/static
core/svg.html
static
yarn.lock

# -------------------------------------------------
# OS generated files
Expand Down Expand Up @@ -82,4 +83,4 @@ pages
# -------------------------------------------------
# Visual Studio Code
# -------------------------------------------------
.vscode/
.vscode/
2 changes: 1 addition & 1 deletion .nvmrc
Original file line number Diff line number Diff line change
@@ -1 +1 @@
8
8.9
2 changes: 0 additions & 2 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ language: node_js
cache:
directories:
- node_modules
node_js:
- 6
script:
- npm run test:coverage
after_success:
Expand Down
44 changes: 44 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -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:

Expand Down
76 changes: 35 additions & 41 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).

Expand All @@ -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';

Expand All @@ -40,9 +38,7 @@ const Example = () => (
<h3>Simple title</h3>
</AccordionItemTitle>
<AccordionItemBody>
<p>
Body content
</p>
<p>Body content</p>
</AccordionItemBody>
</AccordionItem>
<AccordionItem>
Expand All @@ -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>
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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?
Expand All @@ -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

Expand Down Expand Up @@ -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 | |
Loading

0 comments on commit 0bee613

Please sign in to comment.