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>
+                    </div>
+                </Panel>
             </div>
         );
     }

sass/ascribe_edition.scss

@@ -16,33 +16,35 @@
     margin-top: 20px;
 }
 .ascribe-edition-collapsible-wrapper > div > span {
-  font-size: 1.2em;
-  margin-right: .5em;
+    font-size: 1.2em;
+    margin-right: .5em;
 }
 .ascribe-edition-collapsible-wrapper > div > span:nth-child(2) {
-  font-size: 0.9em;
+    font-size: 0.9em;
 }
 
-.ascribe-edition-collapible-content {
-  width:100%;
+.ascribe-edition-collapsible-content {
+    width:100%;
+    background: none;
+    border: none;
 }
 
-.coa-file-wrapper{
-  display: table;
-  height: 200px;
-  overflow: hidden;
-  margin: 0 auto;
-  width: 100%;
-  padding: 1em;
+.coa-file-wrapper {
+    display: table;
+    height: 200px;
+    overflow: hidden;
+    margin: 0 auto;
+    width: 100%;
+    padding: 1em;
 }
 
 .coa-file {
-  display: table-cell;
-  vertical-align: middle;
-  border: 1px solid #CCC;
-  background-color: #F8F8F8;
+    display: table-cell;
+    vertical-align: middle;
+    border: 1px solid #CCC;
+    background-color: #F8F8F8;
 }
 
 .ascribe-button-list {
-  margin-top: 1em;
+    margin-top: 1em;
 }

sass/ascribe_theme.scss

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