[olarft] Create Accordion component

src/tools/online-lar-formatting/Accordion.css

@@ -0,0 +1,55 @@
+.accordion-bordered {
+  margin-top: 0;
+  margin-bottom: 0;
+  list-style-type: none;
+  padding-left: 0;
+  color: #212121;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.accordion-bordered > li {
+  background-color: #f1f1f1;
+  font-family: SourceSansPro;
+  list-style: none;
+  margin-bottom: 0.5rem;
+  width: 100%;
+}
+
+.accordion-button {
+  background-color: #d6d7d9 !important;
+  background-image: url('../../filing/images/minus.png');
+  background-image: url('../../filing/images/minus.svg');
+  background-position: right 2rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5rem;
+  border-radius: 0;
+  color: #212121;
+  cursor: pointer;
+  display: inline-block;
+  margin-top: 0;
+  padding: .5rem 4rem .5rem .5em;
+  text-align: left;
+  width: 100%;
+}
+
+.accordion-button[aria-expanded='false'] {
+  background-image: url('../../filing/images/plus.png');
+  background-image: url('../../filing/images/plus.svg');
+}
+
+.accordion-content {
+  background-color: #ffffff;
+  border-top: none;
+  overflow: auto;
+  padding: 0em 1em 1em;
+}
+
+.accordion-content[aria-hidden='true'] {
+  display: none;
+}
+
+.accordion-content > *:first-child {
+  margin-top: 0;
+}

src/tools/online-lar-formatting/Accordion.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import './Accordion.css'
+
+function handleToggleClick(id) {
+  let accordionButton = document.getElementById(`accordion-button-${id}`)
+  let expanded =
+    accordionButton.getAttribute('aria-expanded') === 'false' ? false : true
+
+  document
+    .getElementById(`accordion-button-${id}`)
+    .setAttribute('aria-expanded', !expanded)
+  document
+    .getElementById(`accordion-${id}`)
+    .setAttribute('aria-hidden', expanded)
+}
+
+export const collapseAll = () => {
+  document
+    .querySelectorAll(`[id^="accordion-button-"]`)
+    .forEach(e => e.setAttribute('aria-expanded', false))
+  document
+    .querySelectorAll(`[id^="accordion-"]`)
+    .forEach(e => e.setAttribute('aria-hidden', true))
+}
+
+export const Accordion = ({ heading, content, id }) => {
+  return (
+    <ul className='accordion-bordered'>
+      <li>
+        <button
+          className='accordion-button'
+          aria-expanded='false'
+          id={`accordion-button-${id}`}
+          aria-controls={`accordion-${id}`}
+          onClick={event => handleToggleClick(id)}
+        >
+          {heading}
+        </button>
+        <div
+          id={`accordion-${id}`}
+          className='accordion-content'
+          aria-hidden='true'
+        >
+          {content || null}
+        </div>
+      </li>
+    </ul>
+  )
+}
+

src/tools/online-lar-formatting/index.css

@@ -115,10 +115,48 @@
   width: 6em;
 }
 .parsed-row .fieldName {
-  width: 40%;
+  width: 50%;
+}
+.parsed-row .accordion-bordered > li{
+  background-color: inherit;
+}
+.parsed-row .accordion-bordered .accordion-button {
+  background-color: white !important;
+  border-left: 5px solid white;
+}
+.parsed-row .accordion-bordered .accordion-button:hover {
+  color: black;
+  border-left: 5px dotted  darkolivegreen;
+  background-color: lightgoldenrodyellow !important;
 }
 .parsed-row .highlight {
-  background: lightblue;
+  background: rgb(145, 206, 226);
+}
+
+.parsed-row .table-wrapper > table > thead {
+  z-index: 1;
+}
+.more-info h3 {
+  border-top: 1px dotted lightblue;
+  padding-top: 8px;
+
+}
+.more-info h3::before {
+  content: "» ";
+}
+.more-info h3 , .more-info th {
+  font-size: 1.7rem;
+}
+.more-info h3, .more-info table {
+  margin-top: 1em;
+}
+.more-info .values {
+  margin-top: 1.5em;
+  width: 100%;
+}
+.more-info .values, .more-info .values td {
+  border-color: grey;
+
 }
 
 /* SavedRows */

src/tools/online-lar-formatting/index.jsx

@@ -18,6 +18,7 @@ import { FileUpload } from './FileUpload'
 import { Header } from './Header'
 import { Error } from './Error'
 import { useRestyledButtonLinks } from './useRestyledButtonLinks'
+import { collapseAll } from './Accordion'
 
 import './index.css'
 
@@ -30,10 +31,10 @@ import './index.css'
 //  √ - If TS/LAR, confirm overwrite
 // √ - Provide search for LAR
 // √- Provide date selector for Date fields
+// √ - Example/Enumerations in `info` button/column
 // - Provide search for TS?
 // - On Download
 //  - Provide file dialog?
-// - Example/Enumerations in `info` button/column
 
 const focusAtZero = () => null
   // setTimeout(() => {
@@ -56,6 +57,7 @@ export const OnlineLARFT = () => {
 
     setSelected(nextRow)
     setCurrCol(getSchema(nextRow)[0])
+    collapseAll()
   }
 
   const saveRow = _row => {