feat(ui): add Accordion component

ui/package-lock.json

@@ -14792,6 +14792,11 @@
         "@babel/runtime": "^7.0.0"
       }
     },
+    "react-collapsible": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-collapsible/-/react-collapsible-2.6.0.tgz",
+      "integrity": "sha512-r4JSoqh3C3sUIzEr9eXtDC4WPNZsOffO1EeA3ZvyS7JeDIOwmfov9p/380XyewFhqW2B8MHY8IHQ2x1HH5PTxQ=="
+    },
     "react-color": {
       "version": "2.17.3",
       "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.17.3.tgz",

ui/package.json

@@ -31,6 +31,7 @@
     "react": "16.9.0",
     "react-app-polyfill": "1.0.2",
     "react-autosuggest": "9.4.3",
+    "react-collapsible": "2.6.0",
     "react-datepicker": "2.9.6",
     "react-dom": "16.9.0",
     "react-highlighter": "0.4.3",

ui/src/Components/Accordion/index.js

@@ -0,0 +1,40 @@
+import React from "react";
+
+import Collapsible from "react-collapsible";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
+
+const Trigger = ({ text, isOpen }) => (
+  <div className="d-flex flex-row justify-content-between">
+    <div>{text}</div>
+    <div>
+      <FontAwesomeIcon
+        icon={isOpen ? faChevronDown : faChevronUp}
+        className="text-muted"
+      />
+    </div>
+  </div>
+);
+
+const Accordion = ({ text, content, extraProps }) => (
+  <Collapsible
+    triggerTagName="div"
+    transitionTime={50}
+    overflowWhenOpen="visible"
+    className="card"
+    openedClassName="card"
+    triggerClassName="card-header cursor-pointer"
+    triggerOpenedClassName="card-header cursor-pointer bg-light"
+    contentOuterClassName="collapse show"
+    contentInnerClassName="card-body my-2"
+    {...extraProps}
+    trigger={<Trigger text={text} isOpen={false} />}
+    triggerWhenOpen={<Trigger text={text} isOpen={true} />}
+  >
+    {content}
+  </Collapsible>
+);
+
+export { Accordion };