remove deprecated collapsible mixin

js/components/ascribe_collapsible/collapsible_paragraph.js

@@ -2,13 +2,10 @@
 
 import React from 'react';
 
-import CollapsibleMixin from 'react-bootstrap/lib/CollapsibleMixin';
-
-import classNames from 'classnames';
+import Panel from 'react-bootstrap/lib/Panel';
 
 
 const CollapsibleParagraph = React.createClass({
-
     propTypes: {
         title: React.PropTypes.string,
         children: React.PropTypes.oneOfType([
@@ -20,18 +17,14 @@ const CollapsibleParagraph = React.createClass({
 
     getDefaultProps() {
         return {
-            show: true
+            show: false
         };
     },
 
-    mixins: [CollapsibleMixin],
-
-    getCollapsibleDOMNode(){
-        return React.findDOMNode(this.refs.panel);
-    },
-
-    getCollapsibleDimensionValue(){
-        return React.findDOMNode(this.refs.panel).scrollHeight;
+    getInitialState() {
+        return {
+            expanded: false
+        };
     },
 
     handleToggle(e){
@@ -40,8 +33,7 @@ const CollapsibleParagraph = React.createClass({
     },
 
     render() {
-        let styles = this.getCollapsibleClassSet();
-        let text = this.isExpanded() ? '-' : '+';
+        let text = this.state.expanded ? '-' : '+';
 
         if(this.props.show) {
             return (
@@ -50,9 +42,12 @@ const CollapsibleParagraph = React.createClass({
                         <div onClick={this.handleToggle}>
                             <span>{text} {this.props.title}</span>
                         </div>
-                        <div ref='panel' className={classNames(styles) + ' ascribe-edition-collapible-content'}>
+                        <Panel
+                            collapsible
+                            expanded={this.state.expanded}
+                            className="ascribe-edition-collapsible-content">
                             {this.props.children}
-                        </div>
+                        </Panel>
                     </div>
                 </div>
             );

js/components/ascribe_forms/property_collapsible.js

@@ -3,11 +3,9 @@
 import React from 'react';
 import ReactAddons from 'react/addons';
 
-import CollapsibleMixin from 'react-bootstrap/lib/CollapsibleMixin';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
-
-import classNames from 'classnames';
+import Panel from 'react-bootstrap/lib/Panel';
 
 
 let PropertyCollapsile = React.createClass({
@@ -17,22 +15,12 @@ let PropertyCollapsile = React.createClass({
         tooltip: React.PropTypes.string
     },
 
-    mixins: [CollapsibleMixin],
-
     getInitialState() {
         return {
             show: false
         };
     },
 
-    getCollapsibleDOMNode(){
-        return React.findDOMNode(this.refs.panel);
-    },
-
-    getCollapsibleDimensionValue(){
-        return React.findDOMNode(this.refs.panel).scrollHeight;
-    },
-
     handleFocus() {
         this.refs.checkboxCollapsible.getDOMNode().checked = !this.refs.checkboxCollapsible.getDOMNode().checked;
         this.setState({
@@ -85,11 +73,14 @@ let PropertyCollapsile = React.createClass({
                         <span className="checkbox"> {this.props.checkboxLabel}</span>
                     </div>
                 </OverlayTrigger>
-                <div
-                    className={classNames(this.getCollapsibleClassSet()) + ' ascribe-settings-property'}
-                    ref="panel">
+                <Panel
+                    collapsible
+                    expanded={this.state.show}
+                    className="bs-custom-panel">
+                    <div className="ascribe-settings-property">
                         {this.renderChildren()}
                     </div>
+                </Panel>
             </div>
         );
     }

sass/ascribe_edition.scss

@@ -23,8 +23,10 @@
     font-size: 0.9em;
 }
 
-.ascribe-edition-collapible-content {
+.ascribe-edition-collapsible-content {
     width:100%;
+    background: none;
+    border: none;
 }
 
 .coa-file-wrapper {

sass/ascribe_theme.scss

@@ -3,3 +3,12 @@
 .pager li a {
     color: white;
 }
+
+.panel-default {
+    border: none;
+    box-shadow: none;
+}
+
+.panel-body {
+    padding:0;
+}