@internetstiftelsen/styleguide 5.0.19 → 5.1.1

package/dist/molecules/overview-navigation/overview-navigation.js

@@ -1,142 +1,91 @@
-'use strict';
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-var OverviewNavigation = function () {
-	function OverviewNavigation(element) {
-		var _this = this;
-
-		_classCallCheck(this, OverviewNavigation);
-
-		this.element = element;
-		this.button = this.element.querySelector('.js-overview-navigation-button');
-		this.isSmallScreen = false;
-		this.isOutOfView = false;
-		this.minimized = null;
-
-		// a11y-toggle doesn't have a callback for when it's done initializing
-		// so we have to wait for the next tick
-		document.addEventListener('DOMContentLoaded', function () {
-			setTimeout(function () {
-				_this.attach();
-				_this.onResize();
-				_this.closeMenu();
-			}, 0);
-		});
-	}
-
-	_createClass(OverviewNavigation, [{
-		key: 'attach',
-		value: function attach() {
-			window.addEventListener('resize', this.onResize.bind(this));
-			window.addEventListener('scroll', this.onScroll.bind(this));
-		}
-	}, {
-		key: 'update',
-		value: function update() {
-			if (this.isSmallScreen || this.isOutOfView) {
-				this.minimize();
-			} else {
-				this.maximize();
-			}
-		}
-	}, {
-		key: 'onResize',
-		value: function onResize() {
-			this.isSmallScreen = window.innerWidth <= 961;
-			this.update();
-		}
-	}, {
-		key: 'onScroll',
-		value: function onScroll() {
-			var viewportOffset = this.element.getBoundingClientRect();
-
-			if (viewportOffset.top < 0) {
-				this.isOutOfView = true;
-			} else if (window.scrollY === 0) {
-				this.isOutOfView = false;
-			}
-
-			this.update();
-		}
-
-		// Close the overview menu when clicking any link inside it
-
-	}, {
-		key: 'closeMenu',
-		value: function closeMenu() {
-			var _this2 = this;
-
-			var links = this.element.querySelectorAll('a');
-
-			[].forEach.call(links, function (link) {
-				link.addEventListener('click', function () {
-					_this2.button.click();
-				});
-			});
-		}
-	}, {
-		key: 'updateButtonPosition',
-		value: function updateButtonPosition() {
-			var elementOffset = this.element.getBoundingClientRect();
-			var buttonRect = this.button.getBoundingClientRect();
-
-			// Use right and bottom to place this.button at the top left corner of the element
-			this.button.style.right = window.innerWidth - elementOffset.right + elementOffset.width - buttonRect.width + 'px';
-			this.button.style.bottom = window.innerHeight - elementOffset.top - buttonRect.height + 'px';
-		}
-	}, {
-		key: 'minimize',
-		value: function minimize() {
-			if (this.minimized === true) {
-				return;
-			}
-
-			this.button.style.transition = 'none';
-			this.updateButtonPosition();
-
-			this.element.offsetHeight; // force reflow
-			this.button.style.transition = 'right 0.25s ease-out, bottom 0.25s ease-out, opacity 0.25s ease-out';
-
-			this.element.setAttribute('aria-hidden', 'true');
-			this.element.classList.add('is-minimized');
-
-			this.button.setAttribute('aria-expanded', 'false');
-			this.button.classList.add('is-fixed');
-			this.button.style.opacity = 1;
-
-			this.minimized = true;
-		}
-	}, {
-		key: 'maximize',
-		value: function maximize() {
-			if (this.minimized === false) {
-				return;
-			}
-
-			this.element.setAttribute('aria-hidden', 'false');
-			this.element.classList.remove('is-minimized');
-
-			this.element.offsetHeight; // force reflow
-
-			this.updateButtonPosition();
-			this.button.setAttribute('aria-expanded', 'true');
-			this.button.classList.remove('is-fixed');
-			this.button.style.opacity = 0;
-
-			this.minimized = false;
-		}
-	}]);
-
-	return OverviewNavigation;
-}();
-
-var overviewNavigations = document.querySelectorAll('.js-overview-navigation');
-
+"use strict";
+class OverviewNavigation {
+    attach() {
+        window.addEventListener('resize', this.onResize.bind(this));
+        window.addEventListener('scroll', this.onScroll.bind(this));
+    }
+    update() {
+        if (this.isSmallScreen || this.isOutOfView) {
+            this.minimize();
+        } else {
+            this.maximize();
+        }
+    }
+    onResize() {
+        this.isSmallScreen = window.innerWidth <= 961;
+        this.update();
+    }
+    onScroll() {
+        const viewportOffset = this.element.getBoundingClientRect();
+        if (viewportOffset.top < 0) {
+            this.isOutOfView = true;
+        } else if (window.scrollY === 0) {
+            this.isOutOfView = false;
+        }
+        this.update();
+    }
+    // Close the overview menu when clicking any link inside it
+    closeMenu() {
+        const links = this.element.querySelectorAll('a');
+        [].forEach.call(links, (link)=>{
+            link.addEventListener('click', ()=>{
+                this.button.click();
+            });
+        });
+    }
+    updateButtonPosition() {
+        const elementOffset = this.element.getBoundingClientRect();
+        const buttonRect = this.button.getBoundingClientRect();
+        // Use right and bottom to place this.button at the top left corner of the element
+        this.button.style.right = `${window.innerWidth - elementOffset.right + elementOffset.width - buttonRect.width}px`;
+        this.button.style.bottom = `${window.innerHeight - elementOffset.top - buttonRect.height}px`;
+    }
+    minimize() {
+        if (this.minimized === true) {
+            return;
+        }
+        this.button.style.transition = 'none';
+        this.updateButtonPosition();
+        this.element.offsetHeight; // force reflow
+        this.button.style.transition = 'right 0.25s ease-out, bottom 0.25s ease-out, opacity 0.25s ease-out';
+        this.element.setAttribute('aria-hidden', 'true');
+        this.element.classList.add('is-minimized');
+        this.button.setAttribute('aria-expanded', 'false');
+        this.button.classList.add('is-fixed');
+        this.button.style.opacity = 1;
+        this.minimized = true;
+    }
+    maximize() {
+        if (this.minimized === false) {
+            return;
+        }
+        this.element.setAttribute('aria-hidden', 'false');
+        this.element.classList.remove('is-minimized');
+        this.element.offsetHeight; // force reflow
+        this.updateButtonPosition();
+        this.button.setAttribute('aria-expanded', 'true');
+        this.button.classList.remove('is-fixed');
+        this.button.style.opacity = 0;
+        this.minimized = false;
+    }
+    constructor(element){
+        this.element = element;
+        this.button = this.element.querySelector('.js-overview-navigation-button');
+        this.isSmallScreen = false;
+        this.isOutOfView = false;
+        this.minimized = null;
+        // a11y-toggle doesn't have a callback for when it's done initializing
+        // so we have to wait for the next tick
+        document.addEventListener('DOMContentLoaded', ()=>{
+            setTimeout(()=>{
+                this.attach();
+                this.onResize();
+                this.closeMenu();
+            }, 0);
+        });
+    }
+}
+const overviewNavigations = document.querySelectorAll('.js-overview-navigation');
 if (overviewNavigations) {
-	[].forEach.call(overviewNavigations, function (overviewNavigation) {
-		return new OverviewNavigation(overviewNavigation);
-	});
-}
+    [].forEach.call(overviewNavigations, (overviewNavigation)=>new OverviewNavigation(overviewNavigation));
+}

