[FEAT] Add accordion to theme

packages/example/src/data/nav-items.yaml

@@ -6,6 +6,8 @@
       path: /components/demo
     - title: Grid
       path: /components/Grid
+    - title: Accordion
+      path: /components/Accordion
     - title: DoDontExample
       path: /components/DoDontExample
     - title: Caption

packages/example/src/pages/components/Accordion.mdx

@@ -0,0 +1,51 @@
+---
+title: Accordion
+---
+
+<PageDescription>
+
+The `<Accordion>` and `<AccordionItem>` components are used together to display a list of content sections that can be toggled open by clicking the respective title of each section.
+
+</PageDescription>
+
+## Example
+
+<Accordion>
+  <AccordionItem title={(<div>Title 1</div>)}>Content Section</AccordionItem>
+  <AccordionItem title='Title 2'>Content Section</AccordionItem>
+  <AccordionItem title='Title 3'>Content Section</AccordionItem>
+</Accordion>
+
+
+
+## Code
+
+
+```
+<Accordion>
+  <AccordionItem title='Title 1'>Content Section</AccordionItem>
+  <AccordionItem title='Title 2'>Content Section</AccordionItem>
+  <AccordionItem title='Title 3'>Content Section</AccordionItem>
+</Accordion>
+```
+
+
+### `Accordion` Props
+
+| property  | propType | required | default | description                                                       |
+| --------  | -------- | -------- | ------- | ----------------------------------------------------------------- |
+| children  | node     |          |         | Pass in the children that will be rendered within the Accordion   |
+| className | string   |          |         | Specify an optional className to be applied to the container node |
+
+### `AccordionItem` Props
+
+| property        | propType | required | default                        | description                                                                         |
+| --------------- | -------- | -------- | -------------- ----------------| ----------------------------------------------------------------------------------- |
+| title           | node     |          | 'title'                        | The accordion title                                                                 |
+| renderExpando   | func     |          | props => <button {...props} /> | The callback function to render the expando button. Can be a React component class. |
+| iconDescription | string   |          | 'Expand/Collapse'              | The description of the expando icon                                                 |
+| open            | bool     |          | false                          | `true` to open the expando                                                          |
+| onClick         | func     |          | () => {}                       | The handler of the massaged `click` event.                                          |
+| onHeadingClick  | func     |          | () => {}                       | The handler of the massaged `click` event on the heading.                           |
+| children        | node     |          |                                | Provide the contents of your AccordionItem                                          |
+| className       | string   |          |                                | Specify an optional className to be applied to the container node                   |

packages/gatsby-theme-carbon/index.js

@@ -1,4 +1,5 @@
 // Generic MDX Components
+export { Accordion, AccordionItem } from './src/components/Accordion';
 export { AnchorLinks, AnchorLink } from './src/components/AnchorLinks';
 export { default as PageDescription } from './src/components/PageDescription';
 export { default as Video } from './src/components/Video/Video';

packages/gatsby-theme-carbon/src/components/Accordion/Accordion.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import cx from 'classnames';
+import { Accordion as CarbonAccordion } from 'carbon-components-react';
+import { accordion } from './Accordion.module.scss';
+
+const Accordion = ({ className, ...rest }) => (
+  <CarbonAccordion {...rest} className={cx(className, accordion)} />
+);
+export default Accordion;

packages/gatsby-theme-carbon/src/components/Accordion/Accordion.module.scss

@@ -0,0 +1,20 @@
+:global {
+  @import '~carbon-components/scss/components/accordion/accordion';
+}
+
+@import '~carbon-components/scss/globals/scss/vars';
+@import '~@carbon/elements/scss/type/type';
+
+.accordion {
+  width: 100%;
+  @include carbon--breakpoint('md') {
+    width: 75%;
+  }
+  @include carbon--breakpoint('lg') {
+    width: 58.33%;
+  }
+}
+
+.accordion :global(.bx--accordion__title) {
+  font-weight: bold;
+}

packages/gatsby-theme-carbon/src/components/Accordion/AccordionItem.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import cx from 'classnames';
+import { AccordionItem as CarbonAccordionItem } from 'carbon-components-react';
+
+const AccordionItem = ({ className, children, ...rest }) => (
+  <CarbonAccordionItem {...rest} className={cx(className)}>
+    {children}
+  </CarbonAccordionItem>
+);
+
+export default AccordionItem;

packages/gatsby-theme-carbon/src/components/Accordion/index.js

@@ -0,0 +1,2 @@
+export { default as Accordion } from './Accordion';
+export { default as AccordionItem } from './AccordionItem';

packages/gatsby-theme-carbon/src/components/MDXProvider/defaultComponents.js

@@ -16,6 +16,7 @@ import { Row, Column, Grid } from '../Grid';
 import { AnchorLink, AnchorLinks } from '../AnchorLinks';
 import { Tab, Tabs } from '../Tabs';
 import Link from '../Link';
+import { Accordion, AccordionItem } from '../Accordion';
 
 const components = {
   wrapper: function Wrapper({ children, ...props }) {
@@ -34,6 +35,8 @@ const components = {
   table: PageTable,
   a: Link,
   PageDescription,
+  Accordion,
+  AccordionItem,
   Video,
   DoDontExample,
   Row,