feat(tabs): Adds Tabs element and demo. Closes #19

.gitignore

@@ -6,6 +6,9 @@ npm-debug.log
 # WebStorm
 .idea/
 
+# Atom
+.jsbeautifyrc
+
 # ignore build and dist for now
 bundles/
 dist/

demo/index.scss

@@ -19,6 +19,7 @@
 @import "pages/typography/Typography";
 @import "pages/layout/Layout";
 @import "pages/button/ButtonDemo";
+@import "pages/tabs/TabsDemo";
 
 // Shameful CSS is unrefactored, quick fixes.
 // Ideally nothing is in this file - but it's better

demo/pages/app/App.js

@@ -2,7 +2,7 @@ import { Component } from 'angular2/core';
 import { CORE_DIRECTIVES } from 'angular2/common';
 import { ROUTER_DIRECTIVES, RouteConfig, Router } from 'angular2/router';
 
-import { Home, ButtonDemo, Layout, Typography, Iconography, Color } from './../pages';
+import { Home, ButtonDemo, TabsDemo, Layout, Typography, Iconography, Color } from './../pages';
 
 const template = require('./App.html');
 
@@ -21,6 +21,7 @@ const template = require('./App.html');
 
     // Element/Component/Service/etc.. Demos
     { path: '/button', component: ButtonDemo, name: 'Button' },
+    { path: '/tabs', component: TabsDemo, name: 'Tabs' },
 
     // Catch-all and redirect back to index
     { path: '/**', redirectTo: ['Home'] }
