Accordion components

src/components/Accordion/Accordion.scss

@@ -0,0 +1,24 @@
+@import "../../assets/scss/globals";
+
+.accordion {
+  padding: 0.2em;
+
+  button {
+    display: flex;
+    flex-flow: row nowrap;
+    border-color: $light-turquoise;
+    border-width: 1px;
+    background-color: $white;
+    width: 100%;
+  }
+
+  h5 {
+    display: flex;
+    flex: 9;
+    text-align: center;
+    padding-left: 1em;
+    color: $blue;
+    font-size: 1.125em;
+    margin: auto;
+  }
+}

src/components/Accordion/Accordion.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import "./Accordion.scss";
+import AccordionIcon from "../AccordionIcon";
+
+export interface AccordionProps {}
+export interface AccordionState {}
+
+class Accordion extends React.Component<AccordionProps, AccordionState> {
+  render() {
+    return (
+      <div className="accordion">
+        <button>
+          <AccordionIcon>
+
+          </AccordionIcon>
+          <h5>{this.props.children}</h5>
+        </button>
+      </div>
+    );
+  }
+}
+
+export default Accordion;

src/components/Accordion/index.ts

@@ -0,0 +1,2 @@
+import Accordion from "./Accordion";
+export default Accordion;

src/components/AccordionIcon/AccordionIcon.scss

@@ -0,0 +1,17 @@
+@import "../../assets/scss/globals";
+
+.accordion-icon {
+  display: flex;
+  flex: 1;
+  flex-grow: 1;
+  background-color: $blue;
+  color: $white;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  max-width: 40px;
+  min-height: 40px;
+  max-height: 40px;
+  margin: 0.2em;
+  font-size: 40px;
+}

src/components/AccordionIcon/AccordionIcon.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import "./AccordionIcon.scss";
+
+export interface AccordionIconProps {}
+export interface AccordionIconState {}
+
+class AccordionIcon extends React.Component<AccordionIconProps, AccordionIconState> {
+  render() {
+    return (
+      <div className="accordion-icon">
+        +
+      </div>
+    );
+  }
+}
+
+export default AccordionIcon;

src/components/AccordionIcon/index.ts

@@ -0,0 +1,2 @@
+import AccordionIcon from "./AccordionIcon";
+export default AccordionIcon;