Merge pull request #172 from springload/chore/rename-hidebodyclassnam…

…e-prop

Chore/rename hidebodyclassname prop

README.md

@@ -86,10 +86,18 @@ We recommend that you copy them into your own app and modify them to suit your n
     </thead>
     <tbody>
       <tr>
-          <td>accordion</td>
+          <td>allowMultipleExpanded</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>Don't close all the others when expanding an
+                                    AccordionItem</td>
+      </tr>
+      <tr>
+          <td>allowZeroExpanded</td>
           <td>Boolean</td>
-          <td>true</td>
-          <td>Open only one item at a time or not</td>
+          <td>false</td>
+          <td>Close an AccordionItem when it's the only
+                                    one expanded</td>
       </tr>
       <tr>
           <td>onChange</td>
@@ -133,10 +141,10 @@ We recommend that you copy them into your own app and modify them to suit your n
           <td>CSS class(es) applied to the component</td>
       </tr>
       <tr>
-          <td>hideBodyClassName</td>
+          <td>expandedClassName</td>
           <td>String</td>
           <td>null</td>
-          <td>Class name for hidden body state</td>
+          <td>Class name for expanded panel state</td>
       </tr>
       <tr>
           <td>uuid</td>
@@ -168,10 +176,10 @@ We recommend that you copy them into your own app and modify them to suit your n
           <td>CSS class(es) applied to the component</td>
       </tr>
       <tr>
-          <td>hideBodyClassName</td>
+          <td>expandedClassName</td>
           <td>String</td>
           <td>null</td>
-          <td>Class name for hidden body state</td>
+          <td>Class name for expanded panel state</td>
       </tr>
     </tbody>
 </table>
@@ -197,10 +205,10 @@ We recommend that you copy them into your own app and modify them to suit your n
           <td>CSS class(es) applied to the component</td>
       </tr>
       <tr>
-          <td>hideBodyClassName</td>
+          <td>expandedClassName</td>
           <td>String</td>
-          <td>accordion__panel--hidden</td>
-          <td>Class name for hidden body state</td>
+          <td>accordion__panel--expanded</td>
+          <td>Class name for expanded panel state</td>
       </tr>
     </tbody>
 </table>
@@ -222,29 +230,23 @@ We recommend that you copy them into your own app and modify them to suit your n
 
 ### What this project is doing accessibility-wise?
 
-This project manages two types of Accordions, with single or multiple items open.
+This project manages Accordions with several options available for allowing/not allowing multiple items to be open at once, and allowing/not allowing all items to be closed.
 
-#### Single item
+#### Single item open
 
-> Use this with with props `accordion` set to `true` on `Accordion`.
+> Use this with with props `allowMultipleExpanded` set to `false` on `Accordion`.
 
-For this type of Accordion, you will get the following `role` set up on your elements:
+#### Multiple items open
 
--   Accordion: `tablist`
--   AccordionItem: no specific role
--   AccordionItemHeading: `tab`
--   AccordionItemPanel: `tabpanel`
+> Use this with with props `allowMultipleExpanded` set to `true` on `Accordion`.
 
-#### Multiple items
+#### One item must remain open
 
-For this type of Accordion, you will get the following `role` set up on your elements:
+> Use this with with props `allowZeroExpanded` set to `false` on `Accordion`.
 
-> Use this with with props `accordion` set to `false` on `Accordion`.
+#### All items can be closed
 
--   Accordion: no specific role
--   AccordionItem: no specific role
--   AccordionItemHeading: `button`
--   AccordionItemPanel: no specific role
+> Use this with with props `allowZeroExpanded` set to `true` on `Accordion`.
 
 # Browser support
 

demo/src/index.tsx

