Refactor Accordion and AccordionItem components (#988)

* Refactor Accordion to enable nodes in title prop

* Move docs-specific logic to docs

Author: tcbegley

docs/static/docs.css

@@ -266,6 +266,11 @@ span.hljs-meta {
   font-size: 2rem;
 }
 
+.dbcd-main h2.accordion-header {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 .dbcd-main h3 {
   margin-top: 1rem;
   margin-bottom: 0.5rem;

src/components/accordion/Accordion.js

@@ -3,11 +3,8 @@ import PropTypes from 'prop-types';
 import {omit} from 'ramda';
 import RBAccordion from 'react-bootstrap/Accordion';
 
-import {
-  parseChildrenToArray,
-  resolveChildProps,
-  stringifyId
-} from '../../private/util';
+import {parseChildrenToArray, resolveChildProps} from '../../private/util';
+import {AccordionContext} from '../../private/AccordionContext';
 
 /**
  * A self contained Accordion component. Build up the children using the
@@ -62,42 +59,11 @@ const Accordion = props => {
     children &&
     children.map((child, idx) => {
       const childProps = resolveChildProps(child);
-      const {
-        title,
-        item_id,
-        loading_state,
-        class_name,
-        className,
-        id,
-        ...otherProps
-      } = childProps;
-      const itemID = item_id || 'item-' + idx;
+      const itemID = childProps.item_id || `item-${idx}`;
       return (
-        <RBAccordion.Item
-          id={stringifyId(id)}
-          key={itemID}
-          eventKey={itemID}
-          className={class_name || className}
-          {...omit(
-            ['setProps', 'persistence', 'persistence_type', 'persisted_props'],
-            otherProps
-          )}
-          data-dash-is-loading={
-            (loading_state && loading_state.is_loading) || undefined
-          }
-        >
-          <RBAccordion.Header
-            onClick={() => {
-              toggle(itemID);
-            }}
-            // .dbcd-main h2 has margins defined on it - we need to make
-            // sure to overwrite them
-            style={{marginTop: '0rem', marginBottom: '0rem'}}
-          >
-            {title}
-          </RBAccordion.Header>
-          <RBAccordion.Body>{child}</RBAccordion.Body>
-        </RBAccordion.Item>
+        <AccordionContext.Provider key={itemID} value={{toggle, idx}}>
+          {child}
+        </AccordionContext.Provider>
       );
     });
 

src/components/accordion/AccordionItem.js

@@ -1,11 +1,50 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import PropTypes from 'prop-types';
+import {omit} from 'ramda';
+import RBAccordion from 'react-bootstrap/Accordion';
+
+import {stringifyId} from '../../private/util';
+import {AccordionContext} from '../../private/AccordionContext';
 
 /**
  * A component to build up the children of the accordion.
  */
-const AccordionItem = props => {
-  return <>{props.children}</>;
+const AccordionItem = ({
+  title,
+  item_id,
+  loading_state,
+  class_name,
+  className,
+  id,
+  children,
+  ...otherProps
+}) => {
+  const {toggle, idx} = useContext(AccordionContext);
+  const itemID = item_id || `item-${idx}`;
+  return (
+    <RBAccordion.Item
+      id={stringifyId(id)}
+      key={itemID}
+      eventKey={itemID}
+      className={class_name || className}
+      {...omit(
+        ['setProps', 'persistence', 'persistence_type', 'persisted_props'],
+        otherProps
+      )}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
+      <RBAccordion.Header
+        onClick={() => {
+          toggle(itemID);
+        }}
+      >
+        {title}
+      </RBAccordion.Header>
+      <RBAccordion.Body>{children}</RBAccordion.Body>
+    </RBAccordion.Item>
+  );
 };
 
 AccordionItem.propTypes = {
@@ -41,7 +80,7 @@ AccordionItem.propTypes = {
   /**
    * The title on display in the collapsed accordion item.
    */
-  title: PropTypes.string,
+  title: PropTypes.node,
 
   /**
    * Optional identifier for item used for determining which item is visible

src/components/placeholder/__tests__/Placeholder.test.js

@@ -136,8 +136,6 @@ describe('Placeholder', () => {
       </Placeholder>
     );
 
-    console.log(placeholderStyle.firstChild.style);
-
     expect(placeholderStyle.firstChild).toHaveStyle({
       width: '5rem',
       height: '5rem'

src/private/AccordionContext.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+/**
+ * AccordionContext
+ * {
+ *  toggle: PropTypes.func.isRequired,
+ *  idx: PropTypes.number.isRequired
+ * }
+ */
+export const AccordionContext = React.createContext({});