From a1f9d0ae1861e572cb4d62caab0d548e5c5ca257 Mon Sep 17 00:00:00 2001 From: catepalmer Date: Wed, 16 Jan 2019 16:06:33 +1300 Subject: [PATCH 1/2] Change AccordionItemTitle to AccordionItemHeading and AccordionItemBody to AccordionItemPanel --- CHANGELOG.md | 6 +- README.md | 38 ++-- demo/js/demo.tsx | 196 +++++++++--------- src/Accordion/Accordion.spec.tsx | 14 +- src/AccordionItem/AccordionItem.spec.tsx | 58 +++--- .../__snapshots__/AccordionItem.spec.tsx.snap | 50 ++--- .../AccordionItemBody.spec.tsx.snap | 15 -- .../AccordionItemHeading.spec.tsx} | 34 +-- .../AccordionItemHeading.tsx} | 14 +- .../AccordionItemHeading.wrapper.tsx} | 24 +-- .../AccordionItemHeading.spec.tsx.snap} | 8 +- .../AccordionItemPanel.spec.tsx} | 22 +- .../AccordionItemPanel.tsx} | 10 +- .../AccordionItemPanel.wrapper.tsx} | 30 +-- .../AccordionItemPanel.spec.tsx.snap | 15 ++ src/css/fancy-example.css | 16 +- src/css/minimal-example.css | 4 +- src/index.tsx | 8 +- 18 files changed, 282 insertions(+), 280 deletions(-) delete mode 100644 src/AccordionItemBody/__snapshots__/AccordionItemBody.spec.tsx.snap rename src/{AccordionItemTitle/AccordionItemTitle.spec.tsx => AccordionItemHeading/AccordionItemHeading.spec.tsx} (82%) rename src/{AccordionItemTitle/AccordionItemTitle.tsx => AccordionItemHeading/AccordionItemHeading.tsx} (81%) rename src/{AccordionItemTitle/AccordionItemTitle.wrapper.tsx => AccordionItemHeading/AccordionItemHeading.wrapper.tsx} (63%) rename src/{AccordionItemTitle/__snapshots__/AccordionItemTitle.spec.tsx.snap => AccordionItemHeading/__snapshots__/AccordionItemHeading.spec.tsx.snap} (53%) rename src/{AccordionItemBody/AccordionItemBody.spec.tsx => AccordionItemPanel/AccordionItemPanel.spec.tsx} (79%) rename src/{AccordionItemBody/AccordionItemBody.tsx => AccordionItemPanel/AccordionItemPanel.tsx} (72%) rename src/{AccordionItemBody/AccordionItemBody.wrapper.tsx => AccordionItemPanel/AccordionItemPanel.wrapper.tsx} (60%) create mode 100644 src/AccordionItemPanel/__snapshots__/AccordionItemPanel.spec.tsx.snap diff --git a/CHANGELOG.md b/CHANGELOG.md index 75840631..4ac9d8a4 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -99,9 +99,9 @@ This release brings support for React 16.3+ by way of some minor refactoring to - 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. +- Replace snapshot tests with explicit assertions in AccordionItemPanel and AccordionItemHeading. - Add specific assertions to tests in accordionStore. -- Minor syntax change in AccordionItemBody +- Minor syntax change in AccordionItemPanel ## [[v2.0.0]](https://github.com/springload/react-accessible-accordion/releases/tag/v2.0.0) @@ -120,7 +120,7 @@ As this is a major release, users should expect some breaking changes - though t - 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). +- Defect where `AccordionItemPanel` and `AccordionItemHeading` had to be children of `AccordionItem` (as opposed to arbitrary-level descendants). ### Removed: diff --git a/README.md b/README.md index 7a34d707..9bb6656a 100644 --- a/README.md +++ b/README.md @@ -23,8 +23,8 @@ import ReactDOM from 'react-dom'; import { Accordion, AccordionItem, - AccordionItemTitle, - AccordionItemBody, + AccordionItemHeading, + AccordionItemPanel, } from 'react-accessible-accordion'; // Demo styles, see 'Styles' section below for some notes on use. @@ -33,21 +33,21 @@ import 'react-accessible-accordion/dist/fancy-example.css'; const Example = () => ( - +

Simple title

- - + +

Body content

- + - +

Complex title

With a bit of description
- - + +

Body content

