Merge branch 'develop' into fix/10585_offcanvas_incanvas_option

# Conflicts:
#	js/foundation.offcanvas.js

.eslintrc

@@ -1,5 +1,4 @@
 {
-  "ecmaVersion": 6,
   "env": {
     "browser": true,
     "builtin": true,

.travis.yml

@@ -1,6 +1,8 @@
 language: node_js
 node_js:
-  - "6"
+  - "lts/boron"
+  - "lts/carbon"
+  - "stable"
 install:
   - npm install -g bower browserstack-runner
   - npm install

README.md

@@ -44,7 +44,7 @@ Foundation has three kinds of tests: JavaScript, Sass, and visual regression. Re
 These commands will run the various tests:
 
 - `npm run test:sass`
-- `npm run test:javascript:phantomjs`
+- `npm run test:javascript:units`
 - `npm run test:visual`
 
 Testing Supported By<br/>

docs/pages/switch.md

@@ -42,6 +42,28 @@ Give the `<input>` a unique ID and point the `<label>` to it with the `for` attr
 
 ---
 
+## Disabled
+
+There may be times when you want to fix a switch into a position.  This can be accomplished by setting the `disabled` option on the switch input.
+
+```html_example
+<div class="switch">
+  <input class="switch-input" disabled checked="checked" id="exampleCheckedDisabledSwitch" type="checkbox" name="exampleCheckedDisabledSwitch">
+  <label class="switch-paddle" for="exampleCheckedDisabledSwitch">
+    <span class="show-for-sr">Can't Touch This Checked</span>
+  </label>
+</div>
+
+<div class="switch">
+  <input class="switch-input" disabled id="exampleUncheckedDisabledSwitch" type="checkbox" name="exampleUncheckedDisabledSwitch">
+  <label class="switch-paddle" for="exampleUncheckedDisabledSwitch">
+    <span class="show-for-sr">Can't Touch This Unchecked</span>
+  </label>
+</div>
+```
+
+---
+
 ## Radio Switch
 
 You can also use `<input type="radio">` instead of `checkbox` to create a series of options.

docs/pages/xy-grid.md

@@ -411,19 +411,36 @@ The cell size calculator can also be accessed as a function. This gives you the
 
 ### Responsive Grids
 
-Pair `xy-cell` with the `breakpoint()` mixin to make your grid responsive.
+Pair `xy-cell` with the `breakpoint()` mixin to make your grid responsive. The `xy-grid` mixin will automatically detect the breakpoint in which it is, but you can force it with the `$breakpoint` option.
 Refer to the Sass documentation below to learn how each mixin works and the available arguments.
 
 ```scss
-.main-content {
+.my-cell-medium-only-8 {
   @include xy-cell();
 
+  // Generate a cell with a 8/12 width on medium breakpoint only
   @include breakpoint(medium) {
     @include xy-cell(8);
   }
 }
 ```
 
+You can also use for more advanced responsive cells:
+
+```scss
+  // ... with a 8/12 width on medium breakpoint and above (with the medium gutters)
+  @include breakpoint(medium up) {
+    @include xy-cell(8);
+  }
+```
+
+```scss
+  // ... with a 8/12 width on medium, large and xlarge (with the corresponding gutters)
+  @include breakpoint(medium, large, xlarge up) {
+    @include xy-cell(8);
+  }
+```
+
 We also have a shorthand option for the above which outputs the same CSS:
 
 ```scss
@@ -432,6 +449,10 @@ We also have a shorthand option for the above which outputs the same CSS:
 }
 ```
 
+<div class="callout warning">
+  If you pass multiple breakpoints to the <code>breakpoint</code> mixin, it will duplicate its content for each of them. Be careful to only use <code>breakpoint</code> with properties that should change across breakpoints.
+</div>
+
 ### Custom Block Grid
 
 Use the `xy-grid-layout()` mixin to create your own block grid.

gulp/config.js

@@ -72,9 +72,13 @@ module.exports = {
 
   DIST_FILES: [
     './_build/assets/css/foundation.css',
+    './_build/assets/css/foundation.css.map',
     './_build/assets/css/foundation-float.css',
+    './_build/assets/css/foundation-float.css.map',
     './_build/assets/css/foundation-prototype.css',
+    './_build/assets/css/foundation-prototype.css.map',
     './_build/assets/css/foundation-rtl.css',
+    './_build/assets/css/foundation-rtl.css.map',
     '_build/assets/js/foundation.js'
   ],
 

gulp/tasks/deploy.js

@@ -47,6 +47,7 @@ gulp.task('deploy:version', function() {
 // Generates compiled CSS and JS files and puts them in the dist/ folder
 gulp.task('deploy:dist', ['sass:foundation', 'javascript:foundation'], function() {
   var cssFilter = filter(['**/*.css'], { restore: true });
+  var sourcemapFilter = filter(['**/*.css.map'], { restore: true });
   var jsFilter  = filter(['**/*.js'], { restore: true });
 
   console.log(CONFIG.DIST_FILES)
@@ -58,6 +59,9 @@ gulp.task('deploy:dist', ['sass:foundation', 'javascript:foundation'], function(
       .pipe(rename({ suffix: '.min' }))
       .pipe(gulp.dest('./dist/css'))
     .pipe(cssFilter.restore)
+    .pipe(sourcemapFilter)
+      .pipe(gulp.dest('./dist/css'))
+    .pipe(sourcemapFilter.restore)
     .pipe(jsFilter)
       .pipe(gulp.dest('./dist/js'))
       .pipe(uglify())

js/foundation.accordion.js

@@ -146,7 +146,7 @@ class Accordion extends Plugin {
       }
     });
     if(this.options.deepLink) {
-      $(window).on('popstate', this._checkDeepLink);
+      $(window).on('hashchange', this._checkDeepLink);
     }
   }
 
@@ -265,7 +265,7 @@ class Accordion extends Plugin {
     this.$element.find('[data-tab-content]').stop(true).slideUp(0).css('display', '');
     this.$element.find('a').off('.zf.accordion');
     if(this.options.deepLink) {
-      $(window).off('popstate', this._checkDeepLink);
+      $(window).off('hashchange', this._checkDeepLink);
     }
 
   }

js/foundation.dropdownMenu.js

@@ -10,7 +10,7 @@ import { Plugin } from './foundation.plugin';
 
 /**
  * DropdownMenu module.
- * @module foundation.dropdown-menu
+ * @module foundation.dropdownMenu
  * @requires foundation.util.keyboard
  * @requires foundation.util.box
  * @requires foundation.util.nest
@@ -120,12 +120,12 @@ class DropdownMenu extends Plugin {
     };
 
     if (this.options.clickOpen || hasTouch) {
-      this.$menuItems.on('click.zf.dropdownmenu touchstart.zf.dropdownmenu', handleClickFn);
+      this.$menuItems.on('click.zf.dropdownMenu touchstart.zf.dropdownMenu', handleClickFn);
     }
 
     // Handle Leaf element Clicks
     if(_this.options.closeOnClickInside){
-      this.$menuItems.on('click.zf.dropdownmenu', function(e) {
+      this.$menuItems.on('click.zf.dropdownMenu', function(e) {
         var $elem = $(this),
             hasSub = $elem.hasClass(parClass);
         if(!hasSub){
@@ -135,7 +135,7 @@ class DropdownMenu extends Plugin {
     }
 
     if (!this.options.disableHover) {
-      this.$menuItems.on('mouseenter.zf.dropdownmenu', function(e) {
+      this.$menuItems.on('mouseenter.zf.dropdownMenu', function(e) {
         var $elem = $(this),
             hasSub = $elem.hasClass(parClass);
 
@@ -145,7 +145,7 @@ class DropdownMenu extends Plugin {
             _this._show($elem.children('.is-dropdown-submenu'));
           }, _this.options.hoverDelay));
         }
-      }).on('mouseleave.zf.dropdownmenu', function(e) {
+      }).on('mouseleave.zf.dropdownMenu', function(e) {
         var $elem = $(this),
             hasSub = $elem.hasClass(parClass);
         if (hasSub && _this.options.autoclose) {
@@ -158,7 +158,7 @@ class DropdownMenu extends Plugin {
         }
       });
     }
-    this.$menuItems.on('keydown.zf.dropdownmenu', function(e) {
+    this.$menuItems.on('keydown.zf.dropdownMenu', function(e) {
       var $element = $(e.target).parentsUntil('ul', '[role="menuitem"]'),
           isTab = _this.$tabs.index($element) > -1,
           $elements = isTab ? _this.$tabs : $element.siblings('li').add($element),
@@ -270,13 +270,13 @@ class DropdownMenu extends Plugin {
   _addBodyHandler() {
     var $body = $(document.body),
         _this = this;
-    $body.off('mouseup.zf.dropdownmenu touchend.zf.dropdownmenu')
-         .on('mouseup.zf.dropdownmenu touchend.zf.dropdownmenu', function(e) {
+    $body.off('mouseup.zf.dropdownMenu touchend.zf.dropdownMenu')
+         .on('mouseup.zf.dropdownMenu touchend.zf.dropdownMenu', function(e) {
            var $link = _this.$element.find(e.target);
            if ($link.length) { return; }
 
            _this._hide();
-           $body.off('mouseup.zf.dropdownmenu touchend.zf.dropdownmenu');
+           $body.off('mouseup.zf.dropdownMenu touchend.zf.dropdownMenu');
          });
   }
 
@@ -312,7 +312,7 @@ class DropdownMenu extends Plugin {
      * Fires when the new dropdown pane is visible.
      * @event DropdownMenu#show
      */
-    this.$element.trigger('show.zf.dropdownmenu', [$sub]);
+    this.$element.trigger('show.zf.dropdownMenu', [$sub]);
   }
 
   /**
@@ -354,7 +354,7 @@ class DropdownMenu extends Plugin {
        * Fires when the open menus are closed.
        * @event DropdownMenu#hide
        */
-      this.$element.trigger('hide.zf.dropdownmenu', [$toClose]);
+      this.$element.trigger('hide.zf.dropdownMenu', [$toClose]);
     }
   }
 
@@ -363,9 +363,9 @@ class DropdownMenu extends Plugin {
    * @function
    */
   _destroy() {
-    this.$menuItems.off('.zf.dropdownmenu').removeAttr('data-is-click')
+    this.$menuItems.off('.zf.dropdownMenu').removeAttr('data-is-click')
         .removeClass('is-right-arrow is-left-arrow is-down-arrow opens-right opens-left opens-inner');
-    $(document.body).off('.zf.dropdownmenu');
+    $(document.body).off('.zf.dropdownMenu');
     Nest.Burn(this.$element, 'dropdown');
   }
 }