Merge branch 'master' of https://github.com/ractive-foundation/ractiv…

…e-foundation into 216_tables

* 'master' of https://github.com/ractive-foundation/ractive-foundation: (27 commits)
  #238: Remove comment
  #238: Add ux-tabarea test
  #230 Fixed bug in watch stopping json files from being watched
  Removed the default hbs examples
  Dist.
  [#227] Add a11y example to give people an idea.
  [#227] Update readme.
  [#227] Refactor into a function, for future expansion.
  [#227] Refactor and move a11y code to task file.
  [#227] Colours
  [#227] Tweaking logic.
  [#227] Update readme.
  [#227] Handle all promises nicely.
  [#227] Tweaking logic.
  [#227] Tweaking logic.
  [#227] Use const for port numbers.
  [#227] WIP async a11y testing.
  [#227] Remove gulp-a11y, doesn't support URLs
  [#227] Add a11y directly to project.
  [#227] WIP working on a11y.
  ...

README.md

@@ -104,3 +104,55 @@ is basically the same as:
     <ux-iconbaritem src="images/fi-like.svg">Like</ux-iconbaritem>
 </ux-iconbar>
 ```
+
+## Accessibility (a11y)
+
+ractive-foundation uses [a11y](http://addyosmani.github.io/a11y/) with gulp for automated accessibility testing.
+
+Example uses:
+
+```
+# Build and audit entire component list
+gulp a11y
+
+# Skip the build process, just audit
+gulp a11y-only
+
+# Single component with all its use cases
+gulp a11y --component=ux-button
+gulp a11y -c ux-button
+gulp a11y-only --component=ux-button
+
+# Run only a single use case
+gulp a11y --component ux-button --usecase ClickMe
+gulp a11y -c ux-button -u ClickMe
+gulp a11y-only --component=ux-button --usecase=ClickMe
+```
+
+Example usage (failure):
+
+```
+$ gulp a11y-only -c ux-button -u BuyNow
+[17:59:54] Using gulpfile ~/dev/projects/ractive-foundation/gulpfile.js
+[17:59:54] Starting 'a11y-connect'...
+[17:59:55] Finished 'a11y-connect' after 139 ms
+[17:59:55] Starting 'a11y-only'...
+[17:59:55] Server started http://localhost:8089
+[17:59:56] a11y FAIL http://localhost:8089/testRunner.html#!/component/ux-button/use-case/BuyNow
+
+*** Begin accessibility audit results ***
+An accessibility audit found
+Warnings:
+Warning: AX_COLOR_01 (Text elements should have a reasonable contrast ratio) failed on the following element:
+#childComponent > .button
+See https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_color_01 for more information.
+
+Warning: AX_FOCUS_03 (Avoid positive integer values for tabIndex) failed on the following element:
+#childComponent > .button
+See https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_focus_03 for more information.
+
+
+*** End accessibility audit results ***
+
+[17:59:56] 'a11y-only' errored after 1.37 s One or more a11y tests failed, see log.
+```

dist/css/components.css

@@ -6,6 +6,7 @@
 
 
 
+
 .ux-orbit .orbit-container {
   height: 100%;
   position: relative;

dist/ractivef.js

@@ -1,6 +1,6 @@
 /**
  * ractive-foundation - Ractive components for Foundation 5
- * @version 0.4.0
+ * @version 0.5.0
  * @link https://github.com/ractive-foundation/ractive-foundation
  * @license MIT
  */
@@ -123,11 +123,12 @@ Ractive.defaults.templates['ux-content'] = {"v":3,"t":[{"t":7,"e":"div","a":{"id
 Ractive.defaults.templates['ux-header'] = {"v":3,"t":[{"t":4,"f":[{"t":7,"e":"h1","m":[{"t":4,"f":["id=\"",{"t":2,"r":"id"},"\""],"r":"id"},{"t":4,"f":["class=\"",{"t":2,"r":"class"},"\""],"r":"class"}],"f":[{"t":16}]}],"n":50,"x":{"r":["level"],"s":"_0==1"}}," ",{"t":4,"f":[{"t":7,"e":"h2","m":[{"t":4,"f":["id=\"",{"t":2,"r":"id"},"\""],"r":"id"},{"t":4,"f":["class=\"",{"t":2,"r":"class"},"\""],"r":"class"}],"f":[{"t":16}]}],"n":50,"x":{"r":["level"],"s":"_0==2"}}," ",{"t":4,"f":[{"t":7,"e":"h3","m":[{"t":4,"f":["id=\"",{"t":2,"r":"id"},"\""],"r":"id"},{"t":4,"f":["class=\"",{"t":2,"r":"class"},"\""],"r":"class"}],"f":[{"t":16}]}],"n":50,"x":{"r":["level"],"s":"_0==3"}}," ",{"t":4,"f":[{"t":7,"e":"h4","m":[{"t":4,"f":["id=\"",{"t":2,"r":"id"},"\""],"r":"id"},{"t":4,"f":["class=\"",{"t":2,"r":"class"},"\""],"r":"class"}],"f":[{"t":16}]}],"n":50,"x":{"r":["level"],"s":"_0==4"}}," ",{"t":4,"f":[{"t":7,"e":"h5","m":[{"t":4,"f":["id=\"",{"t":2,"r":"id"},"\""],"r":"id"},{"t":4,"f":["class=\"",{"t":2,"r":"class"},"\""],"r":"class"}],"f":[{"t":16}]}],"n":50,"x":{"r":["level"],"s":"_0==5"}}," ",{"t":4,"f":[{"t":7,"e":"h6","m":[{"t":4,"f":["id=\"",{"t":2,"r":"id"},"\""],"r":"id"},{"t":4,"f":["class=\"",{"t":2,"r":"class"},"\""],"r":"class"}],"f":[{"t":16}]}],"n":50,"x":{"r":["level"],"s":"_0==6"}}]};
 Ractive.defaults.templates['ux-iconbar'] = {"v":3,"t":[{"t":7,"e":"div","a":{"class":["icon-bar ",{"t":2,"r":"upNumClass"}," ",{"t":2,"r":"class"}],"role":"navigation"},"f":[{"t":4,"f":[{"t":4,"f":[{"t":7,"e":"ux-iconbaritem","a":{"datamodel":[{"t":2,"x":{"r":["getItemData","."],"s":"_0(_1)"}}]}}],"r":"items"}],"n":50,"r":"isDataModel"},{"t":4,"n":51,"f":[{"t":8,"r":"content"}],"r":"isDataModel"}]}]};
 Ractive.defaults.templates['ux-iconbaritem'] = {"v":3,"t":[{"t":7,"e":"a","a":{"href":[{"t":2,"r":"href"}],"class":["item ",{"t":2,"r":"class"}],"tabindex":"0","role":"button"},"m":[{"t":4,"f":["aria-labelledby=\"",{"t":2,"r":"guid"},"\""],"n":50,"x":{"r":["labels"],"s":"_0!==false"}},{"t":4,"f":["aria-label=",{"t":2,"r":"arialabel"}],"n":50,"r":"arialabel"}],"f":[{"t":4,"f":[{"t":7,"e":"img","a":{"src":[{"t":2,"r":"src"}]}}],"n":50,"r":"src"}," ",{"t":4,"f":[{"t":7,"e":"label","a":{"id":[{"t":2,"r":"guid"}]},"f":[{"t":4,"f":[{"t":3,"r":"label"}],"n":50,"r":"isDataModel"},{"t":4,"n":51,"f":[{"t":16}],"r":"isDataModel"}]}],"n":50,"x":{"r":["labels"],"s":"_0!==false"}}]}]};
+Ractive.defaults.templates['ux-keystrokes'] = {"v":3,"t":[{"t":7,"e":"kbd","f":[{"t":4,"f":[{"t":2,"r":"text"}],"n":50,"r":"isDataModel"},{"t":4,"n":51,"f":[{"t":16}],"r":"isDataModel"}]}]};
 Ractive.defaults.templates['ux-label'] = {"v":3,"t":[{"t":7,"e":"span","a":{"class":[{"t":2,"r":"class"}," label"]},"f":[{"t":4,"f":[{"t":2,"r":"text"}],"n":50,"r":"isDataModel"},{"t":4,"n":51,"f":[{"t":16}],"r":"isDataModel"}]}]};
 Ractive.defaults.templates['ux-li'] = {"v":3,"t":[{"t":7,"e":"li","m":[{"t":4,"f":["class=\"",{"t":2,"r":"class"},"\""],"n":50,"r":"class"},{"t":4,"f":["role=\"",{"t":2,"r":"role"},"\""],"n":50,"r":"role"}],"f":[{"t":16}]}]};
 Ractive.defaults.templates['ux-off-canvas'] = {"v":3,"t":[{"t":7,"e":"div","a":{"class":["off-canvas-wrap ",{"t":2,"r":"getExpandedClass"}," ",{"t":2,"r":"class"}],"data-offcanvas":0},"f":[{"t":7,"e":"div","a":{"class":"inner-wrap"},"f":[{"t":7,"e":"nav","a":{"class":"tab-bar"},"f":[{"t":4,"f":[{"t":7,"e":"section","a":{"class":"left-small"},"f":[{"t":7,"e":"a","a":{"class":"left-off-canvas-toggle menu-icon","aria-expanded":[{"t":2,"x":{"r":["expandedState"],"s":"_0==\"left\"?\"true\":\"false\""}}]},"v":{"tap":{"n":"updateMenu","a":"left"}},"f":[{"t":7,"e":"span"}]}]}],"n":50,"r":"leftItems"}," ",{"t":7,"e":"section","a":{"class":"middle tab-bar-section"},"f":[{"t":7,"e":"h1","a":{"class":"title"},"f":[{"t":2,"r":"title"}]}]}," ",{"t":4,"f":[{"t":7,"e":"section","a":{"class":"right-small"},"f":[{"t":7,"e":"a","a":{"class":"left-off-canvas-toggle menu-icon","aria-expanded":[{"t":2,"x":{"r":["expandedState"],"s":"_0==\"right\"?\"true\":\"false\""}}]},"v":{"tap":{"n":"updateMenu","a":"right"}},"f":[{"t":7,"e":"span"}]}]}],"n":50,"r":"rightItems"}]}," ",{"t":4,"f":[{"t":7,"e":"aside","a":{"class":"left-off-canvas-menu"},"f":[{"t":7,"e":"ux-off-canvas-list","a":{"items":[{"t":2,"r":"leftItems"}]}}]}],"n":50,"r":"leftItems"}," ",{"t":4,"f":[{"t":7,"e":"aside","a":{"class":"right-off-canvas-menu"},"f":[{"t":7,"e":"ux-off-canvas-list","a":{"items":[{"t":2,"r":"rightItems"}]}}]}],"n":50,"r":"rightItems"}," ",{"t":7,"e":"section","a":{"class":"main-section"},"f":[{"t":4,"f":[{"t":3,"r":"mainContent"}],"n":50,"r":"mainContent"},{"t":4,"n":51,"f":[{"t":16}],"r":"mainContent"}]}," ",{"t":7,"e":"a","a":{"class":"exit-off-canvas"},"v":{"tap":"updateMenu"}}]}]}]};
 Ractive.defaults.templates['ux-off-canvas-list'] = {"v":3,"t":[{"t":7,"e":"ul","a":{"class":["off-canvas-list ",{"t":2,"r":"class"}]},"f":[{"t":4,"f":[{"t":7,"e":"li","f":[{"t":4,"f":[{"t":7,"e":"a","a":{"href":[{"t":2,"r":"./href"}]},"m":[{"t":4,"f":["target=\"",{"t":2,"r":"./target"},"\""],"n":50,"r":"./target"}],"f":[{"t":3,"r":"./label"}]}],"n":50,"r":"./href"},{"t":4,"n":51,"f":[{"t":7,"e":"label","f":[{"t":3,"r":"./label"}]}],"r":"./href"}]}],"n":52,"r":"./items"}]}]};
-Ractive.defaults.templates['ux-orbit'] = {"v":3,"t":[{"t":7,"e":"div","a":{"class":["ux-orbit ",{"t":2,"r":"class"}]},"f":[{"t":7,"e":"div","a":{"class":["orbit-container ",{"t":2,"r":"currentPageCssClass"}]},"f":[{"t":7,"e":"ul","a":{"class":"pageContainer example-orbit orbit-slides-container"},"f":[{"t":4,"f":[{"t":4,"f":[{"t":7,"e":"li","a":{"class":["orbit-slides-slide ",{"t":4,"f":["active"],"r":"active"}]},"v":{"swipeleft":"nextPage","swiperight":"prevPage"},"f":[{"t":7,"e":"img","a":{"src":[{"t":2,"r":"imagesrc"}],"alt":[{"t":2,"r":"imagealt"}]}}," ",{"t":7,"e":"div","a":{"class":"orbit-caption"},"f":[{"t":2,"r":"caption"}]}]}],"r":"items"}],"n":50,"r":"isDataModel"},{"t":4,"n":51,"f":[{"t":8,"r":"content"}],"r":"isDataModel"}," ",{"t":4,"f":[{"t":7,"e":"li","a":{"class":"orbit-slides-slide"},"f":[{"t":7,"e":"h2","f":["No slides found"]}]}],"x":{"r":["slidesTotal"],"s":"_0==0"}}]}," ",{"t":4,"f":[{"t":7,"e":"a","a":{"class":"orbit-prev"},"v":{"tap":"prevPage"},"f":["Prev ",{"t":7,"e":"span"}]}," ",{"t":7,"e":"a","a":{"class":"orbit-next"},"v":{"tap":"nextPage"},"f":["Next ",{"t":7,"e":"span"}]}],"n":50,"r":"navigation_arrows"}," ",{"t":4,"f":[{"t":7,"e":"div","a":{"class":"orbit-slide-number"},"f":[{"t":7,"e":"span","f":[{"t":2,"r":"currentPage"}]}," of ",{"t":7,"e":"span","f":[{"t":2,"r":"slidesTotal"}]}]}],"n":50,"r":"slide_number"}]}," ",{"t":4,"f":[{"t":7,"e":"ol","a":{"class":"orbit-bullets"},"f":[{"t":4,"f":[{"t":7,"e":"li","a":{"data-orbit-slide-number":[{"t":2,"r":"i"}],"class":[{"t":4,"f":["active"],"r":"active"}]},"f":[]}],"i":"i","r":"items"}]}],"n":50,"r":"bullets"}]}]};
+Ractive.defaults.templates['ux-orbit'] = {"v":3,"t":[{"t":7,"e":"div","a":{"class":["ux-orbit ",{"t":2,"r":"class"}]},"f":[{"t":7,"e":"div","a":{"class":["orbit-container ",{"t":2,"r":"currentPageCssClass"}]},"f":[{"t":7,"e":"ul","a":{"class":"pageContainer example-orbit orbit-slides-container"},"f":[{"t":4,"f":[{"t":4,"f":[{"t":7,"e":"li","a":{"class":["orbit-slides-slide ",{"t":4,"f":["active"],"n":50,"x":{"r":["i","currentPage"],"s":"_0+1===_1"}}]},"v":{"swipeleft":"nextPage","swiperight":"prevPage"},"f":[{"t":7,"e":"img","a":{"src":[{"t":2,"r":"imagesrc"}],"alt":[{"t":2,"r":"imagealt"}]}}," ",{"t":7,"e":"div","a":{"class":"orbit-caption"},"f":[{"t":2,"r":"caption"}]}]}],"i":"i","r":"items"}],"n":50,"r":"isDataModel"},{"t":4,"n":51,"f":[{"t":8,"r":"content"}],"r":"isDataModel"}," ",{"t":4,"f":[{"t":7,"e":"li","a":{"class":"orbit-slides-slide"},"f":[{"t":7,"e":"h2","f":["No slides found"]}]}],"x":{"r":["slidesTotal"],"s":"_0==0"}}]}," ",{"t":4,"f":[{"t":7,"e":"a","a":{"class":"orbit-prev"},"v":{"tap":"prevPage"},"f":["Prev ",{"t":7,"e":"span"}]}," ",{"t":7,"e":"a","a":{"class":"orbit-next"},"v":{"tap":"nextPage"},"f":["Next ",{"t":7,"e":"span"}]}],"n":50,"r":"navigation_arrows"}," ",{"t":4,"f":[{"t":7,"e":"div","a":{"class":"orbit-slide-number"},"f":[{"t":7,"e":"span","f":[{"t":2,"r":"currentPage"}]}," of ",{"t":7,"e":"span","f":[{"t":2,"r":"slidesTotal"}]}]}],"n":50,"r":"slide_number"}]}," ",{"t":4,"f":[{"t":7,"e":"ol","a":{"class":"orbit-bullets"},"f":[{"t":4,"f":[{"t":7,"e":"li","a":{"data-orbit-slide-number":[{"t":2,"r":"i"}],"class":[{"t":4,"f":["active"],"n":50,"x":{"r":["i","currentPage"],"s":"_0+1===_1"}}]},"f":[]}],"i":"i","r":"items"}]}],"n":50,"r":"bullets"}]}]};
 Ractive.defaults.templates['ux-page-swipe'] = {"v":3,"t":[{"t":7,"e":"div","a":{"class":["ux-page-swipe ",{"t":2,"r":"isOnPage"}," ",{"t":2,"r":"class"}]},"f":[{"t":7,"e":"div","a":{"class":"pageContainer "},"f":[{"t":8,"r":"content"}]}]}]};
 Ractive.defaults.templates['ux-panel'] = {"v":3,"t":[{"t":7,"e":"div","a":{"class":["panel ",{"t":2,"r":"class"}]},"f":[{"t":4,"f":[{"t":2,"r":"text"}],"n":50,"r":"text"},{"t":4,"n":51,"f":[{"t":16}],"r":"text"}]}]};
 Ractive.defaults.templates['ux-pricingtable'] = {"v":3,"t":[{"t":7,"e":"ul","a":{"class":["pricing-table ",{"t":2,"r":"class"}]},"f":[{"t":8,"r":"content"}," ",{"t":7,"e":"li","a":{"class":"cta-button"},"f":[{"t":4,"f":[{"t":7,"e":"a","a":{"class":"button disabled","href":"#"},"v":{"tap":"buyNow"},"f":["Coming Soon"]}],"n":50,"x":{"r":["status"],"s":"_0==\"comingsoon\""}}," ",{"t":4,"f":[{"t":7,"e":"a","a":{"class":"button","href":[{"t":2,"r":"href"}]},"v":{"tap":"buyNow"},"f":["Buy Now"]}],"n":50,"x":{"r":["status"],"s":"!_0"}}]}]}]};
@@ -375,6 +376,11 @@ Ractive.components['ux-iconbaritem'] = Ractive.extend({
 
 });
 
+Ractive.components['ux-keystrokes'] = Ractive.extend({
+	isolated: true,
+	template: Ractive.defaults.templates['ux-keystrokes']
+});
+
 Ractive.components['ux-label'] = Ractive.extend({
 	isolated: true,
 	template: Ractive.defaults.templates['ux-label']
@@ -457,9 +463,10 @@ Ractive.components['ux-orbit'] = Ractive.extend({
 	oninit: function () {
 
 		this.on('nextPage', function (e) {
-			var nextPage = this.get('currentPage') + 1;
-			// FIXME Quick hack for bounds.
-			nextPage = nextPage > 5 ? 5 : nextPage;
+			var nextPage = this.get('currentPage') + 1,
+				slideTotal = this.get('slidesTotal');
+
+			nextPage = nextPage > slideTotal ? slideTotal : nextPage;
 			this.set('currentPage', nextPage);
 			return false;
 		});

gulpfile.js

@@ -21,18 +21,38 @@ var gulp = require('gulp'),
 	renderDocumentation = require('./tasks/renderDocumentation'),
 	concatManifests = require('./tasks/concatManifests'),
 	gulpWing = require('./tasks/gulpWing'),
-	jshintFailReporter = require('./tasks/jshintFailReporter');
+	jshintFailReporter = require('./tasks/jshintFailReporter'),
+	rfA11y = require('./tasks/rfA11y');
 
 var pkg = require('./package.json');
 
+const DEV_SERVER_PORT = 9080;
+const TEST_SERVER_PORT = 8088;
+const A11Y_SERVER_PORT = 8089;
+
 gulp.task('connect', function () {
 	plugins.connect.server({
 		root: 'public',
 		livereload: true,
-		port: 9080
+		port: DEV_SERVER_PORT
+	});
+});
+
+gulp.task('test-connect', function () {
+	plugins.connect.server({
+		root: 'public',
+		port: TEST_SERVER_PORT
 	});
 });
 
+gulp.task('a11y-connect', function (callback) {
+	plugins.connect.server({
+		root: 'public',
+		port: A11Y_SERVER_PORT
+	});
+	callback();
+});
+
 gulp.task('html', function () {
 	return gulp.src('./public/*.html')
 		.pipe(plugins.connect.reload());
@@ -274,7 +294,7 @@ gulp.task('watch', function () {
 		'src/*.html',
 		'src/pages/*.html',
 		'src/blank-pages/*.html',
-		'src/**.*.json',
+		'src/**/*.json',
 		'src/**/*.hbs',
 		'src/**/*.md',
 		'src/**/*.js',
@@ -287,14 +307,23 @@ gulp.task('watch', function () {
 
 });
 
+gulp.task('a11y-only', [ 'a11y-connect' ], function (callback) {
+
+	rfA11y.auditComponents({ port: A11Y_SERVER_PORT })
+		.then(function () {
+			callback();
+			process.exit(0);
+		})
+		.catch(function (error) {
+			callback(new Error(error));
+			process.exit(1);
+		});
+
+});
+
 // Run the test suite alone, without re-building the project. Useful for rapid test debugging.
 // See 'test' for the full build and test task.
-gulp.task('testonly', function (callback) {
-
-	plugins.connect.server({
-		root: 'public',
-		port: 8088
-	});
+gulp.task('test-only', [ 'test-connect' ], function (callback) {
 
 	var selServer = seleniumServer();
 
@@ -360,7 +389,12 @@ gulp.task('testonly', function (callback) {
 
 // Build and test the project. Default choice. Used by npm test.
 gulp.task('test', function (callback) {
-	runSequence([ 'version-check', 'build' ], 'testonly', callback);
+	runSequence([ 'version-check', 'build' ], 'test-only', callback);
+});
+
+// Currently a11y not part of standard build/test process.
+gulp.task('a11y', function (callback) {
+	runSequence([ 'version-check', 'build' ], 'a11y-only', callback);
 });
 
 gulp.task('jshint', function (callback) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ractive-foundation",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Ractive components for Foundation 5",
   "main": "dist/ractivef.js",
   "scripts": {
@@ -18,6 +18,7 @@
   },
   "homepage": "https://github.com/ractive-foundation/ractive-foundation",
   "devDependencies": {
+    "a11y": "^0.3.3",
     "del": "~1.1.1",
     "find": "~0.1.7",
     "foundation-sites": "git+https://github.com/zurb/bower-foundation.git#5.5.2",

src/components/ux-accordion/README.md

@@ -6,4 +6,5 @@ Features:
 
 * (TODO) Distributed accordion groups
 * (TODO) Accessibility
-* (TODO) Callbacks (fire RactiveJS semantic event)
+* (TODO) Callbacks (fire RactiveJS semantic event)
+

src/components/ux-alert/README.md

@@ -1,3 +1,4 @@
 > Alerts are handy elements you can drop into a form or inline on a page to communicate success, warnings, failure or just information. They'll conform to 100% of the container width you put them in.
 
-Read [Foundation's alert](http://foundation.zurb.com/docs/components/alert_boxes.html) docs for more details.
+Read [Foundation's alert](http://foundation.zurb.com/docs/components/alert_boxes.html) docs for more details.
+

src/components/ux-alert/ux-alert.steps.js

@@ -2,9 +2,8 @@ module.exports = function () {
 
 	// Load standard world object to be 'this' in steps.
 	this.World = require('../../world').World;
-
 	require('../../support/steps').call(this);
-	
+
 	this.Before(function (callback) {
 		this.component = {};
 		this.component.container	= '#childComponent';

src/components/ux-button/README.md

@@ -1,2 +1,4 @@
-
 > This renders a button
+
+Read [Foundation's button](http://foundation.zurb.com/docs/components/button.html) docs for more details.
+

src/components/ux-button/ux-button.steps.js

@@ -2,6 +2,7 @@ module.exports = function () {
 
 	// Load standard world object to be 'this' in steps.
 	this.World = require('../../world').World;
+	require('../../support/steps').call(this);
 
 	// Semantic mappings onto css selectors etc.
 	var component = { container: '#childComponent' };
@@ -15,11 +16,6 @@ module.exports = function () {
 		}
 	};
 
-	this.Given(/^I have loaded component "([^"]*)" with use case "([^"]*)"$/,
-		function (componentName, useCase, callback) {
-		this.client.loadComponentWithUseCase(componentName, useCase, callback);
-	});
-
 	this.Then(/^the element "([^"]*)" should be displayed$/, function (semanticName, callback) {
 
 		var self = this;

src/components/ux-iconbar/README.md

@@ -1,3 +1,6 @@
 An Icon Bar provides a menu to quickly navigate an app.
 Use the Icon Bar horizontally or vertically,
-with the labels below the icons or to the right. Have it your way.
+with the labels below the icons or to the right. Have it your way.
+
+Read [Foundation's iconbar](http://foundation.zurb.com/docs/components/iconbar.html) docs for more details.
+

src/components/ux-label/README.md

@@ -1,3 +1,4 @@
 > Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. For example, you can attach a label that notes when something was updated.
 
-Read [Foundation's label](http://foundation.zurb.com/docs/components/labels.html) docs for more details.
+Read [Foundation's label](http://foundation.zurb.com/docs/components/labels.html) docs for more details.
+

src/components/ux-label/ux-label.steps.js

@@ -2,6 +2,7 @@ module.exports = function () {
 
 	// Load standard world object to be 'this' in steps.
 	this.World = require('../../world').World;
+	require('../../support/steps').call(this);
 
 	this.Before(function (callback) {
 		this.component = {};
@@ -10,9 +11,4 @@ module.exports = function () {
 		callback();
 	});
 
-	this.Given(/^I have loaded component "([^"]*)" with use case "([^"]*)"$/,
-		function (componentName, useCase, callback) {
-			this.client.loadComponentWithUseCase(componentName, useCase, callback);
-	});
-
 };

src/components/ux-off-canvas/README.md

@@ -1,3 +1,4 @@
 > Off-canvas menus are positioned outside of the viewport and slide in when activated. Setting up an off-canvas layout in Foundation is super easy.
 
 Read [Foundation's offcanvas.html](http://foundation.zurb.com/docs/components/offcanvas.html) docs for more details.
+

src/components/ux-off-canvas/ux-off-canvas.steps.js

@@ -2,6 +2,7 @@ module.exports = function () {
 
 	// Load standard world object to be 'this' in steps.
 	this.World = require('../../world').World;
+	require('../../support/steps').call(this);
 
 	this.Before(function (callback) {
 		this.component = {};
@@ -10,9 +11,4 @@ module.exports = function () {
 		callback();
 	});
 
-	this.Given(/^I have loaded component "([^"]*)" with use case "([^"]*)"$/,
-		function (componentName, useCase, callback) {
-			this.client.loadComponentWithUseCase(componentName, useCase, callback);
-	});
-
 };

src/components/ux-orbit/README.md

@@ -1 +1,4 @@
 > ux-orbit Documentation
+
+Read [Foundation's orbit](http://foundation.zurb.com/docs/components/orbit.html) docs for more details.
+

src/components/ux-orbit/ux-orbit.steps.js

@@ -13,9 +13,4 @@ module.exports = function () {
 		callback();
 	});
 
-	this.Given(/^I have loaded component "([^"]*)" with use case "([^"]*)"$/,
-		function (componentName, useCase, callback) {
-			this.client.loadComponentWithUseCase(componentName, useCase, callback);
-	});
-
 };

src/components/ux-progress/README.md

@@ -1 +1,4 @@
 > ux-progress Documentation
+
+Read [Foundation's progress](http://foundation.zurb.com/docs/components/progress.html) docs for more details.
+