Merge branch 'release-1.10'

.sass-lint.yml

@@ -35,3 +35,6 @@ rules:
     - 2
     - max-depth:
       - 4
+  class-name-format:
+    - 1
+    - convention: hyphenatedbem

CHANGELOG.md

@@ -2,7 +2,26 @@
 
 ## UI Kit "Kraken"
 
-### `develop` - (unreleased)
+### 1.10 - 2016-11-8
+
+#### UI-Kit changes
+
+#### Larger changes
+
+- New: site navigation and page header features — see *§ Navigation: Site navigation* and *§ Page header* in the Design Guide.
+- The same link styles (via the `link-colours` mixin) for `article` are now applied to `header[role='banner']`.
+- Removes the min-width from the `$mobile-only` breakpoint.
+
+#### Smaller changes
+
+- Footer improvements:
+  - adds `ie-clearfix` mixin
+  - improves margins when footer link `ul`s collapse in mobile–tablet views and footer crest margins
+  - centers image and copyright footer content in mobile view.
+- `.lede` has been added, synonymous with `.abstract`, accessible on block elements (not `p` tags).
+- Link styles are now applied to the `<main>` element instead of `<article>`
+
+### 1.9 - 2016-11-07
 
 #### Large changes
 

Gulpfile.js

@@ -37,6 +37,7 @@ var paths = {
     readme: './README.md',
     outputAssets: './build/latest',
     outputCSS: './build/latest/*.css',
+    outputJS: './build/latest/*.js',
     outputHTML: './build'
 };
 
@@ -83,14 +84,12 @@ gulp.task('ui-kit.scss', function () {
   return gulp.src(paths.scssDir)
     .pipe(sass.sync().on('error', sass.logError))
     .pipe(autoprefixer(options.autoprefixer))
-    .pipe(gitVersion())
     .pipe(gulp.dest(paths.outputAssets));
 });
 
 gulp.task('ui-kit.js', function () {
     return gulp.src(paths.js)
         .pipe(webpack(options.webpack))
-        .pipe(gitVersion())
         .pipe(gulp.dest(paths.outputAssets));
 });
 
@@ -115,14 +114,12 @@ gulp.task('ui-kit.min.scss', ['ui-kit.scss'], function () {
 });
 
 gulp.task('ui-kit.min.js', function () {
-    return gulp.src(paths.js)
-        .pipe(webpack({
-            output: {
-                filename: 'ui-kit.min.js',
-            }
-        }))
+    return gulp.src(paths.outputJS)
         .pipe(uglify())
         .pipe(gitVersion())
+        .pipe(rename({
+            suffix: '.min'
+        }))
         .pipe(gulp.dest(paths.outputAssets));
 });
 

RELEASING.md

@@ -58,6 +58,7 @@ Files impacted:
 
 - `package.json`, line 3
 - `assets/sass/ui-kit.scss`, line 3
+- `CHANGELOG.md`
 
 ### Ensure the changelog is up to date
 

assets/js/components/accordion.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var Velocity = require('velocity-animate');
+
+module.exports = {
+
+  init: function(selector) {
+    var elems = document.querySelectorAll(selector);
+    for (var i = 0; i < elems.length; i++) {
+      var toggle = elems[i].querySelector('.accordion-button, summary');
+      var panel = elems[i].querySelector('.accordion-panel');
+      var panelLabel;
+
+      if (elems[i].getAttribute('data-label')) {
+        panelLabel = elems[i].getAttribute('data-label');
+      } else {
+        panelLabel = elems[i].className;
+      }
+
+      this._initToggle(elems[i], toggle, panel, panelLabel);
+      this._initPanel(elems[i], panel, panelLabel);
+
+    }
+  },
+
+  _initToggle: function(elem, toggle, panel, label) {
+    toggle.targetElem = elem;
+    toggle.targetPanel = panel;
+    toggle.setAttribute('aria-controls', label);
+    toggle.addEventListener('click', this._togglePanel.bind(this));
+  },
+
+  _initPanel: function(elem, panel, label) {
+    elem.id = label;
+
+    if (elem.getAttribute('aria-expanded') === 'false') {
+      this._slidePanel(panel, true);
+    }
+  },
+
+  _togglePanel: function(event) {
+    var toggle = event.target,
+        elem = event.target.targetElem,
+        panel = event.target.targetPanel,
+        expanded = elem.getAttribute('aria-expanded') === 'true';
+
+    event.preventDefault();
+
+    toggle.setAttribute('aria-expanded', expanded ? 'false' : 'true');
+    elem.setAttribute('aria-expanded', expanded ? 'false' : 'true');
+
+    this._slidePanel(panel, expanded);
+  },
+
+  _slidePanel: function(panel, bool) {
+    Velocity(panel, bool ? 'slideUp' : 'slideDown', { duration: 300 });
+  }
+
+};