package/dist/molecules/share/share.js

@@ -1,23 +1,18 @@
-'use strict';
-
+"use strict";
 function openPopup(e) {
-	e.preventDefault();
-
-	var width = 500;
-	var height = 550;
-	var left = window.innerWidth / 2 - width / 2;
-	var top = window.innerHeight / 2 - height / 2;
-	var url = this.href;
-	var opts = '' + ('status=1' + ',width=') + width + ',height=' + height + ',top=' + top + ',left=' + left;
-	window.open(url, 'socialMedia', opts);
-
-	return false;
+    e.preventDefault();
+    const width = 500;
+    const height = 550;
+    const left = window.innerWidth / 2 - width / 2;
+    const top = window.innerHeight / 2 - height / 2;
+    const url = this.href;
+    const opts = `${'status=1' + ',width='}${width},height=${height},top=${top},left=${left}`;
+    window.open(url, 'socialMedia', opts);
+    return false;
 }
-
-var popupButtons = Array.prototype.slice.call(document.querySelectorAll('.js-share-popup'));
-
+const popupButtons = Array.prototype.slice.call(document.querySelectorAll('.js-share-popup'));
 if (popupButtons) {
-	popupButtons.forEach(function (popup) {
-		popup.addEventListener('click', openPopup);
-	});
-}
+    popupButtons.forEach((popup)=>{
+        popup.addEventListener('click', openPopup);
+    });
+}