@@ -212,10 +212,10 @@ const Example = (): JSX.Element => (
                                 <td>CSS class(es) applied to the component</td>
                             </tr>
                             <tr>
-                                <td>hideBody ClassName</td>
+                                <td>expandedClassName</td>
                                 <td>String</td>
-                                <td>accordion__panel--hidden</td>
-                                <td>Class name for hidden body state</td>
+                                <td>accordion__panel--expanded</td>
+                                <td>Class name for expanded panel state</td>
                             </tr>
                         </tbody>
                     </table>
@@ -261,8 +261,8 @@ const Example = (): JSX.Element => (
                                             <td>Boolean</td>
                                             <td>false</td>
                                             <td>
-                                                Open only one item at a time or
-                                                not
+                                                Don't close all the others when
+                                                expanding an AccordionItem
                                             </td>
                                         </tr>
                                         <tr>
@@ -395,11 +395,12 @@ const Example = (): JSX.Element => (
                                             </td>
                                         </tr>
                                         <tr>
-                                            <td>hideBody ClassName</td>
+                                            <td>expandedClassName</td>
                                             <td>String</td>
-                                            <td>accordion__panel--hidden</td>
+                                            <td>accordion__panel--expanded</td>
                                             <td>
-                                                Class name for hidden body state
+                                                Class name for expanded panel
+                                                state
                                             </td>
                                         </tr>
                                     </tbody>

package.json

@@ -49,6 +49,10 @@
         },
         {
             "name": "Thibaud Colas"
+        },
+        {
+            "name": "Cate Palmer",
+            "url": "https://github.com/catepalmer"
         }
     ],
     "license": "MIT",

src/Accordion/Accordion.spec.tsx

@@ -80,18 +80,18 @@ describe('Accordion', () => {
         });
 
         it('works with multiple pre expanded accordion. Extra expands are just ignored.', () => {
-            const hideBodyClassName = 'HIDE';
+            const expandedClassName = 'EXPANDED';
             const wrapper = mount(
                 <Accordion allowMultipleExpanded={false}>
                     <AccordionItem
                         expanded={true}
-                        hideBodyClassName={hideBodyClassName}
+                        expandedClassName={expandedClassName}
                     >
                         Fake Child
                     </AccordionItem>
                     <AccordionItem
                         expanded={true}
-                        hideBodyClassName={hideBodyClassName}
+                        expandedClassName={expandedClassName}
                     >
                         Fake Child
                     </AccordionItem>
@@ -106,7 +106,7 @@ describe('Accordion', () => {
             ).toEqual(1);
             expect(
                 wrapper.findWhere((item: ReactWrapper) =>
-                    item.hasClass(hideBodyClassName),
+                    item.hasClass(expandedClassName),
                 ).length,
             ).toEqual(1);
         });

src/AccordionItem/AccordionItem.spec.tsx

@@ -140,19 +140,19 @@ describe('AccordionItem', () => {
         expect(wrapper.find('div').prop('className')).toBe('testCSSClass');
     });
 
-    it('renders with different hideBodyClassName', () => {
+    it('renders with different expandedClassName', () => {
         const wrapper = mount(
             <AccordionProvider>
                 <AccordionItem
-                    expanded={false}
+                    expanded={true}
                     className="AccordionItem"
-                    hideBodyClassName="AccordionItem--hidden"
+                    expandedClassName="AccordionItem--expanded"
                 />
             </AccordionProvider>,
         );
 
         expect(wrapper.find('div').prop('className')).toEqual(
-            'AccordionItem AccordionItem--hidden',
+            'AccordionItem AccordionItem--expanded',
         );
     });
 

src/AccordionItem/AccordionItem.tsx

@@ -8,7 +8,7 @@ import { UUID } from '../ItemContainer/ItemContainer';
 
 type AccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {
     uuid: UUID;
-    hideBodyClassName?: string;
+    expandedClassName?: string;
     expanded?: boolean;
     accordionStore: AccordionContainer;
 };
@@ -39,7 +39,7 @@ class AccordionItem extends React.Component<AccordionItemProps> {
         const {
             uuid,
             className,
-            hideBodyClassName,
+            expandedClassName,
             accordionStore,
             expanded,
             ...rest
@@ -57,8 +57,8 @@ class AccordionItem extends React.Component<AccordionItemProps> {
         return (
             <div
                 className={classnames(className, {
-                    [String(hideBodyClassName)]:
-                        !currentItem.expanded && hideBodyClassName,
+                    [String(expandedClassName)]:
+                        currentItem.expanded && expandedClassName,
                 })}
                 {...rest}
             />

src/AccordionItem/AccordionItem.wrapper.tsx

@@ -10,7 +10,7 @@ import { Provider as ItemProvider } from '../ItemContainer/ItemContainer';
 import AccordionItem from './AccordionItem';
 
 type AccordionItemWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
-    hideBodyClassName?: string;
+    expandedClassName?: string;
     expanded?: boolean;
     uuid?: string;
 };
@@ -32,7 +32,7 @@ export default class AccordionItemWrapper extends React.Component<
 
     static defaultProps: AccordionItemWrapperProps = {
         className: 'accordion__item',
-        hideBodyClassName: '',
+        expandedClassName: '',
         expanded: false,
         uuid: undefined,
     };

src/AccordionItem/__snapshots__/AccordionItem.spec.tsx.snap

@@ -22,7 +22,7 @@ exports[`AccordionItem renders correctly with allowMultipleExpanded false 1`] =
   <div
     aria-hidden={null}
     aria-labelledby="accordion__heading-0"
-    className="accordion__panel accordion__panel--hidden"
+    className="accordion__panel"
     id="accordion__panel-0"
     role="region"
   >
@@ -55,7 +55,7 @@ exports[`AccordionItem renders correctly with allowMultipleExpanded true 1`] = `
   <div
     aria-hidden={true}
     aria-labelledby="accordion__heading-0"
-    className="accordion__panel accordion__panel--hidden"
+    className="accordion__panel"
     id="accordion__panel-0"
     role={null}
   >
@@ -88,7 +88,7 @@ exports[`AccordionItem renders correctly with allowZeroExpanded false 1`] = `
   <div
     aria-hidden={null}
     aria-labelledby="accordion__heading-0"
-    className="accordion__panel accordion__panel--hidden"
+    className="accordion__panel"
     id="accordion__panel-0"
     role="region"
   >
@@ -121,7 +121,7 @@ exports[`AccordionItem renders correctly with allowZeroExpanded true 1`] = `
   <div
     aria-hidden={null}
     aria-labelledby="accordion__heading-0"
-    className="accordion__panel accordion__panel--hidden"
+    className="accordion__panel"
     id="accordion__panel-0"
     role="region"
   >
@@ -157,7 +157,7 @@ exports[`AccordionItem renders correctly with other blocks inside 1`] = `
   <div
     aria-hidden={null}
     aria-labelledby="accordion__heading-0"
-    className="accordion__panel accordion__panel--hidden"
+    className="accordion__panel"
     id="accordion__panel-0"
     role="region"
   >
@@ -190,7 +190,7 @@ exports[`AccordionItem renders correctly with other blocks inside 2 1`] = `
   <div
     aria-hidden={null}
     aria-labelledby="accordion__heading-0"
-    className="accordion__panel accordion__panel--hidden"
+    className="accordion__panel"
     id="accordion__panel-0"
     role="region"
   >

src/AccordionItemHeading/AccordionItemHeading.spec.tsx

@@ -70,20 +70,19 @@ describe('AccordionItemHeading', () => {
         expect(wrapper.find('div').hasClass(className)).toEqual(true);
     });
 
-    it('renders with different hideBodyClassName', () => {
-        const hideBodyClassName = 'hideBodyClassName';
-        const wrapper = mountItem(
-            <AccordionItemHeading hideBodyClassName={hideBodyClassName} />,
-        );
-        expect(wrapper.find('div').hasClass(hideBodyClassName)).toEqual(true);
-    });
+    it('renders with different expandedClassName when item is expanded', () => {
+        const expandedClassName = 'expandedClassName';
 
-    it("doesn't present hideBodyClassName when collapsed", () => {
-        const hideBodyClassName = 'hideBodyClassName';
-        const wrapper = mountItem(
-            <AccordionItemHeading hideBodyClassName={hideBodyClassName} />,
+        const wrapper = mount(
+            <AccordionProvider items={[{ uuid: 0, expanded: true }]}>
+                <ItemProvider uuid={0}>
+                    <AccordionItemHeading
+                        expandedClassName={expandedClassName}
+                    />
+                </ItemProvider>
+            </AccordionProvider>,
         );
-        expect(wrapper.find('div').hasClass(hideBodyClassName)).toEqual(true);
+        expect(wrapper.find('div').hasClass(expandedClassName)).toEqual(true);
     });
 
     it('toggles state when clicked', async () => {

src/AccordionItemHeading/AccordionItemHeading.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { UUID } from '../ItemContainer/ItemContainer';
 
 type AccordionItemHeadingProps = React.HTMLAttributes<HTMLDivElement> & {
-    hideBodyClassName: string;
+    expandedClassName: string;
     expanded: boolean;
     uuid: UUID;
     disabled: boolean;
@@ -32,7 +32,7 @@ export default class AccordionItemHeading extends React.Component<
     render(): JSX.Element {
         const {
             className,
-            hideBodyClassName,
+            expandedClassName,
             setExpanded,
             expanded,
             uuid,
@@ -42,8 +42,9 @@ export default class AccordionItemHeading extends React.Component<
 
         const id = `accordion__heading-${uuid}`;
         const ariaControls = `accordion__panel-${uuid}`;
+
         const headingClassName = classnames(className, {
-            [hideBodyClassName]: hideBodyClassName && !expanded,
+            [expandedClassName]: expandedClassName && expanded,
         });
 
         return (

src/AccordionItemHeading/AccordionItemHeading.wrapper.tsx

@@ -12,7 +12,7 @@ import {
 import { default as AccordionItemHeading } from './AccordionItemHeading';
 
 type AccordionItemHeadingWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
-    hideBodyClassName: string;
+    expandedClassName: string;
 };
 
 type AccordionItemHeadingWrapperState = {};
@@ -32,7 +32,7 @@ export default class AccordionItemHeadingWrapper extends React.Component<
 
     static defaultProps: AccordionItemHeadingWrapperProps = {
         className: 'accordion__heading',
-        hideBodyClassName: '',
+        expandedClassName: '',
     };
 
     render(): JSX.Element {