cleaning up comments

README.md

@@ -1,31 +1,12 @@
 # ract-tiny-tabs
 
-The package is based on [npm-base](https://github.com/kadirahq/npm-base) package by [Kadira](https://github.com/kadirahq) which is really great when you want to prepare Npm package. This one is prepared to be used as a starter point for React components which needs to be published on Npm.
+Easy to use React tab component that lets you choose from 3 themes, customize colors for text and background, use double lines in the title, wrap bottom content to match the nav width, nest tabs inside other tabs, define transition speed or use the navigation in the bottom.
 
-It includes linting with [ESLint](http://eslint.org/) and testing with [Mocha](https://mochajs.org/), [Enzyme](http://airbnb.io/enzyme/) and [JSDOM](https://github.com/tmpvar/jsdom).
-
-Also there is of course ES6 transpilation.
+See the live [DEMO:](nashio.github.com/tiny-tabs)
 
 ## Usage
 
-1. Clone this repo
-2. Inside cloned repo run `npm install && rm -rf .git && git init` and update `package.json` with your package name.
-3. If you want to run tests: `npm test` or `npm run testonly` or `npm run test-watch`. You need to write tests in `__tests__` folder. You need at least Node 4 on your machine to run tests.
-4. If you want to run linting: `npm test` or `npm run lint`. Fix bugs: `npm run lint-fix`. You can adjust your `.eslintrc` config file.
-5. If you want to run transpilation to ES5 in `dist` folder: `npm run prepublish` (standard npm hook).
-
-## CSS and preprocessors
-
-For more information check out this thread: [#5](https://github.com/juliancwirko/react-npm-boilerplate/issues/5)
-
-## Blog post about it:
-
-- [Creating React NPM packages with ES2015](http://julian.io/creating-react-npm-packages-with-es2015/)
-
-## Also check out
 
-- [React Alert UI component](https://github.com/juliancwirko/react-s-alert)
-- [React project boilerplate with Webpack, HMR, React Router](https://github.com/juliancwirko/react-boilerplate)
 
 ## License
 

examples/basic/index.js

@@ -14,6 +14,8 @@ const settings = {
 };
 
 /* Examples */
+
+// default theme, fade between tabs
 const TabsDemo1 = () => (
   <Tabs settings={{...settings, ...{fadeTime: 250}}}>
     <Nav>
@@ -62,7 +64,7 @@ const TabsDemo2 = () => (
     </Content>
   </Tabs>);
 
-// attributes get inherited
+// attributes get inherited, for ex. role="tab" carries through the generated markup
 const TabsDemo3 = () => (
   <Tabs className="theme-folder" settings={{
     index: 2, contentAligned: true, bgColor: 'salmon', color: 'black'
@@ -82,6 +84,7 @@ const TabsDemo3 = () => (
   </Tabs>);
 
 
+// Colors demo, and folder-theme demo
 const TabsDemo4 = () => (
   <Tabs className="theme-folder" settings={{bgColor: 'lightPink', color: '#333'}}>
     <Nav className="your-class" role="tablist">
@@ -98,7 +101,7 @@ const TabsDemo4 = () => (
     </Content>
   </Tabs>);
 
-// attributes get inherited
+// Double line in the title demo
 const TabsDemo5 = () => (
   <Tabs className="theme-two-rows" settings={{contentWrap: true}}>
     <Nav>
@@ -115,7 +118,7 @@ const TabsDemo5 = () => (
     </Content>
   </Tabs>);
 
-// bottom nav
+// Using the tab navigation in the bottom
 const TabsDemo6 = () => (
   <Tabs className="theme-folder" settings={{
     contentWrap: true, bgColor: 'black', color: 'white', bottomNav: true
@@ -145,22 +148,24 @@ const TabsDemo6 = () => (
 
 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>
+    <p className="intro">Easy to use React tab component that lets you choose from 3 themes, customize colors for text and background, use double lines in the title, wrap bottom content to match the nav width, nest tabs inside other tabs, define transition speed or use the navigation in the bottom</p>
     <h3>Default Theme</h3>
-    <h4>default theme</h4>
+    <h4><span>settings: {'{fadeTime: 250, index: 0}'}</span></h4>
     <TabsDemo1 />
     <h3>Use alternate themes to customize skin</h3>
-    <h4><span>.folder-theme</span></h4>
+    <h4><span>class="folder-theme"</span></h4>
+    <h4><span>settings: {'{index: 0, bgColor: \'lightPink\', color: \'#333\'}'}</span></h4>
     <TabsDemo4 />
     <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>
+    <h4><span>class="two-rows-theme"</span></h4>
+    <h4><span>settings: {'{contentWrap: true}'} // Wrap content to nav width</span></h4>
     <TabsDemo5 />
     <h3>Nest tab components</h3>
-    <h4><span>.box-theme</span></h4>
+    <h4><span>class="box-theme"</span></h4>
+    <h4><span>settings: {'{index: 2, contentWrap: true}'}</span></h4>
     <TabsDemo2 />
     <h3>Bottom Navigation</h3>
-    <h4><span>{'{bottomNav: true}'}</span></h4>
+    <h4><span>{'{bottomNav: true, bgColor: \'black\', color: \'white\', contentWrap: true}'}</span></h4>
     <TabsDemo6 />
     <div className="footer"></div>
   </div>,

src/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import './scss/index.scss';
-const BITS = 10;
+
 const DEFAULTS  = {
   index: 0,
   mainClass: 'tabs-container',