@@ -39,8 +40,8 @@ export class DemoApp {
         ];
 
         this.componentRoutes = [
-            { name: 'Button', path: '/button' }
-            // { name: 'Tabs', path: '/tabs' },
+            { name: 'Button', path: '/button' },
+            { name: 'Tabs', path: '/tabs' }
             // { name: 'Form', path: '/form' },
             // { name: 'Dropdown', path: '/dropdowns' },
             // { name: 'Tooltip', path: '/tooltips' },

demo/pages/pages.js

@@ -1,4 +1,5 @@
 export * from './button/ButtonDemo';
+export * from './tabs/TabsDemo';
 export * from './color/Color';
 export * from './typography/Typography';
 export * from './iconography/Iconography';

demo/pages/tabs/TabsDemo.js

@@ -0,0 +1,69 @@
+import { Component } from 'angular2/core';
+import { NOVO_TAB_ELEMENTS } from './../../../src/novo-elements';
+
+import { CodeSnippet } from '../../elements/codesnippet/CodeSnippet';
+
+import ButtonTabDemoTpl from './templates/ButtonTabDemo.html';
+import ColorDemoTpl from './templates/ColorDemo.html';
+import RouterDemoTpl from './templates/RouterDemo.html';
+import VerticalDemoTpl from './templates/VerticalDemo.html';
+import WhiteDemoTpl from './templates/WhiteDemo.html';
+
+const template = `
+<div class="container">
+    <h1>Tabs <small><a target="_blank" href="https://bhsource.bullhorn.com/NOVO/bh-elements/blob/master/src/elements/tabs">(source)</a></small></h1>
+    <p>Tabs make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets. Tabs in Bullhorn have two different themes; A 'color' theme for tabbed navigation on a colored background, and a 'white' theme for tabs on a white background.</p>
+
+    <h2>Themes</h2>
+
+    <h5>Color</h5>
+    <p>Colored background tab navigation gets the theme <code>theme="color"</code></p>
+    <div class="example color-tab-demo">${ColorDemoTpl}</div>
+    <code-snippet [code]="ColorDemoTpl"></code-snippet>
+
+    <h5>White</h5>
+    <p>White background tab navigation gets the theme <code>theme="white"</code></p>
+    <div class="example transparent-tab-demo">${WhiteDemoTpl}</div>
+    <code-snippet [code]="WhiteDemoTpl"></code-snippet>
+
+    <h2>Types</h2>
+
+    <h5>Vertical</h5>
+    <p>Vertical tabs get a direction attribute <code>direction="vertical"</code></p>
+    <div class="example vertical-tab-demo">${VerticalDemoTpl}</div>
+    <code-snippet [code]="VerticalDemoTpl"></code-snippet>
+
+    <h5>Button Tab Bars</h5>
+    <p>Tabbed Button Bars get a similar style treatment to the <code>"header"</code> theme button.</p>
+    <div class="example example button-tab-demo">${ButtonTabDemoTpl}</div>
+    <code-snippet [code]="ButtonTabDemoTpl"></code-snippet>
+
+    <h2>As Application Routing Mechanism</h2>
+    <p>Follows the same color/white theme as above, but doesn't use the "bh-tabs" tag and you have to add the classes and html accordingly. The header will now control and route your application and put the content in the "router-outlet" and look/feel like our tabs component.</p>
+    <div class="example transparent-tab-demo">${RouterDemoTpl}</div>
+    <code-snippet [code]="RouterDemoTpl"></code-snippet>
+</div>
+`;
+
+@Component({
+    selector: 'tabs-demo',
+    template: template,
+    directives: [NOVO_TAB_ELEMENTS, CodeSnippet]
+})
+export class TabsDemo {
+    constructor() {
+        this.ColorDemoTpl = ColorDemoTpl;
+        this.WhiteDemoTpl = WhiteDemoTpl;
+        this.VerticalDemoTpl = VerticalDemoTpl;
+        this.ButtonTabDemoTpl = ButtonTabDemoTpl;
+        this.RouterDemoTpl = RouterDemoTpl;
+    }
+
+    tabSelected() {
+        console.log('TAB SELECTED'); // eslint-disable-line
+    }
+
+    tabDeselected() {
+        console.log('TAB DESELECTED'); // eslint-disable-line
+    }
+}

demo/pages/tabs/TabsDemo.scss

@@ -0,0 +1,40 @@
+tabs-demo {
+    .example {
+        header {
+            padding-top: 50px;
+        }
+
+        novo-nav-outlet {
+            padding: 25px;
+        }
+    }
+
+    .example.color-tab-demo {
+        width: 100%;
+
+        header {
+            background: $positive;
+        }
+    }
+
+    .example.vertical-tab-demo {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        padding: 20px;
+
+        novo-nav-outlet {
+            padding: 0 25px;
+        }
+    }
+
+    .example.button-tab-demo {
+        header {
+            padding: 20px;
+
+            &.color {
+                background: $positive;
+            }
+        }
+    }
+}

demo/pages/tabs/templates/ButtonTabDemo.html

@@ -0,0 +1,39 @@
+<header class="color">
+    <novo-nav theme="color" [outlet]="buttonTab" type="button-bar">
+        <novo-tab-button>Button 1</novo-tab-button>
+        <novo-tab-button>Button 2</novo-tab-button>
+        <novo-tab-button>Button 3</novo-tab-button>
+    </novo-nav>
+</header>
+
+<novo-nav-outlet #buttonTab>
+    <novo-nav-content>
+        <h1>Tab 1 Content</h1>
+    </novo-nav-content>
+    <novo-nav-content>
+        <h1>Tab 2 Content</h1>
+    </novo-nav-content>
+    <novo-nav-content>
+        <h1>Tab 3 Content</h1>
+    </novo-nav-content>
+</novo-nav-outlet>
+
+<header>
+    <novo-nav theme="white" [outlet]="buttonTabWhite" type="button-bar">
+        <novo-tab-button>Button 1</novo-tab-button>
+        <novo-tab-button>Button 2</novo-tab-button>
+        <novo-tab-button>Button 3</novo-tab-button>
+    </novo-nav>
+</header>
+
+<novo-nav-outlet #buttonTabWhite>
+    <novo-nav-content>
+        <h1>Tab 1 Content</h1>
+    </novo-nav-content>
+    <novo-nav-content>
+        <h1>Tab 2 Content</h1>
+    </novo-nav-content>
+    <novo-nav-content>
+        <h1>Tab 3 Content</h1>
+    </novo-nav-content>
+</novo-nav-outlet>

demo/pages/tabs/templates/ColorDemo.html

@@ -0,0 +1,21 @@
+<header>
+    <novo-nav theme="color" [outlet]="colornav" direction="horizontal">
+        <novo-tab>
+            <span>
+                <i class="bhi-person"></i>Tab 1</span>
+        </novo-tab>
+        <novo-tab>
+            <span>
+                <i class="bhi-person"></i>Tab 2</span>
+        </novo-tab>
+    </novo-nav>
+</header>
+
+<novo-nav-outlet #colornav>
+    <novo-nav-content>
+        <h1>Tab 1 Content</h1>
+    </novo-nav-content>
+    <novo-nav-content>
+        <h1>Tab 2 Content</h1>
+    </novo-nav-content>
+</novo-nav-outlet>

demo/pages/tabs/templates/RouterDemo.html

@@ -0,0 +1,12 @@
+<header>
+    <novo-nav theme="white" router>
+        <novo-tab-link>
+            <span>
+                <i class="bhi-person"></i>Tab 1</span>
+        </novo-tab-link>
+        <novo-tab-link>
+            <span>
+                <i class="bhi-person"></i>Tab 2</span>
+        </novo-tab-link>
+    </novo-nav>
+</header>

demo/pages/tabs/templates/VerticalDemo.html

@@ -0,0 +1,39 @@
+<novo-nav theme="white" [outlet]="colorVert" direction="vertical">
+    <novo-tab>
+        <span>
+            <i class="bhi-person"></i>Tab 1</span>
+    </novo-tab>
+    <novo-tab>
+        <span>
+            <i class="bhi-person"></i>Tab 2</span>
+    </novo-tab>
+</novo-nav>
+
+<novo-nav-outlet #colorVert>
+    <novo-nav-content>
+        <h1>Tab 1 Content</h1>
+
+        <p>
+            Synth polaroid bitters chillwave pickled. Vegan disrupt tousled,
+            Portland keffiyeh aesthetic food truck sriracha cornhole
+            single-origin coffee church-key roof party. Leggings
+            ethical McSweeney's, normcore you probably haven't
+            heard of them Marfa organic squid. Slow-carb 90's
+            ennui Godard pug asymmetrical, narwhal VHS Tonx High
+            Life. Retro dreamcatcher synth Godard pickled Etsy
+            jean shorts beard, pour-over fanny pack mumblecore.
+            Quinoa retro aesthetic polaroid, Williamsburg American
+            Apparel plaid small batch. Blue Bottle Vice fanny
+            pack, Williamsburg roof party Wes Anderson mlkshk
+            seitan brunch before they sold out lo-fi XOXO tofu
+            scenester small batch.
+        </p>
+    </novo-nav-content>
+    <novo-nav-content>
+        <h1>Tab 2 Content</h1>
+
+        <p>
+            Synth polaroid bitters chillwave pickled.
+        </p>
+    </novo-nav-content>
+</novo-nav-outlet>

demo/pages/tabs/templates/WhiteDemo.html

@@ -0,0 +1,21 @@
+<header>
+    <novo-nav theme="white" [outlet]="whitenav">
+        <novo-tab>
+            <span>
+                <i class="bhi-person"></i>Tab 1</span>
+        </novo-tab>
+        <novo-tab>
+            <span>
+                <i class="bhi-person"></i>Tab 2</span>
+        </novo-tab>
+    </novo-nav>
+</header>
+
+<novo-nav-outlet #whitenav>
+    <novo-nav-content>
+        <h1>Tab 1 Content</h1>
+    </novo-nav-content>
+    <novo-nav-content>
+        <h1>Tab 2 Content</h1>
+    </novo-nav-content>
+</novo-nav-outlet>

src/elements/tabs.js

@@ -0,0 +1 @@
+export { NOVO_TAB_ELEMENTS } from './tabs/Tabs';

src/elements/tabs/README.md

@@ -0,0 +1,39 @@
+# Tabs
+
+## Usage
+```javascript
+export { NOVO_TAB_ELEMENTS } from './tabs/Tabs';
+```
+
+##### NovoNav Properties
+- `'theme' : String`
+  * Defines the theme of the tabs
+- `'direction' : String`
+  * Defines the direction of the tabs
+- `'outlet' : String`
+  * Used when the nav _is not_ being used as a router
+  * Defines which container element will function as the content by using an Angular2 `Local Reference`
+- `'router' : Bool`
+  * Specifies that the nav _is_ being used as a router
+
+#### NovoTab Properties
+- `'active': String`
+  * Defines which tab is active by adding `.active` class
+
+#### NovoTabButton Properties
+- `'active': String`
+  * Defines which tab is active by adding `.active` class
+
+#### NovoTabLink Properties
+- `'active': String`
+  * Defines which tab is active by adding `.active` class
+
+#### NovoNavContent Properties
+- `'active': String`
+  * Defines which tab is active by adding `.active` class
+
+#### NovoNavHeader Properties
+- `'active': String`
+  * Defines which tab is active by adding `.active` class
+- `'for': String`
+  * Defines which container element will function as the content by using an Angular2 `Local Reference`

src/elements/tabs/Tabs.e2e.js

@@ -0,0 +1,11 @@
+describe('Component: Tabs', () => {
+    beforeEach(() => {
+        browser.get('/#/tabs');
+    });
+
+    it('should have <novo-nav>', () => {
+        let subject = element(by.css('demo-app novo-nav')).isPresent();
+        let result = true;
+        expect(subject).toEqual(result);
+    });
+});