- + ); @@ -147,7 +147,7 @@ We recommend that you copy them into your own app and modify them to suit your n -### AccordionItemTitle +### AccordionItemHeading #### props: @@ -164,7 +164,7 @@ We recommend that you copy them into your own app and modify them to suit your n className String - accordion__title + accordion__heading CSS class(es) applied to the component @@ -176,7 +176,7 @@ We recommend that you copy them into your own app and modify them to suit your n -### AccordionItemBody +### AccordionItemPanel #### props: @@ -193,13 +193,13 @@ We recommend that you copy them into your own app and modify them to suit your n className String - accordion__body + accordion__panel CSS class(es) applied to the component hideBodyClassName String - accordion__body--hidden + accordion__panel--hidden Class name for hidden body state @@ -232,8 +232,8 @@ For this type of Accordion, you will get the following `role` set up on your ele - Accordion: `tablist` - AccordionItem: no specific role -- AccordionItemTitle: `tab` -- AccordionItemBody: `tabpanel` +- AccordionItemHeading: `tab` +- AccordionItemPanel: `tabpanel` #### Multiple items @@ -243,8 +243,8 @@ For this type of Accordion, you will get the following `role` set up on your ele - Accordion: no specific role - AccordionItem: no specific role -- AccordionItemTitle: `button` -- AccordionItemBody: no specific role +- AccordionItemHeading: `button` +- AccordionItemPanel: no specific role # Browser support diff --git a/demo/js/demo.tsx b/demo/js/demo.tsx index 2fe1f56d..3a424ebe 100644 --- a/demo/js/demo.tsx +++ b/demo/js/demo.tsx @@ -6,8 +6,8 @@ import * as ReactDOM from 'react-dom'; import { Accordion, AccordionItem, - AccordionItemBody, - AccordionItemTitle, + AccordionItemHeading, + AccordionItemPanel, } from '../../src'; // tslint:disable-next-line no-import-side-effect @@ -20,13 +20,13 @@ const Example = (): JSX.Element => ( - +

Accessible Accordion

- - + +

