Add "collapsible" HOC and field config "collapse"

src/components/Widgets/ControlHOC.js

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
-import ImmutablePropTypes from "react-immutable-proptypes";
-import repeatable from "./RepeatableHOC";
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { applyHOCs } from './WidgetHOCs';
 
 const truthy = () => ({ error: false });
 
@@ -86,9 +86,7 @@ class ControlHOC extends Component {
   };
 
   render() {
-    const ControlComponent = this.props.field.get('repeat', false)
-      ? repeatable(this.props.controlComponent)
-      : this.props.controlComponent;
+    const ControlComponent = applyHOCs(this.props.controlComponent);
 
     return (<ControlComponent
       {...this.props}

src/components/Widgets/WidgetHOCs/collapsible.css

@@ -0,0 +1,20 @@
+@import "../../UI/theme";
+
+.toggleButton {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  height: 28px;
+  border: none;
+  border-radius: var(--borderRadius) var(--borderRadius) 0 0;
+  background: rgba(0,0,0,0.1);
+}
+
+.summary {
+  border: 2px solid rgba(0,0,0,0.1);
+  border-top-width: 28px;
+  border-radius: var(--borderRadius);
+  border-top-left-radius: 0;
+  margin-bottom: 20px;
+  padding: 20px;
+}

src/components/Widgets/WidgetHOCs/collapsible.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import FontIcon from 'react-toolbox/lib/font_icon';
+
+const collapsible = WrappedComponent =>
+  class extends Component {
+    static propTypes = {
+      field: ImmutablePropTypes.map.isRequired,
+    };
+
+    constructor(props) {
+      super(props);
+      this.state = { collapsed: this.props.field.getIn(['collapse', 'startCollapsed'], false) };
+    }
+
+    handleToggle = () => {
+      this.setState(Object.assign({}, this.state, { collapsed: !this.state.collapsed }));
+    }
+
+    getSummary() {
+      return "SUMMARY";
+    }
+
+    render() {
+      if (this.props.field.get('collapse')) {
+        return (<div>
+           <button onClick={this.handleToggle}>
+             <FontIcon value={this.state.collapsed ? 'expand_more' : 'expand_less'} />
+           </button>
+           {this.state.collapsed
+             ? <div>SUMMARY</div>
+             : <WrappedComponent {...this.props} />}
+        </div>);
+      }
+
+      return <WrappedComponent {...this.props} />;
+    }
+  };
+
+export default collapsible;