Add breadcrumbs pattern (#334)

* Add styles for and example of breadcrumbs component to pattern library

* Have changes to the _includes/examples files trigger a rebuild+browserSync

* Updare UITK dependency to 1.4.0

* Fix spacing on either side of carets (after new fontawesome icons landed)

* Example of pre-rendered breadcrumbs

* Code review fixes

* Upgrade to UITK 1.4.1 to fix small issue with focus management

gulp/tasks/watch.js

@@ -19,7 +19,7 @@ gulp.task('watch', ['browserSync'], function() {
     gulp.watch(config.jekyll.posts, ['jekyll-rebuild']);
     gulp.watch(config.jekyll.components, ['jekyll-rebuild']);
     gulp.watch(config.jekyll.design_elements, ['jekyll-rebuild']);
-    gulp.watch(config.jekyll.includes, ['jekyll-rebuild']);
+    gulp.watch(config.jekyll.includes, ['pldoc-scripts', 'jekyll-rebuild']);
     gulp.watch(config.jekyll.examples, ['jekyll-rebuild']);
     gulp.watch(config.jekyll.demo, ['jekyll-rebuild']);
     gulp.watch(config.jekyll.layouts, ['jekyll-rebuild']);

package.json

@@ -36,7 +36,7 @@
     "browser-sync": "*",
     "css-loader": "~0.23.1",
     "del": "*",
-    "edx-ui-toolkit": "~0.10.0",
+    "edx-ui-toolkit": "~1.4.1",
     "extract-text-webpack-plugin": "~1.0.1",
     "file-loader": "0.8.5",
     "font-awesome-loader": "0.0.1",

pattern-library/sass/_edx-pattern-library.scss

@@ -24,3 +24,4 @@
 @import 'patterns/tables';
 @import 'patterns/alerts';
 @import 'patterns/dropdown-menu';
+@import 'patterns/breadcrumbs';

pattern-library/sass/patterns/_breadcrumbs.scss

@@ -0,0 +1,20 @@
+.breadcrumbs {
+    font-family: $font-family-sans-serif;
+    font-size: font-size(small);
+    line-height: line-height(small);
+
+    .nav-item {
+        @include margin-left($baseline/4);
+        display: inline-block;
+    }
+
+    .fa-angle-right {
+        @include margin-left($baseline/4);
+        display: inline-block;
+        color: palette(grayscale, light);
+
+        @include rtl {
+            @include transform(rotateY(180deg));
+        }
+    }
+}

pldoc/_components/breadcrumbs.md

@@ -0,0 +1,53 @@
+---
+layout:                 pattern
+title:                  Breadcrumbs
+date:                   2016-02-29 00:00:00
+
+categories:             component
+tags:
+- atomic
+- pattern
+- js
+- breadcrumbs
+- nav
+
+slug:                   breadcrumbs
+
+url_styles:             "patterns/_breadcrumbs.scss"
+
+description:            Breadcrumb navigation.
+
+info:                   Accessible tiered navigation using breadcrumbs.
+ui-toolkit-component:   breadcrumbs
+js:                     "/examples/breadcrumbs-js.html"
+---
+<div class="breadcrumbs-basic example-set">
+  <h2>Basic breadcrumbs</h2>
+  <div class="has-breadcrumbs hd-3"></div>
+  <a class="add-breadcrumb" href="">Add breadcrumb</a>
+</div>
+
+<div class="breadcrumbs-prerendered example-set">
+  <h2>Pre-rendered breadcrumbs</h2>
+  <div class="has-breadcrumbs hd-3">
+    <nav class="breadcrumbs list-inline" aria-label="Example of pre-rendered breadcrumbs navigation">
+      <span class="nav-item">
+          <a href="/components/breadcrumbs/">Initial page</a>
+          <span class="fa fa-angle-right" aria-hidden="true"></span>
+      </span>
+      <span class="nav-item">
+          <a href="/components/breadcrumbs/foo">foo</a>
+          <span class="fa fa-angle-right" aria-hidden="true"></span>
+      </span>
+      <span class="nav-item">
+          <a href="/components/breadcrumbs/foo/buzz">buzz</a>
+          <span class="fa fa-angle-right" aria-hidden="true"></span>
+      </span>
+      <span class="nav-item">
+          <a href="/components/breadcrumbs/foo/buzz/bar">bar</a>
+          <span class="fa fa-angle-right" aria-hidden="true"></span>
+      </span>
+      <span class="nav-item">buzz</span>
+    </nav>
+  </div>
+</div>

pldoc/_includes/examples/breadcrumbs-js.html

@@ -0,0 +1,70 @@
+/**
+ * Starts the breadcrumbs example component.
+ */
+define([
+    'backbone',
+    'jquery',
+    'edx-ui-toolkit/js/breadcrumbs/breadcrumbs-view.js',
+    'edx-ui-toolkit/js/breadcrumbs/breadcrumbs-model.js'
+    ],
+    function(Backbone, $, BreadcrumbsView, BreadcrumbsModel) {
+        'use strict';
+
+        var router = new Backbone.Router();
+        var $wrapper = $('.breadcrumbs-basic');
+
+        var breadcrumbsView = new BreadcrumbsView({
+            el: $('.has-breadcrumbs', $wrapper),
+            model: new BreadcrumbsModel({
+                breadcrumbs: [{url: '/components/breadcrumbs/', title: 'Initial page'}],
+                label: 'Example of breadcrumbs navigation'
+            }),
+            events: {
+                'click nav.breadcrumbs a.nav-item': function (event) {
+                    event.preventDefault();
+
+                    var url = $(event.currentTarget).attr('href'),
+                        currentCrumbs = breadcrumbsView.model.get('breadcrumbs'),
+                        indexOfCrumbClick = currentCrumbs.findIndex(function(crumb){
+                            return crumb.url === url;
+                        });
+
+                    // Remove crumbs after the one that's been clicked from the stack
+                    breadcrumbsView.model.set('breadcrumbs', currentCrumbs.slice(0, indexOfCrumbClick + 1));
+
+                    router.navigate(url, {trigger: true});
+                }
+            }
+        }).render();
+
+        // This view wraps the component you will be navigating with breadcrumbs
+        new Backbone.View({
+            el: $wrapper,
+            events: {
+                'click .add-breadcrumb': function(event) {
+                    // You may choose to direct to the href of a link here, e.g.:
+                    // var url = $(event.currentTarget).attr('href');
+
+                    // This example instead generates a new random breadcrumb
+                    var path = window.location.pathname,
+                        crumbs = ['foo', 'bar', 'fizz', 'buzz'],
+                        randString = crumbs[Math.floor(Math.random() * crumbs.length)],
+                        url = path + (path.slice(-1) === '/' ? '' : '/') + randString;
+
+                    breadcrumbsView.model.set(
+                        'breadcrumbs',
+                        breadcrumbsView.model.get('breadcrumbs').concat([{
+                            url: url,
+                            title: randString
+                        }])
+                    );
+
+                    event.preventDefault();
+                    router.navigate(url, {trigger: true});
+                }
+            }
+        }).render();
+
+        Backbone.history.start({pushState: true});
+    }
+);

pldoc/static/js/pattern-library-doc.js

@@ -3,6 +3,7 @@ require(
         'jquery',
         './ui.js',
         '../../_includes/examples/dropdown-menu-js.html',
+        '../../_includes/examples/breadcrumbs-js.html',
         './edx-icons.js'
     ],
     function($, Ui) {}