small refactor and adding inverse nav

examples/basic/assets/css/example.css

@@ -17,6 +17,10 @@ header .sub-title {
   font-weight: bold;
 }
 
+.footer {
+  margin-top: 100px;
+}
+
 .logo {
   width: 150px;
   display: block;
@@ -40,12 +44,17 @@ h2 {
 
 h3 {
   font-size: 19px;
-  margin: 0 0 5px 0;
+  margin: 40px 0 0 0;
   color: #333;
 }
 
 h4 {
-  color: #BBB;
+  margin: 10px 0 20px 0;
+  color: #888;
+}
+
+h4 span {
+  font-family: "Courier New", Courier, monospace;
 }
 
 p.intro {

examples/basic/index.js

@@ -47,9 +47,9 @@ const TabsDemo1 = () => (
 
 
 // Tabs inside of Tabs
-// AutoWrap sets the content of the same size of the tabs
+// contentWrap sets the content of the same size of the tabs
 const TabsDemo2 = () => (
-  <Tabs className="theme-box" settings={{index: 2, autoWrap: true}}>
+  <Tabs className="theme-box" settings={{index: 2, contentWrap: true}}>
     <Nav className="your-class" role="tablist">
       <div role="tab">First Section</div>
       <div role="tab">Second Section</div>
@@ -68,7 +68,7 @@ const TabsDemo2 = () => (
 // attributes get inherited
 const TabsDemo3 = () => (
   <Tabs className="theme-folder" settings={{
-    index: 2, autoWrap: true, bgColor: 'salmon', color: 'black'
+    index: 2, contentAligned: true, bgColor: 'salmon', color: 'black'
   }}>
     <Nav className="your-class" role="tablist">
       <div role="tab">Mercury</div>
@@ -103,7 +103,7 @@ const TabsDemo4 = () => (
 
 // attributes get inherited
 const TabsDemo5 = () => (
-  <Tabs className="theme-two-rows" settings={{autoWrap: true}}>
+  <Tabs className="theme-two-rows" settings={{contentWrap: true}}>
     <Nav>
       <div><span>Planet Mercury</span><sub>smallest planet</sub></div>
       <div><span>Planet Venus</span><sub>hottest planet</sub></div>
@@ -118,18 +118,54 @@ const TabsDemo5 = () => (
     </Content>
   </Tabs>);
 
+// bottom nav
+const TabsDemo6 = () => (
+  <Tabs className="theme-folder" settings={{
+    contentWrap: true, bgColor: 'black', color: 'white', bottomNav: true
+  }}>
+    <Nav className="your-class" role="tablist">
+      <div role="tab">Mercury</div>
+      <div>Venus</div>
+      <div>Earth</div>
+      <div>Jupiter</div>
+    </Nav>
+    <Content>
+      <div>
+        <img src="assets/img/planets/mercury.jpg" alt="mercury" />
+        <p>First pane content paragraph placeholder box of text</p></div>
+      <div className="your-class">
+        <img src="assets/img/planets/venus.jpg" alt="venus" />
+        <p>Second pane content is a paragraph type of placeholder container</p></div>
+      <div>
+        <img src="assets/img/planets/earth.jpg" alt="earth" />
+        <p>Third pane content paragraph placeholder area</p></div>
+      <div>
+        <img src="assets/img/planets/jupiter.jpg" alt="jupiter" />
+        <p>Jupiter is the fifth planet from the Sun and the largest in the Solar System</p></div>
+    </Content>
+  </Tabs>);
+
 
 ReactDOM.render(
   <div>
     <p className="intro">Customize color and background for active tab. Specify flexible width or auto match the tab's width header. Nest tabs inside other tabs. Define speed of transition</p>
-    <h3><i>default theme</i></h3>
+    <h3>Default Theme</h3>
+    <h4>default theme</h4>
     <TabsDemo1 />
-    <h3><i>.folder--theme</i></h3>
+    <h3>Use alternate themes to customize skin</h3>
+    <h4><span>.folder-theme</span></h4>
     <TabsDemo4 />
-    <h3><i>.two-rows-theme</i></h3>
+    <h3>Title and subtitle </h3>
+    <h4><span>.two-rows-theme</span></h4>
+    <h4><span>{'{contentWrap: true}'}</span> wraps the content to the size of the nav</h4>
     <TabsDemo5 />
-    <h3><i>.box-theme</i></h3>
+    <h3>Nest tab components</h3>
+    <h4><span>.box-theme</span></h4>
     <TabsDemo2 />
+    <h3>Bottom Navigation</h3>
+    <h4><span>{'{bottomNav: true}'}</span></h4>
+    <TabsDemo6 />
+    <div className="footer"></div>
   </div>,
   document.getElementById('root')
 );

package.json

@@ -24,15 +24,13 @@
   "scripts": {
     "start": "node_modules/.bin/webpack-dev-server --inline --host 0.0.0.0 --content-base examples/",
     "build": "npm run build-js && npm run build-css",
-
     "build-css": "node-sass src/scss -o dist/css",
     "build-js": "babel --plugins transform-es2015-modules-umd src --ignore __tests__ --out-dir ./dist",
-
     "lint": "eslint ./src",
     "lintfix": "eslint ./src --fix",
     "testonly": "mocha $npm_package_options_mocha",
     "test": "npm run lint && npm run testonly",
-    "test-watch": "npm run testonly -- --watch --watch-extensions js",
+    "test-watch": "npm run testonly -- --watch --watch-extensions js"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",

src/index.js

@@ -3,32 +3,13 @@ import PropTypes from 'prop-types';
 import './scss/index.scss';
 
 const DEFAULTS  = {
-  index: 1,
-  mainClass: 'tabs-container'
+  index: 0,
+  mainClass: 'tabs-container',
+  contentWrap: false,
+  bottomNav: false
 };
 
-// DOC: custom attributes get inherited
-// add aria-roles or additonal classes
-const createSection = (sectionName) =>
-  (props) => {
-    const {handleClick, index, className, settings, ...other} = props;
-    const autoWrapClass = settings.autoWrap ? 'auto-wrap' : '';
-    return (<div className={`${sectionName} ${className || ''} ${autoWrapClass}`} {...other}>
-    {React.Children.map(props.children, (child, i) => {
-      const active = i === props.index ? 'active' : '';
-      const style = active ? {color: settings.color, background: settings.bgColor} : {};
-      const handleClick = props.handleClick ? props.handleClick.bind(null, i) : null;
-      return React.cloneElement(child, {
-        key: i,
-        className: `${sectionName}-item ${active} ${child.props.className || ''}`,
-        onClick: handleClick,
-        style,
-      })
-    })}
-    </div>
-    )
-  };
-
+// Handle state here
 const withTabs = (TabsWrapper, settings) => {
   return class WithTabs extends Component {
     constructor(props) {
@@ -56,34 +37,64 @@ const withTabs = (TabsWrapper, settings) => {
   }
 };
 
+// Put togethermain component here
 const Tabs = (props) => {
-  const settings = Object.assign({}, DEFAULTS, props.settings);
-  const TabsWrapper = (p) => {
+  const settings = {...DEFAULTS, ...props.settings};
+
+  const TabsUI = (p) => {
     const classes = `${p.className} ${props.className || ''}`;
-    const styles = Object.assign({}, props.style, p.style);
-    return (<div className={classes} style={styles}>
-      <div className={`wrapper ${settings.autoWrap && 'auto-wrap'} `}>
-        {React.cloneElement(props.children[0], {
-          index: p.index,
-          handleClick: p.handleClick,
-          settings
-        })}
-        {React.cloneElement(props.children[1], {
-          index: p.index,
-          settings
-        })}
+    const styles = {...props.style, ...p.style};
+
+    const Nav = React.cloneElement(props.children[0], {
+      index: p.index,
+      handleClick: p.handleClick,
+      settings
+    });
+    const Panels = React.cloneElement(props.children[1], {
+      index: p.index,
+      settings
+    });
+    const wrapperClass = `wrapper ${settings.contentWrap
+        && 'content-wrap'} ${settings.bottomNav && 'bottom-nav'}`;
+    return (
+      <div className={classes} style={styles}>
+        <div className={wrapperClass}>{Nav}{Panels}</div>
       </div>
-    </div>);
+    );
   };
-  const TabsClass = withTabs(TabsWrapper, settings);
-  return React.createFactory(TabsClass)();
+  return React.createFactory(withTabs(TabsUI, settings))();
 };
 
 Tabs.propTypes = {
   children: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,
   settings: PropTypes.object
 };
 
+// DOC: custom attributes get inherited
+const createSection = (sectionName) =>
+  (props) => {
+    const {handleClick, index, className, settings, ...other} = props;
+
+    // create each element/child of the section (Nav or Content)
+    return (
+      <div className={`${sectionName} ${className || ''}`} {...other}>
+      {React.Children.map(props.children, (child, i) => {
+        console.log('i: ', i, 'props.index:', props.index);
+        const active = i === props.index ? 'active' : '';
+        const style = active ? {color: settings.color, background: settings.bgColor} : {};
+        const handleClick = props.handleClick ? props.handleClick.bind(null, i) : null;
+        return React.cloneElement(child, {
+          key: i,
+          className: `${sectionName}-item ${active} ${child.props.className || ''}`,
+          onClick: handleClick,
+          style,
+        })
+      })}
+      </div>
+    )
+  };
+
+
 const Nav = createSection('tab-nav');
 const Content = createSection('tab-panel');
 

src/scss/index.scss

@@ -5,23 +5,37 @@
   color: #444;
 
   .wrapper {
-    &.auto-wrap {
+    /* contain the panel to the size of the nav */
+    &.content-wrap {
       display: table;
+      .tab-nav {
+        white-space: nowrap;
+        display: table-caption;
+        caption-side: top;
+
+        .tab-nav-item {
+          display: inline-table;
+        }
+      }
+      .tab-panel {
+        display: table-caption;
+        caption-side: bottom;
+      }
+    }
+
+    &.bottom-nav {
+      .tab-nav {
+        caption-side: bottom;
+      }
+      .tab-panel {
+        caption-side: top;
+      }
     }
   }
 
   .tab-nav {
     position: relative;
     top: 1px;
-    &.auto-wrap {
-      white-space: nowrap;
-      display: table-caption;
-      caption-side: top;
-
-      .tab-nav-item {
-        display: inline-table;
-      }
-    }
   }
 
   .tab-nav-item {
@@ -43,9 +57,24 @@
 
   .tab-panel {
     border-top: 1px solid #BBB;
-    &.auto-wrap {
-      display: table-caption;
-      caption-side: bottom;
+  }
+
+  .bottom-nav {
+    .tab-nav-item {
+      &.active {
+        border-radius: 0 0 5px 5px;
+        border-top: 1px solid transparent;
+        border-bottom: 1px solid #BBB;
+      }
+    }
+
+    .tab-panel {
+      border-top: none;
+      border-bottom: 1px solid #BBB;
+    }
+
+    .tab-nav {
+      top: -1px;
     }
   }
 
@@ -113,6 +142,25 @@ $theme1: #AAA;
       }
     }
   }
+
+  &.bottom-nav>.tab-nav  {
+    top: 0;
+    .tab-nav-item {
+      &.active {
+        border-radius: 0 0 5px 5px;
+      }
+    }
+  }
+
+  &.bottom-nav>.tab-panel  {
+    .tab-panel-item {
+      &.active {
+        border-radius: 5px 5px 0 0;
+      }
+    }
+  }
+
+
 }
 
 /* Theme box */