section: adding collapsible elements including good packages

package.json

@@ -17,6 +17,7 @@
     "bulma": "0.9",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-collapsible": "^2.8.1",
     "terser": "^5.0.0"
   },
   "browserslist": "> 0.25%, not dead"

src/Section.js

 'use strict';
 
 const React = require('react');
+import Collapsible from 'react-collapsible'
 
+function StatusSection(props) {
+  const isOpen = props.open;
+  const content = (
+    <ul>
+    {props.pkgs.map(function(pkg) {
+      return <li key={pkg.name}><p className="subtitle is-6 has-text-white">{pkg.name} {pkg.version}</p></li>
+    })}
+    </ul>
+  );
+  return (
+    <div>
+    { isOpen
+      ? <Collapsible trigger={props.label} lazyRender open>{ content }</Collapsible>
+      : <Collapsible trigger={props.label} lazyRender>{ content }</Collapsible>
+    }
+    </div>
+  );
+}
 
 class Section extends React.Component {
   render() {
     const { suite } = this.props;
+    const good = suite.pkgs.filter(pkg => pkg.status == "GOOD");
+    const bad = suite.pkgs.filter(pkg => pkg.status == "BAD");
+    const unknown = suite.pkgs.filter(pkg => pkg.status == "UNKWN");
     return (
-      <section key={suite.name} className="section pt-4 pb-4" >
+      <section key={suite.name} className="section pt-4 pb-4" id={ suite.name }>
         <div className="tile box has-background-danger">
-          <div className="content">
-            <p className='title is-5 has-text-white'>{ suite.name }</p>
-              <ul>
-              {suite.pkgs.map(function(pkg) { 
-                if (pkg.status == 'BAD') {
-                  return <li key={pkg.name}><p className="subtitle is-6 has-text-white">{pkg.name}-{pkg.version}</p></li>
-                }
-              })}
-              </ul>
-          </div>
+          <Collapsible trigger={ suite.name } open>
+            {good.length > 0 && <StatusSection label="good" pkgs={ good } />}
+            {bad.length > 0 && <StatusSection label="bad" pkgs={ bad } open />}
+            {unknown.length > 0 && <StatusSection label="unknown" pkgs={ unknown } open />}
+          </Collapsible>
         </div>
       </section>
     )

src/style.scss

@@ -14,6 +14,14 @@ $link: #212952;
 @import "../node_modules/bulma/sass/layout/section.sass";
 @import "../node_modules/bulma/sass/grid/tiles.sass";
 
+a:hover {
+	text-decoration: underline;
+}
+
+.section a:link, .section a:visited {
+	color: white;
+}
+
 .bold {
 	font-weight: bold;
 }
@@ -47,3 +55,46 @@ ul {
 		columns: 8;
 	}
 }
+
+.box {
+	padding: 5px 10px 10px 10px;
+}
+
+.Collapsible__contentInner {
+	margin-left: 1rem;
+	border: 1px black;
+	color: black;
+}
+
+.Collapsible__trigger {
+	display: block;
+	position: relative;
+	padding: 0 0 0 1rem;
+	color: white;
+
+	&:hover {
+		cursor: pointer;
+		text-decoration: underline;
+	}
+
+	&:before {
+		content: '^';
+		position: absolute;
+		left: 0;
+		display: block;
+		transition: transform 100ms;
+		color: #666;
+	}
+
+	&.is-closed {
+		&:before {
+			transform: rotateZ(90deg);
+		}
+	}
+
+	&.is-open {
+		&:before {
+			transform: rotateZ(180deg);
+		}
+	}
+}