gent_styleguide 5.0.2 → 5.0.6

package/build/styleguide/js/table.functions.js

@@ -0,0 +1,101 @@
+'use strict';
+
+/* global define, module */
+(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define(factory);
+  }
+  else {
+    if (typeof exports === 'object') {
+      module.exports = factory();
+    }
+    else {
+      root.ResponsiveTable = factory();
+    }
+  }
+}(this || window, function () {
+  return function (element, options) {
+
+    /**
+     * The table caption.
+     */
+    let caption = null;
+
+    /**
+     * Determine if the table should be focusable.
+     */
+    const determineFocusable = () => {
+      var scrollableWidth = element.parentNode.querySelector('table').scrollWidth;
+      var containerWidth = element.parentNode.clientWidth;
+
+      // Check if element is scrollable.
+      if (scrollableWidth <= containerWidth) {
+        // If not remove the tab focus.
+        element.removeAttribute('tabindex');
+      }
+      else if (caption) {
+        caption.innerText += ' ' + options.scrollableText;
+      }
+    };
+
+    /**
+     * Setup the responsive table.
+     */
+    const setupResponsiveTable = () => {
+      // Set caption id.
+      if (caption && !caption.hasAttribute('id')) {
+        const tableUid = Math.random().toString(36).substr(2, 16);
+        caption.setAttribute('id', 'responsive-table-caption-caption-' + tableUid);
+        element.setAttribute('aria-labelledby', caption.getAttribute('id'));
+      }
+
+      // Set table container attributes.
+      element.setAttribute('tabindex', '0');
+      element.setAttribute('role', 'group');
+
+      // Set th scope attributes.
+      let firstRow = element.querySelector('tr');
+      let tableHeadingsNodeList = firstRow.querySelectorAll('th');
+
+      if (firstRow.getElementsByTagName('th').length === firstRow.querySelectorAll('*').length) {
+        for (let i = 0; i < tableHeadingsNodeList.length; i++) {
+          // If no scope attribute, set it.
+          if (!tableHeadingsNodeList[i].hasAttribute('scope')) {
+            tableHeadingsNodeList[i].setAttribute('scope', 'col');
+          }
+        }
+      }
+
+      // Set tr scope attributes if first child is a th.
+      let tableRowsNodeList = element.querySelectorAll('tr');
+      for (let i = 0; i < tableRowsNodeList.length; i++) {
+        let firstChild = tableRowsNodeList[i].firstElementChild;
+
+        // If no scope attribute, set it.
+        if (!firstChild.hasAttribute('scope')) {
+          firstChild.setAttribute('scope', 'row');
+        }
+      }
+
+      determineFocusable();
+    };
+
+    /**
+     * Entry point of the script.
+     *
+     */
+    const init = () => {
+      if (!element) {
+        return;
+      }
+
+      caption = element.querySelector('caption');
+
+      setupResponsiveTable();
+    };
+
+    init();
+
+    return {};
+  };
+}));

package/build/styleguide/sass/00-mixins/breakpoints/_breakpoints.scss

