govuk_publishing_components 9.3.6 → 9.4.0

data/node_modules/govuk-frontend/components/button/_button.scss

@@ -0,0 +1,185 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/button") {
+
+  $govuk-button-colour: #00823b;
+  $govuk-button-hover-colour: darken($govuk-button-colour, 5%);
+  $govuk-button-shadow-colour: darken($govuk-button-colour, 15%);
+  $govuk-button-text-colour: govuk-colour("white");
+
+  // Because the shadow (s0) is visually 'part of' the button, we need to reduce
+  // the height of the button to compensate by adjusting its padding (s1) and
+  // increase the bottom margin to include it (s2).
+  $button-shadow-size: $govuk-border-width-form-element;
+
+  .govuk-button {
+    @include govuk-font($size: 19, $line-height: 19px);
+    @include govuk-focusable;
+
+    -webkit-box-sizing: border-box;
+
+            box-sizing: border-box;
+    display: inline-block;
+    position: relative;
+    width: 100%;
+    margin-top: 0;
+    @include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2
+    padding: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)) govuk-spacing(2); // s1
+    border: $govuk-border-width-form-element solid transparent;
+    border-radius: 0;
+    color: $govuk-button-text-colour;
+    background-color: $govuk-button-colour;
+    -webkit-box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour;
+            box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
+    text-align: center;
+    vertical-align: top;
+    cursor: pointer;
+    -webkit-appearance: none;
+
+    @include govuk-if-ie8 {
+      border-bottom: $button-shadow-size solid $govuk-button-shadow-colour;
+    }
+
+    @include govuk-media-query($from: tablet) {
+      width: auto;
+    }
+
+    // Ensure that any global link styles are overridden
+    &:link,
+    &:visited,
+    &:active,
+    &:hover {
+      color: $govuk-button-text-colour;
+      text-decoration: none;
+    }
+
+    // alphagov/govuk_template includes a specific a:link:focus selector
+    // designed to make unvisited links a slightly darker blue when focussed, so
+    // we need to override the text colour for that combination of selectors so
+    // so that unvisited links styled as buttons do not end up with dark blue
+    // text when focussed.
+    @include govuk-compatibility(govuk_template) {
+      &:link:focus {
+        color: $govuk-button-text-colour;
+      }
+    }
+
+    // Fix unwanted button padding in Firefox
+    &:-moz-focus-inner {
+      padding: 0;
+      border: 0;
+    }
+
+    &:hover,
+    &:focus {
+      background-color: $govuk-button-hover-colour;
+    }
+
+    &:active {
+      top: $button-shadow-size;
+      -webkit-box-shadow: none;
+              box-shadow: none;
+
+      @include govuk-if-ie8 {
+        border-bottom-width: 0;
+      }
+    }
+
+    // The following adjustments do not work for <input type="button"> as
+    // non-container elements cannot include pseudo elements (i.e. ::before).
+
+    // Use a pseudo element to expand the click target area to include the
+    // button's shadow as well, in case users try to click it.
+    &::before {
+      content: "";
+      display: block;
+
+      position: absolute;
+
+      top: -$govuk-border-width-form-element;
+      right: -$govuk-border-width-form-element;
+      bottom: -($govuk-border-width-form-element + $button-shadow-size);
+      left: -$govuk-border-width-form-element;
+
+      background: transparent;
+    }
+
+    // When the button is active it is shifted down by $button-shadow-size to
+    // denote a 'pressed' state. If the user happened to click at the very top
+    // of the button, their mouse is no longer over the button (because it has
+    // 'moved beneath them') and so the click event is not fired.
+    //
+    // This corrects that by shifting the top of the pseudo element so that it
+    // continues to cover the area that the user originally clicked, which means
+    // the click event is still fired.
+    //
+    // 🎉
+    &:active::before {
+      top: -($govuk-border-width-form-element + $button-shadow-size);
+    }
+  }
+
+  .govuk-button--disabled,
+  .govuk-button[disabled="disabled"],
+  .govuk-button[disabled] {
+    opacity: (.5);
+    background: $govuk-button-colour;
+
+    &:hover {
+      background-color: $govuk-button-colour;
+      cursor: default;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:active {
+      top: 0;
+      -webkit-box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour;
+              box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
+      @include govuk-if-ie8 {
+        border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; // s0
+      }
+    }
+  }
+
+  .govuk-button--start {
+    @include govuk-typography-weight-bold;
+    @include govuk-typography-responsive($size: 24, $override-line-height: 1);
+
+    min-height: auto;
+    padding-top: govuk-spacing(2) - $govuk-border-width-form-element;
+    padding-right: govuk-spacing(7);
+    padding-bottom: govuk-spacing(2) - $govuk-border-width-form-element;
+    padding-left: govuk-spacing(3);
+
+    background-image: govuk-image-url("icon-pointer.png");
+    background-repeat: no-repeat;
+    background-position: 100% 50%;
+
+    @include govuk-device-pixel-ratio {
+      background-image: govuk-image-url("icon-pointer-2x.png");
+      background-size: 30px 19px;
+    }
+  }
+
+  // Begin adjustments for font baseline offset
+  // These should be removed when the font is updated with the correct baseline
+  // For the 1px addition please see https://github.com/alphagov/govuk-frontend/pull/365#discussion_r154349428
+
+  $offset: 2;
+
+  .govuk-button {
+    padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1
+    padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1
+  }
+
+  .govuk-button--start {
+    padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1
+    padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1
+  }
+
+}

