Add new ExpandableModal component

js/component/modal.js

@@ -3,7 +3,7 @@ import ReactModal from 'react-modal';
 import {Link} from './link.js';
 
 
-var Modal = React.createClass({
+export const Modal = React.createClass({
   propTypes: {
     type: React.PropTypes.oneOf(['alert', 'confirm', 'custom']),
     onConfirmed: React.PropTypes.func,
@@ -43,4 +43,43 @@ var Modal = React.createClass({
   }
 });
 
+export const ExpandableModal = React.createClass({
+  propTypes: {
+    expandButtonLabel: React.PropTypes.string,
+    extraContent: React.PropTypes.element,
+  },
+  getDefaultProps: function() {
+    return {
+      confirmButtonLabel: 'OK',
+      expandButtonLabel: 'Show More...',
+      hideButtonLabel: 'Show Less',
+    }
+  },
+  getInitialState: function() {
+    return {
+      expanded: false,
+    }
+  },
+  toggleExpanded: function() {
+    this.setState({
+      expanded: !this.state.expanded,
+    });
+  },
+  render: function() {
+    return (
+      <Modal type="custom" {... this.props}>
+        {this.props.children}
+        {this.state.expanded
+          ? this.props.extraContent
+          : null}
+        <div className="modal__buttons">
+          <Link button="primary" label={this.props.confirmButtonLabel} className="modal__button" onClick={this.props.onConfirmed} />
+          <Link button="alt" label={!this.state.expanded ? this.props.expandButtonLabel : this.props.hideButtonLabel}
+                className="modal__button" onClick={this.toggleExpanded} />
+        </div>
+      </Modal>
+    );
+  }
+});
+
 export default Modal;