@@ -0,0 +1,121 @@
+////
+///
+/// This file defines breakpoint related mixins / functions.
+///
+/// @group breakpoints
+/// @author Gert-Jan Meire
+///
+////
+@import "breakpoint";
+
+///
+/// Mobile breakpoint (see $bp-mobile defined in _vars.scss).
+/// This assumes a min-width as defined by the variable.
+///
+/// @since 3.0.0
+/// @group breakpoints
+/// @access public
+/// @author Gert-Jan Meire
+/// @require $bp-mobile
+///
+@mixin mobile {
+  @include breakpoint($bp-mobile) {
+    @content;
+  }
+}
+
+///
+/// Phablet breakpoint (see $bp-phablet defined in _vars.scss).
+/// This assumes a min-width as defined by the variable.
+///
+/// @since 3.0.0
+/// @group breakpoints
+/// @access public
+/// @author Bart Delrue
+/// @require $bp-phablet
+///
+@mixin phablet {
+  @include breakpoint($bp-phablet) {
+    @content;
+  }
+}
+
+///
+/// Tablet breakpoint (see $bp-tablet defined in _vars.scss).
+/// This assumes a max-width as defined by the variable.
+///
+/// @since 3.0.0
+/// @group breakpoints
+/// @access public
+/// @author Bart Delrue
+/// @require $bp-tablet
+///
+@mixin tablet-and-below {
+  @include breakpoint(max-width $bp-tablet - 1) {
+    @content;
+  }
+}
+
+///
+/// Tablet breakpoint (see $bp-tablet defined in _vars.scss).
+/// This assumes a min-width as defined by the variable.
+///
+/// @since 3.0.0
+/// @group breakpoints
+/// @access public
+/// @author Gert-Jan Meire
+/// @require $bp-tablet
+///
+@mixin tablet {
+  @include breakpoint($bp-tablet) {
+    @content;
+  }
+}
+
+///
+/// Mobile breakpoint (see $bp-mobile defined in _vars.scss).
+/// This assumes a min-width as defined by the variable.
+///
+/// @since 3.0.0
+/// @group breakpoints
+/// @access public
+/// @author Gert-Jan Meire
+/// @require $bp-mobile
+///
+@mixin desktop-and-below {
+  @include breakpoint(max-width $bp-desktop - 1) {
+    @content;
+  }
+}
+
+///
+/// Desktop breakpoint (see $bp-tablet defined in _vars.scss).
+/// This assumes a min-width as defined by the variable.
+///
+/// @since 3.0.0
+/// @group breakpoints
+/// @access public
+/// @author Gert-Jan Meire
+/// @require $bp-desktop
+///
+@mixin desktop {
+  @include breakpoint($bp-desktop) {
+    @content;
+  }
+}
+
+///
+/// Desktop XL breakpoint (see $bp-desktop-xl defined in _vars.scss).
+/// This assumes a min-width as defined by the variable.
+///
+/// @since 3.0.0
+/// @group breakpoints
+/// @access public
+/// @author Gert-Jan Meire
+/// @require $bp-desktop-xl
+///
+@mixin desktop-xl {
+  @include breakpoint($bp-desktop-xl) {
+    @content;
+  }
+}

package/build/styleguide/sass/00-mixins/general/_mixins.scss

