section option for a better options division

assets/less/components/index.less

@@ -34,6 +34,7 @@
 @import './overlay.less';
 @import './form-state.less';
 @import './pagination.less';
+@import './section.less';
 
 
 @import './page-builder/index.less';

assets/less/components/section.less

@@ -0,0 +1,35 @@
+.options-section {
+  background-color: #1D1D1D;
+  margin: 0 -10px;
+  cursor: pointer;
+  padding: 0 10px;
+  border: 1px solid #333333;
+  margin-top: -1px;
+
+  i, span {
+    display: inline-block;
+    vertical-align: top;
+    line-height: 40px;
+    color: #cccccc;
+  }
+  i {
+    font-size: 16px;
+    padding-right: 7px;
+  }
+  span {
+    font-size: 11px;
+    text-transform: uppercase;
+  }
+
+  &:hover {
+    background-color: #2C2D2D;
+
+    i, span {
+      color: #ffffff;
+    }
+  }
+}
+
+.section-options {
+  margin: 20px 0;
+}

lib/components/options-list.jsx

@@ -36,20 +36,34 @@ export default class OptionsList extends Component {
             );
           }
           extraProps.label = option.label;
+        } else if (option.type === 'Section') {
+          if (value) {
+            unlockedContent = <div className='section-options'>{this.renderOptions(option.unlocks)}</div>;
+          }
+          extraProps.label = option.label;
         } else if (option.unlocks.constructor === Array) {
           unlockedContent = this.renderOptions(option.unlocks);
         } else if (option.unlocks[value]) {
           unlockedContent = this.renderOptions(option.unlocks[value]);
         }
       }
 
-      return (
-        <div className='option' key={option.id}>
-          {this.renderLabel(option.type !== 'Optional' && option.label)}
-          <Option onChange={this.onChange.bind(this, option.id)} value={value} {...extraProps} OptionsList={OptionsList} />
-          {unlockedContent}
-        </div>
-      );
+      if (option.type === 'Section') {
+        return (
+          <div key={option.id}>
+            <Option onChange={this.onChange.bind(this, option.id)} value={value} {...extraProps} OptionsList={OptionsList} />
+            {unlockedContent}
+          </div>
+        );
+      } else {
+        return (
+          <div className='option' key={option.id}>
+            {this.renderLabel(option.type !== 'Optional' && option.label)}
+            <Option onChange={this.onChange.bind(this, option.id)} value={value} {...extraProps} OptionsList={OptionsList} />
+            {unlockedContent}
+          </div>
+        );
+      }
     }
     else {
       console.log('Element option type not valid');

lib/components/section.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import {Component} from 'relax-framework';
+
+export default class Section extends Component {
+  toggle (event) {
+    event.preventDefault();
+    this.props.onChange(!this.props.value);
+  }
+
+  render () {
+    return (
+      <div className='options-section' onClick={this.toggle.bind(this)}>
+        <i className='material-icons'>{this.props.value ? 'keyboard_arrow_down' : 'chevron_right'}</i>
+        <span>{this.props.label}</span>
+      </div>
+    );
+  }
+}
+
+Section.propTypes = {
+  value: React.PropTypes.bool.isRequired,
+  label: React.PropTypes.string.isRequired,
+  onChange: React.PropTypes.func.isRequired
+};

lib/data-types/options-map.js

@@ -13,6 +13,7 @@ import CornersPicker from '../components/corners-picker';
 import ColorPalettePicker from '../components/color-palette-picker';
 import ColumnsManager from '../components/columns-manager';
 import Optional from '../components/optional';
+import Section from '../components/section';
 
 var TypesOptionsMap = {
   Color: ColorPalettePicker,
@@ -31,7 +32,8 @@ var TypesOptionsMap = {
   Corners: CornersPicker,
   Columns: ColumnsManager,
   Border: BorderPicker,
-  Optional
+  Optional,
+  Section
 };
 
 var TypesOptionsDefaultProps = {