Make form groups expandable

Author: SachaG

packages/vulcan-base-styles/lib/stylesheets/_forms.scss

@@ -127,4 +127,22 @@ div.ReactTags__suggestions mark{
   &.danger{
     color: #EF1642;
   }
+}
+
+.form-section-heading{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid $light-grey;
+}
+
+.form-section-heading-title{
+  margin: 0;
+}
+
+.form-section-collapsed{
+  display: none;
 }

packages/vulcan-forms/lib/FormGroup.jsx

@@ -1,13 +1,44 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import FormComponent from "./FormComponent.jsx";
+import FormComponent from './FormComponent.jsx';
+import { Components } from 'meteor/vulcan:core';
+import classNames from 'classnames';
 
 class FormGroup extends PureComponent {
+
+  constructor(props) {
+    super(props);
+    this.toggle = this.toggle.bind(this);
+    this.renderHeading = this.renderHeading.bind(this);
+    this.state = {
+      collapsed: props.startCollapsed || false
+    }
+  }
+
+  toggle() {
+    this.setState({
+      collapsed: !this.state.collapsed
+    })
+  }
+
+  renderHeading() {
+    return (
+      <div className="form-section-heading" onClick={this.toggle}>
+        <h3 className="form-section-heading-title">{this.props.label}</h3>
+        <span className="form-section-heading-toggle">
+          {this.state.collapsed ? <Components.Icon name="expand" /> : <Components.Icon name="collapse" />}
+        </span>
+      </div>
+    )
+  }
+
   render() {
     return (
       <div className="form-section">
-        {this.props.name === 'default' ? null : <h3 className="form-section-heading">{this.props.label}</h3>}
-        {this.props.fields.map(field => <FormComponent key={field.name} {...field} updateCurrentValues={this.props.updateCurrentValues} />)}
+        {this.props.name === 'default' ? null : this.renderHeading()}
+        <div className={classNames({'form-section-collapsed': this.state.collapsed})}>
+          {this.props.fields.map(field => <FormComponent key={field.name} {...field} updateCurrentValues={this.props.updateCurrentValues} />)}
+        </div>
       </div>
     )
   }