From 126f4a4d2a4fbe23747d206a4edc8d090ba3b5a5 Mon Sep 17 00:00:00 2001
From: Donald Labaj <donald.labaj@gmail.com>
Date: Fri, 26 Apr 2019 06:38:01 -0400
Subject: [PATCH 1/4] Fixes demo to show single and multiple expand behavior

---
 .../{Accordion.md.tmp => Accordion.md}        | 49 +++++++++----------
 .../react-core/src/components/index.ts        |  2 +-
 2 files changed, 24 insertions(+), 27 deletions(-)
 rename packages/patternfly-4/react-core/src/components/Accordion/{Accordion.md.tmp => Accordion.md} (87%)

diff --git a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.md.tmp b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.md
similarity index 87%
rename from packages/patternfly-4/react-core/src/components/Accordion/Accordion.md.tmp
rename to packages/patternfly-4/react-core/src/components/Accordion/Accordion.md
index f92e3665476..dbc831e58a1 100644
--- a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.md.tmp
+++ b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.md
@@ -5,7 +5,7 @@ cssPrefix: 'pf-c-accordion'
 
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
 
-## Simple Accordion
+## Simple accordion with a single expand behavior
 ```js
 import React from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
@@ -14,24 +14,21 @@ class SimpleAccordion extends React.Component {
     constructor(props) {
     super(props);
     this.state = {
-      expanded: ['ex-toggle2']
+      expanded: 'ex-toggle2'
     };
-  }
-  render() {
-    const toggle = id => {
-      const expanded = this.state.expanded;
-      const index = expanded.indexOf(id);
-      const newExpanded =
-        index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
-      this.setState(() => ({ expanded: newExpanded }));
+
+    this.onToggle = id => {
+      this.setState({expanded: id })
     };
+  }
 
+  render() {
     return (
       <Accordion aria-label="Accordion example">
         <AccordionItem aria-labelledby="ex-item1">
           <AccordionToggle
-            onClick={() => toggle('ex-toggle1')}
-            isExpanded={this.state.expanded.includes('ex-toggle1')}
+            onClick={() => {this.onToggle('ex-toggle1')}}
+            isExpanded={this.state.expanded==='ex-toggle1'}
             id="ex-toggle1"
             aria-controls="ex-expand1"
           >
@@ -40,7 +37,7 @@ class SimpleAccordion extends React.Component {
           <AccordionContent
             aria-label="Primary Content Details"
             id="ex-expand1"
-            isHidden={!this.state.expanded.includes('ex-toggle1')}
+            isHidden={this.state.expanded !== 'ex-toggle1'}
           >
             <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
@@ -50,8 +47,8 @@ class SimpleAccordion extends React.Component {
         </AccordionItem>
         <AccordionItem aria-labelledby="ex-item2">
           <AccordionToggle
-            onClick={() => toggle('ex-toggle2')}
-            isExpanded={this.state.expanded.includes('ex-toggle2')}
+            onClick={() => {this.onToggle('ex-toggle2')}}
+            isExpanded={this.state.expanded === 'ex-toggle2'}
             id="ex-toggle2"
             aria-controls="ex-expand2"
           >
@@ -60,7 +57,7 @@ class SimpleAccordion extends React.Component {
           <AccordionContent
             aria-label="Primary Content Details"
             id="ex-expand2"
-            isHidden={!this.state.expanded.includes('ex-toggle2')}
+            isHidden={this.state.expanded !=='ex-toggle2'}
           >
             <p>
               Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
@@ -70,8 +67,8 @@ class SimpleAccordion extends React.Component {
         </AccordionItem>
         <AccordionItem aria-labelledby="ex-item3">
           <AccordionToggle
-            onClick={() => toggle('ex-toggle3')}
-            isExpanded={this.state.expanded.includes('ex-toggle3')}
+            onClick={() => {this.onToggle('ex-toggle3')}}
+            isExpanded={this.state.expanded === 'ex-toggle3'}
             id="ex-toggle3"
             aria-controls="ex-expand3"
           >
@@ -80,15 +77,15 @@ class SimpleAccordion extends React.Component {
           <AccordionContent
             aria-label="Primary Content Details"
             id="ex-expand3"
-            isHidden={!this.state.expanded.includes('ex-toggle3')}
+            isHidden={this.state.expanded !== 'ex-toggle3'}
           >
             <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
           </AccordionContent>
         </AccordionItem>
         <AccordionItem aria-labelledby="ex-item4">
           <AccordionToggle
-            onClick={() => toggle('ex-toggle4')}
-            isExpanded={this.state.expanded.includes('ex-toggle4')}
+            onClick={() => {this.onToggle('ex-toggle4')}}
+            isExpanded={this.state.expanded === 'ex-toggle4'}
             id="ex-toggle4"
             aria-controls="ex-expand4"
           >
@@ -97,7 +94,7 @@ class SimpleAccordion extends React.Component {
           <AccordionContent
             aria-label="Primary Content Details"
             id="ex-expand4"
-            isHidden={!this.state.expanded.includes('ex-toggle4')}
+            isHidden={this.state.expanded !== 'ex-toggle4'}
           >
             <p>
               Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
@@ -112,8 +109,8 @@ class SimpleAccordion extends React.Component {
         </AccordionItem>
         <AccordionItem aria-labelledby="ex-item5">
           <AccordionToggle
-            onClick={() => toggle('ex-toggle5')}
-            isExpanded={this.state.expanded.includes('ex-toggle5')}
+            onClick={() => {this.onToggle('ex-toggle5')}}
+            isExpanded={this.state.expanded === 'ex-toggle5'}
             id="ex-toggle5"
             aria-controls="ex-expand5"
           >
@@ -122,7 +119,7 @@ class SimpleAccordion extends React.Component {
           <AccordionContent
             aria-label="Primary Content Details"
             id="ex-expand5"
-            isHidden={!this.state.expanded.includes('ex-toggle5')}
+            isHidden={this.state.expanded !== 'ex-toggle5'}
           >
             <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
           </AccordionContent>
@@ -133,7 +130,7 @@ class SimpleAccordion extends React.Component {
 }
 ```
 
