Allow EuiAccordion state to be controlled from outside

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- `forceClose` prop can controll `EuiAccordion` state from outside ([#3240](https://github.com/elastic/eui/pull/3240))
+
 **Deprecation**
 
 - Updated makeId to DEPRECATED, shifted all the calls to htmlIdGenerator ([#3129](https://github.com/elastic/eui/pull/3129))

src-docs/src/views/accordion/accordion_example.js

@@ -100,6 +100,16 @@ 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);
+const accordionForceCloseSnippet = `<EuiAccordion
+  id={accordionId}
+  forceClose={true}
+  buttonContent="Click me to toggle open / close">
+    <!-- Content to show when expanded -->
+</EuiAccordion>`;
+
 export const AccordionExample = {
   title: 'Accordion',
   intro: (
@@ -279,6 +289,7 @@ export const AccordionExample = {
       snippet: accordionCallbackSnippet,
       demo: <AccordionCallback />,
     },
+
     {
       title: 'Accordion content can dynamically change height',
       source: [
@@ -320,5 +331,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: accordionForceCloseSnippet,
+      demo: <AccordionForceClose />,
+    },
   ],
 };

src-docs/src/views/accordion/accordion_forceClose.js

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+
+import {
+  EuiAccordion,
+  EuiText,
+  EuiSwitch,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default () => {
+  const [trigger, setTrigger] = useState('close');
+  const onChange = e => {
+    setTrigger(e.target.checked ? 'open' : 'close');
+  };
+
+  return (
+    <div>
+      <EuiSwitch
+        label={trigger !== 'open' ? 'open' : 'close'}
+        checked={trigger === 'open'}
+        onChange={onChange}
+      />
+      <EuiSpacer />
+      <EuiAccordion
+        id="accordion1"
+        trigger={trigger}
+        buttonContent="Click me to toggle open / close">
+        <EuiText>
+          <p>
+            Any content inside of <strong>EuiAccordion</strong> will appear
+            here.
+          </p>
+        </EuiText>
+      </EuiAccordion>
+    </div>
+  );
+};

src/components/accordion/__snapshots__/accordion.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EuiAccordion behavior closes when clicked twice 1`] = `
 <EuiAccordion
   arrowDisplay="left"
-  id="8"
+  id="9"
   initialIsOpen={false}
   paddingSize="none"
 >
@@ -14,7 +14,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
       className="euiAccordion__triggerWrapper"
     >
       <button
-        aria-controls="8"
+        aria-controls="9"
         aria-expanded={false}
         className="euiAccordion__button"
         onClick={[Function]}
@@ -42,7 +42,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
     </div>
     <div
       className="euiAccordion__childWrapper"
-      id="8"
+      id="9"
     >
       <EuiResizeObserver
         onResize={[Function]}
@@ -61,7 +61,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
 exports[`EuiAccordion behavior opens when clicked once 1`] = `
 <EuiAccordion
   arrowDisplay="left"
-  id="7"
+  id="8"
   initialIsOpen={false}
   paddingSize="none"
 >
@@ -72,7 +72,7 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
       className="euiAccordion__triggerWrapper"
     >
       <button
-        aria-controls="7"
+        aria-controls="8"
         aria-expanded={true}
         className="euiAccordion__button"
         onClick={[Function]}
@@ -100,7 +100,7 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
     </div>
     <div
       className="euiAccordion__childWrapper"
-      id="7"
+      id="8"
     >
       <EuiResizeObserver
         onResize={[Function]}
@@ -405,3 +405,46 @@ exports[`EuiAccordion props initialIsOpen is rendered 1`] = `
   </div>
 </div>
 `;
+
+exports[`EuiAccordion props trigger is rendered 1`] = `
+<div
+  class="euiAccordion"
+>
+  <div
+    class="euiAccordion__triggerWrapper"
+  >
+    <button
+      aria-controls="7"
+      aria-expanded="false"
+      class="euiAccordion__button"
+      type="button"
+    >
+      <span
+        class="euiAccordion__iconWrapper"
+      >
+        <div
+          class="euiAccordion__icon"
+          data-euiicon-type="arrowRight"
+        />
+      </span>
+      <span
+        class="euiIEFlexWrapFix"
+      />
+    </button>
+  </div>
+  <div
+    class="euiAccordion__childWrapper"
+    id="7"
+  >
+    <div>
+      <div
+        class=""
+      >
+        <p>
+          You can not see me.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/accordion/accordion.test.tsx

@@ -87,6 +87,18 @@ describe('EuiAccordion', () => {
         expect(component).toMatchSnapshot();
       });
     });
+
+    describe('trigger', () => {
+      it('is rendered', () => {
+        const component = render(
+          <EuiAccordion id={getId()} trigger="close">
+            <p>You can not see me.</p>
+          </EuiAccordion>
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
   });
 
   describe('behavior', () => {

src/components/accordion/accordion.tsx

@@ -54,6 +54,10 @@ export type EuiAccordionProps = HTMLAttributes<HTMLDivElement> &
      * Placing on the `right` doesn't work with `extraAction` and so it will be ignored
      */
     arrowDisplay?: 'left' | 'right' | 'none';
+    /**
+     * Control the opening of accordin via prop
+     */
+    trigger?: 'close' | 'open';
   };
 
 export class EuiAccordion extends Component<
@@ -70,7 +74,9 @@ export class EuiAccordion extends Component<
   childWrapper: HTMLDivElement | null = null;
 
   state = {
-    isOpen: this.props.initialIsOpen,
+    isOpen: this.props.trigger
+      ? this.props.trigger === 'open'
+      : this.props.initialIsOpen,
   };
 
   setChildContentHeight = () => {
@@ -93,12 +99,14 @@ export class EuiAccordion extends Component<
   }
 
   onToggle = () => {
+    const { trigger } = this.props;
     this.setState(
       prevState => ({
-        isOpen: !prevState.isOpen,
+        isOpen: trigger ? trigger === 'open' : !prevState.isOpen,
       }),
       () => {
-        this.props.onToggle && this.props.onToggle(this.state.isOpen);
+        this.props.onToggle &&
+          this.props.onToggle(trigger ? trigger === 'open' : this.state.isOpen);
       }
     );
   };
@@ -119,13 +127,16 @@ export class EuiAccordion extends Component<
       paddingSize,
       initialIsOpen,
       arrowDisplay,
+      trigger,
       ...rest
     } = this.props;
 
+    const isOpen = trigger ? trigger === 'open' : this.state.isOpen;
+
     const classes = classNames(
       'euiAccordion',
       {
-        'euiAccordion-isOpen': this.state.isOpen,
+        'euiAccordion-isOpen': isOpen,
       },
       className
     );
@@ -143,7 +154,7 @@ export class EuiAccordion extends Component<
     );
 
     const iconClasses = classNames('euiAccordion__icon', {
-      'euiAccordion__icon-isOpen': this.state.isOpen,
+      'euiAccordion__icon-isOpen': isOpen,
     });
 
     let icon;
@@ -168,7 +179,7 @@ export class EuiAccordion extends Component<
         <div className="euiAccordion__triggerWrapper">
           <button
             aria-controls={id}
-            aria-expanded={!!this.state.isOpen}
+            aria-expanded={isOpen}
             onClick={this.onToggle}
             className={buttonClasses}
             type="button">