Add collapser component

src/@newrelic/gatsby-theme-newrelic/icons/feather.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import defaultIcons from '@newrelic/gatsby-theme-newrelic/src/icons/feather';
+
+export default {
+  ...defaultIcons,
+  'chevron-down': <polyline points="6 9 12 15 18 9" />,
+};

src/components/Collapser.js

@@ -0,0 +1,109 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/core';
+import { Icon } from '@newrelic/gatsby-theme-newrelic';
+
+const collapserIcon = (isOpen) => css`
+  margin-left: auto;
+  transition: transform 0.6s ease;
+  color: var(--accent-text-color);
+  ${isOpen &&
+  `
+transform: rotate(180deg);`}
+`;
+
+const Collapser = ({ title, id, openByDefault, className, children }) => {
+  const [isOpen, toggleOpen] = useState(openByDefault);
+  const [height, setHeight] = useState(isOpen ? 'auto' : '0px');
+
+  const content = useRef(null);
+  const toggleCollapser = () => {
+    toggleOpen(!isOpen);
+    setHeight(isOpen ? '0px' : `${content.current.scrollHeight}px`);
+  };
+
+  return (
+    <div
+      className={className}
+      css={css`
+        display: flex;
+        flex-direction: column;
+        border-radius: 3px;
+      `}
+    >
+      <button
+        onClick={toggleCollapser}
+        type="button"
+        css={css`
+          cursor: pointer;
+          padding: 0.75rem;
+          background-color: inherit;
+          border-radius: 3px;
+          display: flex;
+          align-items: center;
+          transition: background-color 0.6s ease;
+          border: 1px solid var(--border-color);
+          ${isOpen && `border-bottom: 1px dotted var(--border-color);`}
+          &:hover,
+          &:focus {
+            background-color: var(--color-neutrals-100);
+            outline: none;
+            .dark-mode & {
+              background-color: var(--color-dark-100);
+            }
+          }
+        `}
+      >
+        <h5
+          id={id}
+          css={css`
+            font-size: 1rem;
+            margin-top: 0;
+            margin-bottom: 0;
+          `}
+        >
+          {title}
+        </h5>
+        <Icon
+          name={Icon.TYPE.CHEVRON_DOWN}
+          size="1.25rem"
+          css={collapserIcon(isOpen)}
+        />
+      </button>
+      <div
+        ref={content}
+        css={css`
+          overflow: hidden;
+          transition: max-height 0.6s ease;
+          max-height: ${height};
+          border-left: 1px solid var(--border-color);
+          border-bottom: 1px solid var(--border-color);
+          border-right: 1px solid var(--border-color);
+          ${!isOpen && `border-bottom: none`}
+        `}
+      >
+        <div
+          css={css`
+            padding: 1rem;
+          `}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Collapser.propTypes = {
+  title: PropTypes.string.isRequired,
+  id: PropTypes.string,
+  openByDefault: PropTypes.bool,
+  className: PropTypes.string,
+  children: PropTypes.node.isRequired,
+};
+
+Collapser.defaultProps = {
+  openByDefault: false,
+};
+
+export default Collapser;

src/components/CollapserGroup.js

@@ -0,0 +1,27 @@
+import React, { Children, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import { ClassNames } from '@emotion/core';
+
+const CollapserGroup = ({ children }) => {
+  return (
+    <div>
+      <ClassNames>
+        {({ css }) => {
+          return Children.map(children, (child) =>
+            cloneElement(child, {
+              className: css`
+                margin-bottom: 1rem;
+              `,
+            })
+          );
+        }}
+      </ClassNames>
+    </div>
+  );
+};
+
+CollapserGroup.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default CollapserGroup;

src/components/MDXContainer.js

@@ -4,6 +4,8 @@ import { css } from '@emotion/core';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
 import { MDXProvider } from '@mdx-js/react';
 import { MDXCodeBlock, Callout, Video } from '@newrelic/gatsby-theme-newrelic';
+import Collapser from './Collapser';
+import CollapserGroup from './CollapserGroup';
 
 const Wrapper = ({ children }) => (
   <div
@@ -62,6 +64,8 @@ const components = {
   pre: (props) => props.children,
   wrapper: Wrapper,
   Callout,
+  Collapser,
+  CollapserGroup,
   Video,
 };
 

src/content/kitchen-sink.mdx

@@ -0,0 +1,37 @@
+---
+title: Collapser example
+contentType: page
+template: basicDoc
+topics:
+  - Mobile apps
+  - New Relic Mobile apps
+  - Android app
+japaneseVersion: ''
+---
+## Single collapser
+
+<Collapser id="example" openByDefault={true} title="Row 1">
+  Children content [link text](https://example.com) here. 
+  1. Something 
+  2. Something else
+      - Nested item
+      ```
+      Code block
+      ```
+</Collapser>
+
+## A collapser group
+<CollapserGroup>
+  <Collapser id="example" openByDefault={true} title="Row 1">
+    Children content [link text](https://example.com) here. 
+    1. Something 
+    2. Something else
+        - Nested item
+        ```
+        Code block
+        ```
+  </Collapser>
+  <Collapser title="Row 2">
+    Children content here.
+  </Collapser>
+</CollapserGroup>

src/templates/basicDoc.js

@@ -2,13 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { graphql } from 'gatsby';
 import MDXContainer from '../components/MDXContainer';
+import { GlobalHeader } from '@newrelic/gatsby-theme-newrelic';
 
 const basicDocPageTemplate = ({ data }) => {
   const { mdx } = data;
   const { frontmatter, body } = mdx;
 
   return (
     <>
+      <GlobalHeader />
       <h1>{frontmatter.title}</h1>
       <MDXContainer>{body}</MDXContainer>
     </>