diff --git a/README.md b/README.md index 32eddcc7..9732e325 100644 --- a/README.md +++ b/README.md @@ -11,14 +11,13 @@ First, grab the package from npm: ```sh -npm install --save react-accessible-accordion react react-dom +npm install --save react-accessible-accordion ``` Then, import the editor and use it in your code. Here is a [basic example](https://springload.github.io/react-accessible-accordion/): ```jsx import React from 'react'; -import ReactDOM from 'react-dom'; import { Accordion, @@ -30,29 +29,39 @@ import { // Demo styles, see 'Styles' section below for some notes on use. import 'react-accessible-accordion/dist/fancy-example.css'; -const Example = () => ( - - - -

Simple title

- - -

Body content

- - - - -

Complex title

-
With a bit of description
- - -

Body content

- - - -); - -ReactDOM.render(, document.querySelector('[data-mount]')); +export default function Example() { + return ( + + + + + What harsh truths do you prefer to ignore? + + +

+ Exercitation in fugiat est ut ad ea cupidatat ut in + cupidatat occaecat ut occaecat consequat est minim minim + esse tempor laborum consequat esse adipisicing eu + reprehenderit enim. +

+ + + + + + Is free will real or just an illusion? + + +

+ In ad velit in ex nostrud dolore cupidatat consectetur + ea in ut nostrud velit in irure cillum tempor laboris + sed adipisicing eu esse duis nulla non. +

+ + + + ); +} ``` ### Styles diff --git a/demo/src/index.tsx b/demo/src/index.tsx index 143a9b9b..2d222933 100644 --- a/demo/src/index.tsx +++ b/demo/src/index.tsx @@ -2,6 +2,7 @@ import '@babel/polyfill'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; +import placeholders, { Placeholder } from './placeholders'; import { Accordion, @@ -21,687 +22,102 @@ const renderFn = (expanded: boolean): JSX.Element => { return expanded ? <>This item is expanded : <>This item is collapsed; }; +const Arrow = (): JSX.Element => ( + +); + // tslint:disable-next-line max-func-body-length -const Example = (): JSX.Element => ( +const App = (): JSX.Element => (
-

Default settings

+

React Accessible Accordion

+ +

+ React Component for creating an 'Accordion' that adheres to the{' '} + + WAI ARIA spec + {' '} + for accessibility. +

+ +

Default behaviour

+ +

+ By default, only one item may be expanded and it can only be + collapsed again by expanding another. +

- - -

- Accessible Accordion -
-

- - -

- Accessible Accordion component for React. Inspired by{' '} - - rc-collapse - {' '} - and{' '} - - react-sanfona - - . -

- - - - -

- Components -
-

-
See all the components from this package
- - -
    -
  • Accordion
    • -
  • AccordionItem
    • -
  • AccordionItemHeading
    • -
  • AccordionItemPanel
    • -
  • AccordionItemState
    • -
- - + {placeholders.map((placeholder: Placeholder) => ( + + + + {placeholder.heading} + + {placeholder.panel} + + ))} -

Allow multiple/zero

- - - - -

- Accordion -
-

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
nametypedefaultdescription
allowMultipleExpandedBooleanfalse - Don't close all the others when expanding an - AccordionItem -
allowZeroExpandedBooleanfalse - Close an AccordionItem when it's the only - one expanded -
onChangeFunction(keys)noopTriggered on change (open/close items)
classNameStringaccordionCSS class(es) applied to the component
- - - - -

- AccordionItem -
-

- - - - - - - - - - - - - - - - - - - - - - - - - -
nametypedefaultdescription
expandedBooleanfalseExpands this item on first render
classNameStringaccordion__itemCSS class(es) applied to the component
- - - - -

- AccordionItemHeading -
-

- - - - - - - - - - - - - - - - - - - -
nametypedefaultdescription
classNameStringaccordion__headingCSS class(es) applied to the component
- - - - -

- AccordionItemPanel -
-

- - - - - - - - - - - - - - - - - - - - - - - - - -
nametypedefaultdescription
classNameStringaccordion__panelCSS class(es) applied to the component
expandedClassNameStringaccordion__panel--expandedClass name for expanded panel state
- - - - -

- AccordionItemState -
-

- - - - - - - - - - - - - - - - - - - - - - - - - -
nametypedefaultdescription
expandedBooleanfalseExpands this item on first render
childrenFunctionnull - Takes expanded state as argument for - conditional rendering -
- - +

Expanding multiple items at once

+ +

+ If you set allowMultipleExpanded to{' '} + true then the accordion will permit multiple items + to be expanded at once. +

+ + + {placeholders.map((placeholder: Placeholder) => ( + + + + {placeholder.heading} + + {placeholder.panel} + + ))} -

Multi Accordion children

- - - - -

- Components API -
-

- - - - - -

- Accordion -
-

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
nametypedefaultdescription
allowMultipleExpandedBooleanfalse - Don't close all the others when - expanding an AccordionItem -
onChangeFunction(keys)noop - Triggered on change (open/close - items) -
classNameStringaccordion - CSS class(es) applied to the - component -
- - - - -

- AccordionItem -
-

- - - - - - - - - - - - - - - - - - - - - - - - - -
nametypedefaultdescription
expandedBooleanfalse - Expands this item on first - render -
classNameStringaccordion__item - CSS class(es) applied to the - component -
- - - - -

- AccordionItemHeading -
-

- - - - - - - - - - - - - - - - - - - -
nametypedefaultdescription
classNameStringaccordion__heading - CSS class(es) applied to the - component -
- - - - -

- AccordionItemPanel -
-

- - - - - - - - - - - - - - - - - - - - - - - - - -
nametypedefaultdescription
classNameStringaccordion__panel - CSS class(es) applied to the - component -
expandedClassNameStringaccordion__panel--expanded - Class name for expanded panel - state -
- - - - -

- AccordionItemState -
-

- - - - - - - - - - - - - - - - - - - - - - - - - -
nametypedefaultdescription
expandedBooleanfalse - Expands this item on first - render -
childrenFunctionnull - Takes expanded state as argument - for conditional rendering -
- - - - - - - -

- Development -
-

-
How to install the project
- - -

- Clone the project on your computer, and install Node. - This project also uses nvm. -

-

- nvm install -
- # Then, install all project dependencies. -
- npm install -
- # Set up a `.env` file with the appropriate secrets. -
- touch .env -

- - +

Collapsing the last expanded item

+ +

+ If you set allowZeroExpanded to{' '} + true then a solitary expanded item may be collapsed + again. +

+ + + {placeholders.map((placeholder: Placeholder) => ( + + + + {placeholder.heading} + + {placeholder.panel} + + ))}

Pre expanded children

- - - -

- Working on the project -
-

- - -

- Everything mentioned in the installation process should - already be done. -

-

- # Make sure you use the right node version. -
- nvm use -
- # Start the the development tools in watch mode. -
- yarn start -
- # Runs linting. -
- yarn lint -
- # Runs tests. -
- yarn test -
- # View other available commands with: -
- yarn -

- - - - -

- Run the demo -
-

-
To have an easy play around
- - -

- Everything mentioned in the installation process should - already be done. -

-

- # Make sure you use the right node version. -
- nvm use -
- # Start the server and the development tools. -
- yarn start-demo -

- - - - -

With permanent blocks

- - - - -

- Working on the project -
-

- - -

- Everything mentioned in the installation process should - already be done. -

-

- # Make sure you use the right node version. -
- nvm use -
- # Start the the development tools in watch mode. -
- yarn start -
- # Runs linting. -
- yarn lint -
- # Runs tests. -
- yarn test -
- # View other available commands with: -
- 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. -

-

- # Make sure you use the right node version. -
- nvm use -
- # Start the server and the development tools. -
- yarn start-demo -

- - - - -

A bit of animation on the arrow?

+

TODO

- - - -

- Animated Accessible Accordion -
-

- - -

Did you notice the animation on the arrow?

- - - - -

- How to? -
-

- - -

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

- - - - -

Only one item

+

Informative onChange

- - - -

- Single item -
-

- - -

Why would you need more than one?

- - - +

+ When you use the onChange prop, you can get + feedback about which items are expanded. +

-

Informative onChange

+

+ In this example, we are simply logging the uuids of the expanded + items to the console. Have a click around then check your console to + see this in action. +

( console.log(itemUuids); }} > - - -

- 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. -

- - + {placeholders.map((placeholder: Placeholder) => ( + + + + {placeholder.heading} + + {placeholder.panel} + + ))} -

Conditional display

+

-
-

- Render something different when expanded -
-

- -
+ + Render something different when expanded

@@ -765,16 +157,8 @@ const Example = (): JSX.Element => ( -

-

- How to? -
-

- -
+ + How to?

@@ -791,4 +175,4 @@ const Example = (): JSX.Element => (

); -ReactDOM.render(, document.getElementById('app-root')); +ReactDOM.render(, document.getElementById('app-root')); diff --git a/demo/src/placeholders.tsx b/demo/src/placeholders.tsx new file mode 100644 index 00000000..0758d94d --- /dev/null +++ b/demo/src/placeholders.tsx @@ -0,0 +1,67 @@ +// tslint:disable react-a11y-anchors + +import * as React from 'react'; + +export type Placeholder = { + heading: string; + panel: JSX.Element; +}; + +const placeholders: Placeholder[] = [ + { + heading: 'What harsh truths do you prefer to ignore?', + panel: ( + <> + In pariatur excepteur ut do aliquip qui mollit + aliqua exercitation excepteur consequat + reprehenderit nostrud laborum voluptate veniam non dolore dolore + aliqua incididunt amet nisi minim cillum elit. + + ), + }, + { + heading: 'Is free will real or just an illusion?', + panel: ( + <> + Dolor esse proident nisi minim nisi aute nulla sed proident + magna id eiusmod consectetur laborum aliqua minim{' '} + excepteur sunt anim anim esse aliquip et ea enim + proident veniam veniam quis adipisicing nulla amet id commodo. + + ), + }, + { + heading: 'Is there a meaning to life? If so, what is it?', + panel: ( + <> + Consectetur pariatur proident irure proident ea laboris ut do do + quis consequat sed officia dolore consequat ut deserunt ea sit + sit culpa. + + ), + }, + { + heading: 'Is the meaning of life the same for animals and humans?', + panel: ( + <> + Ex culpa eu veniam ea quis velit exercitation reprehenderit + reprehenderit dolore pariatur incididunt occaecat ut irure ut + sed dolor veniam sint incididunt esse duis duis dolore sunt aute + incididunt amet quis. + + ), + }, + { + heading: 'Where is the line between art and not art?', + panel: ( + <> + Id aute tempor ad sunt et exercitation nulla duis dolore irure + elit consectetur laborum reprehenderit veniam nostrud in duis ut + duis ullamco dolore do adipisicing sed proident nostrud aute ut + ea cupidatat exercitation sit elit. + + ), + }, +]; + +export default placeholders; diff --git a/src/css/fancy-example.css b/src/css/fancy-example.css index 9c395694..5a7f256b 100644 --- a/src/css/fancy-example.css +++ b/src/css/fancy-example.css @@ -58,10 +58,7 @@ position: relative; width: 24px; height: 12px; - position: absolute; - top: 50%; - right: 0; - margin-top: -6px; + margin-right: 12px; } .accordion__arrow::after,