collapses data sources page into accordions

DataUSA · Feb 15, 2019 · 19db984 · 19db984
1 parent 235ff94
commit 19db984
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 12 deletions.
diff --git a/app/pages/About/index.css b/app/pages/About/index.css
@@ -211,3 +211,58 @@
     }
   }
 }
+
+#Data {
+  padding: 40px 50px 50px;
+  & button {
+    align-items: center;
+    background: none;
+    border: 1px solid var(--red);
+    border-radius: 0;
+    box-shadow: none;
+    color: var(--red);
+    display: flex;
+    font-size: 13px;
+    font-weight: 600;
+    justify-content: space-between;
+    margin: 10px 0 0;
+    text-align: center;
+    transition: background 0.1s, color 0.1s;
+    & .pt-icon-standard {
+      color: var(--red);
+      font-size: 13px;
+      transition: color 0.1s;
+    }
+    &.pt-active, &:hover {
+      background: var(--red);
+      color: white;
+      & .pt-icon-standard {
+        color: white;
+      }
+    }
+    &:focus {
+      outline: 0;
+    }
+  }
+  & .pt-collapse-body {
+    background: #eee;
+    border: 1px solid #ddd;
+    &[aria-hidden="false"] {
+      padding: 25px;
+    }
+    & .sub-title {
+      font-family: "Pathway Gothic One", sans-serif;
+      font-size: 20px;
+      font-weight: 300;
+      letter-spacing: 1px;
+      margin-top: 20px;
+      text-transform: uppercase;
+    }
+    & p {
+      margin: 0 0 10px;
+    }
+    & ul {
+      margin-top: 10px;
+    }
+  }
+}
diff --git a/app/pages/Data/DataSources.jsx b/app/pages/Data/DataSources.jsx
@@ -1,15 +1,27 @@
 import React, {Component} from "react";
 import {connect} from "react-redux";
 import {fetchData} from "@datawheel/canon-core";
-
-import Anchor from "components/Anchor";
+import {Button, Collapse} from "@blueprintjs/core";
 import {caveats, usage} from "./datasets.js";
 
 class DataSources extends Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {active: []};
+  }
+
+  onClick(slug) {
+    const {active} = this.state;
+    if (active.includes(slug)) active.splice(active.indexOf(slug), 1);
+    else active.push(slug);
+    this.setState({active});
+  }
+
   render() {
 
     const {datasets} = this.props;
+    const {active} = this.state;
 
     return (
       <div id="DataSources">
@@ -29,17 +41,25 @@ class DataSources extends Component {
           const use = usage[slug] || [];
           const caveat = caveats[slug] || [];
 
+          const open = active.includes(slug);
+
           return <div key={title}>
-            <h2 id={slug}><Anchor slug={slug}>{ title }</Anchor></h2>
-            { desc.map((d, i) => <p key={i} dangerouslySetInnerHTML={{__html: d}} />) }
-            { use.length > 0 && <h3>Where is it used?</h3> }
-            { use.length > 0 && use.map((d, i) => <p key={i} dangerouslySetInnerHTML={{__html: d}} />) }
-            { caveat.length > 0 && <h3>Caveats</h3> }
-            { caveat.length > 0 && caveat.map((d, i) => <p key={i} dangerouslySetInnerHTML={{__html: d}} />) }
-            { datasets.length > 0 && <h3>Dataset{ datasets.length > 1 ? "s" : "" }</h3> }
-            { datasets.length > 0 && <ul>
-              { datasets.map((d, i) => <li key={i}><a href={d.link} target="_blank" rel="noopener noreferrer">{d.title}</a></li>) }
-            </ul> }
+            <Button
+              active={open}
+              className="pt-fill"
+              rightIconName={open ? "chevron-down" : "chevron-right"}
+              onClick={this.onClick.bind(this, slug)}>{ title }</Button>
+            <Collapse isOpen={open} keepChildrenMounted={true}>
+              { desc.map((d, i) => <p key={i} dangerouslySetInnerHTML={{__html: d}} />) }
+              { use.length > 0 && <div className="sub-title">Where is it used?</div> }
+              { use.length > 0 && use.map((d, i) => <p key={i} dangerouslySetInnerHTML={{__html: d}} />) }
+              { caveat.length > 0 && <div className="sub-title">Caveats</div> }
+              { caveat.length > 0 && caveat.map((d, i) => <p key={i} dangerouslySetInnerHTML={{__html: d}} />) }
+              { datasets.length > 0 && <div className="sub-title">Source Link{ datasets.length > 1 ? "s" : "" }</div> }
+              { datasets.length > 0 && <ul>
+                { datasets.map((d, i) => <li key={i}><a href={d.link} target="_blank" rel="noopener noreferrer">{d.title}</a></li>) }
+              </ul> }
+            </Collapse>
           </div>;
 
         }) }