pagesource · soumya-sunny · Nov 13, 2020
diff --git a/lib/components/molecules/Accordion/Accordion.js b/lib/components/molecules/Accordion/Accordion.js
@@ -3,23 +3,32 @@
  * Accordion
  *
  */
-import React, { useState } from 'react';
+import React, { useState, useContext, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import classnames from 'classnames';
 import styles from './Accordion.style';
 
+const AccordionContext = React.createContext({});
+
 const AccordionHeader = ({
   children,
   className,
   ariaLabel,
   accordionPanelId,
   isExpanded,
-  toggleExpanded,
+  disabled,
 }) => {
-  const handleClick = () => toggleExpanded(!isExpanded);
-  const handleOnKeyPress = (event) => event.keyCode === 13 && toggleExpanded(!isExpanded);
+  const { onToggle } = useContext(AccordionContext);
+
+  const handleClick = (event) => {
+    if (!disabled) {
+      onToggle(accordionPanelId);
+    }
+    event.preventDefault();
+  };
 
+  const handleOnKeyPress = (event) => event.keyCode === 13 && onToggle(accordionPanelId);
   return (
     <summary
       className={className}
@@ -30,6 +39,8 @@ const AccordionHeader = ({
       onClick={handleClick}
       onKeyPress={handleOnKeyPress}
       tabIndex="0"
+      disabled={disabled}
+      aria-disabled={disabled}
     >
       {children}
     </summary>
@@ -42,32 +53,53 @@ AccordionHeader.propTypes = {
   ariaLabel: PropTypes.string,
   accordionPanelId: PropTypes.string.isRequired,
   isExpanded: PropTypes.bool.isRequired,
-  toggleExpanded: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
 };
 
 AccordionHeader.defaultProps = {
   className: 'accordion-header',
   ariaLabel: 'Accordion Header',
+  disabled: false,
 };
 
 /**
  * AccordionPanel
  *
  */
-const AccordionPanel = ({ className, children, id, renderPanelBody }) => {
-  const [isExpanded, toggleExpanded] = useState(false);
+export const AccordionPanel = ({
+  className,
+  children,
+  id,
+  renderPanelBody,
+  defaultExpanded,
+  disabled,
+}) => {
+  const { activeId, setActiveId } = useContext(AccordionContext);
+
+  useEffect(() => {
+    if (defaultExpanded) {
+      setActiveId(id);
+    }
+  }, [defaultExpanded]);
+
+  const isExpanded = id === activeId;
   const childrenWithHeaderProps = React.Children.map(children, (accordionHeader) => {
     if (accordionHeader.type.displayName === AccordionHeader.displayName)
       return React.cloneElement(accordionHeader, {
         accordionPanelId: id,
-        toggleExpanded,
         isExpanded,
+        disabled,
       });
     return false;
   });
 
   return (
-    <details className={classnames('accordion-panel', className)} id={id}>
+    <details
+      className={classnames('accordion-panel', className)}
+      id={id}
+      open={isExpanded}
+      disabled={disabled}
+    >
       {childrenWithHeaderProps}
       {renderPanelBody && (
         <div className={classnames('accordion-panel-content', className)} aria-hidden={!isExpanded}>
@@ -83,18 +115,39 @@ AccordionPanel.propTypes = {
   children: PropTypes.node.isRequired,
   id: PropTypes.string.isRequired,
   renderPanelBody: PropTypes.func.isRequired,
+  defaultExpanded: PropTypes.bool,
+  disabled: PropTypes.bool,
 };
 
 AccordionPanel.defaultProps = {
   className: 'panel',
+  defaultExpanded: false,
+  disabled: false,
 };
 
 AccordionPanel.Header = AccordionHeader;
 
 /**
  * Accordion
  */
-const Accordion = ({ className, children }) => <div className={className}>{children}</div>;
+const Accordion = ({ className, children }) => {
+  const [activeId, setActiveId] = useState('');
+
+  const onToggle = useCallback((id) => {
+    setActiveId(id);
+  });
+
+  const context = {
+    activeId,
+    setActiveId,
+    onToggle,
+  };
+  return (
+    <AccordionContext.Provider value={context}>
+      <div className={className}>{children}</div>
+    </AccordionContext.Provider>
+  );
+};
 
 Accordion.propTypes = {
   className: PropTypes.string,

diff --git a/lib/components/molecules/Accordion/Accordion.stories.mdx b/lib/components/molecules/Accordion/Accordion.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
 import Para from '../../atoms/Para';
 import Heading from '../../atoms/Heading';
-import Accordion, {AccordionVanilla} from '.';
+import Accordion, {AccordionVanilla,AccordionPanel} from '.';
 
 
 <Meta title="Molecules/Accordion" component={AccordionVanilla} />
@@ -27,7 +27,7 @@ import Accordion, {AccordionVanilla} from '.';
           </Heading>
         </Accordion.Panel.Header>
       </Accordion.Panel>
-      <Accordion.Panel
+      <Accordion.Panel  id="accordion-2" defaultExpanded={true} 
         renderPanelBody={() => (
           <Para>
             The purpose of lorem ipsum is to create a natural looking block of text (sentence,
@@ -51,3 +51,5 @@ import Accordion, {AccordionVanilla} from '.';
 
 <Props of={AccordionVanilla} />
 
+#### Accordion Panel
+<Props of={Accordion.Panel} />
diff --git a/lib/components/molecules/Accordion/Accordion.style.js b/lib/components/molecules/Accordion/Accordion.style.js
@@ -9,6 +9,9 @@ export default css`
     summary {
       cursor: pointer;
       padding: 20px 0;
+      &[disabled] {
+        cursor: not-allowed;
+      }
     }
     .accordion-panel-content {
       display: none;

diff --git a/lib/components/molecules/Accordion/tests/Accordion.test.js b/lib/components/molecules/Accordion/tests/Accordion.test.js
@@ -8,7 +8,13 @@ describe('<Accordion />', () => {
   beforeEach(() => {
     AccordionComponent = mount(
       <Accordion>
-        <Accordion.Panel>
+        <Accordion.Panel id="1" defaultExpanded renderPanelBody={() => <p>test</p>}>
+          <Accordion.Panel.Header />
+        </Accordion.Panel>
+        <Accordion.Panel id="2" renderPanelBody={() => <p>test 2</p>}>
+          <Accordion.Panel.Header />
+        </Accordion.Panel>
+        <Accordion.Panel id="3" disabled renderPanelBody={() => <p>test 2</p>}>
           <Accordion.Panel.Header />
         </Accordion.Panel>
       </Accordion>
@@ -19,23 +25,38 @@ describe('<Accordion />', () => {
     expect(AccordionComponent.exists()).toBe(true);
   });
 
-  test('should render <div/>', () => {
-    expect(AccordionComponent.find('div').length).toEqual(1);
-  });
-
   test('should render details', () => {
-    expect(AccordionComponent.find('details').length).toEqual(1);
+    expect(AccordionComponent.find('details').length).toEqual(3);
   });
 
   test('should render summary', () => {
-    expect(AccordionComponent.find('summary').length).toEqual(1);
+    expect(AccordionComponent.find('summary').length).toEqual(3);
+  });
+
+  test('should open the first panel by default', () => {
+    expect(AccordionComponent.find('summary').first().props()).toHaveProperty(
+      'aria-expanded',
+      true
+    );
+    expect(AccordionComponent.find('summary').at(1).props()).toHaveProperty('aria-expanded', false);
   });
 
   test('panel opens on click of header', () => {
-    AccordionComponent.find('summary').simulate('click');
-    expect(AccordionComponent.find('summary').props()).toHaveProperty('aria-expanded', true);
+    AccordionComponent.find('summary').at(1).simulate('click');
+    expect(AccordionComponent.find('summary').first().props()).toHaveProperty(
+      'aria-expanded',
+      false
+    );
+    expect(AccordionComponent.find('summary').at(1).props()).toHaveProperty('aria-expanded', true);
   });
 
+  test('should not open the disabled panel', () => {
+    AccordionComponent.find('summary').last().simulate('click');
+    expect(AccordionComponent.find('summary').last().props()).toHaveProperty(
+      'aria-expanded',
+      false
+    );
+  });
   test('should render correctly', () => {
     expect(AccordionComponent).toMatchSnapshot();
   });

diff --git a/lib/components/molecules/Accordion/tests/__snapshots__/Accordion.test.js.snap b/lib/components/molecules/Accordion/tests/__snapshots__/Accordion.test.js.snap
@@ -3,34 +3,141 @@
 exports[`<Accordion /> should render correctly 1`] = `
 <Accordion__StyledAccordion>
   <Accordion
-    className="Accordion__StyledAccordion-vybsad-0 gvcbpS"
+    className="Accordion__StyledAccordion-vybsad-0 cmXrDH"
   >
     <div
-      className="Accordion__StyledAccordion-vybsad-0 gvcbpS"
+      className="Accordion__StyledAccordion-vybsad-0 cmXrDH"
     >
       <AccordionPanel
         className="panel"
+        defaultExpanded={true}
+        disabled={false}
+        id="1"
+        renderPanelBody={[Function]}
       >
         <details
           className="accordion-panel panel"
+          disabled={false}
+          id="1"
+          open={true}
         >
           <AccordionHeader
+            accordionPanelId="1"
             ariaLabel="Accordion Header"
             className="accordion-header"
+            disabled={false}
+            isExpanded={true}
+            key=".0"
+          >
+            <summary
+              aria-disabled={false}
+              aria-expanded={true}
+              aria-label="Accordion Header"
+              aria-labelledby="1"
+              className="accordion-header"
+              disabled={false}
+              onClick={[Function]}
+              onKeyPress={[Function]}
+              role="button"
+              tabIndex="0"
+            />
+          </AccordionHeader>
+          <div
+            aria-hidden={false}
+            className="accordion-panel-content panel"
+          >
+            <p>
+              test
+            </p>
+          </div>
+        </details>
+      </AccordionPanel>
+      <AccordionPanel
+        className="panel"
+        defaultExpanded={false}
+        disabled={false}
+        id="2"
+        renderPanelBody={[Function]}
+      >
+        <details
+          className="accordion-panel panel"
+          disabled={false}
+          id="2"
+          open={false}
+        >
+          <AccordionHeader
+            accordionPanelId="2"
+            ariaLabel="Accordion Header"
+            className="accordion-header"
+            disabled={false}
             isExpanded={false}
             key=".0"
-            toggleExpanded={[Function]}
           >
             <summary
+              aria-disabled={false}
               aria-expanded={false}
               aria-label="Accordion Header"
+              aria-labelledby="2"
               className="accordion-header"
+              disabled={false}
               onClick={[Function]}
               onKeyPress={[Function]}
               role="button"
               tabIndex="0"
             />
           </AccordionHeader>
+          <div
+            aria-hidden={true}
+            className="accordion-panel-content panel"
+          >
+            <p>
+              test 2
+            </p>
+          </div>
+        </details>
+      </AccordionPanel>
+      <AccordionPanel
+        className="panel"
+        defaultExpanded={false}
+        disabled={true}
+        id="3"
+        renderPanelBody={[Function]}
+      >
+        <details
+          className="accordion-panel panel"
+          disabled={true}
+          id="3"
+          open={false}
+        >
+          <AccordionHeader
+            accordionPanelId="3"
+            ariaLabel="Accordion Header"
+            className="accordion-header"
+            disabled={true}
+            isExpanded={false}
+            key=".0"
+          >
+            <summary
+              aria-disabled={true}
+              aria-expanded={false}
+              aria-label="Accordion Header"
+              aria-labelledby="3"
+              className="accordion-header"
+              disabled={true}
+              onClick={[Function]}
+              onKeyPress={[Function]}
+              role="button"
+              tabIndex="0"
+            />
+          </AccordionHeader>
+          <div
+            aria-hidden={true}
+            className="accordion-panel-content panel"
+          >
+            <p>
+              test 2
+            </p>
+          </div>
         </details>
       </AccordionPanel>
     </div>