Sync Tab Panel examples to article

splits the tab / tabpanel classes to unique files
fixes fontawesome icons

19-tabpanel/a-tabpanel/package.json

@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome": "^1.1.2",
+    "@fortawesome/fontawesome": "^1.1.3",
     "@fortawesome/fontawesome-free-brands": "^5.0.4",
-    "@fortawesome/fontawesome-free-solid": "^5.0.4",
+    "@fortawesome/fontawesome-free-solid": "^5.0.6",
     "@fortawesome/react-fontawesome": "0.0.17",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",

19-tabpanel/a-tabpanel/src/App.css

@@ -1,83 +0,0 @@
-.tab-panel {
- display: flex;
-}
-.tab-panel.top {
- flex-direction: column;
-}
-.tab-panel.bottom {
- flex-direction: column-reverse;
-}
-.tab-panel.left {
- flex-direction: row;
-}
-.tab-panel.right {
- flex-direction: row-reverse;
-}
-
-.tab-strip {
- background-color: #e8e8e8;
- display: flex;
- justify-content: flex-start;
-}
-.tab-strip.indicator {
- justify-content: center;
-}
-.tab-panel.top .tab-strip,
-.tab-panel.bottom .tab-strip {
- flex-direction: row;
-}
-.tab-panel.left .tab-strip,
-.tab-panel.right .tab-strip {
- flex-direction: column;
-}
-
-.tab {
- text-align: center;
- cursor: pointer;
- border: 2px solid transparent;
-}
-.tab:hover {
- background-color: #d8d8d8;
-}
-.tab-panel.top .tab,
-.tab-panel.bottom .tab {
- padding: 12px 6px;
-}
-.tab-panel.left .tab,
-.tab-panel.right .tab {
- padding: 6px 12px;
-}
-.tab-panel.top .tab.active {
- border-bottom-color: #1e8bfb;
-}
-.tab-panel.left .tab.active {
- border-right-color: #1e8bfb;
-}
-.tab-panel.bottom .tab.active {
- border-top-color: #1e8bfb;
-}
-.tab-panel.right .tab.active {
- border-left-color: #1e8bfb;
-}
-.tab.active:hover {
- background-color: transparent;
-}
-.tab .fa {
- margin-right: 8px;
-}
-
-.card-ct {
- flex: 1;
- display: flex;
-}
-
-.card {
- padding: 12px;
- flex: 1 0 auto;
- display: none;
-}
-
-.card.active {
- display: block !important;
-}
-

19-tabpanel/a-tabpanel/src/App.js

@@ -1,97 +1,19 @@
 import React, { Component } from 'react';
-import FontAwesome from '@fortawesome/react-fontawesome'
-import './App.css';
-import freeSolid from '@fortawesome/fontawesome-free-solid'
-
-const Tab = (props) => {
- const { tabtext, icon, activetab, cardindex, onClick } = props,
-       isActive = (activetab === cardindex) ? 'active' : '';
-  const { [icon] : iconName } = freeSolid;
-
- return (
-   <div className={`tab ${isActive}`} onClick={onClick}>
-     {icon ? <FontAwesome name={iconName} /> : ''}
-     {tabtext}
-   </div>
- );
-};
-
-class TabPanel extends Component {
- static defaultProps = {
-   activetab: 0,
-   className: '',
-   position: 'top'
- }
-
-
- constructor (props) {
-   super(props);
-
-   this.state = {
-     activetab: props.activetab
-   }
- }
-
- render () {
-   const { children, className, position } = this.props;
-   const { activetab } = this.state;
-
-   return (
-     <div
-       {...this.props}
-       className={`${className} tab-panel ${position}`}
-     >
-       <div className={`tab-strip`}>
-         {React.Children.map(children, (child, i) =>
-           <Tab
-             onClick={this.onTabClick.bind(this, i)}
-             {...child.props}
-             cardindex={i}
-             activetab={activetab}
-           />
-         )}
-       </div>
-       <div className="card-ct">
-         {React.Children.map(children, (child, i) => {
-           const { className } = child.props,
-                 isActive = (i === activetab) ? 'active' : '',
-                 cardProps = {
-                   ...child.props,
-
-                   className: `${className} card ${isActive}`,
-                   cardindex: i,
-                   activetab
-                 };
-
-           return React.cloneElement(child, cardProps);
-         })}
-       </div>
-     </div>
-   );
- }
-
- onTabClick (activetab) {
-   this.setState({
-     activetab
-   });
- }
-}
+import TabPanel from './TabPanel';
 
 class App extends Component {
- render() {
-   return (
-     <TabPanel
-       style={{height: "400px", width: "600px"}}
-     >
-       <div tabtext="Home" icon="faHome">
-         Content for the first panel
-       </div>
-       <div tabtext="User" icon="faUser">
-         ... and the second panel
-       </div>
-     </TabPanel>
-   );
- }
+  render() {
+    return (
+      <TabPanel style={{ height: '400px', width: '600px' }}>
+        <div tabtext="Home" icon="Home">
+          Content for the first panel
+        </div>
+        <div tabtext="User" icon="User">
+          ... and the second panel
+        </div>
+      </TabPanel>
+    );
+  }
 }
 
 export default App;

