Added fade mechanism

.gitignore

@@ -6,4 +6,3 @@
 .idea
 npm-debug.log
 node_modules
-dist

dist/css/index.css

@@ -0,0 +1,125 @@
+.tabs-container {
+  display: block;
+  margin-bottom: 20px;
+  line-height: 21px;
+  color: #444; }
+  .tabs-container .wrapper.auto-wrap {
+    display: table; }
+  .tabs-container .tab-nav {
+    position: relative;
+    top: 1px; }
+    .tabs-container .tab-nav.auto-wrap {
+      white-space: nowrap;
+      display: table-caption;
+      caption-side: top; }
+      .tabs-container .tab-nav.auto-wrap .tab-nav-item {
+        display: inline-table; }
+  .tabs-container .tab-nav-item {
+    display: inline-block;
+    box-sizing: border-box;
+    cursor: pointer;
+    border-bottom: none;
+    border-left-color: transparent;
+    padding: 8px 12px; }
+    .tabs-container .tab-nav-item.active {
+      border-radius: 5px 5px 0 0;
+      background: white;
+      border: 1px solid #BBB;
+      border-bottom: 1px solid transparent;
+      color: #333; }
+  .tabs-container .tab-panel {
+    border-top: 1px solid #BBB; }
+    .tabs-container .tab-panel.auto-wrap {
+      display: table-caption;
+      caption-side: bottom; }
+  .tabs-container .tab-panel-item {
+    display: none;
+    padding: 10px;
+    overflow: hidden; }
+    .tabs-container .tab-panel-item.active {
+      display: block; }
+  .tabs-container .img-left {
+    float: left;
+    padding: 0 12px 0px 0; }
+  .tabs-container p {
+    margin-top: 0;
+    font-size: 13px; }
+  .tabs-container .tab-icon {
+    width: 20px;
+    height: 15px;
+    position: relative;
+    top: 4px;
+    left: -2px; }
+
+/* Theme folder */
+.tabs-container.theme-folder > .wrapper > .tab-nav .tab-nav-item {
+  background: none;
+  color: black;
+  opacity: 0.5; }
+  .tabs-container.theme-folder > .wrapper > .tab-nav .tab-nav-item.active {
+    opacity: 1;
+    border: none;
+    background-color: #AAA;
+    border-radius: 5px 5px 0 0; }
+    .tabs-container.theme-folder > .wrapper > .tab-nav .tab-nav-item.active .tab-icon {
+      display: inline-block; }
+  .tabs-container.theme-folder > .wrapper > .tab-nav .tab-nav-item .tab-icon {
+    display: none; }
+
+.tabs-container.theme-folder > .wrapper > .tab-panel {
+  color: black;
+  border: none;
+  background: none; }
+  .tabs-container.theme-folder > .wrapper > .tab-panel .tab-panel-item.active {
+    background: #AAA;
+    border-radius: 0 0 5px 5px; }
+
+/* Theme box */
+.tabs-container.theme-box > .wrapper > .tab-nav .tab-nav-item {
+  border: 1px solid #BBB;
+  border-bottom: none;
+  border-left-color: transparent;
+  border-radius: 0;
+  background: #CCC;
+  color: white;
+  position: relative;
+  top: 1px; }
+  .tabs-container.theme-box > .wrapper > .tab-nav .tab-nav-item.active {
+    background-color: #FFFFFF;
+    color: #333;
+    border-bottom: 1px solid white;
+    border-top: 3px solid red;
+    border-left-color: #BBB; }
+  .tabs-container.theme-box > .wrapper > .tab-nav .tab-nav-item:first-child {
+    border-left: 1px solid #BBB; }
+
+.tabs-container.theme-box > .wrapper > .tab-panel {
+  background: #FFFFFF;
+  border: 1px solid #BBB; }
+
+/* Theme two rows */
+.tabs-container.theme-two-rows > .wrapper > .tab-nav .tab-nav-item {
+  border: 1px solid #BBB;
+  border-bottom: none;
+  border-left-color: transparent;
+  border-radius: 0;
+  background: #CCC;
+  color: white;
+  position: relative;
+  top: 1px;
+  line-height: 13px; }
+  .tabs-container.theme-two-rows > .wrapper > .tab-nav .tab-nav-item sub {
+    display: block;
+    font-size: 10px; }
+  .tabs-container.theme-two-rows > .wrapper > .tab-nav .tab-nav-item.active {
+    background-color: #FFFFFF;
+    color: #333;
+    border-bottom: 1px solid white;
+    border-top: 3px solid red;
+    border-left-color: #BBB; }
+  .tabs-container.theme-two-rows > .wrapper > .tab-nav .tab-nav-item:first-child {
+    border-left: 1px solid #BBB; }
+
+.tabs-container.theme-two-rows > .wrapper > .tab-panel {
+  background: #FFFFFF;
+  border: 1px solid #BBB; }

dist/index.js

@@ -0,0 +1,214 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports', 'react', 'prop-types', './scss/index.scss'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require('react'), require('prop-types'), require('./scss/index.scss'));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.propTypes, global.index);
+    global.index = mod.exports;
+  }
+})(this, function (exports, _react, _propTypes) {
+  'use strict';
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.Tabs = exports.Content = exports.Nav = undefined;
+
+  var _react2 = _interopRequireDefault(_react);
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  var _createClass = function () {
+    function defineProperties(target, props) {
+      for (var i = 0; i < props.length; i++) {
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+      }
+    }
+
+    return function (Constructor, protoProps, staticProps) {
+      if (protoProps) defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) defineProperties(Constructor, staticProps);
+      return Constructor;
+    };
+  }();
+
+  function _possibleConstructorReturn(self, call) {
+    if (!self) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+
+    return call && (typeof call === "object" || typeof call === "function") ? call : self;
+  }
+
+  function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+      throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+    }
+
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+  }
+
+  var _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  function _objectWithoutProperties(obj, keys) {
+    var target = {};
+
+    for (var i in obj) {
+      if (keys.indexOf(i) >= 0) continue;
+      if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
+      target[i] = obj[i];
+    }
+
+    return target;
+  }
+
+  var DEFAULTS = {
+    index: 1,
+    mainClass: 'tabs-container'
+  };
+
+  // DOC: custom attributes get inherited
+  // add aria-roles or additonal classes
+  var createSection = function createSection(sectionName) {
+    return function (props) {
+      var handleClick = props.handleClick,
+          index = props.index,
+          className = props.className,
+          settings = props.settings,
+          other = _objectWithoutProperties(props, ['handleClick', 'index', 'className', 'settings']);
+
+      var autoWrapClass = settings.autoWrap ? 'auto-wrap' : '';
+      return _react2.default.createElement(
+        'div',
+        _extends({ className: sectionName + ' ' + (className || '') + ' ' + autoWrapClass }, other),
+        _react2.default.Children.map(props.children, function (child, i) {
+          var active = i === props.index ? 'active' : '';
+          var style = active ? { color: settings.color, background: settings.bgColor } : {};
+          var handleClick = props.handleClick ? props.handleClick.bind(null, i) : null;
+          return _react2.default.cloneElement(child, {
+            key: i,
+            className: sectionName + '-item ' + active + ' ' + (child.props.className || ''),
+            onClick: handleClick,
+            style: style
+          });
+        })
+      );
+    };
+  };
+
+  var withTabs = function withTabs(TabsWrapper, settings) {
+    return function (_Component) {
+      _inherits(WithTabs, _Component);
+
+      function WithTabs(props) {
+        _classCallCheck(this, WithTabs);
+
+        var _this = _possibleConstructorReturn(this, (WithTabs.__proto__ || Object.getPrototypeOf(WithTabs)).call(this, props));
+
+        _this.state = {
+          index: settings.index
+        };
+        _this.settings = settings;
+        _this.handleClick = _this.handleClick.bind(_this);
+        return _this;
+      }
+
+      _createClass(WithTabs, [{
+        key: 'handleClick',
+        value: function handleClick(index) {
+          this.setState({ index: index });
+        }
+      }, {
+        key: 'render',
+        value: function render() {
+          return _react2.default.createElement(TabsWrapper, {
+            className: settings.mainClass,
+            index: this.state.index,
+            handleClick: this.handleClick
+          });
+        }
+      }]);
+
+      return WithTabs;
+    }(_react.Component);
+  };
+
+  var Tabs = function Tabs(props) {
+    var settings = Object.assign({}, DEFAULTS, props.settings);
+    var TabsWrapper = function TabsWrapper(p) {
+      var classes = p.className + ' ' + (props.className || '');
+      var styles = Object.assign({}, props.style, p.style);
+      return _react2.default.createElement(
+        'div',
+        { className: classes, style: styles },
+        _react2.default.createElement(
+          'div',
+          { className: 'wrapper ' + (settings.autoWrap && 'auto-wrap') + ' ' },
+          _react2.default.cloneElement(props.children[0], {
+            index: p.index,
+            handleClick: p.handleClick,
+            settings: settings
+          }),
+          _react2.default.cloneElement(props.children[1], {
+            index: p.index,
+            settings: settings
+          })
+        )
+      );
+    };
+    var TabsClass = withTabs(TabsWrapper, settings);
+    return _react2.default.createFactory(TabsClass)();
+  };
+
+  Tabs.propTypes = {
+    children: _propTypes2.default.arrayOf(_propTypes2.default.object.isRequired).isRequired,
+    settings: _propTypes2.default.object
+  };
+
+  var Nav = createSection('tab-nav');
+  var Content = createSection('tab-panel');
+
+  exports.Nav = Nav;
+  exports.Content = Content;
+  exports.Tabs = Tabs;
+});

examples/basic/index.js

@@ -10,15 +10,12 @@ import greatTit from './assets/img/great-tit.svg';
 
 // override settings
 const settings = {
-  index: 0,
-  tabSeparation: 0,
-  transitionSpeed: 100,
-  selectedPop: false
+  index: 0
 };
 
 /* Examples */
 const TabsDemo1 = () => (
-  <Tabs settings={settings}>
+  <Tabs settings={{...settings, ...{fadeTime: 250}}}>
     <Nav>
       <div>Cardinal</div>
       <div>Tufted Titmouse</div>