data/node_modules/govuk-frontend/components/button/button.js

@@ -0,0 +1,548 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+	typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
+	(global.GOVUKFrontend = factory());
+}(this, (function () { 'use strict';
+
+(function(undefined) {
+
+// Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Window/detect.js
+var detect = ('Window' in this);
+
+if (detect) return
+
+// Polyfill from https://cdn.polyfill.io/v2/polyfill.js?features=Window&flags=always
+if ((typeof WorkerGlobalScope === "undefined") && (typeof importScripts !== "function")) {
+	(function (global) {
+		if (global.constructor) {
+			global.Window = global.constructor;
+		} else {
+			(global.Window = global.constructor = new Function('return function Window() {}')()).prototype = this;
+		}
+	}(this));
+}
+
+})
+.call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
+
+(function(undefined) {
+
+// Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Document/detect.js
+var detect = ("Document" in this);
+
+if (detect) return
+
+// Polyfill from https://cdn.polyfill.io/v2/polyfill.js?features=Document&flags=always
+if ((typeof WorkerGlobalScope === "undefined") && (typeof importScripts !== "function")) {
+
+	if (this.HTMLDocument) { // IE8
+
+		// HTMLDocument is an extension of Document.  If the browser has HTMLDocument but not Document, the former will suffice as an alias for the latter.
+		this.Document = this.HTMLDocument;
+
+	} else {
+
+		// Create an empty function to act as the missing constructor for the document object, attach the document object as its prototype.  The function needs to be anonymous else it is hoisted and causes the feature detect to prematurely pass, preventing the assignments below being made.
+		this.Document = this.HTMLDocument = document.constructor = (new Function('return function Document() {}')());
+		this.Document.prototype = document;
+	}
+}
+
+
+})
+.call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
+
+(function(undefined) {
+
+// Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Element/detect.js
+var detect = ('Element' in this && 'HTMLElement' in this);
+
+if (detect) return
+
+// Polyfill from https://cdn.polyfill.io/v2/polyfill.js?features=Element&flags=always
+(function () {
+
+	// IE8
+	if (window.Element && !window.HTMLElement) {
+		window.HTMLElement = window.Element;
+		return;
+	}
+
+	// create Element constructor
+	window.Element = window.HTMLElement = new Function('return function Element() {}')();
+
+	// generate sandboxed iframe
+	var vbody = document.appendChild(document.createElement('body'));
+	var frame = vbody.appendChild(document.createElement('iframe'));
+
+	// use sandboxed iframe to replicate Element functionality
+	var frameDocument = frame.contentWindow.document;
+	var prototype = Element.prototype = frameDocument.appendChild(frameDocument.createElement('*'));
+	var cache = {};
+
+	// polyfill Element.prototype on an element
+	var shiv = function (element, deep) {
+		var
+		childNodes = element.childNodes || [],
+		index = -1,
+		key, value, childNode;
+
+		if (element.nodeType === 1 && element.constructor !== Element) {
+			element.constructor = Element;
+
+			for (key in cache) {
+				value = cache[key];
+				element[key] = value;
+			}
+		}
+
+		while (childNode = deep && childNodes[++index]) {
+			shiv(childNode, deep);
+		}
+
+		return element;
+	};
+
+	var elements = document.getElementsByTagName('*');
+	var nativeCreateElement = document.createElement;
+	var interval;
+	var loopLimit = 100;
+
+	prototype.attachEvent('onpropertychange', function (event) {
+		var
+		propertyName = event.propertyName,
+		nonValue = !cache.hasOwnProperty(propertyName),
+		newValue = prototype[propertyName],
+		oldValue = cache[propertyName],
+		index = -1,
+		element;
+
+		while (element = elements[++index]) {
+			if (element.nodeType === 1) {
+				if (nonValue || element[propertyName] === oldValue) {
+					element[propertyName] = newValue;
+				}
+			}
+		}
+
+		cache[propertyName] = newValue;
+	});
+
+	prototype.constructor = Element;
+
+	if (!prototype.hasAttribute) {
+		// <Element>.hasAttribute
+		prototype.hasAttribute = function hasAttribute(name) {
+			return this.getAttribute(name) !== null;
+		};
+	}
+
+	// Apply Element prototype to the pre-existing DOM as soon as the body element appears.
+	function bodyCheck() {
+		if (!(loopLimit--)) clearTimeout(interval);
+		if (document.body && !document.body.prototype && /(complete|interactive)/.test(document.readyState)) {
+			shiv(document, true);
+			if (interval && document.body.prototype) clearTimeout(interval);
+			return (!!document.body.prototype);
+		}
+		return false;
+	}
+	if (!bodyCheck()) {
+		document.onreadystatechange = bodyCheck;
+		interval = setInterval(bodyCheck, 25);
+	}
+
+	// Apply to any new elements created after load
+	document.createElement = function createElement(nodeName) {
+		var element = nativeCreateElement(String(nodeName).toLowerCase());
+		return shiv(element);
+	};
+
+	// remove sandboxed iframe
+	document.removeChild(vbody);
+}());
+
+})
+.call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
+
+(function(undefined) {
+
+// Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Object/defineProperty/detect.js
+var detect = (
+  // In IE8, defineProperty could only act on DOM elements, so full support
+  // for the feature requires the ability to set a property on an arbitrary object
+  'defineProperty' in Object && (function() {
+  	try {
+  		var a = {};
+  		Object.defineProperty(a, 'test', {value:42});
+  		return true;
+  	} catch(e) {
+  		return false
+  	}
+  }())
+);
+
+if (detect) return
+
+// Polyfill from https://cdn.polyfill.io/v2/polyfill.js?features=Object.defineProperty&flags=always
+(function (nativeDefineProperty) {
+
+	var supportsAccessors = Object.prototype.hasOwnProperty('__defineGetter__');
+	var ERR_ACCESSORS_NOT_SUPPORTED = 'Getters & setters cannot be defined on this javascript engine';
+	var ERR_VALUE_ACCESSORS = 'A property cannot both have accessors and be writable or have a value';
+
+	Object.defineProperty = function defineProperty(object, property, descriptor) {
+
+		// Where native support exists, assume it
+		if (nativeDefineProperty && (object === window || object === document || object === Element.prototype || object instanceof Element)) {
+			return nativeDefineProperty(object, property, descriptor);
+		}
+
+		if (object === null || !(object instanceof Object || typeof object === 'object')) {
+			throw new TypeError('Object.defineProperty called on non-object');
+		}
+
+		if (!(descriptor instanceof Object)) {
+			throw new TypeError('Property description must be an object');
+		}
+
+		var propertyString = String(property);
+		var hasValueOrWritable = 'value' in descriptor || 'writable' in descriptor;
+		var getterType = 'get' in descriptor && typeof descriptor.get;
+		var setterType = 'set' in descriptor && typeof descriptor.set;
+
+		// handle descriptor.get
+		if (getterType) {
+			if (getterType !== 'function') {
+				throw new TypeError('Getter must be a function');
+			}
+			if (!supportsAccessors) {
+				throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED);
+			}
+			if (hasValueOrWritable) {
+				throw new TypeError(ERR_VALUE_ACCESSORS);
+			}
+			Object.__defineGetter__.call(object, propertyString, descriptor.get);
+		} else {
+			object[propertyString] = descriptor.value;
+		}
+
+		// handle descriptor.set
+		if (setterType) {
+			if (setterType !== 'function') {
+				throw new TypeError('Setter must be a function');
+			}
+			if (!supportsAccessors) {
+				throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED);
+			}
+			if (hasValueOrWritable) {
+				throw new TypeError(ERR_VALUE_ACCESSORS);
+			}
+			Object.__defineSetter__.call(object, propertyString, descriptor.set);
+		}
+
+		// OK to define value unconditionally - if a getter has been specified as well, an error would be thrown above
+		if ('value' in descriptor) {
+			object[propertyString] = descriptor.value;
+		}
+
+		return object;
+	};
+}(Object.defineProperty));
+})
+.call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
+
+(function(undefined) {
+
+// Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Event/detect.js
+var detect = (
+  (function(global) {
+
+  	if (!('Event' in global)) return false;
+  	if (typeof global.Event === 'function') return true;
+
+  	try {
+
+  		// In IE 9-11, the Event object exists but cannot be instantiated
+  		new Event('click');
+  		return true;
+  	} catch(e) {
+  		return false;
+  	}
+  }(this))
+);
+
+if (detect) return
+
+// Polyfill from https://cdn.polyfill.io/v2/polyfill.js?features=Event&flags=always
+(function () {
+	var unlistenableWindowEvents = {
+		click: 1,
+		dblclick: 1,
+		keyup: 1,
+		keypress: 1,
+		keydown: 1,
+		mousedown: 1,
+		mouseup: 1,
+		mousemove: 1,
+		mouseover: 1,
+		mouseenter: 1,
+		mouseleave: 1,
+		mouseout: 1,
+		storage: 1,
+		storagecommit: 1,
+		textinput: 1
+	};
+
+	// This polyfill depends on availability of `document` so will not run in a worker
+	// However, we asssume there are no browsers with worker support that lack proper
+	// support for `Event` within the worker
+	if (typeof document === 'undefined' || typeof window === 'undefined') return;
+
+	function indexOf(array, element) {
+		var
+		index = -1,
+		length = array.length;
+
+		while (++index < length) {
+			if (index in array && array[index] === element) {
+				return index;
+			}
+		}
+
+		return -1;
+	}
+
+	var existingProto = (window.Event && window.Event.prototype) || null;
+	window.Event = Window.prototype.Event = function Event(type, eventInitDict) {
+		if (!type) {
+			throw new Error('Not enough arguments');
+		}
+
+		var event;
+		// Shortcut if browser supports createEvent
+		if ('createEvent' in document) {
+			event = document.createEvent('Event');
+			var bubbles = eventInitDict && eventInitDict.bubbles !== undefined ? eventInitDict.bubbles : false;
+			var cancelable = eventInitDict && eventInitDict.cancelable !== undefined ? eventInitDict.cancelable : false;
+
+			event.initEvent(type, bubbles, cancelable);
+
+			return event;
+		}
+
+		event = document.createEventObject();
+
+		event.type = type;
+		event.bubbles = eventInitDict && eventInitDict.bubbles !== undefined ? eventInitDict.bubbles : false;
+		event.cancelable = eventInitDict && eventInitDict.cancelable !== undefined ? eventInitDict.cancelable : false;
+
+		return event;
+	};
+	if (existingProto) {
+		Object.defineProperty(window.Event, 'prototype', {
+			configurable: false,
+			enumerable: false,
+			writable: true,
+			value: existingProto
+		});
+	}
+
+	if (!('createEvent' in document)) {
+		window.addEventListener = Window.prototype.addEventListener = Document.prototype.addEventListener = Element.prototype.addEventListener = function addEventListener() {
+			var
+			element = this,
+			type = arguments[0],
+			listener = arguments[1];
+
+			if (element === window && type in unlistenableWindowEvents) {
+				throw new Error('In IE8 the event: ' + type + ' is not available on the window object. Please see https://github.com/Financial-Times/polyfill-service/issues/317 for more information.');
+			}
+
+			if (!element._events) {
+				element._events = {};
+			}
+
+			if (!element._events[type]) {
+				element._events[type] = function (event) {
+					var
+					list = element._events[event.type].list,
+					events = list.slice(),
+					index = -1,
+					length = events.length,
+					eventElement;
+
+					event.preventDefault = function preventDefault() {
+						if (event.cancelable !== false) {
+							event.returnValue = false;
+						}
+					};
+
+					event.stopPropagation = function stopPropagation() {
+						event.cancelBubble = true;
+					};
+
+					event.stopImmediatePropagation = function stopImmediatePropagation() {
+						event.cancelBubble = true;
+						event.cancelImmediate = true;
+					};
+
+					event.currentTarget = element;
+					event.relatedTarget = event.fromElement || null;
+					event.target = event.target || event.srcElement || element;
+					event.timeStamp = new Date().getTime();
+
+					if (event.clientX) {
+						event.pageX = event.clientX + document.documentElement.scrollLeft;
+						event.pageY = event.clientY + document.documentElement.scrollTop;
+					}
+
+					while (++index < length && !event.cancelImmediate) {
+						if (index in events) {
+							eventElement = events[index];
+
+							if (indexOf(list, eventElement) !== -1 && typeof eventElement === 'function') {
+								eventElement.call(element, event);
+							}
+						}
+					}
+				};
+
+				element._events[type].list = [];
+
+				if (element.attachEvent) {
+					element.attachEvent('on' + type, element._events[type]);
+				}
+			}
+
+			element._events[type].list.push(listener);
+		};
+
+		window.removeEventListener = Window.prototype.removeEventListener = Document.prototype.removeEventListener = Element.prototype.removeEventListener = function removeEventListener() {
+			var
+			element = this,
+			type = arguments[0],
+			listener = arguments[1],
+			index;
+
+			if (element._events && element._events[type] && element._events[type].list) {
+				index = indexOf(element._events[type].list, listener);
+
+				if (index !== -1) {
+					element._events[type].list.splice(index, 1);
+
+					if (!element._events[type].list.length) {
+						if (element.detachEvent) {
+							element.detachEvent('on' + type, element._events[type]);
+						}
+						delete element._events[type];
+					}
+				}
+			}
+		};
+
+		window.dispatchEvent = Window.prototype.dispatchEvent = Document.prototype.dispatchEvent = Element.prototype.dispatchEvent = function dispatchEvent(event) {
+			if (!arguments.length) {
+				throw new Error('Not enough arguments');
+			}
+
+			if (!event || typeof event.type !== 'string') {
+				throw new Error('DOM Events Exception 0');
+			}
+
+			var element = this, type = event.type;
+
+			try {
+				if (!event.bubbles) {
+					event.cancelBubble = true;
+
+					var cancelBubbleEvent = function (event) {
+						event.cancelBubble = true;
+
+						(element || window).detachEvent('on' + type, cancelBubbleEvent);
+					};
+
+					this.attachEvent('on' + type, cancelBubbleEvent);
+				}
+
+				this.fireEvent('on' + type, event);
+			} catch (error) {
+				event.target = element;
+
+				do {
+					event.currentTarget = element;
+
+					if ('_events' in element && typeof element._events[type] === 'function') {
+						element._events[type].call(element, event);
+					}
+
+					if (typeof element['on' + type] === 'function') {
+						element['on' + type].call(element, event);
+					}
+
+					element = element.nodeType === 9 ? element.parentWindow : element.parentNode;
+				} while (element && !event.cancelBubble);
+			}
+
+			return true;
+		};
+
+		// Add the DOMContentLoaded Event
+		document.attachEvent('onreadystatechange', function() {
+			if (document.readyState === 'complete') {
+				document.dispatchEvent(new Event('DOMContentLoaded', {
+					bubbles: true
+				}));
+			}
+		});
+	}
+}());
+
+})
+.call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
+
+/**
+ * JavaScript 'shim' to trigger the click event of element(s) when the space key is pressed.
+ *
+ * Created since some Assistive Technologies (for example some Screenreaders)
+ * will tell a user to press space on a 'button', so this functionality needs to be shimmed
+ * See https://github.com/alphagov/govuk_elements/pull/272#issuecomment-233028270
+ *
+ * Usage instructions:
+ * the 'shim' will be automatically initialised
+ */
+
+var KEY_SPACE = 32;
+
+function Button ($module) {
+  this.$module = $module;
+}
+
+/**
+* Add event handler for KeyDown
+* if the event target element has a role='button' and the event is key space pressed
+* then it prevents the default event and triggers a click event
+* @param {object} event event
+*/
+Button.prototype.handleKeyDown = function (event) {
+  // get the target element
+  var target = event.target;
+  // if the element has a role='button' and the pressed key is a space, we'll simulate a click
+  if (target.getAttribute('role') === 'button' && event.keyCode === KEY_SPACE) {
+    event.preventDefault();
+    // trigger the target's click event
+    target.click();
+  }
+};
+
+/**
+* Initialise an event listener for keydown at document level
+* this will help listening for later inserted elements with a role="button"
+*/
+Button.prototype.init = function () {
+  this.$module.addEventListener('keydown', this.handleKeyDown);
+};
+
+return Button;
+
+})));