package/dist/molecules/system-error/system-error.js

@@ -1,12 +1,9 @@
-'use strict';
-
-var element = document.querySelector('.js-history');
-
+"use strict";
+const element = document.querySelector('.js-history');
 function goBack(e) {
-	e.preventDefault();
-	window.history.go(-1);
+    e.preventDefault();
+    window.history.go(-1);
 }
-
 if (element) {
-	element.addEventListener('click', goBack);
-}
+    element.addEventListener('click', goBack);
+}

package/dist/organisms/accordion/accordion.js

@@ -1,56 +1,50 @@
-'use strict';
-
-var _debounce = require('../../assets/js/debounce');
-
-var _debounce2 = _interopRequireDefault(_debounce);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-require('van11y-accessible-accordion-aria');
-
-var className = 'o-accordion';
-var accordionElement = document.querySelector('.js-' + className);
-var oAccordion = null;
-
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _debounce = /*#__PURE__*/ _interop_require_default(require("../../assets/js/debounce"));
+require("van11y-accessible-accordion-aria");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const className = 'o-accordion';
+const accordionElement = document.querySelector(`.js-${className}`);
+let oAccordion = null;
 function attachAccordion() {
-	if (!oAccordion) {
-		var namespace = getComputedStyle(accordionElement, ':before').content.replace(/["']/g, '');
-
-		oAccordion = window.van11yAccessibleAccordionAria({
-			ACCORDION_PREFIX_IDS: className,
-			ACCORDION_JS: 'js-' + className,
-			ACCORDION_STYLE: '' + namespace + className,
-			ACCORDION_TITLE_STYLE: '' + namespace + className + '__title',
-			ACCORDION_HEADER_STYLE: '' + namespace + className + '__header',
-			ACCORDION_PANEL_STYLE: '' + namespace + className + '__panel'
-		});
-	}
-
-	oAccordion.attach();
+    if (!oAccordion) {
+        const namespace = getComputedStyle(accordionElement, ':before').content.replace(/["']/g, '');
+        oAccordion = window.van11yAccessibleAccordionAria({
+            ACCORDION_PREFIX_IDS: className,
+            ACCORDION_JS: `js-${className}`,
+            ACCORDION_STYLE: `${namespace}${className}`,
+            ACCORDION_TITLE_STYLE: `${namespace}${className}__title`,
+            ACCORDION_HEADER_STYLE: `${namespace}${className}__header`,
+            ACCORDION_PANEL_STYLE: `${namespace}${className}__panel`
+        });
+    }
+    oAccordion.attach();
 }
-
 if (accordionElement) {
-	attachAccordion();
+    attachAccordion();
 }
-
-var checkElements = (0, _debounce2.default)(function () {
-	var accordionElementFresh = document.querySelector('.js-' + className);
-
-	if (accordionElementFresh) {
-		attachAccordion();
-	}
+const checkElements = (0, _debounce.default)(()=>{
+    const accordionElementFresh = document.querySelector(`.js-${className}`);
+    if (accordionElementFresh) {
+        attachAccordion();
+    }
 }, 50);
-
-var observeHandler = function observeHandler(mutationsList) {
-	mutationsList.forEach(function (mutation) {
-		if (mutation.type !== 'childList') {
-			return;
-		}
-
-		checkElements();
-	});
+const observeHandler = (mutationsList)=>{
+    mutationsList.forEach((mutation)=>{
+        if (mutation.type !== 'childList') {
+            return;
+        }
+        checkElements();
+    });
 };
-
-var observer = new MutationObserver(observeHandler);
-
-observer.observe(document.body, { childList: true, subtree: true });
+const observer = new MutationObserver(observeHandler);
+observer.observe(document.body, {
+    childList: true,
+    subtree: true
+});

package/dist/organisms/footer/footer.js

@@ -1 +1 @@
-"use strict";
+"use strict";

package/dist/organisms/haveibeenpwned/haveibeenpwned.js

@@ -1,17 +1,18 @@
-'use strict';
-
-var _track = require('../../assets/js/track');
-
-var _track2 = _interopRequireDefault(_track);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var haveIBeenPwnedSubmit = document.querySelector('#o-search-result-submit');
-
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _track = /*#__PURE__*/ _interop_require_default(require("../../assets/js/track"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const haveIBeenPwnedSubmit = document.querySelector('#o-search-result-submit');
 if (haveIBeenPwnedSubmit) {
-	haveIBeenPwnedSubmit.addEventListener('submit', function () {
-		(0, _track2.default)({
-			event: 'guided_tour'
-		});
-	});
-}
+    haveIBeenPwnedSubmit.addEventListener('submit', function() {
+        (0, _track.default)({
+            event: 'guided_tour'
+        });
+    });
+}

package/dist/organisms/mailchimp/mailchimp.js

@@ -1,110 +1,93 @@
-'use strict';
-
-var _debounce = require('../../assets/js/debounce');
-
-var _debounce2 = _interopRequireDefault(_debounce);
-
-var _hasCookieConsent = require('../../assets/js/hasCookieConsent');
-
-var _hasCookieConsent2 = _interopRequireDefault(_hasCookieConsent);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var consent = (0, _hasCookieConsent2.default)('C0003');
-
-var slidingForm = document.querySelector('[class*="--sliding"]');
-var staticForm = document.querySelector('[class*="--static"]');
-var closeButton = document.querySelector('[class*="--sliding"] .js-close-mailchimp-popup');
-var timeout = void 0;
-var timer = void 0;
-var throttle = 66; // Trigger event every 66ms
-var visibleClass = 'is-visible';
-var cookieName = 'internetstiftelsen-mailchimp-form-closed';
-var currentProtocol = document.location.protocol;
-var queryString = window.location.search;
-var urlParams = new URLSearchParams(queryString);
-var noForm = urlParams.get('noForm');
-
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _debounce = /*#__PURE__*/ _interop_require_default(require("../../assets/js/debounce"));
+const _hasCookieConsent = /*#__PURE__*/ _interop_require_default(require("../../assets/js/hasCookieConsent"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+let consent = (0, _hasCookieConsent.default)('C0003');
+const slidingForm = document.querySelector('[class*="--sliding"]');
+const staticForm = document.querySelector('[class*="--static"]');
+const closeButton = document.querySelector('[class*="--sliding"] .js-close-mailchimp-popup');
+let timeout;
+let timer;
+const throttle = 66; // Trigger event every 66ms
+const visibleClass = 'is-visible';
+const cookieName = 'internetstiftelsen-mailchimp-form-closed';
+const currentProtocol = document.location.protocol;
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+const noForm = urlParams.get('noForm');
 // Set cookie
 function setCookie(name, value, days) {
-	var d = new Date();
-	d.setTime(d.getTime() + 24 * 60 * 60 * 1000 * days);
-
-	if (currentProtocol === 'https:') {
-		document.cookie = name + '=' + value + ';path=/;SameSite=Strict;Secure;expires=' + d.toGMTString();
-	} else {
-		document.cookie = name + '=' + value + ';path=/;SameSite=Strict;expires=' + d.toGMTString();
-	}
+    const d = new Date();
+    d.setTime(d.getTime() + 24 * 60 * 60 * 1000 * days);
+    if (currentProtocol === 'https:') {
+        document.cookie = `${name}=${value};path=/;SameSite=Strict;Secure;expires=${d.toGMTString()}`;
+    } else {
+        document.cookie = `${name}=${value};path=/;SameSite=Strict;expires=${d.toGMTString()}`;
+    }
 }
-
 // Get cookie
 function getCookie(name) {
-	var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
-	return v ? v[2] : null;
+    const v = document.cookie.match(`(^|;) ?${name}=([^;]*)(;|$)`);
+    return v ? v[2] : null;
 }
-
 // User is sent from email campaign with URL parameter ?noForm=true,
 // set cookie and don't show slide-in form
 if (noForm) {
-	setCookie(cookieName, 'YES', 7);
+    setCookie(cookieName, 'YES', 7);
 }
-
 if (slidingForm) {
-	timeout = slidingForm.getAttribute('data-slider-delay');
-
-	// Add hidden attribute on page load
-	slidingForm.setAttribute('aria-hidden', 'true');
+    timeout = slidingForm.getAttribute('data-slider-delay');
+    // Add hidden attribute on page load
+    slidingForm.setAttribute('aria-hidden', 'true');
 }
-
 function isInViewport(element) {
-	var top = element.offsetTop;
-	var height = element.offsetHeight;
-
-	while (element.offsetParent) {
-		// eslint-disable-next-line no-param-reassign
-		element = element.offsetParent;
-		top += element.offsetTop;
-	}
-
-	return top < window.pageYOffset + window.innerHeight && top + height > window.pageYOffset;
+    let top = element.offsetTop;
+    const height = element.offsetHeight;
+    while(element.offsetParent){
+        // eslint-disable-next-line no-param-reassign
+        element = element.offsetParent;
+        top += element.offsetTop;
+    }
+    return top < window.pageYOffset + window.innerHeight && top + height > window.pageYOffset;
 }
-
 function slideForm() {
-	if (!getCookie(cookieName)) {
-		var inViewport = isInViewport(staticForm);
-		clearTimeout(timer);
-
-		if (!inViewport) {
-			// The static form is not in the viewport, start timeout to show the sliding form
-			timer = setTimeout(function () {
-				slidingForm.classList.add(visibleClass);
-				slidingForm.setAttribute('aria-hidden', 'false');
-			}, timeout);
-		} else {
-			slidingForm.classList.remove(visibleClass);
-			slidingForm.setAttribute('aria-hidden', 'true');
-		}
-	}
+    if (!getCookie(cookieName)) {
+        const inViewport = isInViewport(staticForm);
+        clearTimeout(timer);
+        if (!inViewport) {
+            // The static form is not in the viewport, start timeout to show the sliding form
+            timer = setTimeout(()=>{
+                slidingForm.classList.add(visibleClass);
+                slidingForm.setAttribute('aria-hidden', 'false');
+            }, timeout);
+        } else {
+            slidingForm.classList.remove(visibleClass);
+            slidingForm.setAttribute('aria-hidden', 'true');
+        }
+    }
 }
-
-var elementIsInViewport = (0, _debounce2.default)(function () {
-	if (consent && slidingForm) {
-		slideForm();
-	}
+const elementIsInViewport = (0, _debounce.default)(()=>{
+    if (consent && slidingForm) {
+        slideForm();
+    }
 }, throttle);
-
-window.addEventListener('scroll', function () {
-	elementIsInViewport();
+window.addEventListener('scroll', ()=>{
+    elementIsInViewport();
 });
-
 function closeForm() {
-	setCookie(cookieName, 'YES', 7);
-	slidingForm.classList.remove(visibleClass);
-	slidingForm.setAttribute('aria-hidden', 'true');
+    setCookie(cookieName, 'YES', 7);
+    slidingForm.classList.remove(visibleClass);
+    slidingForm.setAttribute('aria-hidden', 'true');
 }
-
 if (closeButton) {
-	closeButton.addEventListener('click', function () {
-		closeForm();
-	});
-}
+    closeButton.addEventListener('click', ()=>{
+        closeForm();
+    });
+}

package/dist/organisms/map-box/map-box.js

@@ -1,5 +1,4 @@
-'use strict';
-
+"use strict";
 module.exports = {
-	status: 'wip'
-};
+    status: 'wip'
+};