Feature/interview scheduler gui

package.json

@@ -60,7 +60,9 @@
     "axios": "^0.21.0",
     "classnames": "^2.2.6",
     "express": "^4.17.1",
+    "faker": "^5.5.3",
     "final-form": "^4.20.1",
+    "final-form-arrays": "^3.0.2",
     "immutability-helper": "^3.1.1",
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
@@ -71,6 +73,7 @@
     "react-datepicker": "^3.4.1",
     "react-dom": "^16.12.0",
     "react-final-form": "^6.5.2",
+    "react-final-form-arrays": "^3.1.3",
     "react-loader-spinner": "^4.0.0",
     "react-outside-click-handler": "^1.3.0",
     "react-popper": "^2.2.3",

src/components/Accordion/index.jsx

@@ -0,0 +1,44 @@
+/**
+ * Accordion
+ *
+ * An expandable item which can be used
+ * repeatadly to form an accordion style display
+ */
+
+import React, { useState } from "react";
+import PT from "prop-types";
+import "./styles.module.scss";
+
+function Accordion(props) {
+  const { title, sidebar, subhead, children } = props;
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div styleName="accordion">
+      <button onClick={() => setIsOpen(!isOpen)} styleName="button">
+        {isOpen ? (
+          <div styleName="down-arrow" />
+        ) : (
+          <div styleName="right-arrow" />
+        )}
+        <div styleName="heading">
+          <div>
+            <h4 styleName="title">{title}</h4>
+            <p>{subhead}</p>
+          </div>
+          <p>{sidebar}</p>
+        </div>
+      </button>
+      {isOpen && <div styleName="panel">{children}</div>}
+    </div>
+  );
+}
+
+Accordion.propTypes = {
+  title: PT.string,
+  sidebar: PT.string,
+  subhead: PT.string,
+  children: PT.node,
+};
+
+export default Accordion;

src/components/Accordion/styles.module.scss

@@ -0,0 +1,70 @@
+@import "styles/include";
+
+.accordion {
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e9e9e9;
+}
+
+.button {
+  cursor: pointer;
+  width: 100%;
+  border: none;
+  outline: none;
+  background-color: #fff;
+  color: #2a2a2a;
+  display: flex;
+  text-align: left;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 15px 0 10px 0;
+
+  p {
+    @include font-roboto;
+    font-size: 14px;
+  }
+}
+
+.down-arrow {
+  display: inline-block;
+  content: '';
+  height: 13px;
+  width: 13px;
+  margin-right: 16px;
+  border-bottom: 3px solid #137D60;
+  border-right: 3px solid #137D60;
+  transform: rotate(45deg);
+}
+
+.right-arrow {
+  display: inline-block;
+  content: '';
+  height: 13px;
+  width: 13px;
+  margin-right: 16px;
+  border-bottom: 3px solid #137D60;
+  border-right: 3px solid #137D60;
+  transform: rotate(-45deg);
+}
+
+.heading {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.title {
+  @include font-barlow;
+  font-weight: 600;
+  font-size: 20px;
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
+}
+
+.panel {
+  padding-left: 28px;
+  font-size: 14px;
+}

src/components/Radio/index.jsx

@@ -0,0 +1,45 @@
+/**
+ * Radio
+ *
+ * A styled radio button
+ * Used in RadioFieldGroup component
+ */
+
+import React from "react";
+import PT from "prop-types";
+import cn from "classnames";
+import "./styles.module.scss";
+
+function Radio(props) {
+  return (
+    <label styleName={cn("container", { horizontal: props.horizontal })}>
+      <input
+        styleName="radio-input"
+        type={props.type}
+        name={props.name}
+        value={props.value}
+        checked={props.checked}
+        disabled={props.disabled}
+        onBlur={props.onBlur}
+        onFocus={props.onFocus}
+        onChange={props.onChange}
+      />
+      <span styleName="custom" />
+      {props.label}
+    </label>
+  );
+}
+
+Radio.propTypes = {
+  onChange: PT.func,
+  onBlur: PT.func,
+  onFocus: PT.func,
+  value: PT.string.isRequired,
+  disabled: PT.bool,
+  type: PT.string.isRequired,
+  label: PT.string,
+  checked: PT.bool,
+  horizontal: PT.bool,
+};
+
+export default Radio;

src/components/Radio/styles.module.scss

@@ -0,0 +1,59 @@
+.radio-input {
+  width: auto;
+  height: auto;
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.container {
+  display: block;
+  position: relative;
+  padding-left: 35px;
+  margin-bottom: 24px;
+  cursor: pointer;
+  font-size: 14px;
+  user-select: none;
+
+  &.horizontal {
+    margin-bottom: 0;
+    display: inline-block;
+    margin-left: 24px;
+  }
+}
+
+.custom {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 24px;
+  width: 24px;
+  background-color: #fff;
+  border-radius: 50%;
+  border: 1px solid #AAA;
+}
+
+.radio-input:checked ~ .custom {
+  background-color: #0AB88A;
+  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.29);
+}
+
+.custom:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+.radio-input:checked ~ .custom:after {
+  display: block;
+}
+
+.container .custom:after {
+  top: 5px;
+  left: 5px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
+  background: white;
+}

src/components/RadioFieldGroup/index.jsx

@@ -0,0 +1,48 @@
+/**
+ * RadioFieldGroup
+ *
+ * Component that takes a configuration object
+ * and returns a group of react-final-form radio fields
+ */
+
+import React from "react";
+import PT from "prop-types";
+import Radio from "components/Radio";
+import { Field } from "react-final-form";
+
+function RadioFieldGroup({ name, isHorizontal, radios }) {
+  return (
+    <div>
+      {radios.map((radio) => (
+        <Field name={name} type="radio" value={radio.value}>
+          {({ input }) => (
+            <Radio
+              label={radio.label}
+              type="radio"
+              name={input.name}
+              value={input.value}
+              horizontal={isHorizontal}
+              onChange={input.onChange}
+              onBlur={input.onBlur}
+              onFocus={input.onFocus}
+              checked={input.checked}
+            />
+          )}
+        </Field>
+      ))}
+    </div>
+  );
+}
+
+RadioFieldGroup.propTypes = {
+  name: PT.string.isRequired,
+  isHorizontal: PT.bool,
+  radios: PT.arrayOf(
+    PT.shape({
+      label: PT.string.isRequired,
+      value: PT.any.isRequired,
+    })
+  ),
+};
+
+export default RadioFieldGroup;