foundation-rails 6.2.0.1 → 6.2.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: db5dc7393f757679f2bc2f7ae4e79760b9c1ae5b
-  data.tar.gz: 154a8e1a955335b22febeb4a7a4c007574b4a12a
+  metadata.gz: 735a8b397ebc1435c95895db256eabe72558bddc
+  data.tar.gz: b97f18f8a1af0bb11365fce4242b1b774f57d2ae
 SHA512:
-  metadata.gz: 901d06f35d17aef82286425f0c953dc9df2afc8702b1754edf60d11c257c116dcabc95ff84c25a3ed75fed1801a131ed63968ebb4a90dac677f996605257299a
-  data.tar.gz: 290c889928ae9e230822ece47a7ce58630610ab2b0d996c4320c38962e7bb51b8cb19e1aeffa71d2b95228164eaff8d0e43ebe49e2b40065300d3340e0e259f0
+  metadata.gz: 71b375d65052824afddfc3a27e683e45bca0e3fe5fa3acc18881fab0ba5a1341c5bdd1915c1f499d3628ed698108e05959717c1c0de72a2d038127259eff3e64
+  data.tar.gz: af520a6d6be8af26d4f1137d6bb64d71b62d4f8c8f35fed8d0e551eb45c1c95036f4b1b7a840214ea1f466cc001e5a2c1b288dd04a0ffc372423f67dfdf99aca

data/bower.json

@@ -1,8 +1,8 @@
 {
   "name": "foundation-rails",
-  "version": "6.2.0.0",
+  "version": "6.2.1.0",
   "dependencies": {
-    "foundation-sites": "6.2.0",
+    "foundation-sites": "6.2.1",
     "motion-ui": "1.2.2"
   }
 }

data/lib/foundation/rails/version.rb

@@ -1,5 +1,5 @@
 module Foundation
   module Rails
-    VERSION = "6.2.0.1"
+    VERSION = "6.2.1.0"
   end
 end

data/lib/generators/foundation/templates/_settings.scss

@@ -352,7 +352,7 @@ $input-border: 1px solid $medium-gray;
 $input-border-focus: 1px solid $dark-gray;
 $input-shadow: inset 0 1px 2px rgba($black, 0.1);
 $input-shadow-focus: 0 0 5px $medium-gray;
-$input-cursor-disabled: default;
+$input-cursor-disabled: not-allowed;
 $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
 $input-number-spinners: true;
 $input-radius: $global-radius;
@@ -564,3 +564,4 @@ $topbar-submenu-background: $topbar-background;
 $topbar-title-spacing: 1rem;
 $topbar-input-width: 200px;
 $topbar-unstack-breakpoint: medium;
+

data/lib/generators/foundation/templates/foundation_and_overrides.scss

@@ -30,6 +30,7 @@
 @include foundation-label;
 @include foundation-media-object;
 @include foundation-menu;
+@include foundation-menu-icon;
 @include foundation-off-canvas;
 @include foundation-orbit;
 @include foundation-pagination;

data/vendor/assets/js/foundation.abide.js.es6

