refactor(expandcollapse): Close accordion panels on click when they a…

…re open
telus · Nov 10, 2017 · 843a9f2 · 843a9f2
1 parent 350b133
commit 843a9f2
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/src/components/ExpandCollapse/Accordion/Accordion.jsx b/src/components/ExpandCollapse/Accordion/Accordion.jsx
@@ -25,11 +25,18 @@ class Accordion extends React.Component {
   togglePanel = panelId => {
     const { onToggle } = this.props
 
-    this.setState({ openPanel: panelId }, () => {
-      if (onToggle) {
-        onToggle(this.state.openPanel)
+    this.setState(
+      ({ openPanel }) => {
+        return {
+          openPanel: openPanel === panelId ? undefined : panelId,
+        }
+      },
+      () => {
+        if (onToggle) {
+          onToggle(this.state.openPanel)
+        }
       }
-    })
+    )
   }
 
   isPanelOpen = panelId => {

diff --git a/src/components/ExpandCollapse/Accordion/__tests__/Accordion.spec.jsx b/src/components/ExpandCollapse/Accordion/__tests__/Accordion.spec.jsx
@@ -80,7 +80,17 @@ describe('Accordion', () => {
     expectPanelToBeClosed(findPanel('panel-2'))
   })
 
-  it('closes all other panels when opening a panel', () => {
+  it('can open and close a panel', () => {
+    const { findPanel, clickPanel } = doMount(<Accordion>{aPanel({ id: 'panel-1' })}</Accordion>)
+
+    clickPanel('panel-1')
+    expectPanelToBeOpen(findPanel('panel-1'))
+
+    clickPanel('panel-1')
+    expectPanelToBeClosed(findPanel('panel-1'))
+  })
+
+  it('closes all other panels when opening a new panel', () => {
     const { findPanel, clickPanel } = doMount(
       <Accordion>
         {aPanel({ id: 'panel-1' })}