assets/js/components/local-nav.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var ResponsiveNav = require('responsive-nav');
+
+module.exports = {
+
+  init: function(selectors) {
+    selectors.forEach(function(selector) {
+      if (document.querySelector(selector)) {
+        ResponsiveNav(selector);
+      }
+    });
+  }
+
+};

assets/js/components/site-nav.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var ResponsiveNav = require('responsive-nav');
+
+module.exports = {
+
+  init: function(selector) {
+    ResponsiveNav(selector);
+  }
+
+};

assets/js/ui-kit.js

@@ -1,73 +1,26 @@
-var smoothScroll = require('smoothscroll');
-var responsiveNav = require('responsive-nav');
-var Velocity = require('velocity-animate');
+'use strict';
 
-(function (document) {
-
-  initResponsiveNav = function(elementSelector) {
-    if (document.querySelector(elementSelector)) {
-      responsiveNav(elementSelector);
-    }
-  }
-
-  initAccordions = function(elems) {
-    for (var i = 0; i < elems.length; i++) {
-      var toggle = elems[i].querySelector('.accordion-button, summary');
-      var panel = elems[i].querySelector('.accordion-panel');
-
-      if (elems[i].getAttribute('data-label')) {
-        panelLabel = elems[i].getAttribute('data-label');
-      } else {
-        panelLabel = elems[i].className;
-      }
+var SmoothScroll = require('smoothscroll');
 
-      initToggle(elems[i], toggle, panel, panelLabel);
-      initPanel(elems[i], panel, panelLabel);
-
-    }
-  }
-
-  initToggle = function(elem, toggle, panel, label) {
-    toggle.targetElem = elem;
-    toggle.targetPanel = panel;
-    toggle.setAttribute('aria-controls', label);
-    toggle.addEventListener('click', togglePanel);
-  }
+var components = {
+  'Accordion': require('./components/accordion'),
+  'LocalNav': require('./components/local-nav'),
+  'SiteNav': require('./components/site-nav')
+};
 
-  initPanel = function(elem, panel, label) {
-    elem.id = label;
+(function (document) {
 
-    if (elem.getAttribute('aria-expanded') === 'false') {
-      slidePanel(panel, true);
+  function initComponent(component, selector) {
+    if (document.querySelector(selector)) {
+      components[component].init(selector);
     }
   }
 
-  togglePanel = function(event) {
-    var toggle = event.target,
-        elem = event.target.targetElem,
-        panel = event.target.targetPanel,
-        expanded = elem.getAttribute('aria-expanded') === 'true';
-
-    event.preventDefault();
-
-    toggle.setAttribute('aria-expanded', expanded ? 'false' : 'true');
-    elem.setAttribute('aria-expanded', expanded ? 'false' : 'true');
-
-    slidePanel(panel, expanded);
-  }
-
-  slidePanel = function(panel, bool) {
-    Velocity(panel, bool ? 'slideUp' : 'slideDown', { duration: 300 });
-  }
-
   // Kick of the JavaScript party when the DOM is ready
   document.addEventListener('DOMContentLoaded', function() {
-
-    initResponsiveNav('.global-nav');
-    initResponsiveNav('.local-nav');
-    initResponsiveNav('.local-nav-demo');
-
-    initAccordions(document.querySelectorAll('.accordion, details'));
+    initComponent('Accordion', '.accordion, details');
+    initComponent('LocalNav', ['.global-nav', '.local-nav', '.local-nav-demo']);
+    initComponent('SiteNav', '.site-nav__wrapper');
   });
 
 })(document);

assets/sass/_components.scss

@@ -8,6 +8,7 @@
 @import 'components/navigation';
 @import 'components/page-footer';
 @import 'components/page-header';
+@import 'components/site-nav';
 @import 'components/tables';
 @import 'components/accordions';
 @import 'components/typography';

assets/sass/components/_links.scss

@@ -211,7 +211,8 @@ Style guide: Link styles.1 Hover links
   }
 }
 
-main > article {
+header[role='banner'],
+body > main {
   @include link-colours($non-black, $light-aqua, $non-black);
   @include button-colours($button-bg-colour, $button-bg-colour--hover, $button-bg-colour--active, $button-text-colour);
 }