Split the code to separate files and tested

18-panel/a-panel/src/App.css

@@ -1,28 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
-
-.App-title {
-  font-size: 1.5em;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}

18-panel/a-panel/src/App.js

@@ -1,115 +1,8 @@
 import React, { Component } from 'react';
-import './App.css';
+import Panel from './Panel';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import faChevronDown from '@fortawesome/fontawesome-free-solid/faChevronDown';
 import faReact from '@fortawesome/fontawesome-free-brands/faReact';
 
-
-// HEADER
-//
-class Header extends Component {
-  render () {
-    const { collapsible, preTools, postTools,
-          title, toggleCollapse } = this.props;
-    return (
-      <div className="header">
-        {title}
-        <div style={{flex: 1}}></div>
-        {preTools}
-        {collapsible && 
-          <FontAwesomeIcon
-            className="collapse-tool header-tool"
-            icon={faChevronDown}
-            onClick={toggleCollapse}
-          />
-        }
-        {postTools}
-      </div>
-    );
-  }
-}
-
-// EXPANDER
-//
-class Expander extends Component {
-  static defaultProps = {
-    expanded: true
-  }
-  componentDidMount = () => {
-    this.setHeight(this.props.expanded);
-    this.forceUpdate();
-  }
-  componentWillReceiveProps = ({ expanded }) => {
-    this.setHeight(expanded);
-  }
-  setHeight = (expanded) => {
-    const { scrollHeight } = this.expandWrap;
-    this.wrapHeight = expanded ? scrollHeight + 'px' : 0;
-  }
-  render () {
-    const { className = 'expander-wrap', style = {} } = this.props;
-    Object.assign(style, {
-      height: this.wrapHeight
-    })
-    return (
-      <div
-        ref={el => this.expandWrap = el}
-        className={className}
-        style={style}
-      >
-        {this.props.render(this.props)}
-      </div>
-    );
-  }
-}
-
-
-// PANEL
-//
-class Panel extends Component {
-  static defaultProps = {
-    expanded: true
-  }
-  state = {
-    expanded: this.props.expanded
-  }
-  componentWillReceiveProps = ({ expanded }) => {
-    this.setState({expanded});
-  }
-  toggleCollapse = () => {
-    this.setState({
-      expanded: !this.state.expanded
-    });
-  }
-  render() {
-    const { collapsible, expandDir, preTools,
-          postTools, style = {}, title } = this.props;
-    const { expanded } = this.state;
-    const showHeader = title.length || collapsible;
-    const className = `panel${expanded ? ' expanded' : ''}`;
-    return (
-      <div className={className} style={style}>
-        {showHeader && 
-          <Header
-            title={title}
-            collapsible={collapsible}
-            toggleCollapse={this.toggleCollapse}
-            preTools={preTools}
-            postTools={postTools}
-          />
-        }
-        <Expander expanded={expanded} expandDir={expandDir} render={() => (
-          <div className="body-el">
-            {this.props.children}
-          </div>
-        )} />
-      </div>
-    );
-  }
-}
-
-// PANEL INSTANCE
-//
 class App extends Component {
   render() {
     return (

18-panel/a-panel/src/Expander.css

@@ -0,0 +1,6 @@
+.expander-wrap {
+  overflow-y: auto;
+  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  border: 1px solid #3d83cc;
+  border-top-width: 0;
+}

18-panel/a-panel/src/Expander.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import './Expander.css';
+
+class Expander extends Component {
+  static defaultProps = {
+    expanded: true
+  }
+
+  componentDidMount = () => {
+    this.setHeight(this.props.expanded);
+    this.forceUpdate();
+  }
+
+  componentWillReceiveProps = ({ expanded }) => {
+    this.setHeight(expanded);
+  }
+
+  setHeight = (expanded) => {
+    const { scrollHeight } = this.expandWrap;
+    this.wrapHeight = expanded ? scrollHeight + 'px' : 0;
+  }
+
+  render () {
+    const { className = 'expander-wrap', style = {} } = this.props;
+    Object.assign(style, {
+      height: this.wrapHeight
+    })
+
+    return (
+      <div
+        ref={el => this.expandWrap = el}
+        className={className}
+        style={style}
+      >
+        {this.props.render(this.props)}
+      </div>
+    );
+  }
+}
+
+export default Expander;

18-panel/a-panel/src/Header.css

@@ -0,0 +1,16 @@
+.header {
+  display: flex;
+  border: 1px solid #3d83cc;
+  border-bottom-width: 0;
+  background-color: #3d83cc;
+  padding: 4px 8px;
+  color: white;
+}
+.header-tool {
+  cursor: pointer;
+  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  margin-left: 6px;
+}
+.expanded .collapse-tool {
+  transform: rotate(-180deg);
+}

18-panel/a-panel/src/Header.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import faChevronDown from '@fortawesome/fontawesome-free-solid/faChevronDown';
+import './Header.css';
+
+class Header extends Component {
+  render() {
+    const { collapsible, preTools, postTools, title, toggleCollapse } = this.props;
+
+    return (
+      <div className="header">
+        {title}
+        <div style={{ flex: 1 }}></div>
+        {preTools}
+        {collapsible &&
+          <FontAwesomeIcon
+            className="collapse-tool header-tool"
+            icon={faChevronDown}
+            onClick={toggleCollapse}
+          />
+        }
+        {postTools}
+      </div>
+    );
+  }
+}
+
+export default Header;

18-panel/a-panel/src/Panel.css

@@ -0,0 +1,7 @@
+.panel {
+  display: flex;
+  flex-direction: column;
+}
+.body-el {
+  padding: 8px;
+}

18-panel/a-panel/src/Panel.js

@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import Header from './Header';
+import Expander from './Expander';
+import './Panel.css';
+
+class Panel extends Component {
+  static defaultProps = {
+    expanded: true
+  }
+
+  state = {
+    expanded: this.props.expanded
+  }
+
+  componentWillReceiveProps = ({ expanded }) => {
+    this.setState({ expanded });
+  }
+
+  toggleCollapse = () => {
+    this.setState({
+      expanded: !this.state.expanded
+    });
+  }
+
+  render() {
+    const { collapsible, expandDir, headerPosition, preTools,
+      postTools, style = {}, title } = this.props;
+    const { expanded } = this.state;
+    const showHeader = title.length || collapsible;
+    const className = `panel${expanded ? ' expanded' : ''}`;
+
+    return (
+      <div className={className} style={style}>
+        {showHeader &&
+          <Header
+            title={title}
+            collapsible={collapsible}
+            toggleCollapse={this.toggleCollapse}
+            preTools={preTools}
+            postTools={postTools}
+          />
+        }
+        <Expander expanded={expanded} expandDir={expandDir} render={() => (
+          <div className="body-el">
+            {this.props.children}
+          </div>
+        )} />
+      </div>
+    );
+  }
+}
+
+export default Panel;