feat: Add useAccordionToggle hook

Adds a hook that API users can utilize to make custom
AccordionToggle components.y

src/AccordionToggle.js

@@ -1,7 +1,6 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import SelectableContext from './SelectableContext';
-import AccordionContext from './AccordionContext';
+import useAccordionToggle from './useAccordionToggle';
 
 const propTypes = {
   /** Set a custom element for this component */
@@ -32,24 +31,10 @@ const AccordionToggle = React.forwardRef(
     },
     ref,
   ) => {
-    const contextEventKey = useContext(AccordionContext);
-    const onSelect = useContext(SelectableContext);
+    const accordionOnClick = useAccordionToggle(eventKey, onClick);
 
     return (
-      <Component
-        ref={ref}
-        onClick={e => {
-          /* 
-            Compare the event key in context with the given event key.
-            If they are the same, then collapse the component.
-          */
-          let eventKeyPassed = eventKey === contextEventKey ? null : eventKey;
-
-          onSelect(eventKeyPassed, e);
-          if (onClick) onClick(e);
-        }}
-        {...props}
-      >
+      <Component ref={ref} onClick={accordionOnClick} {...props}>
         {children}
       </Component>
     );

src/index.js

@@ -1,4 +1,5 @@
 export Accordion from './Accordion';
+export useAccordionToggle from './useAccordionToggle';
 export Alert from './Alert';
 export Badge from './Badge';
 export Breadcrumb from './Breadcrumb';

src/useAccordionToggle.js

@@ -0,0 +1,19 @@
+import { useContext } from 'react';
+import SelectableContext from './SelectableContext';
+import AccordionContext from './AccordionContext';
+
+export default (eventKey, onClick) => {
+  const contextEventKey = useContext(AccordionContext);
+  const onSelect = useContext(SelectableContext);
+
+  return e => {
+    /* 
+      Compare the event key in context with the given event key.
+      If they are the same, then collapse the component.
+    */
+    let eventKeyPassed = eventKey === contextEventKey ? null : eventKey;
+
+    onSelect(eventKeyPassed, e);
+    if (onClick) onClick(e);
+  };
+};

www/src/examples/.eslintrc

@@ -69,6 +69,8 @@
 
     "ThemeProvider": false,
 
+    "useAccordionToggle": false, 
+
     "mountNode": false,
     "yup": false,
     "formik": false,

www/src/examples/Accordion/CustomToggle.js

@@ -0,0 +1,40 @@
+function CustomToggle({ children, eventKey }) {
+  const decoratedOnClick = useAccordionToggle(eventKey, () =>
+    console.log('totally custom!'),
+  );
+
+  return (
+    <button
+      type="button"
+      style={{ backgroundColor: 'pink' }}
+      onClick={decoratedOnClick}
+    >
+      {children}
+    </button>
+  );
+}
+
+function Example() {
+  return (
+    <Accordion defaultActiveKey="0">
+      <Card>
+        <Card.Header>
+          <CustomToggle eventKey="0">Click me!</CustomToggle>
+        </Card.Header>
+        <Accordion.Collapse eventKey="0">
+          <Card.Body>Hello! I'm the body</Card.Body>
+        </Accordion.Collapse>
+      </Card>
+      <Card>
+        <Card.Header>
+          <CustomToggle eventKey="1">Click me!</CustomToggle>
+        </Card.Header>
+        <Accordion.Collapse eventKey="1">
+          <Card.Body>Hello! I'm another body</Card.Body>
+        </Accordion.Collapse>
+      </Card>
+    </Accordion>
+  );
+}
+
+render(<Example />);

www/src/pages/components/accordion.mdx

@@ -7,6 +7,7 @@ import ReactPlayground from '../../components/ReactPlayground';
 import Basic from '../../examples/Accordion/Basic';
 import AllCollapse from '../../examples/Accordion/AllCollapse';
 import EntireHeaderClickable from '../../examples/Accordion/EntireHeaderClickable';
+import CustomToggle from '../../examples/Accordion/CustomToggle.js';
 
 # Accordion
 
@@ -37,12 +38,24 @@ underlying component to be a CardHeader component.
 
 <ReactPlayground codeText={EntireHeaderClickable} />
 
+### Custom Toggle
+
+You can now hook into the Accordion toggle functionality via `useAccordionToggle` to make custom toggle components.
+
+<ReactPlayground codeText={CustomToggle} />
+
 ## API
 
 <ComponentApi metadata={props.data.Accordion} />
 <ComponentApi metadata={props.data.AccordionToggle} exportedBy={props.data.Accordion} />
 <ComponentApi metadata={props.data.AccordionCollapse} exportedBy={props.data.Accordion} />
 
+### useAccordionToggle
+
+```js
+const decoratedOnClick = useAccordionToggle(eventKey, onClick);
+```
+
 export const query = graphql`
   query AccordionQuery {
     Accordion: componentMetadata(displayName: { eq: "Accordion" }) {