-## Fixed Accordion
+## Fixed accordion with multiple expand behavior
 ```js
 import React from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
diff --git a/packages/patternfly-4/react-core/src/components/index.ts b/packages/patternfly-4/react-core/src/components/index.ts
index 2f6c23d21b8..20925fef22f 100644
--- a/packages/patternfly-4/react-core/src/components/index.ts
+++ b/packages/patternfly-4/react-core/src/components/index.ts
@@ -1,6 +1,6 @@
 /** Keep alphabetically sorted */
 export * from './AboutModal';
-// export * from './Accordion'; Don't release this yet
+export * from './Accordion';
 export * from './Alert';
 export * from './ApplicationLauncher';
 export * from './Avatar';

From 2dab080603aa32a7abd695a41699da6e9dcbcc50 Mon Sep 17 00:00:00 2001
From: Donald Labaj <donald.labaj@gmail.com>
Date: Fri, 26 Apr 2019 08:07:41 -0400
Subject: [PATCH 2/4] Some cleanup for demo code.

---
 .../src/components/Accordion/Accordion.md     | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.md b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.md
index dbc831e58a1..614ba6a5808 100644
--- a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.md
+++ b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.md
@@ -16,18 +16,21 @@ class SimpleAccordion extends React.Component {
     this.state = {
       expanded: 'ex-toggle2'
     };
-
-    this.onToggle = id => {
-      this.setState({expanded: id })
-    };
   }
 
   render() {
+     const onToggle = id => {
+      if (id === this.state.expanded) {
+        this.setState({expanded: ''});
+      } else {
+        this.setState({expanded: id })
+      }
+    };
     return (
       <Accordion aria-label="Accordion example">
         <AccordionItem aria-labelledby="ex-item1">
           <AccordionToggle
-            onClick={() => {this.onToggle('ex-toggle1')}}
+            onClick={() => {onToggle('ex-toggle1')}}
             isExpanded={this.state.expanded==='ex-toggle1'}
             id="ex-toggle1"
             aria-controls="ex-expand1"
@@ -47,7 +50,7 @@ class SimpleAccordion extends React.Component {
         </AccordionItem>
         <AccordionItem aria-labelledby="ex-item2">
           <AccordionToggle
-            onClick={() => {this.onToggle('ex-toggle2')}}
+            onClick={() => {onToggle('ex-toggle2')}}
             isExpanded={this.state.expanded === 'ex-toggle2'}
             id="ex-toggle2"
             aria-controls="ex-expand2"
@@ -67,7 +70,7 @@ class SimpleAccordion extends React.Component {
         </AccordionItem>
         <AccordionItem aria-labelledby="ex-item3">
           <AccordionToggle
-            onClick={() => {this.onToggle('ex-toggle3')}}
+            onClick={() => {onToggle('ex-toggle3')}}
             isExpanded={this.state.expanded === 'ex-toggle3'}
             id="ex-toggle3"
             aria-controls="ex-expand3"
@@ -84,7 +87,7 @@ class SimpleAccordion extends React.Component {
         </AccordionItem>
         <AccordionItem aria-labelledby="ex-item4">
           <AccordionToggle
-            onClick={() => {this.onToggle('ex-toggle4')}}
+            onClick={() => {onToggle('ex-toggle4')}}
             isExpanded={this.state.expanded === 'ex-toggle4'}
             id="ex-toggle4"
             aria-controls="ex-expand4"
@@ -109,7 +112,7 @@ class SimpleAccordion extends React.Component {
         </AccordionItem>
         <AccordionItem aria-labelledby="ex-item5">
           <AccordionToggle
-            onClick={() => {this.onToggle('ex-toggle5')}}
+            onClick={() => {onToggle('ex-toggle5')}}
             isExpanded={this.state.expanded === 'ex-toggle5'}
             id="ex-toggle5"
             aria-controls="ex-expand5"
@@ -144,7 +147,7 @@ class FixedAccordion extends React.Component {
   }
   
   render() {
-    const toggle = id => {
+    const onToggle = id => {
       const expanded = this.state.expanded;
       const index = expanded.indexOf(id);
       const newExpanded =
@@ -156,7 +159,7 @@ class FixedAccordion extends React.Component {
       <Accordion aria-label="Accordion example">
         <AccordionItem aria-labelledby="ex-item1">
           <AccordionToggle
-            onClick={() => toggle('ex-toggle1')}
+            onClick={() => onToggle('ex-toggle1')}
             isExpanded={this.state.expanded.includes('ex-toggle1')}
             id="ex-toggle1"
             aria-controls="ex-expand1"
@@ -177,7 +180,7 @@ class FixedAccordion extends React.Component {
         </AccordionItem>
         <AccordionItem aria-labelledby="ex-item2">
           <AccordionToggle
-            onClick={() => toggle('ex-toggle2')}
+            onClick={() => onToggle('ex-toggle2')}
             isExpanded={this.state.expanded.includes('ex-toggle2')}
             id="ex-toggle2"
             aria-controls="ex-expand2"
@@ -198,7 +201,7 @@ class FixedAccordion extends React.Component {
         </AccordionItem>
         <AccordionItem aria-labelledby="ex-item3">
           <AccordionToggle
-            onClick={() => toggle('ex-toggle3')}
+            onClick={() => onToggle('ex-toggle3')}
             isExpanded={this.state.expanded.includes('ex-toggle3')}
             id="ex-toggle3"
             aria-controls="ex-expand3"
@@ -216,7 +219,7 @@ class FixedAccordion extends React.Component {
         </AccordionItem>
         <AccordionItem aria-labelledby="ex-item4">
           <AccordionToggle
-            onClick={() => toggle('ex-toggle4')}
+            onClick={() => onToggle('ex-toggle4')}
             isExpanded={this.state.expanded.includes('ex-toggle4')}
             id="ex-toggle4"
             aria-controls="ex-expand4"
@@ -242,7 +245,7 @@ class FixedAccordion extends React.Component {
         </AccordionItem>
         <AccordionItem aria-labelledby="ex-item5">
           <AccordionToggle
-            onClick={() => toggle('ex-toggle5')}
+            onClick={() => onToggle('ex-toggle5')}
             isExpanded={this.state.expanded.includes('ex-toggle5')}
             id="ex-toggle5"
             aria-controls="ex-expand5"

From 05c0ea72688aa638f46a5f8a0b2ed7a19532823b Mon Sep 17 00:00:00 2001
From: Donald Labaj <donald.labaj@gmail.com>
Date: Fri, 26 Apr 2019 16:20:54 -0400
Subject: [PATCH 3/4] Updated to fix merge issues.

---
 .../react-core/src/components/Accordion/Accordion.md |  5 ++---
 .../src/components/Accordion/AccordionToggle.js      | 12 +++---------
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.md b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.md
index 78a5f2c7baf..938be54f109 100644
--- a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.md
+++ b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.md
@@ -27,13 +27,12 @@ class SimpleAccordion extends React.Component {
       }
     };
     return (
-      <Accordion aria-label="Accordion example">
-        <AccordionItem aria-labelledby="ex-item1">
+      <Accordion>
+        <AccordionItem>
           <AccordionToggle
             onClick={() => {onToggle('ex-toggle1')}}
             isExpanded={this.state.expanded==='ex-toggle1'}
             id="ex-toggle1"
-            aria-controls="ex-expand1"
           >
             Item One
           </AccordionToggle>
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js b/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js
index 6ceb8d0c81b..dd62f56d1c3 100644
--- a/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js
+++ b/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js
@@ -4,13 +4,7 @@ import { css } from '@patternfly/react-styles';
 import { AngleRightIcon } from '@patternfly/react-icons';
 import styles from '@patternfly/patternfly/components/Accordion/accordion.css';
 
-const AccordionToggle = ({
-  className,
-  id,
-  isExpanded,
-  children,
-  ...props
-}) => (
+const AccordionToggle = ({ className, id, isExpanded, children, ...props }) => (
   <dt>
     <h3>
       <button
@@ -21,8 +15,8 @@ const AccordionToggle = ({
         aria-expanded={isExpanded}
       >
         <span className={css(styles.accordionToggleText)}>{children}</span>
-        <span className={css(styles.accordionToggleIcon)}>
-          <AngleRightIcon />
+        <span>
+          <AngleRightIcon className={css(styles.accordionToggleIcon)} />
         </span>
       </button>
     </h3>

From 2ff69e7ac5ee6db6df1ddce9b11dfb29799b935a Mon Sep 17 00:00:00 2001
From: Donald Labaj <donald.labaj@gmail.com>
Date: Fri, 26 Apr 2019 16:43:03 -0400
Subject: [PATCH 4/4] Removed span around angle right icon.

---
 .../react-core/src/components/Accordion/AccordionToggle.js    | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js b/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js
index dd62f56d1c3..9c4ea00fcc5 100644
--- a/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js
+++ b/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js
@@ -15,9 +15,7 @@ const AccordionToggle = ({ className, id, isExpanded, children, ...props }) => (
         aria-expanded={isExpanded}
       >
         <span className={css(styles.accordionToggleText)}>{children}</span>
-        <span>
-          <AngleRightIcon className={css(styles.accordionToggleIcon)} />
-        </span>
+        <AngleRightIcon className={css(styles.accordionToggleIcon)} />
       </button>
     </h3>
   </dt>