refactor(expandcollapse): Adjust panel content height when inner cont…

…ent changes

src/components/ExpandCollapse/ExpandCollapse.md

@@ -1,10 +1,53 @@
 ```
-<ExpandCollapse open={["panel-1"]}>
+<ExpandCollapse>
   <ExpandCollapse.Panel id="panel-1" header="First panel title">
     First panel
   </ExpandCollapse.Panel>
-  <ExpandCollapse.Panel id="panel-2" header="Second panel title">
+  <ExpandCollapse.Panel id="panel-2" header="Second panel title" subtext="Some subtext">
     Second panel
   </ExpandCollapse.Panel>
 </ExpandCollapse>
 ```
+
+### Arbitrary header component
+
+```
+<ExpandCollapse>
+  <ExpandCollapse.Panel id="panel-10" header={<Text size="large">I'm large and misligned</Text>}>
+    First panel
+  </ExpandCollapse.Panel>
+</ExpandCollapse>
+```
+
+
+### Adjusting height
+
+```
+initialState = {
+  error: '',
+};
+
+const trigger = () => {
+  if( state.error === '' ) {
+    setState({error: 'Oh no there was an error'});
+  }
+  else {
+    setState({error: ''});
+  }
+};
+
+<ExpandCollapse open={['panel-21']}>
+  <ExpandCollapse.Panel id="panel-20" header="First panel title">
+    First panel
+  </ExpandCollapse.Panel>
+  <ExpandCollapse.Panel id="panel-21" header="Second panel title">
+    <div>
+      <Paragraph>Second panel blah blah blah</Paragraph>
+      
+      <Button onClick={trigger}>Trigger</Button>
+      
+      <Input label="Testing" error={state.error} />
+    </div>
+  </ExpandCollapse.Panel>
+</ExpandCollapse>
+```

src/components/ExpandCollapse/PanelWrapper/PanelWrapper.jsx

@@ -24,6 +24,7 @@ class PanelWrapper extends React.Component {
     this.state = {
       open: props.open,
       hover: false,
+      contentWrapperHeight: 0,
     }
   }
 
@@ -39,6 +40,20 @@ class PanelWrapper extends React.Component {
     }
   }
 
+  componentDidMount() {
+    this.adjustContentHeight()
+  }
+
+  componentDidUpdate() {
+    this.adjustContentHeight()
+  }
+
+  adjustContentHeight() {
+    if (this.contentWrapper.offsetHeight !== this.state.contentWrapperHeight) {
+      this.setState({ contentWrapperHeight: this.contentWrapper.offsetHeight })
+    }
+  }
+
   mouseEnter = () => {
     this.setState({ hover: true })
   }
@@ -93,11 +108,7 @@ class PanelWrapper extends React.Component {
           </Box>
         </Clickable>
 
-        <Reveal
-          timeout={500}
-          in={this.state.open}
-          height={this.contentWrapper ? this.contentWrapper.offsetHeight : 0}
-        >
+        <Reveal timeout={500} in={this.state.open} height={this.state.contentWrapperHeight}>
           {() => (
             <div
               ref={contentWrapper => {