gent_styleguide 2.9.2 → 2.12.0

package/.codeclimate.yml

@@ -1,27 +1,64 @@
+# This .codeclimate.yml file is based upon the .codeclimate file of gent_base
+# but has less options due a different code base implemented by the style guide only.
 version: "2"
+
+prepare:
+  fetch:
+  - url: "https://raw.githubusercontent.com/digipolisgent/ci_config-files-and-scripts/master/php/drupal8/.phpmd.xml"
+    path: ".phpmd.xml"
+  - url: "http://cgit.drupalcode.org/drupal/plain/.csslintrc"
+    path: ".csslintrc"
+  - url: "https://raw.githubusercontent.com/digipolisgent/ci_config-files-and-scripts/master/php/drupal8/.eslintrc"
+    path: ".eslintignore"
+  - url: "https://raw.githubusercontent.com/digipolisgent/ci_config-files-and-scripts/master/php/drupal8/.eslintignore"
+    path: ".eslintrc"
+
+checks:
+  argument-count:
+    enabled: false
+  complex-logic:
+    config:
+      threshold: 4
+  file-lines:
+    config:
+      threshold: 250
+  method-complexity:
+    config:
+      threshold: 5
+  method-count:
+    config:
+      threshold: 20
+  method-lines:
+    config:
+      threshold: 50
+  nested-control-flow:
+    config:
+      threshold: 4
+  return-statements:
+    config:
+      threshold: 4
+  similar-code:
+    config:
+      threshold: # language-specific defaults. an override will affect all languages.
+  identical-code:
+    config:
+      threshold: # language-specific defaults. an override will affect all languages.
+
 plugins:
-  git-legal:
+  csslint:
+    enabled: true
+  eslint:
     enabled: true
-    config:
-      allow_affero_copyleft: true
-      allow_strong_copyleft: true
   duplication:
     enabled: true
     config:
       languages:
+        php:
         javascript:
-  markdownlint:
-    enabled: true
-    issue_override:
-      severity: minor
   fixme:
     enabled: true
-  eslint:
+  markdownlint:
     enabled: true
+
 exclude_patterns:
 - "**/.idea/**/*"
-- "**/.github/**/*"
-- "**/build/**/*"
-- "**/public/**/*"
-- "**/node_modules/"
-- "**/yarn.lock"

package/CHANGELOG.md

@@ -6,7 +6,21 @@ Refer to upcoming changes in our README.md under "Roadmap"
 
 ## Changes
 
-All notable changes to `digipolisgent/fractal_styleguide_gent-base`.
+All notable changes to this style guide are documented here.
+
+### 2.11.0
+
+* DTGB-140: Removed some files from the NPM package.
+* DTGB-140: Fixed a bug where `npm install` breaks 
+  the install of the style guide.
+* DTGB-276: Fixed a bug where the breadcrumb alignment was not correct. 
+
+  > **Some markup changes have been introduced so you might need some 
+    refactoring.**
+* DTGB-397: Changed the markup of radio buttons and checkboxes. They are
+  now inside their own fieldset.
+* DTGB-401: Updated links to new public gent_base repository. 
+* DTGB-402: Added a required form fields indicator at the top of forms. 
 
 ### 2.9.0
 

package/CONTRIBUTING.md

@@ -8,8 +8,15 @@
 
 Thank you for your interest in contributing to this project. There are several
 ways to help out, even if you've never worked on an open source project before.