@@ -0,0 +1,314 @@
+////
+///
+/// Globally defined general purpose mixins.
+/// These mixins can be used by multiple components.
+///
+/// @group tools
+/// @author Gert-Jan Meire
+///
+////
+
+///
+///  Helper function to replace characters in a string.
+///
+/// @since 3.0.0
+/// @group tools
+/// @access public
+/// @author Gert-Jan Meire
+///
+/// @param {string} $string
+///   The needle.
+///
+/// @param {string} $search
+///   The haystack.
+///
+/// @param {string} $replace ['']
+///   The separator.
+///
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+  @return if($index,
+    str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace),
+    $string);
+}
+
+///
+///  Helper function to get a border radius.
+///
+/// @since 3.0.0
+/// @group tools
+/// @access public
+/// @author Gert-Jan Meire
+///
+/// @param {string} $name
+///   The name of the requested border radius.
+///
+/// @param {map} $border-radius [$border-radius]
+///   The map with border radiuses defined in it.
+///
+///
+@function border-radius($name, $border-radius: $border-radius) {
+  @return map-get($border-radius, $name);
+}
+
+///
+/// Clearfix
+///
+/// For modern browsers
+/// 1. The space content is one way to avoid an Opera bug when the
+///    contenteditable attribute is included anywhere else in the document.
+///    Otherwise it causes space to appear at the top and bottom of elements
+///    that are clearfixed.
+/// 2. The use of `table` rather than `block` is only necessary if using
+///    `:before` to contain the top-margins of child elements.
+///
+/// Source: http://nicolasgallagher.com/micro-clearfix-hack/
+///
+/// @since 3.0.0
+/// @group tools
+/// @access public
+/// @author Gert-Jan Meire
+///
+@mixin clearfix() {
+  &::before,
+  &::after {
+    display: table; // 2
+    content: ' '; // 1
+  }
+
+  &::after {
+    clear: both;
+  }
+}
+
+///
+/// Color element states like active, visited, hover and focus.
+///
+/// @since 3.0.0
+/// @group tools
+/// @access public
+/// @author Gert-Jan Meire
+///
+/// @param {string} $state
+///   The default state of the element.
+///
+/// @param {string} $state-hover
+///   The hover state of the element.
+///
+/// @param {string} $property
+///   The property to be styled.
+///
+@mixin element-states($state, $state-hover, $property: "color") {
+  #{$property}: $state;
+
+  &:active,
+  &:visited {
+    @content;
+  }
+
+  &:hover,
+  &:focus {
+    #{$property}: $state-hover;
+  }
+}
+
+///
+/// Force a link without link style.
+///
+/// @since 3.0.0
+/// @group tools
+/// @access public
+/// @author Gert-Jan Meire
+///
+@mixin no-link-style() {
+  a {
+    text-decoration: none !important; // sass-lint:disable-line no-important
+  }
+}
+
+///
+/// Split a string based on a separator string.
+///
+/// @since 3.0.0
+/// @group tools
+/// @access private
+/// @author Gert-Jan Meire
+///
+/// @param {string} $string
+///   The string to be split.
+///
+/// @param {string} $separator
+///   The separator by which to split the $string.
+///
+@function str-split($string, $separator: '--') {
+  // empty array/list
+  $split-arr: ();
+  // first index of separator in string
+  $index: str-index($string, $separator);
+  // loop through string
+  @while $index != null {
+    // get the substring from the first character to the separator
+    $item: str-slice($string, 1, $index - 1);
+    // push item to array
+    $split-arr: append($split-arr, $item);
+
+    @if ($separator == '--') {
+      // remove item and separator from string
+      $string: str-slice($string, $index + 2);
+    }
+    @else {
+      // remove item and separator from string
+      $string: str-slice($string, $index + 1);
+    }
+    // find new index of separator
+    $index: str-index($string, $separator);
+  }
+  // add the remaining string to list (the last item)
+  $split-arr: append($split-arr, $string);
+
+  @return $split-arr;
+}
+
+///
+/// Cast a string to a number.
+///
+/// @since 3.0.0
+/// @group tools
+/// @access private
+/// @author Gert-Jan Meire
+///
+/// @param {string} $value
+///   The string to turn into a number.
+///
+@function number($value) {
+  @if type-of($value) == 'number' {
+    @return $value;
+  } @else if type-of($value) != 'string' {
+    $_: log('Value for `to-number` should be a number or a string.');
+  }
+
+  $result: 0;
+  $digits: 0;
+  $minus: str-slice($value, 1, 1) == '-';
+  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
+
+  @for $i from if($minus, 2, 1) through str-length($value) {
+    $character: str-slice($value, $i, $i);
+
+    @if not (index(map-keys($numbers), $character) or $character == '.') {
+      @return to-length(if($minus, -$result, $result), str-slice($value, $i));
+    }
+
+    @if $character == '.' {
+      $digits: 1;
+    }
+    @else if $digits == 0 {
+      $result: $result * 10 + map-get($numbers, $character);
+    }
+    @else {
+      $digits: $digits * 10;
+      $result: $result + map-get($numbers, $character) / $digits;
+    }
+  }
+
+  @return if($minus, -$result, $result);
+}
+
+///
+/// Defines small text.
+///
+/// @since 3.0.0
+/// @group tools
+/// @access private
+/// @author Gert-Jan Meire
+///
+@mixin small-text {
+  font-size: .6rem;
+}
+
+///
+/// Defines medium text.
+///
+/// @since 3.0.0
+/// @group tools
+/// @access private
+/// @author Gert-Jan Meire
+///
+@mixin medium-text {
+  font-size: .7rem;
+}
+
+///
+/// Defines large text.
+///
+/// @since 3.0.0
+/// @group tools
+/// @access private
+/// @author Gert-Jan Meire
+///
+@mixin large-text {
+  font-size: .8rem;
+}
+
+///
+/// Defines extra large text.
+///
+/// @since 3.0.0
+/// @group tools
+/// @access private
+/// @author Gert-Jan Meire
+///
+@mixin extra-large-text {
+  font-size: .9rem;
+}
+
+///
+/// Defines bold text.
+///
+/// @since 3.0.0
+/// @group tools
+/// @access private
+/// @author Helena Standaert
+///
+@mixin bold-text {
+  font-weight: 600;
+}
+
+
+///
+/// Displays an element full-width on the page.
+/// Breaks out of it's parent container.
+///
+/// @since 3.0.0
+/// @group tools
+/// @access private
+/// @author Helena Standaert
+///
+@mixin full-width {
+  position: relative;
+  right: 50%;
+  left: 50%;
+  width: 100vw;
+  margin-right: -50vw;
+  margin-left: -50vw;
+}
+
+///
+/// Add accessibility focus style.
+///
+/// @since 3.0.0
+/// @group tools
+/// @access private
+/// @author Gert-Jan Meire
+///
+@mixin focus-bare {
+  @include theme('outline-color', 'color-primary', 'focus-outline');
+  outline: 2px solid;
+  outline-offset: 2px;
+}
+
+@mixin focus-style {
+  &:focus {
+    @include focus-bare;
+  }
+}

