hacks in accordion behavior

Datawheel · Jul 2, 2019 · 6c6c833 · 6c6c833
1 parent c27a396
commit 6c6c833
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 10 deletions.
diff --git a/packages/cms/src/components/Section.css b/packages/cms/src/components/Section.css
@@ -1,8 +1,47 @@
 @import "../css/mixins.css";
 
+.cms-section:not(:last-of-type) {
+  margin-bottom: 1.25rem;
+}
+
+/* collapsed state */
+.cms-section.is-collapsed .cms-section-heading {
+  & > .cms-accordion-button {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+
+    & > .cms-accordion-button-icon > svg {
+      transform: rotate(-90deg);
+    }
+  }
+
+  & ~ * {
+    display: none;
+  }
+}
+
+.cms-accordion-button-icon {
+  color: var(--dark-1);
+  transition: color 0.15s ease-out;
+
+  /* transitions */
+  & > svg {
+    transition: transform 0.15s ease-out;
+  }
+}
+
+.cms-accordion-button:hover > .cms-accordion-button-icon,
+.cms-accordion-button:focus > .cms-accordion-button-icon {
+  color: var(--dark-3);
+
+  @mixin dark-mode {
+    color: var(--light-3);
+  }
+}
+
 /* section headings */
 .cms-section-heading {
-  margin-top: 2rem;
+  margin-top: 0;
   margin-bottom: 0;
   height: 2.5rem;
 }
@@ -65,6 +104,7 @@
   margin-bottom: -0.75rem;
   z-index: 1;
   padding: 0.5rem 1.25rem 0 1.25rem;
+  /* theming */
   background-color: var(--light-1);
   border-left: 1px solid var(--light-2);
   border-right: 1px solid var(--light-2);

diff --git a/packages/cms/src/components/Section.jsx b/packages/cms/src/components/Section.jsx
@@ -4,18 +4,30 @@ import Button from "./Button";
 import "./Section.css";
 
 export default class Section extends Component {
+  constructor() {
+    super();
+    this.state = {
+      isOpen: true
+    };
+  }
+
+  toggleAccordion() {
+    this.setState({isOpen: !this.state.isOpen});
+  }
+
   render() {
     const {addItem, cards, children, description, secondaryCards, subtitle} = this.props;
+    const {isOpen} = this.state;
 
     const title = this.props.title || "missing `title` prop in Section.jsx";
     const entity = this.props.entity || title.toLowerCase();
 
     return (
-      <section className={`cms-section cms-${entity}-section`}>
+      <section className={`cms-section cms-${entity}-section ${isOpen ? "is-open" : "is-collapsed"}`}>
 
         {/* section title */}
         <h2 className="cms-section-heading font-md" id={entity}>
-          <button className="cms-accordion-button" onClick={cards && cards.length > 0}>
+          <button className="cms-accordion-button" onClick={this.toggleAccordion.bind(this)}>
             {title}
             <span className="u-visually-hidden"> (collapse section)</span>
             <Icon className="cms-accordion-button-icon" icon="caret-down" />

diff --git a/packages/cms/src/components/toolbox/Toolbox.jsx b/packages/cms/src/components/toolbox/Toolbox.jsx
@@ -224,7 +224,7 @@ export default class Toolbox extends Component {
       {/* Hide the sections if not detailView - but SHOW them if forceKey is set, which means
         * that someone has clicked an individual variable and wants to view its editor
         */}
-      <div style={detailView || forceKey ? {} : {display: "none"}}>
+      <div className="cms-toolbox-section-wrapper" style={detailView || forceKey ? {} : {display: "none"}}>
         {/* generators */}
         {showGenerators && <Section
           title="Generators"
@@ -277,7 +277,7 @@ export default class Toolbox extends Component {
             />)}
         />}
       </div>
-      { detailView && <div>
+      { detailView && <React.Fragment>
         {/* formatters */}
         {showFormatters && <Section
           title="Formatters"
@@ -296,7 +296,7 @@ export default class Toolbox extends Component {
             />)
           }
         />}
-      </div>}
+      </React.Fragment>}
 
       {/* loading status */}
       <Status recompiling={recompiling} />

diff --git a/packages/cms/src/components/toolbox/toolbox.css b/packages/cms/src/components/toolbox/toolbox.css
@@ -39,9 +39,12 @@
     box-shadow: none !important;
   }
 
-  & > *:not(:last-child) {
+  & > .cms-filter-search {
     margin-bottom: 0.625rem;
   }
+  & > .cms-button-group {
+    margin-bottom: 1.25rem;
+  }
 
   /* reset card widths */
   & .cms-card {
@@ -50,6 +53,11 @@
   }
 }
 
+/* TODO: revisit & remove */
+.cms-toolbox-section-wrapper {
+  margin-bottom: 1.25rem;
+}
+
 .cms-list-var {
   cursor: pointer;
 }

diff --git a/packages/cms/src/components/topics/components/Selector.jsx b/packages/cms/src/components/topics/components/Selector.jsx
@@ -53,7 +53,7 @@ class Selector extends Component {
       { title && <label htmlFor={slug}>{title}</label> }
       <div className={ `bp3-fill ${type === "multi" ? "" : "bp3-select"}` }>
         { type === "multi"
-          ? <div>
+          ? <React.Fragment>
             <div className="multi-list">
               { comparisons.map(d => <div key={d} className="multi-item bp3-tag bp3-tag-removable">
                 { variables[d] }
@@ -72,7 +72,7 @@ class Selector extends Component {
                 </button>
               </Select>
               : null }
-          </div>
+          </React.Fragment>
           : <select id={slug} name={name} onChange={d => onSelector(name, d.target.value)} disabled={loading} defaultValue={defaultValue}>
             { options.map(({option}) => <option value={option} key={option}>{variables[option]}</option>) }
           </select> }

diff --git a/packages/cms/src/css/layout.css b/packages/cms/src/css/layout.css
@@ -187,9 +187,10 @@
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
-  background-color: var(--light-1);
   margin-top: -2px;
   padding: 1rem 1.25rem 0.5rem 1.25rem;
+  /* theming */
+  background-color: var(--light-1);
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
   border: 1px solid var(--light-2);