Accessible Accordion component for React. Inspired by{' '} ( .

- + - +

Components

See all the components from this package
- - + +
  • Accordion
  • AccordionItem
    • -
  • AccordionItemTitle
    • -
  • AccordionItemBody
    • +
  • AccordionItemHeading
    • +
  • AccordionItemPanel
- + @@ -71,13 +71,13 @@ const Example = (): JSX.Element => ( - +

Accordion

- - + + @@ -108,16 +108,16 @@ const Example = (): JSX.Element => (
- + - +

AccordionItem

- - + + @@ -142,16 +142,16 @@ const Example = (): JSX.Element => (
- + - +

- AccordionItemTitle + AccordionItemHeading

- - + + @@ -165,21 +165,21 @@ const Example = (): JSX.Element => ( - +
className Stringaccordion__titleaccordion__heading CSS class(es) applied to the component
- + - +

- AccordionItemBody + AccordionItemPanel

- - + + @@ -193,18 +193,18 @@ const Example = (): JSX.Element => ( - + - +
className Stringaccordion__bodyaccordion__panel CSS class(es) applied to the component
hideBody ClassName Stringaccordion__body--hiddenaccordion__panel--hidden Class name for hidden body state
- + @@ -212,16 +212,16 @@ const Example = (): JSX.Element => ( - +

Components API

- - + + - +

Accordion
( role="presentation" />

- - + + @@ -270,10 +270,10 @@ const Example = (): JSX.Element => (
- + - +

AccordionItem
( role="presentation" />

- - + + @@ -313,19 +313,19 @@ const Example = (): JSX.Element => (
- + - +

- AccordionItemTitle + AccordionItemHeading

- - + + @@ -339,7 +339,7 @@ const Example = (): JSX.Element => ( - +
className Stringaccordion__titleaccordion__heading CSS class(es) applied to the component @@ -347,19 +347,19 @@ const Example = (): JSX.Element => (
- + - +

- AccordionItemBody + AccordionItemPanel

- - + + @@ -373,7 +373,7 @@ const Example = (): JSX.Element => ( - + - +
className Stringaccordion__bodyaccordion__panel CSS class(es) applied to the component @@ -382,27 +382,27 @@ const Example = (): JSX.Element => (
hideBody ClassName Stringaccordion__body--hiddenaccordion__panel--hidden Class name for hidden body state
- + - + - +

Development

How to install the project
- - + +

Clone the project on your computer, and install Node. This project also uses nvm. @@ -418,7 +418,7 @@ const Example = (): JSX.Element => (
touch .env

- + @@ -426,13 +426,13 @@ const Example = (): JSX.Element => ( - +

Working on the project

- - + +

Everything mentioned in the installation process should already be done. @@ -458,17 +458,17 @@ const Example = (): JSX.Element => (
yarn

- + - +

Run the demo

To have an easy play around
- - + +

Everything mentioned in the installation process should already be done. @@ -482,7 +482,7 @@ const Example = (): JSX.Element => (
yarn start-demo

- + @@ -490,13 +490,13 @@ const Example = (): JSX.Element => ( - +

Working on the project

- - + +

Everything mentioned in the installation process should already be done. @@ -522,23 +522,23 @@ const Example = (): JSX.Element => (
yarn

- +
Please feel free to contribute to this repository
- +

Run the demo

To have an easy play around
- +
This block fits in between the title and the body.
- +

Everything mentioned in the installation process should already be done. @@ -552,7 +552,7 @@ const Example = (): JSX.Element => (
yarn start-demo

- + @@ -560,26 +560,26 @@ const Example = (): JSX.Element => ( - +

Animated Accessible Accordion

- - + +

Did you notice the animation on the arrow?

- + - +

How to?

- - + +

Check css/demo.css in the demo/ folder :)

- + @@ -587,15 +587,15 @@ const Example = (): JSX.Element => ( - +

Single item

- - + +

Why would you need more than one?

- + @@ -609,32 +609,32 @@ const Example = (): JSX.Element => ( }} > - +

Unique Item #1

- - + +

If you open/close this item you should see `uniqueItem-1` printed in the console.

- + - +

Unique Item #2

- - + +

If you open/close this item you should see `uniqueItem-2` printed in the console.

- + diff --git a/src/Accordion/Accordion.spec.tsx b/src/Accordion/Accordion.spec.tsx index 1e46741e..bd75a287 100644 --- a/src/Accordion/Accordion.spec.tsx +++ b/src/Accordion/Accordion.spec.tsx @@ -6,7 +6,7 @@ import { ProviderState, } from '../AccordionContainer/AccordionContainer'; import { default as AccordionItem } from '../AccordionItem/AccordionItem.wrapper'; -import { default as AccordionItemTitle } from '../AccordionItemTitle/AccordionItemTitle.wrapper'; +import { default as AccordionItemHeading } from '../AccordionItemHeading/AccordionItemHeading.wrapper'; import { default as Accordion } from './Accordion.wrapper'; describe('Accordion', () => { @@ -17,8 +17,8 @@ describe('Accordion', () => { describe('', () => { const [FooTitle, BarTitle] = [ - (): JSX.Element => Foo, - (): JSX.Element => Bar, + (): JSX.Element => Foo, + (): JSX.Element => Bar, ]; function mountAccordion(): ReactWrapper { @@ -82,8 +82,8 @@ describe('Accordion', () => { describe(' (‘tabpanel’)', () => { const [FooTitle, BarTitle] = [ - (): JSX.Element => Foo, - (): JSX.Element => Bar, + (): JSX.Element => Foo, + (): JSX.Element => Bar, ]; function mountTabpanel(): ReactWrapper { @@ -148,9 +148,9 @@ describe('Accordion', () => { const wrapper = mount( - + Foo Title - + , ); diff --git a/src/AccordionItem/AccordionItem.spec.tsx b/src/AccordionItem/AccordionItem.spec.tsx index be4e5c00..fab49767 100644 --- a/src/AccordionItem/AccordionItem.spec.tsx +++ b/src/AccordionItem/AccordionItem.spec.tsx @@ -4,8 +4,8 @@ import { Item, Provider as AccordionProvider, } from '../AccordionContainer/AccordionContainer'; -import { default as AccordionItemBody } from '../AccordionItemBody/AccordionItemBody.wrapper'; -import { default as AccordionItemTitle } from '../AccordionItemTitle/AccordionItemTitle.wrapper'; +import { default as AccordionItemHeading } from '../AccordionItemHeading/AccordionItemHeading.wrapper'; +import { default as AccordionItemPanel } from '../AccordionItemPanel/AccordionItemPanel.wrapper'; import { resetNextUuid } from '../helpers/uuid'; import { Provider as ItemProvider } from '../ItemContainer/ItemContainer'; import { default as AccordionItem } from './AccordionItem.wrapper'; @@ -24,12 +24,12 @@ describe('AccordionItem', () => { const wrapper = mount( - +
Fake title
- - + +
Fake body
- + , ); @@ -41,12 +41,12 @@ describe('AccordionItem', () => { const wrapper = mount( - +
Fake title
- - + +
Fake body
- + , ); @@ -73,7 +73,7 @@ describe('AccordionItem', () => { expect(wrapper.find(AccordionItem).length).toEqual(2); }); - it('still renders with no AccordionItemTitle or AccordionItemBody', () => { + it('still renders with no AccordionItemHeading or AccordionItemPanel', () => { const wrapper = mount( @@ -126,13 +126,13 @@ describe('AccordionItem', () => { const wrapper = mount( - +
Fake title
- +
Just another block
- +
Fake body
- + , ); @@ -144,12 +144,12 @@ describe('AccordionItem', () => { const wrapper = mount( - +
Fake title
- - + +
Fake body
- +
Just another block
 , @@ -162,9 +162,9 @@ describe('AccordionItem', () => { const Wrapper = ({ expanded }: { expanded: boolean }): JSX.Element => ( - +
Fake title
- + ); @@ -186,9 +186,9 @@ describe('AccordionItem', () => { const Wrapper = ({ expanded }: { expanded: boolean }): JSX.Element => ( - +
Fake title
- + ); @@ -210,9 +210,9 @@ describe('AccordionItem', () => { const Wrapper = ({ className }: { className: string }): JSX.Element => ( - +
Fake title
- + ); @@ -255,9 +255,9 @@ describe('AccordionItem', () => { {showChild && ( - +
Fake title
- + )} @@ -308,9 +308,9 @@ describe('AccordionItem', () => { const wrapper = mount( - +
Fake title
- + , ); diff --git a/src/AccordionItem/__snapshots__/AccordionItem.spec.tsx.snap b/src/AccordionItem/__snapshots__/AccordionItem.spec.tsx.snap index e6541e13..8406548e 100644 --- a/src/AccordionItem/__snapshots__/AccordionItem.spec.tsx.snap +++ b/src/AccordionItem/__snapshots__/AccordionItem.spec.tsx.snap @@ -5,10 +5,10 @@ exports[`AccordionItem renders correctly with accordion false 1`] = ` className="accordion__item" >
@@ -37,10 +37,10 @@ exports[`AccordionItem renders correctly with accordion true 1`] = ` className="accordion__item" >
@@ -69,10 +69,10 @@ exports[`AccordionItem renders correctly with other blocks inside 1`] = ` className="accordion__item" >
@@ -104,10 +104,10 @@ exports[`AccordionItem renders correctly with other blocks inside 2 1`] = ` className="accordion__item" >
@@ -134,7 +134,7 @@ exports[`AccordionItem renders correctly with other blocks inside 2 1`] = `
`; -exports[`AccordionItem still renders with no AccordionItemTitle or AccordionItemBody 1`] = ` +exports[`AccordionItem still renders with no AccordionItemHeading or AccordionItemPanel 1`] = `
diff --git a/src/AccordionItemBody/__snapshots__/AccordionItemBody.spec.tsx.snap b/src/AccordionItemBody/__snapshots__/AccordionItemBody.spec.tsx.snap deleted file mode 100644 index 9a88b3dc..00000000 --- a/src/AccordionItemBody/__snapshots__/AccordionItemBody.spec.tsx.snap +++ /dev/null @@ -1,15 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`AccordionItemBody renders correctly with min params 1`] = ` -
-
- Fake body -
-
-`; diff --git a/src/AccordionItemTitle/AccordionItemTitle.spec.tsx b/src/AccordionItemHeading/AccordionItemHeading.spec.tsx similarity index 82% rename from src/AccordionItemTitle/AccordionItemTitle.spec.tsx rename to src/AccordionItemHeading/AccordionItemHeading.spec.tsx index 703c1d16..689582e0 100644 --- a/src/AccordionItemTitle/AccordionItemTitle.spec.tsx +++ b/src/AccordionItemHeading/AccordionItemHeading.spec.tsx @@ -5,9 +5,9 @@ import { Provider as AccordionProvider, } from '../AccordionContainer/AccordionContainer'; import { Provider as ItemProvider } from '../ItemContainer/ItemContainer'; -import { default as AccordionItemTitle } from './AccordionItemTitle.wrapper'; +import { default as AccordionItemHeading } from './AccordionItemHeading.wrapper'; -describe('AccordionItemTitle', () => { +describe('AccordionItemHeading', () => { const DEFAULT_ITEM: Item = { uuid: 0, expanded: false, @@ -17,7 +17,7 @@ describe('AccordionItemTitle', () => { it('renders null outside the context of an ‘Accordion’', () => { const wrapper = mount( - + , ); @@ -27,7 +27,7 @@ describe('AccordionItemTitle', () => { it('renders null outside the context of an ‘AccordionItem’', () => { const wrapper = mount( - + , ); @@ -56,23 +56,25 @@ describe('AccordionItemTitle', () => { it('renders correctly with min params', () => { const wrapper = mountItem( - +
Fake Title
- , + , ); expect(wrapper).toMatchSnapshot(); }); it('renders correctly with different className', () => { const className = 'className'; - const wrapper = mountItem(); + const wrapper = mountItem( + , + ); expect(wrapper.find('div').hasClass(className)).toEqual(true); }); it('renders with different hideBodyClassName', () => { const hideBodyClassName = 'hideBodyClassName'; const wrapper = mountItem( - , + , ); expect(wrapper.find('div').hasClass(hideBodyClassName)).toEqual(true); }); @@ -80,14 +82,14 @@ describe('AccordionItemTitle', () => { it("doesn't present hideBodyClassName when collapsed", () => { const hideBodyClassName = 'hideBodyClassName'; const wrapper = mountItem( - , + , ); expect(wrapper.find('div').hasClass(hideBodyClassName)).toEqual(true); }); it('toggles state when clicked', async () => { const wrapper = mountItem( - Fake Title, + Fake Title, ); expect(isExpanded(wrapper, DEFAULT_ITEM.uuid)).toBeFalsy(); @@ -97,7 +99,7 @@ describe('AccordionItemTitle', () => { it('doesn’t toggle state when trying to click but disabled', async () => { const wrapper = mountItem( - Fake Title, + Fake Title, { ...DEFAULT_ITEM, disabled: true, @@ -111,7 +113,7 @@ describe('AccordionItemTitle', () => { it('toggles state when pressing enter', async () => { const wrapper = mountItem( - Fake Title, + Fake Title, ); expect(isExpanded(wrapper, DEFAULT_ITEM.uuid)).toBeFalsy(); @@ -121,7 +123,7 @@ describe('AccordionItemTitle', () => { it('toggles state when pressing space', async () => { const wrapper = mountItem( - Fake Title, + Fake Title, ); expect(isExpanded(wrapper, DEFAULT_ITEM.uuid)).toBeFalsy(); @@ -131,7 +133,7 @@ describe('AccordionItemTitle', () => { it('doesn’t toggle state when pressing another key', async () => { const wrapper = mountItem( - Fake Title, + Fake Title, ); expect(isExpanded(wrapper, DEFAULT_ITEM.uuid)).toBeFalsy(); @@ -141,7 +143,7 @@ describe('AccordionItemTitle', () => { it('respects arbitrary user-defined props', () => { const wrapper = mountItem( - Fake Title, + Fake Title, ); const div = wrapper.find('div').getDOMNode(); @@ -162,7 +164,7 @@ describe('AccordionItemTitle', () => { ]} > - Fake Title + Fake Title , ); diff --git a/src/AccordionItemTitle/AccordionItemTitle.tsx b/src/AccordionItemHeading/AccordionItemHeading.tsx similarity index 81% rename from src/AccordionItemTitle/AccordionItemTitle.tsx rename to src/AccordionItemHeading/AccordionItemHeading.tsx index bce43a0d..8e0aac01 100644 --- a/src/AccordionItemTitle/AccordionItemTitle.tsx +++ b/src/AccordionItemHeading/AccordionItemHeading.tsx @@ -2,7 +2,7 @@ import { default as classnames } from 'classnames'; import * as React from 'react'; import { UUID } from '../ItemContainer/ItemContainer'; -type AccordionItemTitleProps = React.HTMLAttributes & { +type AccordionItemHeadingProps = React.HTMLAttributes & { hideBodyClassName: string; expanded: boolean; uuid: UUID; @@ -10,11 +10,11 @@ type AccordionItemTitleProps = React.HTMLAttributes & { setExpanded(uuid: UUID, expanded: boolean): void; }; -type AccordionItemTitleState = {}; +type AccordionItemHeadingState = {}; -export default class AccordionItemTitle extends React.Component< - AccordionItemTitleProps, - AccordionItemTitleState +export default class AccordionItemHeading extends React.Component< + AccordionItemHeadingProps, + AccordionItemHeadingState > { handleClick = (): void => { const { uuid, expanded, setExpanded } = this.props; @@ -40,8 +40,8 @@ export default class AccordionItemTitle extends React.Component< ...rest } = this.props; - const id = `accordion__title-${uuid}`; - const ariaControls = `accordion__body-${uuid}`; + const id = `accordion__heading-${uuid}`; + const ariaControls = `accordion__panel-${uuid}`; const role = 'button'; const titleClassName = classnames(className, { [hideBodyClassName]: hideBodyClassName && !expanded, diff --git a/src/AccordionItemTitle/AccordionItemTitle.wrapper.tsx b/src/AccordionItemHeading/AccordionItemHeading.wrapper.tsx similarity index 63% rename from src/AccordionItemTitle/AccordionItemTitle.wrapper.tsx rename to src/AccordionItemHeading/AccordionItemHeading.wrapper.tsx index e9dec32c..966df375 100644 --- a/src/AccordionItemTitle/AccordionItemTitle.wrapper.tsx +++ b/src/AccordionItemHeading/AccordionItemHeading.wrapper.tsx @@ -9,29 +9,29 @@ import { CONTEXT_KEY as ITEM_CONTEXT_KEY, getItemStore, } from '../ItemContainer/ItemContainer'; -import { default as AccordionItemTitle } from './AccordionItemTitle'; +import { default as AccordionItemHeading } from './AccordionItemHeading'; -type AccordionItemTitleWrapperProps = React.HTMLAttributes & { +type AccordionItemHeadingWrapperProps = React.HTMLAttributes & { hideBodyClassName: string; }; -type AccordionItemTitleWrapperState = {}; +type AccordionItemHeadingWrapperState = {}; -type AccordionItemTitleWrapperContext = { +type AccordionItemHeadingWrapperContext = { [ACCORDION_CONTEXT_KEY](): null; [ITEM_CONTEXT_KEY](): null; }; -export default class AccordionItemTitleWrapper extends React.Component< - AccordionItemTitleWrapperProps +export default class AccordionItemHeadingWrapper extends React.Component< + AccordionItemHeadingWrapperProps > { - static contextTypes: AccordionItemTitleWrapperContext = { + static contextTypes: AccordionItemHeadingWrapperContext = { [ACCORDION_CONTEXT_KEY]: propTypes.wildcard, [ITEM_CONTEXT_KEY]: propTypes.wildcard, }; - static defaultProps: AccordionItemTitleWrapperProps = { - className: 'accordion__title', + static defaultProps: AccordionItemHeadingWrapperProps = { + className: 'accordion__heading', hideBodyClassName: '', }; @@ -41,7 +41,7 @@ export default class AccordionItemTitleWrapper extends React.Component< if (!accordionStore) { // tslint:disable-next-line:no-console console.error( - 'AccordionItemTitle component cannot render because it has not been nested inside an Accordion component.', + 'AccordionItemHeading component cannot render because it has not been nested inside an Accordion component.', ); return null; @@ -52,7 +52,7 @@ export default class AccordionItemTitleWrapper extends React.Component< if (!itemStore) { // tslint:disable-next-line:no-console console.error( - 'AccordionItemTitle component cannot render because it has not been nested inside an AccordionItem component.', + 'AccordionItemHeading component cannot render because it has not been nested inside an AccordionItem component.', ); return null; @@ -65,7 +65,7 @@ export default class AccordionItemTitleWrapper extends React.Component< )[0]; return ( - { +describe('AccordionItemPanel', () => { function mountItem(children: React.ReactNode): ReactWrapper { const item: Item = { uuid: 0, @@ -24,29 +24,29 @@ describe('AccordionItemBody', () => { it('renders correctly with min params', () => { const wrapper = mountItem( - +
Fake body
- , + , ); expect(wrapper).toMatchSnapshot(); }); it('renders correctly with different className', () => { const className = 'className'; - const wrapper = mountItem(); + const wrapper = mountItem(); expect(wrapper.find('div').hasClass(className)).toEqual(true); }); it('renders correctly with different hideBodyClassName', () => { const hideBodyClassName = 'hideBodyClassName'; const wrapper = mountItem( - , + , ); expect(wrapper.find('div').hasClass(hideBodyClassName)).toEqual(true); }); it('respects arbitrary user-defined props', () => { - const wrapper = mountItem(); + const wrapper = mountItem(); const div = wrapper.find('div').getDOMNode(); expect(div.getAttribute('lang')).toEqual('en'); @@ -55,9 +55,9 @@ describe('AccordionItemBody', () => { it('does not render if no accordionStore found in context', () => { const wrapper = mount( - +
Hello World
- + , ); @@ -67,9 +67,9 @@ describe('AccordionItemBody', () => { it('does not render if no itemStore found in context', () => { const wrapper = mount( - +
Hello World
- + , ); diff --git a/src/AccordionItemBody/AccordionItemBody.tsx b/src/AccordionItemPanel/AccordionItemPanel.tsx similarity index 72% rename from src/AccordionItemBody/AccordionItemBody.tsx rename to src/AccordionItemPanel/AccordionItemPanel.tsx index 7618a818..137d8676 100644 --- a/src/AccordionItemBody/AccordionItemBody.tsx +++ b/src/AccordionItemPanel/AccordionItemPanel.tsx @@ -2,7 +2,7 @@ import { default as classnames } from 'classnames'; import * as React from 'react'; import { UUID } from '../ItemContainer/ItemContainer'; -type AccordionItemBodyProps = React.HTMLAttributes & { +type AccordionItemPanelProps = React.HTMLAttributes & { hideBodyClassName: string; uuid: UUID; expanded: boolean; @@ -10,7 +10,7 @@ type AccordionItemBodyProps = React.HTMLAttributes & { accordion: boolean; }; -const AccordionItemBody = (props: AccordionItemBodyProps): JSX.Element => { +const AccordionItemPanel = (props: AccordionItemPanelProps): JSX.Element => { const { className, hideBodyClassName, @@ -26,16 +26,16 @@ const AccordionItemBody = (props: AccordionItemBodyProps): JSX.Element => { return (
); }; -export default AccordionItemBody; +export default AccordionItemPanel; diff --git a/src/AccordionItemBody/AccordionItemBody.wrapper.tsx b/src/AccordionItemPanel/AccordionItemPanel.wrapper.tsx similarity index 60% rename from src/AccordionItemBody/AccordionItemBody.wrapper.tsx rename to src/AccordionItemPanel/AccordionItemPanel.wrapper.tsx index 5938b547..12ca6854 100644 --- a/src/AccordionItemBody/AccordionItemBody.wrapper.tsx +++ b/src/AccordionItemPanel/AccordionItemPanel.wrapper.tsx @@ -10,32 +10,32 @@ import { CONTEXT_KEY as ITEM_CONTEXT_KEY, getItemStore, } from '../ItemContainer/ItemContainer'; -import AccordionItemBody from './AccordionItemBody'; +import AccordionItemPanel from './AccordionItemPanel'; -type AccordionItemBodyWrapperProps = React.HTMLAttributes & { +type AccordionItemPanelWrapperProps = React.HTMLAttributes & { hideBodyClassName: string; }; -type AccordionItemBodyWrapperState = {}; +type AccordionItemPanelWrapperState = {}; -type AccordionItemBodyWrapperContext = { +type AccordionItemPanelWrapperContext = { [ACCORDION_CONTEXT_KEY](): null; [ITEM_CONTEXT_KEY](): null; }; -export default class AccordionItemBodyWrapper extends React.Component< - AccordionItemBodyWrapperProps, - AccordionItemBodyWrapperState, - AccordionItemBodyWrapperContext +export default class AccordionItemPanelWrapper extends React.Component< + AccordionItemPanelWrapperProps, + AccordionItemPanelWrapperState, + AccordionItemPanelWrapperContext > { - static contextTypes: AccordionItemBodyWrapperContext = { + static contextTypes: AccordionItemPanelWrapperContext = { [ACCORDION_CONTEXT_KEY]: propTypes.wildcard, [ITEM_CONTEXT_KEY]: propTypes.wildcard, }; - static defaultProps: AccordionItemBodyWrapperProps = { - className: 'accordion__body', - hideBodyClassName: 'accordion__body--hidden', + static defaultProps: AccordionItemPanelWrapperProps = { + className: 'accordion__panel', + hideBodyClassName: 'accordion__panel--hidden', }; render(): JSX.Element { @@ -44,7 +44,7 @@ export default class AccordionItemBodyWrapper extends React.Component< if (!accordionStore) { // tslint:disable-next-line:no-console console.error( - 'AccordionItemBody component cannot render because it has not been nested inside an Accordion component.', + 'AccordionItemPanel component cannot render because it has not been nested inside an Accordion component.', ); return null; @@ -55,7 +55,7 @@ export default class AccordionItemBodyWrapper extends React.Component< if (!itemStore) { // tslint:disable-next-line:no-console console.error( - 'AccordionItemBody component cannot render because it has not been nested inside an AccordionItem component.', + 'AccordionItemPanel component cannot render because it has not been nested inside an AccordionItem component.', ); return null; @@ -68,7 +68,7 @@ export default class AccordionItemBodyWrapper extends React.Component< )[0]; return item ? ( - +
+ Fake body +
+
+`; diff --git a/src/css/fancy-example.css b/src/css/fancy-example.css index a4f485d8..570c9955 100644 --- a/src/css/fancy-example.css +++ b/src/css/fancy-example.css @@ -24,7 +24,7 @@ position: relative; } -.accordion__title { +.accordion__heading { background-color: #f4f4f4; color: #444; cursor: pointer; @@ -34,24 +34,24 @@ border: none; } -.accordion__title:hover { +.accordion__heading:hover { background-color: #ddd; } -.accordion__body { +.accordion__panel { padding: 20px; display: block; animation: fadein 0.35s ease-in; } -.accordion__body--hidden { +.accordion__panel--hidden { display: none; opacity: 0; animation: fadein 0.35s ease-in; } -.accordion__title > *:last-child, -.accordion__body > *:last-child { +.accordion__heading > *:last-child, +.accordion__panel > *:last-child { margin-bottom: 0; } @@ -152,12 +152,12 @@ } } -.accordion__title--animated:hover .accordion__arrow { +.accordion__heading--animated:hover .accordion__arrow { animation-name: move-down; animation-duration: 1.5s; } -.accordion__title--animated[aria-expanded='true']:hover .accordion__arrow { +.accordion__heading--animated[aria-expanded='true']:hover .accordion__arrow { animation-name: move-up; animation-duration: 1.5s; } diff --git a/src/css/minimal-example.css b/src/css/minimal-example.css index eba9b050..f88d4f91 100644 --- a/src/css/minimal-example.css +++ b/src/css/minimal-example.css @@ -1,7 +1,7 @@ -.accordion__body { +.accordion__panel { display: block; } -.accordion__body--hidden { +.accordion__panel--hidden { display: none; } diff --git a/src/index.tsx b/src/index.tsx index 011bdac9..c3443d0e 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,13 +1,13 @@ import AccordionWrapper from './Accordion/Accordion.wrapper'; import AccordionItemWrapper from './AccordionItem/AccordionItem.wrapper'; -import AccordionItemBodyWrapper from './AccordionItemBody/AccordionItemBody.wrapper'; -import AccordionItemTitleWrapper from './AccordionItemTitle/AccordionItemTitle.wrapper'; +import AccordionItemHeadingWrapper from './AccordionItemHeading/AccordionItemHeading.wrapper'; +import AccordionItemPanelWrapper from './AccordionItemPanel/AccordionItemPanel.wrapper'; import { resetNextUuid } from './helpers/uuid'; export { AccordionWrapper as Accordion, AccordionItemWrapper as AccordionItem, - AccordionItemTitleWrapper as AccordionItemTitle, - AccordionItemBodyWrapper as AccordionItemBody, + AccordionItemHeadingWrapper as AccordionItemHeading, + AccordionItemPanelWrapper as AccordionItemPanel, resetNextUuid, }; From 5e0ef6c9081e9478bc3a9acca8a5bb8065503f8c Mon Sep 17 00:00:00 2001 From: catepalmer Date: Thu, 17 Jan 2019 09:25:51 +1300 Subject: [PATCH 2/2] Revert changelog.md changes to reflect names of components when changes were made --- CHANGELOG.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4ac9d8a4..75840631 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -99,9 +99,9 @@ This release brings support for React 16.3+ by way of some minor refactoring to - 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 AccordionItemPanel and AccordionItemHeading. +- Replace snapshot tests with explicit assertions in AccordionItemBody and AccordionItemTitle. - Add specific assertions to tests in accordionStore. -- Minor syntax change in AccordionItemPanel +- Minor syntax change in AccordionItemBody ## [[v2.0.0]](https://github.com/springload/react-accessible-accordion/releases/tag/v2.0.0) @@ -120,7 +120,7 @@ As this is a major release, users should expect some breaking changes - though t - 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 `AccordionItemPanel` and `AccordionItemHeading` had to be children of `AccordionItem` (as opposed to arbitrary-level descendants). +- Defect where `AccordionItemBody` and `AccordionItemTitle` had to be children of `AccordionItem` (as opposed to arbitrary-level descendants). ### Removed: