From a44bb0b66fba8c1a4866117186304c7dabd7342e Mon Sep 17 00:00:00 2001
From: Charles Hansen <chansen@pivotal.io>
Date: Wed, 17 Feb 2016 14:56:14 -0800
Subject: [PATCH] fix(expander): Manual triggers work in expanders

[#100595270]

Signed-off-by: Elena Sharma <esharma@pivotal.io>
Signed-off-by: Charles Hansen <chansen@pivotal.io>
---
 .../expander/expander_spec.js                 | 13 +++++++
 .../src/pivotal-ui-react/expander/expander.js |  6 +++
 styleguide/docs/react/expander.js             | 37 ++++++++++---------
 3 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/library/spec/pivotal-ui-react/expander/expander_spec.js b/library/spec/pivotal-ui-react/expander/expander_spec.js
index bdd0835e9..cafc38349 100644
--- a/library/spec/pivotal-ui-react/expander/expander_spec.js
+++ b/library/spec/pivotal-ui-react/expander/expander_spec.js
@@ -80,6 +80,19 @@ describe('ExpanderContent', function() {
       expect('.collapse').not.toHaveClass('in');
     });
   });
+  describe('when toggling expanded prop', function() {
+    beforeEach(function() {
+      renderComponent.call(this, {expanded: true});
+      jasmine.clock().tick(1000);
+    });
+
+    it('toggles open/closed', function() {
+      expect('.collapse').toHaveClass('in');
+      renderComponent.call(this, {expanded: false});
+      jasmine.clock().tick(1000);
+      expect('.collapse').not.toHaveClass('in');
+    })
+  })
 });
 
 describe('ExpanderTrigger', function() {
diff --git a/library/src/pivotal-ui-react/expander/expander.js b/library/src/pivotal-ui-react/expander/expander.js
index 4e7a2093c..3a20132d8 100644
--- a/library/src/pivotal-ui-react/expander/expander.js
+++ b/library/src/pivotal-ui-react/expander/expander.js
@@ -33,6 +33,12 @@ var ExpanderContent = React.createClass({
     return {expanded: this.props.expanded};
   },
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.expanded !== this.props.expanded) {
+      this.setState({expanded: nextProps.expanded});
+    }
+  },
+
   toggle() {
     this.setState({expanded: !this.state.expanded});
   },
diff --git a/styleguide/docs/react/expander.js b/styleguide/docs/react/expander.js
index 57c38297c..a8da00383 100644
--- a/styleguide/docs/react/expander.js
+++ b/styleguide/docs/react/expander.js
@@ -18,7 +18,6 @@ Require the subcomponents:
 
 ```
 var ExpanderContent = require('pui-react-expander').ExpanderContent;
-var ExpanderTrigger = require('pui-react-expander').ExpanderTrigger;
 ```
 
 
@@ -34,22 +33,26 @@ See the example below for how to use these components in your own application.
 
 ```jsx_example
 var MoreInfo = React.createClass({
-  componentDidMount: function () {
-    this.refs.infoTrigger.setTarget(this.refs.infoContent);
-  },
-  render: function() {
-    return (
-      <main>
-        <ExpanderContent ref="infoContent">
-          <p className='h1 bg-neutral-2 type-neutral-9'>Content in expander</p>
-        </ExpanderContent>
-        <br/>
-        <ExpanderTrigger ref="infoTrigger">
-          <button className='btn btn-highlight'>Toggle Content</button>
-        </ExpanderTrigger>
-      </main>
-    )
-  }
+ getInitialState() {
+   return {expanded: false};
+ },
+
+ toggleContent() {
+   this.setState({expanded: !this.state.expanded});
+ },
+
+ render: function() {
+   return (
+     <main>
+       <ExpanderContent expanded={this.state.expanded}>
+         <p className='h1 bg-neutral-2 type-neutral-9'>Content in expander</p>
+       </ExpanderContent>
+       <button className='btn btn-highlight' onClick={this.toggleContent}>
+         Toggle Content
+       </button>
+     </main>
+   );
+ }
 });
 ```