accordion for static analysis modules

src/app/tabs/analysis-tab.js

@@ -1,7 +1,6 @@
 var yo = require('yo-yo')
 var StaticAnalysis = require('./staticanalysis/staticAnalysisView')
 var EventManager = require('../../lib/events')
-var css = require('./styles/analysis-tab-styles')
 
 import { ViewPlugin } from '@remixproject/engine'
 import { EventEmitter } from 'events'
@@ -43,7 +42,7 @@ class AnalysisTab extends ViewPlugin {
     })
     this.registry.put({api: this.staticanalysis, name: 'staticanalysis'})
 
-    return yo`<div class="${css.analysisTabView}" id="staticanalysisView">${this.staticanalysis.render()}</div>`
+    return yo`<div class="p-3 pb-1" id="staticanalysisView">${this.staticanalysis.render()}</div>`
   }
 
 }

src/app/tabs/staticanalysis/staticAnalysisView.js

@@ -158,7 +158,7 @@ staticAnalysisView.prototype.checkAll = function (event) {
 staticAnalysisView.prototype.renderModules = function () {
   var self = this
   var groupedModules = utils.groupBy(preProcessModules(self.runner.modules()), 'categoryId')
-  return Object.keys(groupedModules).map((categoryId, i) => {
+  const moduleEntries = Object.keys(groupedModules).map((categoryId, i) => {
     var category = groupedModules[categoryId]
     var entriesDom = category.map((item, i) => {
       return yo`
@@ -173,18 +173,28 @@ staticAnalysisView.prototype.renderModules = function () {
             onclick="${function (event) { self.checkModule(event) }}"
           >
           <label for="staticanalysismodule_${categoryId}_${i}" class="form-check-label mb-1">
-            ${item.name}
+            <p class="mb-0 font-weight-bold text-capitalize">${item.name}</p>
             ${item.description}
           </label>
         </div>
-            `
+      `
     })
     return yo`
-      <div class="${css.analysisModulesContainer} list-group-item py-1">
+      <div class="${css.block}">
-        <label class="${css.label}"><b>${category[0].categoryDisplayName}</b></label>
+          <input type="radio" name="accordion" class="w-100 d-none card" id="heading${categoryId}"/>
-        ${entriesDom}
+          <label for="heading${categoryId}" style="cursor: pointer;" class="h6 card-header font-weight-bold border-bottom px-1 py-2 w-100">
-      </div>`
+            <span>${category[0].categoryDisplayName}</span>
+          </label>
+        <div class="w-100 d-block px-2 py-1 ${css.entries}">
+          ${entriesDom}
+        </div>
+      </>
+    `
   })
+  return yo`
+    <div class="accordion" id="accordionModules">
+      ${moduleEntries}
+    </div>`
 }
 
 module.exports = staticAnalysisView

src/app/tabs/staticanalysis/styles/staticAnalysisView-styles.js

@@ -31,9 +31,20 @@ var css = csjs`
     align-items: center;
   }
   .container {
-    max-height: 300px;
+    max-height: 500px;
     overflow-y: auto;
   }
+
+  .block input[type='radio']:checked ~ .entries{
+    height: auto;
+    transition: .3s ease-in;
+  }
+
+  .entries{
+    height: 0;
+    overflow: hidden;
+    transition: .3s ease-out;
+  }
 `
 
 module.exports = css

src/app/tabs/styles/analysis-tab-styles.js

@@ -1,10 +1,6 @@
 var csjs = require('csjs-inject')
 
 const css = csjs`
-  .analysisTabView {
-    padding: 2%;
-    padding-bottom: 3em;
-  }
 `
 
 module.exports = css