From 80b213da2bdbd89b9a78599eb2a5919e16bb1862 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Fri, 3 Apr 2020 14:15:22 +0530
Subject: [PATCH] Allow  state to be controlled from outside

---
 .../src/views/accordion/accordion_example.js  | 27 +++++++++++++++
 .../views/accordion/accordion_forceClose.js   | 33 +++++++++++++++++++
 src/components/accordion/accordion.tsx        |  8 +++--
 3 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100644 src-docs/src/views/accordion/accordion_forceClose.js

diff --git a/src-docs/src/views/accordion/accordion_example.js b/src-docs/src/views/accordion/accordion_example.js
index 573602805ca..bedf9dc31cf 100644
--- a/src-docs/src/views/accordion/accordion_example.js
+++ b/src-docs/src/views/accordion/accordion_example.js
@@ -100,6 +100,10 @@ import AccordionGrow from './accordion_grow';
 const accordionGrowSource = require('!!raw-loader!./accordion_grow');
 const accordionGrowHtml = renderToHtml(AccordionGrow);
 
+import AccordionForceClose from './accordion_forceClose';
+const accordionForceCloseSource = require('!!raw-loader!./accordion_forceClose');
+const accordionForceCloseHtml = renderToHtml(AccordionForceClose);
+
 export const AccordionExample = {
   title: 'Accordion',
   intro: (
@@ -279,6 +283,7 @@ export const AccordionExample = {
       snippet: accordionCallbackSnippet,
       demo: <AccordionCallback />,
     },
+
     {
       title: 'Accordion content can dynamically change height',
       source: [
@@ -320,5 +325,27 @@ export const AccordionExample = {
       ),
       demo: <AccordionForm />,
     },
+    {
+      title:
+        'Accordion state ,i.e, open and close can be controlled from outside',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: accordionForceCloseSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: accordionForceCloseHtml,
+        },
+      ],
+      text: (
+        <p>
+          Use the <EuiCode>forceClose</EuiCode> prop to controll open and close
+          state.
+        </p>
+      ),
+      snippet: accordionCallbackSnippet,
+      demo: <AccordionForceClose />,
+    },
   ],
 };
diff --git a/src-docs/src/views/accordion/accordion_forceClose.js b/src-docs/src/views/accordion/accordion_forceClose.js
new file mode 100644
index 00000000000..538725905db
--- /dev/null
+++ b/src-docs/src/views/accordion/accordion_forceClose.js
@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+
+import {
+  EuiAccordion,
+  EuiText,
+  EuiSwitch,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default () => {
+  const [forceClose, setForceClose] = useState(true);
+  const onChange = e => {
+    setForceClose(e.target.checked);
+  };
+
+  return (
+    <div>
+      <EuiSwitch label="forceClose" checked={forceClose} onChange={onChange} />
+      <EuiSpacer />
+      <EuiAccordion
+        id="accordion1"
+        forceClose={forceClose}
+        buttonContent="Click me to toggle open / close">
+        <EuiText>
+          <p>
+            Any content inside of <strong>EuiAccordion</strong> will appear
+            here.
+          </p>
+        </EuiText>
+      </EuiAccordion>
+    </div>
+  );
+};
diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx
index 139b07a0a94..4f6c41f9157 100644
--- a/src/components/accordion/accordion.tsx
+++ b/src/components/accordion/accordion.tsx
@@ -54,6 +54,7 @@ export type EuiAccordionProps = HTMLAttributes<HTMLDivElement> &
      * Placing on the `right` doesn't work with `extraAction` and so it will be ignored
      */
     arrowDisplay?: 'left' | 'right' | 'none';
+    forceClose?: boolean;
   };
 
 export class EuiAccordion extends Component<
@@ -119,13 +120,14 @@ export class EuiAccordion extends Component<
       paddingSize,
       initialIsOpen,
       arrowDisplay,
+      forceClose,
       ...rest
     } = this.props;
 
     const classes = classNames(
       'euiAccordion',
       {
-        'euiAccordion-isOpen': this.state.isOpen,
+        'euiAccordion-isOpen': this.state.isOpen && !forceClose,
       },
       className
     );
@@ -143,7 +145,7 @@ export class EuiAccordion extends Component<
     );
 
     const iconClasses = classNames('euiAccordion__icon', {
-      'euiAccordion__icon-isOpen': this.state.isOpen,
+      'euiAccordion__icon-isOpen': this.state.isOpen && !forceClose,
     });
 
     let icon;
@@ -168,7 +170,7 @@ export class EuiAccordion extends Component<
         <div className="euiAccordion__triggerWrapper">
           <button
             aria-controls={id}
-            aria-expanded={!!this.state.isOpen}
+            aria-expanded={!!this.state.isOpen && !forceClose}
             onClick={this.onToggle}
             className={buttonClasses}
             type="button">