package/build/styleguide/sass/00-mixins/grid/_grid.scss

@@ -0,0 +1,43 @@
+///
+/// Helper mixin to break out of the grid structure in targeted places.
+///
+/// @since 3.0.0
+/// @group grid
+/// @access  public
+/// @author Gert-Jan Meire
+///
+@mixin extra-wide {
+  @include desktop-and-below {
+    width: calc(100% + (#{$gutter-width} * 2));
+    margin-right: -$gutter-width;
+    margin-left: -$gutter-width;
+  }
+}
+
+///
+/// Provide a helper mixin to easily position items on the grid..
+///
+/// @since 3.0.0
+/// @group grid
+/// @access  public
+/// @author Gert-Jan Meire
+///
+/// @param {string} $width
+///   The width in columns: e.g. 3 (... of 12).
+///
+/// @param {string} $offset
+///   The offset in columns: e.g. 3 (... of 12).
+///
+/// @param {string} $columns
+///   The amount of columns.
+///
+@mixin set-layout($width: 'width-12', $offset: 'offset-0', $columns: 'columns-12') {
+  width: span(number(nth(str-split($width, '-'), 2)) of number(nth(str-split($columns, '-'), 2)));
+
+  @if $offset != 'offset-0' {
+    margin-left: span(number(nth(str-split($offset, '-'), 2)) wide of number(nth(str-split($columns, '-'), 2)));
+  }
+  @else {
+    margin-left: 0;
+  }
+}

package/build/styleguide/sass/00-mixins/grid/_responsive-utilities.scss

@@ -0,0 +1,36 @@
+////
+/// Globally defined grid mixins.
+/// These mixins can be used by multiple components.
+////
+
+// sass-lint:disable no-important
+
+// Responsive utilities
+
+// More easily include all the states for responsive-utilities.less.
+// [converter] $parent hack
+@mixin responsive-visibility($parent) {
+  #{$parent} {
+    display: block !important;
+  }
+
+  table#{$parent} {
+    display: table !important;
+  }
+
+  tr#{$parent} {
+    display: table-row !important;
+  }
+
+  th#{$parent},
+  td#{$parent} {
+    display: table-cell !important;
+  }
+}
+
+// [converter] $parent hack
+@mixin responsive-invisibility($parent) {
+  #{$parent} {
+    display: none !important;
+  }
+}