Add base accessible tabs structure including jquery, modernizr, plugi…

…n architecture

.grunt-tasks/modernizr.js

@@ -0,0 +1,9 @@
+module.exports = {
+	dist: {
+		dest: "./dist/javascripts/modernizr-custom.js",
+		options: [
+			"setClasses"
+		],
+		uglify: true
+	}
+};

Gruntfile.js

@@ -13,7 +13,7 @@ module.exports = function(grunt) {
 
 	r("lint", ["sasslint", "eslint"]);
 	r("docs", ["sassdoc", "documentation"]);
-	r("build", ["sass", "webpack"]);
+	r("build", ["modernizr", "sass", "webpack"]);
 	r("serve", ["express", "open", "parallel:watch"]);
 
 	r("default", ["lint", "docs", "build", "serve"]);

package.json

@@ -47,10 +47,12 @@
     "grunt-documentation": "^1.2.0",
     "grunt-eslint": "^19.0.0",
     "grunt-jsdoc": "^2.1.0",
+    "grunt-modernizr": "^1.0.2",
     "grunt-sass": "^1.2.0",
     "grunt-sassdoc": "^2.0.2",
     "grunt-webpack": "^1.0.11",
     "html-minifier": "^3.0.1",
+    "jquery": "^3.1.0",
     "jsdoc-babel": "^0.2.1",
     "load-grunt-config": "^0.19.2",
     "load-grunt-tasks": "^3.5.0",

src/javascripts/plugin-autoloader.js

@@ -0,0 +1,21 @@
+import $ from "jquery";
+
+// Load all modules from this directory automatically, see http://stackoverflow.com/a/31770875/486434
+var req = require.context("./", true, /^(.*\.(js$))[^.]*$/igm);
+req.keys().forEach(function(key){
+	req(key);
+});
+
+/// Auto plugin loader.
+/// Useful for JIT loading of plugins
+export default {
+	findPlugins: function($context) {
+		// Load any plugins automatically
+		$("[data-nice-plugin]", $context || $(document)).each((i, el) => {
+			let $el = $(el),
+				pluginName = $el.data("nicePlugin");
+			// TODO: Convert plugin data-attributes into options object
+			$el[pluginName]();
+		});
+	}
+};

src/javascripts/tabs.js

@@ -1,7 +1,63 @@
+/*eslint-env browser */
+import $ from "jquery";
+
+const NAME = "tabs";
+
+const ClassName = {
+	Tabs: ".tabs",
+	Tab: "tabs__tab",
+	TabActive: "tabs__tab--active",
+	TabPane: "tabs__pane",
+	TabPaneActive: "tabs__pane--active"
+};
+
+class Tab {
+
+	constructor(element: HTMLElement) {
+		this._element = element;
+		this._bindEvents();
+		this.activate(0);
+	}
+
+	/// Activates a tab with the given index
+	/// @param {number} index The index of the tab to activate
+	activate(index: number) {
+		// TODO: Look with the closest Tabs collection
+		$(`.${ClassName.Tab}`)
+			.removeClass(ClassName.TabActive)
+			.find("a")
+				.attr("aria-expanded", false)
+			.end()
+			.eq(index)
+			.addClass(ClassName.TabActive)
+			.find("a")
+				.attr("aria-expanded", true);
+
+		$(`.${ClassName.TabPane}`)
+			.removeClass(ClassName.TabPaneActive)
+			.eq(index)
+			.addClass(ClassName.TabPaneActive);
+	}
+
+	// PRIVATE
+
+	_bindEvents() {
+		$(this._element).on("click", `.${ClassName.Tab} a`, e => {
+			var index = $(e.currentTarget).parent().index();
+			this.activate(index);
+			e.preventDefault();
+		});
+	}
+
+	static _jQueryInterface(config: mixed) {
+		return this.each(() => new Tab(this[0]));
+	}
+}
+
+$.fn[NAME] = Tab._jQueryInterface;
+
 /**
  * @module A test module
  * Tabs
  */
-module.exports = (): void => {
-	return "This is from the tabs module";
-};
+export default Tab;

src/stylesheets/_bootstrap.scss

@@ -29,3 +29,4 @@
 @import 'components/navbar';
 @import 'components/breadcrumbs';
 @import 'components/tables';
+@import 'components/tabs';

src/stylesheets/components/_breadcrumbs.scss

@@ -1,3 +1,7 @@
+////
+/// @group components
+////
+
 .breadcrumbs {
 	list-style: none;
 	padding: scut-em(12 0);

src/stylesheets/components/_buttons.scss

@@ -1,3 +1,6 @@
+////
+/// @group components
+////
 
 .btn {
 	@include remove-mz-focus-inner;

src/stylesheets/components/_tables.scss

@@ -1,3 +1,8 @@
+////
+/// @group components
+////
+
+
 // Tables
 // ==========================================================================
 $border-colour: #ccc;

src/stylesheets/components/_tabs.scss

@@ -0,0 +1,56 @@
+////
+/// @group components
+////
+
+/// Tabbed navigational structure
+.tabs {
+
+	/// The list of tabs
+	&__list {
+		list-style: none;
+		margin: 0;
+		overflow: hidden;
+		padding: 0;
+	}
+
+	///
+	&__tab {
+		float: left;
+
+		a {
+			display: block;
+			line-height: 4rem;
+			margin: 0;
+			padding: 0 1rem;
+		}
+
+		&--active {
+			background: get-colour(grey, light);
+		}
+
+		a {
+			&:hover {
+				background: get-colour(grey);
+			}
+		}
+	}
+
+	/// The tab content containing the tab panels
+	&__content {
+		background: get-colour(grey, light);
+		padding: 1rem;
+	}
+
+	/// An individual tab content pane
+	&__pane {
+
+		// Assume tabs will stack if no JS is available
+		.js & {
+			display: none;
+
+			&--active {
+				display: block;
+			}
+		}
+	}
+}

web/client/javascripts/app.js

@@ -1,12 +1,9 @@
-import test from "departments";
-import tabs from "tabs";
+//import tab from "tabs";
+import $ from "jquery";
+import pluginAutoLoader from "plugin-autoloader";
 
-console.log("tabs", tabs);
+$().ready(function() {
 
-console.log("test", test);
-
-function sum(a: number, b: number): number {
-	return a + b;
-}
-
-sum(1, 2);
+	// Load any plugins automatically
+	pluginAutoLoader.findPlugins();
+});

web/server/views/layouts/_layout.njk

@@ -1,12 +1,14 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="no-js">
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
 
 	<title>{{ title }} | NICE Experience</title>
 
+	<script src="/javascripts/modernizr-custom.js"></script>
+
 	<link rel="shortcut icon" href="/favicon.ico" />
 	<link rel="stylesheet" href="/stylesheets/main.css" type="text/css" media="screen" charset="utf-8">
 	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css">
@@ -21,7 +23,7 @@
 				<strong class="phase-tag phase-tag--alpha">ALPHA</strong>
 			</span>
 			<span class="phase-banner__label">
-				NICE Experience is in development. This means there it isn't feature complete and there will be issues. Find any? Please, let us know!
+				NICE Experience is in development. This means there it isn't feature complete and there may be issues. Find any? Please, let us know!
 			</span>
 		</p>
 	</div>

web/server/views/style-guide/tabs.njk

@@ -0,0 +1,56 @@
+{% extends "./_style-guide-layout.njk" %}
+{% set title = "Tabs" %}
+
+{% block main %}
+
+	<h1>Tabs</h1>
+
+	<nav>
+		<ul>
+			<li><a href="#basics">Basics</a></li>
+		</ul>
+	</nav>
+
+	<section id="basics">
+		<h2>Basics</h2>
+
+		{% example -%}
+			<div class="tabs" data-nice-plugin="tabs">
+				<nav>
+					<ul class="tabs__list" role="tablist">
+						<li class="tabs__tab tabs__tab--active" role="presentation">
+							<a id="tab-1" href="#tab-1-content" role="tab" aria-controls="tab-1-content" aria-expanded="false">
+								Tab 1
+							</a>
+						</li>
+						<li class="tabs__tab" role="presentation">
+							<a id="tab-2" href="#tab-2-content" role="tab" aria-controls="tab-2-content" aria-expanded="false">
+								Tab 2
+							</a>
+						</li>
+						<li class="tabs__tab" role="presentation">
+							<a id="tab-3" href="#tab-3-content" role="tab" aria-controls="tab-3-content" aria-expanded="false">
+								Tab 3
+							</a>
+						</li>
+					</ul>
+				</nav>
+				<div class="tabs__content">
+					<div id="tab-1-content" class="tabs__pane tabs__pane--active" role="tabpanel" aria-labelledby="tab1">
+						<h2>First tab</h2>
+						<p>This is the content for tab 1</p>
+					</div>
+					<div id="tab-2-content" class="tabs__pane" role="tabpanel" aria-labelledby="tab2">
+						<h2>Second tab</h2>
+						<p>This is the content for tab 2</p>
+					</div>
+					<div id="tab-3-content" class="tabs__pane" role="tabpanel" aria-labelledby="tab3">
+						<h2>Third tab</h2>
+						<p>This is the content for tab 3</p>
+					</div>
+				</div>
+			</div>
+		{%- endexample %}
+	</section>
+
+{% endblock %}