+
+> Note that the development of this style guide is not done here. So 
+> please do not create any pull requests directly here. 
+> Instead use 
+> [this repo](https://github.com/digipolisgent/drupal_theme_gent-base) to 
+> create your pull requests.
+
 If you've found a bug or want to request a feature, you can report it by
-[posting an issue](https://github.com/StadGent/fractal_styleguide_gent-base/issues/new).
+[posting an issue](https://github.com/digipolisgent/drupal_theme_gent-base/issues/new).
 Be sure to read the [guidelines](#issues) first! If you want to contribute
 your own work (be it code or documentation), please read the [guidelines](#pull-requests)
 for submitting a pull request.

package/README.md

@@ -10,6 +10,24 @@ a web application in the corporate identity for the city of Ghent..
 [![Build Status](https://travis-ci.org/StadGent/fractal_styleguide_gent-base.svg?branch=develop)](https://travis-ci.org/StadGent/fractal_styleguide_gent-base)
 [![Maintainability](https://api.codeclimate.com/v1/badges/1aeba4d73f307d4583b9/maintainability)](https://codeclimate.com/github/StadGent/fractal_styleguide_gent-base/maintainability)
 
+## Contributing to the style guide 
+
+### Pull requests 
+
+This repository is a read only version of the style guide part of our own
+Drupal 8 base theme.
+
+If you want to develop for this style guide you need to do it in 
+[this repository](https://github.com/StadGent/drupal_theme_gent-base)
+
+> Please do not create any pull requests directly here. 
+> Instead use 
+> [this repo](https://github.com/StadGent/drupal_theme_gent-base) to 
+> create your pull requests.
+
+To contribute to the style guide please refer to the 
+[contributing document](CONTRIBUTING.md)
+
 ## Roadmap
 
 ### Style guide version 3.x
@@ -19,10 +37,6 @@ a web application in the corporate identity for the city of Ghent..
   components.
 * We will probably drop jQuery in favor for native Javascript or another.
 
-### Upcoming: 2.7.x
-
-* General changes and fixes to the style guide.
-
 ## Licenses
 
 If you are building something for the City of Ghent (Stad Gent) or Digipolis,
@@ -121,7 +135,7 @@ Example:
 @import '/sass/41-organism-overrides/**/*';
 ```
 
-Note: When using the style guide you will need to add breakpoint-sass as an
+Note: When using the style guide you will need to add a few dependencies as an
 includePath inside your gulpfile.js
 
 Example:
@@ -129,7 +143,10 @@ Example:
 ```javascript
     .pipe(sass({
       outputStyle: 'compressed',
-      includePaths: ['node_modules/breakpoint-sass/stylesheets']
+      includePaths: [
+        'node_modules/breakpoint-sass/stylesheets',
+        'node_modules/susy/sass'
+      ]
     })).on('error', sass.logError)
 ```
 

package/build/styleguide/js/base-min.js

@@ -1 +1,68 @@
-"use strict";var gent_styleguide=function(){return{TabTrap:function(t){var e=-1,n=function(t){var e=t.querySelectorAll('a[href], area[href], input:not([disabled]):not([hidden]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]');return Array.prototype.slice.call(e)}(t);this.next=function(){++e>n.length-1&&(e=0),n[e].focus()},this.back=function(){--e<0&&(e=n.length-1),n[e].focus()},this.home=function(){n[e=0].focus()},this.end=function(){e=n.length-1,n[e].focus()},this.reset=function(){e=-1},this.hasFocusables=n&&n.length>0}}}();
+'use strict';
+
+var gent_styleguide = (function () { // eslint-disable-line no-unused-vars
+
+  /**
+   * Generates a tabTrap object
+   *
+   * @param {object} container DOM-element
+   * @constructor
+   */
+  function TabTrap(container) {
+    var focusPosition = -1;
+    var focusables = getFocusables(container);
+
+    /**
+     * Returns all focusable elements within a given container.
+     *
+     * @param {object} container hamburger DOM-element
+     * @return {array} focusable elements
+     */
+    function getFocusables(container) {
+      var focusables = container
+        .querySelectorAll('a[href], ' +
+          'area[href], ' +
+          'input:not([disabled]):not([hidden]), ' +
+          'select:not([disabled]), ' +
+          'textarea:not([disabled]), ' +
+          'button:not([disabled]), ' +
+          '[tabindex="0"]');
+      return Array.prototype.slice.call(focusables);
+    }
+
+    this.next = function () {
+      if (++focusPosition > focusables.length - 1) {
+        focusPosition = 0;
+      }
+      focusables[focusPosition].focus();
+    };
+
+    this.back = function () {
+      if (--focusPosition < 0) {
+        focusPosition = focusables.length - 1;
+      }
+      focusables[focusPosition].focus();
+    };
+
+    this.home = function () {
+      focusPosition = 0;
+      focusables[focusPosition].focus();
+    };
+
+    this.end = function () {
+      focusPosition = focusables.length - 1;
+      focusables[focusPosition].focus();
+    };
+
+    this.reset = function () {
+      focusPosition = -1;
+    };
+
+    this.hasFocusables = focusables && focusables.length > 0;
+  }
+
+  return {
+    TabTrap: TabTrap
+  };
+
+})();

package/build/styleguide/js/breadcrumbs.binding-min.js

@@ -1 +1,13 @@
-"use strict";jQuery(window).on("load",function(e){this.gentStyleGuideBreadcrumb.updateMobileBreadcrumb()});
+/**
+ * @file
+ * Javascript binding of breadcrumb.functions.js
+ */
+
+'use strict';
+
+(function ($) {
+  $(window).on('load', function (e) {
+    this.gentStyleGuideBreadcrumb.updateMobileBreadcrumb();
+  });
+
+})(jQuery);

package/build/styleguide/js/breadcrumbs.functions-min.js

@@ -1 +1,131 @@
-"use strict";var gentStyleGuideBreadcrumb={};!function(e){function r(r,t,a){e("a, span",r).each(function(){var r=e(this),n=r.text().trim();n.length>t&&(n=!1!==a?n.substr(0,t-3).trim()+"...":n.substr(0,t).trim(),r.text(n))})}function t(r,t,a,n,l){null==a&&(a=2),null==n&&(n=a),t=Math.max(t,a+n+1);var i=e("li",r).length;if(i>=t){for(var u=a+1;u<=i-n;u++)e("li:nth-of-type("+u+")",r).hide();var s=e("<li>").append(e("<a>").text(l||"...").attr("href","#").click(function(t){t.preventDefault(),e(this).parent().remove(),e("li",r).show()}));a?e("li:nth-of-type("+a+")",r).after(s):r.prepend(s)}}gentStyleGuideBreadcrumb.updateMobileBreadcrumb=function(){var a=e("ol.breadcrumb, ul.nav--breadcrumb, ul.breadcrumb");if(a.length&&!a.hasClass("gentbe-processed")){a.addClass("gentbe-processed"),a.addClass("mobile-breadcrumb-processed"),e("select.nav--mobile-breadcrumb").remove();var n=a.clone();n.removeAttr("id").addClass("nav--mobile-breadcrumb"),a.after(n),r(a,150),r(n,100),t(a,6),t(n,5,1,2)}}}(jQuery);
+/**
+ * @file
+ * Breadcrumb handling and rendering.
+ */
+
+// Breadcrumb namespace definition.
+
+'use strict';
+
+var gentStyleGuideBreadcrumb = {};
+
+(function ($) {
+
+  /**
+   * Replace the mobile breadcrumb of Gent base by our own.
+   *
+   * Adds this function to a global gentStyleBreadcrumb namespace.
+   */
+  gentStyleGuideBreadcrumb.updateMobileBreadcrumb = function () {
+    var breadcrumb = $('ol.breadcrumb, ul.nav--breadcrumb, ul.breadcrumb');
+    if (breadcrumb.length && !breadcrumb.hasClass('gentbe-processed')) {
+      // Prevent duplicate processing by us or Gent base.
+      breadcrumb.addClass('gentbe-processed');
+      breadcrumb.addClass('mobile-breadcrumb-processed');
+
+      // Remove the mobile breadcrumb of Gent base.
+      $('select.nav--mobile-breadcrumb').remove();
+
+      // Duplicate the original breadcrumb as mobile version.
+      var mobile = breadcrumb.clone();
+      mobile.removeAttr('id').addClass('nav--mobile-breadcrumb');
+      breadcrumb.after(mobile);
+
+      // Truncate the labels.
+      truncateBreadcrumbLabels_(breadcrumb, 150);
+      truncateBreadcrumbLabels_(mobile, 100);
+
+      // Collapse the trail.
+      collapseBreadcrumbTrail_(breadcrumb, 6);
+      collapseBreadcrumbTrail_(mobile, 5, 1, 2);
+    }
+  };
+
+  /**
+   * Truncate the breadcrumb labels to a maximum length.
+   *
+   * @param {Object} breadcrumb
+   *   The breadcrumb element as jQuery object.
+   * @param {int} length
+   *   Maximum length of a label.
+   * @param {boolean} [ellipsis]
+   *   Wether an elipsis should be added, defaults to true.
+   */
+  function truncateBreadcrumbLabels_(breadcrumb, length, ellipsis) {
+    $('a, span', breadcrumb).each(function () {
+      var element = $(this);
+      var text = element.text().trim();
+
+      if (text.length > length) {
+        if (ellipsis !== false) {
+          text = text.substr(0, (length - 3)).trim() + '...';
+        }
+        else {
+          text = text.substr(0, length).trim();
+        }
+
+        element.text(text);
+      }
+    });
+  }
+
+  /**
+   * Collapse the breadcrumb trail by hiding some elements.
+   *
+   * @param {Object} breadcrumb
+   *   The breadcrumb element as jQuery object.
+   * @param {int} min_length
+   *   Only collapse if the trail has at least this many items.
+   * @param {int} [head]
+   *   Number of items to show at the start of the trail, defaults to 2.
+   * @param {int} [tail]
+   *   Number of items to show at the end of the trail, defaults to the same value as head.
+   * @param {string} [text]
+   *   Text to use as link to show the collapsed items, defaults to "...".
+   */
+  function collapseBreadcrumbTrail_(breadcrumb, min_length, head, tail, text) {
+    // Set the default head and tail.
+    if (head == null) {
+      head = 2;
+    }
+
+    if (tail == null) {
+      tail = head;
+    }
+
+    // Make sure we have a sensible minimum length.
+    min_length = Math.max(min_length, (head + tail + 1));
+
+    // Get the number of items.
+    var length = $('li', breadcrumb).length;
+
+    // Check if the trail has the minimum length.
+    if (length >= min_length) {
+      // Hide the items.
+      for (var i = (head + 1); i <= (length - tail); i++) {
+        $('li:nth-of-type(' + i + ')', breadcrumb).hide();
+      }
+
+      // Create the uncollapse  link.
+      var link = $('<li>').append(
+        $('<a>')
+          .text(text ? text : '...')
+          .attr('href', '#')
+          .click(function (e) {
+            e.preventDefault();
+
+            $(this).parent().remove();
+            $('li', breadcrumb).show();
+          })
+      );
+
+      // Add it.
+      if (head) {
+        $('li:nth-of-type(' + head + ')', breadcrumb).after(link);
+      }
+      else {
+        breadcrumb.prepend(link);
+      }
+    }
+  }
+})(jQuery);

package/build/styleguide/js/button-drop-min.js

@@ -1 +1,38 @@
-"use strict";!function(o){o(window).on("load",function(){var n=o(".dropbutton-wrapper");n.find(".dropbutton-toggle button").on("click",function(o){o.stopPropagation(),n.hasClass("open")?n.removeClass("open"):n.addClass("open")}),o(document).on("click",function(o){n.removeClass("open")})})}(jQuery);
+'use strict';
+
+(function ($) {
+
+  /**
+   * Invoked after after loading the initial page and after each AJAX request.
+   *
+   * @param context
+   *   The DOM context.
+   * @param settings
+   *   Object of additional settings.
+   */
+  $(window).on('load', dropButtonLoad);
+
+  /**
+   * Replace the mobile breadcrumb of Gent base by our own.
+   */
+  function dropButtonLoad() {
+    var dropButton = $('.dropbutton-wrapper');
+    var dropButtonToggle = dropButton.find('.dropbutton-toggle button');
+
+    dropButtonToggle.on('click', function (e) {
+      e.stopPropagation();
+      if (dropButton.hasClass('open')) {
+        dropButton.removeClass('open');
+      }
+      else {
+        dropButton.addClass('open');
+      }
+    });
+
+    $(document).on('click', function (e) {
+      dropButton.removeClass('open');
+    });
+
+  }
+
+})(jQuery);

package/build/styleguide/js/button-drop.binding-min.js

@@ -1 +1,13 @@
-"use strict";!function(o){o(window).on("load",function(n){o(".dropbutton-wrapper").dropButtonLoad()})}(jQuery);
+/**
+ * @file
+ * binding of button-drop.functions.js
+ */
+
+'use strict';
+
+(function ($) {
+  $(window).on('load', function (e) {
+    $('.dropbutton-wrapper').dropButtonLoad();
+  });
+
+})(jQuery);

package/build/styleguide/js/button-drop.functions-min.js

@@ -1 +1,48 @@
-"use strict";!function(o){o.fn.extend({dropButtonLoad:function(){var n=o(this);n.find(".dropbutton-toggle button").on("click",function(o){o.stopPropagation(),n.hasClass("open")?n.removeClass("open"):n.addClass("open")}),o(document).on("click",function(o){n.removeClass("open")})}})}(jQuery);
+/**
+ * @file
+ * Implements a dropdown button.
+ *
+ * @author
+ * Wim Vantomme
+ *
+ */
+'use strict';
+
+(function ($) {
+  $.fn.extend({
+
+    /**
+     * Implements a jQuery extension function.
+     *
+     * @fires event:click
+     */
+    dropButtonLoad: function () {
+      var dropButton = $(this);
+      var dropButtonToggle = dropButton.find('.dropbutton-toggle button');
+
+      /**
+       * Opens or closes the drop-down botton on click.
+       *
+       * @event click
+       */
+      dropButtonToggle.on('click', function (e) {
+        e.stopPropagation();
+        if (dropButton.hasClass('open')) {
+          dropButton.removeClass('open');
+        }
+        else {
+          dropButton.addClass('open');
+        }
+      });
+
+      /**
+       * Closes the drop-down button
+       *
+       * @event click
+       */
+      $(document).on('click', function (e) {
+        dropButton.removeClass('open');
+      });
+    }
+  });
+})(jQuery);

package/build/styleguide/js/gallery.binding-min.js

@@ -1 +1,12 @@
-"use strict";!function(e){e(document).ready(function(){var t=e(".gallery");t.length>0&&t.loadLightGallery()})}(jQuery);
+'use strict';
+
+(function ($) {
+  $(document).ready(function () {
+    var $gallery = $('.gallery');
+
+    if ($gallery.length > 0) {
+      $gallery.loadLightGallery();
+    }
+  });
+
+})(jQuery);

package/build/styleguide/js/gallery.functions-min.js

@@ -1 +1,29 @@
-"use strict";!function(t){t.fn.extend({loadLightGallery:function(){t(this).lightGallery({download:!1,getCaptionFromTitleOrAlt:!1,counter:!1})}})}(jQuery);
+/**
+ * @file
+ * Implements the jQuery light gallery plugin.
+ *
+ * @author
+ * Gert-Jan Meire
+ *
+ */
+
+'use strict';
+
+(function ($) {
+  $.fn.extend({
+
+    /**
+     * Creates a jQuery extension function.
+     *
+     */
+    loadLightGallery: function () {
+      $(this).lightGallery({
+        download: false,
+        getCaptionFromTitleOrAlt: false,
+        counter: false
+      });
+
+    }
+
+  });
+})(jQuery);

package/build/styleguide/js/hamburger-menu.binding-min.js

@@ -1 +1,17 @@
-"use strict";!function(n){n(window).on("load",function(u){var e=n(".hamburger-menu");e.length>0&&e.loadHamburgerMenu()})}(jQuery);
+/**
+ * @file
+ * Javascript binding of hamburger-menu.functions.js.
+ */
+
+'use strict';
+
+(function ($) {
+  $(window).on('load', function (e) {
+    var $hamburgerMenu = $('.hamburger-menu');
+
+    if ($hamburgerMenu.length > 0) {
+      $hamburgerMenu.loadHamburgerMenu();
+    }
+  });
+
+})(jQuery);