19-tabpanel/a-tabpanel/src/Tab.css

@@ -0,0 +1,34 @@
+.tab {
+  text-align: center;
+  cursor: pointer;
+  border: 2px solid transparent;
+}
+.tab:hover {
+  background-color: #d8d8d8;
+}
+.tab-panel.top .tab,
+.tab-panel.bottom .tab {
+  padding: 12px 6px;
+}
+.tab-panel.left .tab,
+.tab-panel.right .tab {
+  padding: 6px 12px;
+}
+.tab-panel.top .tab.active {
+  border-bottom-color: #1e8bfb;
+}
+.tab-panel.left .tab.active {
+  border-right-color: #1e8bfb;
+}
+.tab-panel.bottom .tab.active {
+  border-top-color: #1e8bfb;
+}
+.tab-panel.right .tab.active {
+  border-left-color: #1e8bfb;
+}
+.tab.active:hover {
+  background-color: transparent;
+}
+.tab .svg-inline--fa {
+  margin-right: 8px;
+}

19-tabpanel/a-tabpanel/src/Tab.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import FontAwesome from '@fortawesome/react-fontawesome';
+import * as Icons from '@fortawesome/fontawesome-free-solid';
+import './Tab.css';
+
+const Tab = props => {
+  const { tabtext, icon, activetab, cardindex, onClick } = props,
+        isActive = activetab === cardindex ? 'active' : '';
+
+  return (
+    <div className={`tab ${isActive}`} onClick={onClick}>
+      {icon ? <FontAwesome icon={Icons[`fa${icon}`]} /> : ''}
+      {tabtext}
+    </div>
+  );
+};
+
+export default Tab;

19-tabpanel/a-tabpanel/src/TabPanel.css

@@ -0,0 +1,45 @@
+.tab-panel {
+  display: flex;
+}
+.tab-panel.top {
+  flex-direction: column;
+}
+.tab-panel.bottom {
+  flex-direction: column-reverse;
+}
+.tab-panel.left {
+  flex-direction: row;
+}
+.tab-panel.right {
+  flex-direction: row-reverse;
+}
+
+.tab-strip {
+  background-color: #e8e8e8;
+  display: flex;
+  justify-content: flex-start;
+}
+.tab-strip.indicator {
+  justify-content: center;
+}
+.tab-panel.top .tab-strip,
+.tab-panel.bottom .tab-strip {
+  flex-direction: row;
+}
+.tab-panel.left .tab-strip,
+.tab-panel.right .tab-strip {
+  flex-direction: column;
+}
+
+.card-ct {
+  flex: 1;
+  display: flex;
+} 
+.card {
+  padding: 12px;
+  flex: 1 0 auto;
+  display: none;
+}
+.card.active {
+  display: block !important;
+}