@@ -83,11 +83,6 @@ class Abide {
     var isGood = true;
 
     switch ($el[0].type) {
-      case 'checkbox':
-      case 'radio':
-        isGood = $el[0].checked;
-        break;
-
       case 'select':
       case 'select-one':
       case 'select-multiple':
@@ -141,6 +136,28 @@ class Abide {
     return $label;
   }
 
+  /**
+   * Get the set of labels associated with a set of radio els in this order
+   * 2. The <label> with the attribute `[for="someInputId"]`
+   * 3. The `.closest()` <label>
+   *
+   * @param {Object} $el - jQuery object to check for required attribute
+   * @returns {Boolean} Boolean value depends on whether or not attribute is checked or empty
+   */
+  findRadioLabels($els) {
+    var labels = $els.map((i, el) => {
+      var id = el.id;
+      var $label = this.$element.find(`label[for="${id}"]`);
+
+      if (!$label.length) {
+        $label = $(el).closest('label');
+      }
+      return $label[0];
+    });
+
+    return $(labels);
+  }
+
   /**
    * Adds the CSS error class as specified by the Abide settings to the label, input, and the form
    * @param {Object} $el - jQuery object to add the class to
@@ -160,11 +177,39 @@ class Abide {
     $el.addClass(this.options.inputErrorClass).attr('data-invalid', '');
   }
 
+  /**
+   * Remove CSS error classes etc from an entire radio button group
+   * @param {String} groupName - A string that specifies the name of a radio button group
+   *
+   */
+
+  removeRadioErrorClasses(groupName) {
+    var $els = this.$element.find(`:radio[name="${groupName}"]`);
+    var $labels = this.findRadioLabels($els);
+    var $formErrors = this.findFormError($els);
+
+    if ($labels.length) {
+      $labels.removeClass(this.options.labelErrorClass);
+    }
+
+    if ($formErrors.length) {
+      $formErrors.removeClass(this.options.formErrorClass);
+    }
+
+    $els.removeClass(this.options.inputErrorClass).removeAttr('data-invalid');
+
+  }
+
   /**
    * Removes CSS error class as specified by the Abide settings from the label, input, and the form
    * @param {Object} $el - jQuery object to remove the class from
    */
   removeErrorClasses($el) {
+    // radios need to clear all of the els
+    if($el[0].type == 'radio') {
+      return this.removeRadioErrorClasses($el.attr('name'));
+    }
+
     var $label = this.findLabel($el);
     var $formError = this.findFormError($el);
 
@@ -220,6 +265,7 @@ class Abide {
       equalTo = this.options.validators.equalTo($el);
     }
 
+
     var goodToGo = [clearRequire, validated, customValidator, equalTo].indexOf(false) === -1;
     var message = (goodToGo ? 'valid' : 'invalid') + '.zf.abide';
 
@@ -272,37 +318,56 @@ class Abide {
    * @returns {Boolean} Boolean value depends on whether or not the input value matches the pattern specified
    */
   validateText($el, pattern) {
-    // pattern = pattern ? pattern : $el.attr('pattern') ? $el.attr('pattern') : $el.attr('type');
+    // A pattern can be passed to this function, or it will be infered from the input's "pattern" attribute, or it's "type" attribute
     pattern = (pattern || $el.attr('pattern') || $el.attr('type'));
     var inputText = $el.val();
+    var valid = false;
+
+    if (inputText.length) {
+      // If the pattern attribute on the element is in Abide's list of patterns, then test that regexp
+      if (this.options.patterns.hasOwnProperty(pattern)) {
+        valid = this.options.patterns[pattern].test(inputText);
+      }
+      // If the pattern name isn't also the type attribute of the field, then test it as a regexp
+      else if (pattern !== $el.attr('type')) {
+        valid = new RegExp(pattern).test(inputText);
+      }
+      else {
+        valid = true;
+      }
+    }
+    // An empty field is valid if it's not required
+    else if (!$el.prop('required')) {
+      valid = true;
+    }
 
-    // if text, check if the pattern exists, if so, test it, if no text or no pattern, return true.
-    return inputText.length ?
-      this.options.patterns.hasOwnProperty(pattern) ? this.options.patterns[pattern].test(inputText) :
-        pattern && pattern !== $el.attr('type') ?
-          new RegExp(pattern).test(inputText) :
-        true :
-      true;
+    return valid;
    }
 
   /**
-   * Determines whether or a not a radio input is valid based on whether or not it is required and selected
+   * Determines whether or a not a radio input is valid based on whether or not it is required and selected. Although the function targets a single `<input>`, it validates by checking the `required` and `checked` properties of all radio buttons in its group.
    * @param {String} groupName - A string that specifies the name of a radio button group
    * @returns {Boolean} Boolean value depends on whether or not at least one radio input has been selected (if it's required)
    */
   validateRadio(groupName) {
-    var $group = this.$element.find(`:radio[name="${groupName}"]`),
-        counter = [],
-        _this = this;
-
-    $group.each(function(){
-      var rdio = $(this),
-          clear = _this.requiredCheck(rdio);
-      counter.push(clear);
-      if(clear) _this.removeErrorClasses(rdio);
+    // If at least one radio in the group has the `required` attribute, the group is considered required
+    // Per W3C spec, all radio buttons in a group should have `required`, but we're being nice
+    var $group = this.$element.find(`:radio[name="${groupName}"]`);
+    var valid = false;
+
+    // .attr() returns undefined if no elements in $group have the attribute "required"
+    if ($group.attr('required') === undefined) {
+      valid = true;
+    }
+
+    // For the group to be valid, at least one radio needs to be checked
+    $group.each((i, e) => {
+      if ($(e).prop('checked')) {
+        valid = true;
+      }
     });
 
-    return counter.indexOf(false) === -1;
+    return valid;
   }
 
   /**

data/vendor/assets/js/foundation.accordion.js.es6

@@ -38,14 +38,11 @@ class Accordion {
    */
   _init() {
     this.$element.attr('role', 'tablist');
-    this.$tabs = this.$element.children('li');
-    if (this.$tabs.length === 0) {
-      this.$tabs = this.$element.children('[data-accordion-item]');
-    }
-    this.$tabs.each(function(idx, el){
+    this.$tabs = this.$element.children('li, [data-accordion-item]');
 
+    this.$tabs.each(function(idx, el) {
       var $el = $(el),
-          $content = $el.find('[data-tab-content]'),
+          $content = $el.children('[data-tab-content]'),
           id = $content[0].id || Foundation.GetYoDigits(6, 'accordion'),
           linkId = el.id || `${id}-label`;
 
@@ -56,6 +53,7 @@ class Accordion {
         'aria-expanded': false,
         'aria-selected': false
       });
+
       $content.attr({'role': 'tabpanel', 'aria-labelledby': linkId, 'aria-hidden': true, 'id': id});
     });
     var $initActive = this.$element.find('.is-active').children('[data-tab-content]');
@@ -94,10 +92,16 @@ class Accordion {
               _this.toggle($tabContent);
             },
             next: function() {
-              $elem.next().find('a').focus().trigger('click.zf.accordion');
+              var $a = $elem.next().find('a').focus();
+              if (!_this.options.multiExpand) {
+                $a.trigger('click.zf.accordion')
+              }
             },
             previous: function() {
-              $elem.prev().find('a').focus().trigger('click.zf.accordion');
+              var $a = $elem.prev().find('a').focus();
+              if (!_this.options.multiExpand) {
+                $a.trigger('click.zf.accordion')
+              }
             },
             handled: function() {
               e.preventDefault();
@@ -132,9 +136,8 @@ class Accordion {
    * @function
    */
   down($target, firstTime) {
-    var _this = this;
-    if(!this.options.multiExpand && !firstTime){
-      var $currentActive = this.$element.find('.is-active').children('[data-tab-content]');
+    if (!this.options.multiExpand && !firstTime) {
+      var $currentActive = this.$element.children('.is-active').children('[data-tab-content]');
       if($currentActive.length){
         this.up($currentActive);
       }
@@ -146,19 +149,14 @@ class Accordion {
       .addBack()
       .parent().addClass('is-active');
 
-    // Foundation.Move(_this.options.slideSpeed, $target, function(){
-      $target.slideDown(_this.options.slideSpeed, function () {
-        /**
-         * Fires when the tab is done opening.
-         * @event Accordion#down
-         */
-        _this.$element.trigger('down.zf.accordion', [$target]);
-      });
-    // });
+    $target.slideDown(this.options.slideSpeed, () => {
+      /**
+       * Fires when the tab is done opening.
+       * @event Accordion#down
+       */
+      this.$element.trigger('down.zf.accordion', [$target]);
+    });
 
-    // if(!firstTime){
-    //   Foundation._reflow(this.$element.attr('data-accordion'));
-    // }
     $(`#${$target.attr('aria-labelledby')}`).attr({
       'aria-expanded': true,
       'aria-selected': true

data/vendor/assets/js/foundation.accordionMenu.js.es6

@@ -109,19 +109,19 @@ class AccordionMenu {
 
       $elements.each(function(i) {
         if ($(this).is($element)) {
-          $prevElement = $elements.eq(Math.max(0, i-1));
-          $nextElement = $elements.eq(Math.min(i+1, $elements.length-1));
+          $prevElement = $elements.eq(Math.max(0, i-1)).find('a').first();
+          $nextElement = $elements.eq(Math.min(i+1, $elements.length-1)).find('a').first();
 
           if ($(this).children('[data-submenu]:visible').length) { // has open sub menu
-            $nextElement = $element.find('li:first-child');
+            $nextElement = $element.find('li:first-child').find('a').first();
           }
           if ($(this).is(':first-child')) { // is first element of sub menu
-            $prevElement = $element.parents('li').first();
+            $prevElement = $element.parents('li').first().find('a').first();
           } else if ($prevElement.children('[data-submenu]:visible').length) { // if previous element has open sub menu
-            $prevElement = $prevElement.find('li:last-child');
+            $prevElement = $prevElement.find('li:last-child').find('a').first();
           }
           if ($(this).is(':last-child')) { // is last element of sub menu
-            $nextElement = $element.parents('li').first().next('li');
+            $nextElement = $element.parents('li').first().next('li').find('a').first();
           }
 
           return;
@@ -131,7 +131,7 @@ class AccordionMenu {
         open: function() {
           if ($target.is(':hidden')) {
             _this.down($target);
-            $target.find('li').first().focus();
+            $target.find('li').first().find('a').first().focus();
           }
         },
         close: function() {
@@ -139,14 +139,16 @@ class AccordionMenu {
             _this.up($target);
           } else if ($element.parent('[data-submenu]').length) { // close currently open sub
             _this.up($element.parent('[data-submenu]'));
-            $element.parents('li').first().focus();
+            $element.parents('li').first().find('a').first().focus();
           }
         },
         up: function() {
-          $prevElement.focus();
+          $prevElement.attr('tabindex', -1).focus();
+          e.preventDefault();
         },
         down: function() {
-          $nextElement.focus();
+          $nextElement.attr('tabindex', -1).focus();
+          e.preventDefault();
         },
         toggle: function() {
           if ($element.children('[data-submenu]').length) {
@@ -157,7 +159,6 @@ class AccordionMenu {
           _this.hideAll();
         },
         handled: function() {
-          e.preventDefault();
           e.stopImmediatePropagation();
         }
       });

data/vendor/assets/js/foundation.core.js.es6

@@ -2,7 +2,7 @@
 
 "use strict";
 
-var FOUNDATION_VERSION = '6.2.0';
+var FOUNDATION_VERSION = '6.2.1';
 
 // Global Foundation object
 // This is attached to the window, or used as a module for AMD/Browserify

data/vendor/assets/js/foundation.drilldown.js.es6

@@ -44,9 +44,9 @@ class Drilldown {
    * @private
    */
   _init() {
-    this.$submenuAnchors = this.$element.find('li.is-drilldown-submenu-parent');
-    this.$submenus = this.$submenuAnchors.children('[data-submenu]');
-    this.$menuItems = this.$element.find('li').not('.js-drilldown-back').attr('role', 'menuitem');
+    this.$submenuAnchors = this.$element.find('li.is-drilldown-submenu-parent').children('a');
+    this.$submenus = this.$submenuAnchors.parent('li').children('[data-submenu]');
+    this.$menuItems = this.$element.find('li').not('.js-drilldown-back').attr('role', 'menuitem').find('a');
 
     this._prepareMenu();
 
@@ -113,7 +113,7 @@ class Drilldown {
       // if(e.target !== e.currentTarget.firstElementChild){
       //   return false;
       // }
-      _this._show($elem);
+      _this._show($elem.parent('li'));
 
       if(_this.options.closeOnClick){
         var $body = $('body').not(_this.$wrapper);
@@ -132,9 +132,11 @@ class Drilldown {
    */
   _keyboardEvents() {
     var _this = this;
-    this.$menuItems.add(this.$element.find('.js-drilldown-back')).on('keydown.zf.drilldown', function(e){
+    
+    this.$menuItems.add(this.$element.find('.js-drilldown-back > a')).on('keydown.zf.drilldown', function(e){
+      
       var $element = $(this),
-          $elements = $element.parent('ul').children('li'),
+          $elements = $element.parent('li').parent('ul').children('li').children('a'),
           $prevElement,
           $nextElement;
 
@@ -145,28 +147,33 @@ class Drilldown {
           return;
         }
       });
+
       Foundation.Keyboard.handleKey(e, 'Drilldown', {
         next: function() {
           if ($element.is(_this.$submenuAnchors)) {
-            _this._show($element);
-            $element.on(Foundation.transitionend($element), function(){
-              $element.find('ul li').filter(_this.$menuItems).first().focus();
+            _this._show($element.parent('li'));
+            $element.parent('li').one(Foundation.transitionend($element), function(){
+              $element.parent('li').find('ul li a').filter(_this.$menuItems).first().focus();
             });
+            e.preventDefault();
           }
         },
         previous: function() {
-          _this._hide($element.parent('ul'));
-          $element.parent('ul').on(Foundation.transitionend($element), function(){
+          _this._hide($element.parent('li').parent('ul'));
+          $element.parent('li').parent('ul').one(Foundation.transitionend($element), function(){
             setTimeout(function() {
-              $element.parent('ul').parent('li').focus();
+              $element.parent('li').parent('ul').parent('li').children('a').first().focus();
             }, 1);
           });
+          e.preventDefault();
         },
         up: function() {
           $prevElement.focus();
+          e.preventDefault();
         },
         down: function() {
           $nextElement.focus();
+          e.preventDefault();
         },
         close: function() {
           _this._back();
@@ -174,15 +181,22 @@ class Drilldown {
         },
         open: function() {
           if (!$element.is(_this.$menuItems)) { // not menu item means back button
-            _this._hide($element.parent('ul'));
-            setTimeout(function(){$element.parent('ul').parent('li').focus();}, 1);
+            _this._hide($element.parent('li').parent('ul'));
+            $element.parent('li').parent('ul').one(Foundation.transitionend($element), function(){
+              setTimeout(function() {
+                $element.parent('li').parent('ul').parent('li').children('a').first().focus();
+              }, 1);
+            });            
+            e.preventDefault();
           } else if ($element.is(_this.$submenuAnchors)) {
-            _this._show($element);
-            setTimeout(function(){$element.find('ul li').filter(_this.$menuItems).first().focus();}, 1);
+            _this._show($element.parent('li'));
+            $element.parent('li').one(Foundation.transitionend($element), function(){
+              $element.parent('li').find('ul li a').filter(_this.$menuItems).first().focus();
+            });            
+            e.preventDefault();
           }
         },
         handled: function() {
-          e.preventDefault();
           e.stopImmediatePropagation();
         }
       });
@@ -244,7 +258,7 @@ class Drilldown {
    * Opens a submenu.
    * @function
    * @fires Drilldown#open
-   * @param {jQuery} $elem - the current element with a submenu to open.
+   * @param {jQuery} $elem - the current element with a submenu to open, i.e. the `li` tag.
    */
   _show($elem) {
     $elem.children('[data-submenu]').addClass('is-active');
@@ -256,7 +270,7 @@ class Drilldown {
    * Hides a submenu
    * @function
    * @fires Drilldown#hide
-   * @param {jQuery} $elem - the current sub-menu to hide.
+   * @param {jQuery} $elem - the current sub-menu to hide, i.e. the `ul` tag.
    */
   _hide($elem) {
     var _this = this;
@@ -319,7 +333,7 @@ Drilldown.defaults = {
    * @option
    * @example '<\li><\a>Back<\/a><\/li>'
    */
-  backButton: '<li class="js-drilldown-back"><a>Back</a></li>',
+  backButton: '<li class="js-drilldown-back"><a tabindex="0">Back</a></li>',
   /**
    * Markup used to wrap drilldown menu. Use a class name for independent styling; the JS applied class: `is-drilldown` is required. Remove the backslash (`\`) if copy and pasting.
    * @option
@@ -344,4 +358,4 @@ Drilldown.defaults = {
 // Window exports
 Foundation.plugin(Drilldown, 'Drilldown');
 
-}(jQuery);
+}(jQuery);