feat(collapse): Collapse can now start out open by passing defaultExp…

…anded

[Finishes #104139550]

Signed-off-by: August Toman-Yih <atomanyih@pivotal.io>

spec/pivotal-ui-react/collapse/collapse_spec.js

@@ -3,20 +3,21 @@ var {TestUtils} = React.addons;
 
 describe('BaseCollapse', function() {
   var BsPanel, BaseCollapse, subject, bsPanel;
-  beforeEach(function() {
+
+  beforeEach(() => {
     BsPanel = require('react-bootstrap/lib/Panel');
     BaseCollapse = require('../../../src/pivotal-ui-react/collapse/collapse').BaseCollapse;
+  });
 
+  it('creates a react-boostrap panel that is collapsible', function() {
     subject = React.render((
       <BaseCollapse header="ima header">
         <h1>Child</h1>
       </BaseCollapse>
     ), root);
 
     bsPanel = TestUtils.findRenderedComponentWithType(subject, BsPanel);
-  });
 
-  it('creates a react-boostrap panel that is collapsible', function() {
     var props = bsPanel.props;
     expect(props.expanded).toBeFalsy();
     expect(props.header).toEqual('ima header');
@@ -26,7 +27,16 @@ describe('BaseCollapse', function() {
 
   describe('#handleSelect', function() {
     let clickEvent;
+
     beforeEach(function() {
+      subject = React.render((
+        <BaseCollapse header="ima header">
+          <h1>Child</h1>
+        </BaseCollapse>
+      ), root);
+
+      bsPanel = TestUtils.findRenderedComponentWithType(subject, BsPanel);
+
       clickEvent = jasmine.createSpyObj('click', ['preventDefault']);
     });
 
@@ -57,6 +67,19 @@ describe('BaseCollapse', function() {
       expect(TestUtils.findRenderedDOMComponentWithClass(subject, 'panel-divider')).toBeTruthy();
     });
   });
+  describe('when the defaultExpanded property is set to true', () => {
+    it('starts out expanded', () => {
+      subject = React.render((
+        <BaseCollapse header="ima header" defaultExpanded={true}>
+          <h1>Child</h1>
+        </BaseCollapse>
+      ), root);
+
+      bsPanel = TestUtils.findRenderedComponentWithType(subject, BsPanel);
+
+      expect(bsPanel.props.expanded).toBeTruthy();
+    });
+  });
 });
 
 describe('Collapse', function() {

src/pivotal-ui-react/collapse/collapse.js

@@ -29,11 +29,14 @@ import {mergeProps} from 'pui-react-helpers';
 var BaseCollapse = React.createClass({
   propTypes: {
     divider: types.bool,
-    header: types.node.isRequired
+    header: types.node.isRequired,
+    defaultExpanded: types.bool
   },
 
   getInitialState() {
-    return {expanded: false};
+    return {
+      expanded: this.props.defaultExpanded
+    };
   },
 
   handleSelect(e) {
@@ -178,8 +181,8 @@ var Collapse = require('pui-react-collapse').Collapse;
 
 Collapse components are implementations of the [Accordion][accordion] style. In
 all `Collapse` component variations, the `header` prop describes the text
-of the clickable region to toggle the expand/collapse states.
-
+of the clickable region to toggle the expand/collapse states. You can pass `defaultExpanded`
+as a prop to the `Collapse` and it will start expanded when the page loads.
 */
 
 /*doc