@internetstiftelsen/styleguide 5.0.18 → 5.1.0

package/dist/assets/js/youtube.js

@@ -1,192 +1,156 @@
-'use strict';
-
+// TODO: Should probably implement a way to localize texts in the styleguide
+"use strict";
 Object.defineProperty(exports, "__esModule", {
-	value: true
+    value: true
 });
-exports.destroyPlayer = destroyPlayer;
-exports.setupPlayers = setupPlayers;
-
-var _className = require('./className');
-
-var _className2 = _interopRequireDefault(_className);
-
-var _hasCookieConsent = require('./hasCookieConsent');
-
-var _hasCookieConsent2 = _interopRequireDefault(_hasCookieConsent);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// TODO: Should probably implement a way to localize texts in the styleguide
-var consent = (0, _hasCookieConsent2.default)('C0004');
-
-var missingConsentMessage = 'För att spela Youtubefilmer krävs att "Riktade kakor" tillåts. Tryck för att "Anpassa kakor"';
-
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    destroyPlayer: function() {
+        return destroyPlayer;
+    },
+    setupPlayers: function() {
+        return setupPlayers;
+    }
+});
+const _className = /*#__PURE__*/ _interop_require_default(require("./className"));
+const _hasCookieConsent = /*#__PURE__*/ _interop_require_default(require("./hasCookieConsent"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+let consent = (0, _hasCookieConsent.default)('C0004');
+const missingConsentMessage = 'För att spela Youtubefilmer krävs att "Riktade kakor" tillåts. Tryck för att "Anpassa kakor"';
 function loadYoutubeAPI() {
-	var id = 'iisYoutubeAPI';
-
-	if (document.getElementById(id)) {
-		return;
-	}
-
-	var tag = document.createElement('script');
-	var firstScript = document.getElementsByTagName('script')[0];
-
-	tag.id = id;
-	tag.src = 'https://www.youtube.com/iframe_api';
-
-	firstScript.parentNode.insertBefore(tag, firstScript);
+    const id = 'iisYoutubeAPI';
+    if (document.getElementById(id)) {
+        return;
+    }
+    const tag = document.createElement('script');
+    const firstScript = document.getElementsByTagName('script')[0];
+    tag.id = id;
+    tag.src = 'https://www.youtube.com/iframe_api';
+    firstScript.parentNode.insertBefore(tag, firstScript);
 }
-
 function onPlayerStateChange(el, e) {
-	/* eslint-disable no-undef */
-	if (e.data === YT.PlayerState.PLAYING) {
-		el.getElementsByTagName('img')[0].style.zIndex = '-1';
-		el.getElementsByTagName('button')[0].style.display = 'none';
-	} else if (e.data === YT.PlayerState.UNSTARTED) {
-		el.getElementsByTagName('img')[0].style.zIndex = null;
-		el.getElementsByTagName('button')[0].style.display = null;
-	}
+    /* eslint-disable no-undef */ if (e.data === YT.PlayerState.PLAYING) {
+        el.getElementsByTagName('img')[0].style.zIndex = '-1';
+        el.getElementsByTagName('button')[0].style.display = 'none';
+    } else if (e.data === YT.PlayerState.UNSTARTED) {
+        el.getElementsByTagName('img')[0].style.zIndex = null;
+        el.getElementsByTagName('button')[0].style.display = null;
+    }
 }
-
 function createConsentWarning(el) {
-	if (el.querySelector('[data-youtube-consent-warning]')) {
-		return;
-	}
-
-	var div = document.createElement('div');
-	var button = document.createElement('button');
-	var message = document.createElement('p');
-	message.classList.add('color-cyberspace');
-
-	div.setAttribute('data-youtube-consent-warning', true);
-	div.className = (0, _className2.default)('m-icon-overlay__message');
-	button.className = (0, _className2.default)('a-button');
-	button.setAttribute('data-ot-dynamic-show-settings', 'true');
-	button.innerHTML = '<span class="' + (0, _className2.default)('a-button__text') + '">Anpassa kakor</span>';
-	message.innerHTML = missingConsentMessage;
-
-	div.appendChild(message);
-	div.appendChild(button);
-
-	el.appendChild(div);
+    if (el.querySelector('[data-youtube-consent-warning]')) {
+        return;
+    }
+    const div = document.createElement('div');
+    const button = document.createElement('button');
+    const message = document.createElement('p');
+    message.classList.add('color-cyberspace');
+    div.setAttribute('data-youtube-consent-warning', true);
+    div.className = (0, _className.default)('m-icon-overlay__message');
+    button.className = (0, _className.default)('a-button');
+    button.setAttribute('data-ot-dynamic-show-settings', 'true');
+    button.innerHTML = `<span class="${(0, _className.default)('a-button__text')}">Anpassa kakor</span>`;
+    message.innerHTML = missingConsentMessage;
+    div.appendChild(message);
+    div.appendChild(button);
+    el.appendChild(div);
 }
-
 function destroyConsentWarning(el) {
-	loadYoutubeAPI();
-	var div = el.querySelector('[data-youtube-consent-warning]');
-
-	if (div) {
-		div.parentNode.removeChild(div);
-	}
+    loadYoutubeAPI();
+    const div = el.querySelector('[data-youtube-consent-warning]');
+    if (div) {
+        div.parentNode.removeChild(div);
+    }
 }
-
 function createCover(el) {
-	if (!consent) {
-		createConsentWarning(el);
-	} else {
-		destroyConsentWarning(el);
-	}
-
-	if (el.getElementsByTagName('img').length) {
-		return;
-	}
-
-	var id = el.getAttribute('data-youtube');
-	var url = 'https://i3.ytimg.com/vi/' + id + '/maxresdefault.jpg';
-	var img = document.createElement('img');
-
-	el.appendChild(img);
-
-	img.loading = 'lazy';
-	img.src = url;
-	img.alt = 'tumnagel för video';
-	img.width = 480;
-	img.height = 270;
+    if (!consent) {
+        createConsentWarning(el);
+    } else {
+        destroyConsentWarning(el);
+    }
+    if (el.getElementsByTagName('img').length) {
+        return;
+    }
+    const id = el.getAttribute('data-youtube');
+    const url = `https://i3.ytimg.com/vi/${id}/maxresdefault.jpg`;
+    const img = document.createElement('img');
+    el.appendChild(img);
+    img.loading = 'lazy';
+    img.src = url;
+    img.alt = 'tumnagel för video';
+    img.width = 480;
+    img.height = 270;
 }
-
 function setupYoutubePlayer(el) {
-	if (el.youtube) {
-		return;
-	}
-
-	var id = el.getAttribute('data-youtube');
-	var playerEl = document.createElement('div');
-
-	playerEl.setAttribute('data-youtube-container', true);
-	el.appendChild(playerEl);
-
-	el.youtube = new YT.Player(playerEl, {
-		height: '100%',
-		width: '100%',
-		videoId: id,
-		playerVars: {
-			// https://developers.google.com/youtube/player_parameters#Parameters
-			playsinline: 1,
-			autoplay: true,
-			rel: 0
-		},
-		events: {
-			onStateChange: function onStateChange(e) {
-				return onPlayerStateChange(el, e);
-			}
-		}
-	});
-
-	el.getElementsByTagName('img')[0].style.zIndex = '-1';
-	el.getElementsByTagName('button')[0].style.display = 'none';
+    if (el.youtube) {
+        return;
+    }
+    const id = el.getAttribute('data-youtube');
+    const playerEl = document.createElement('div');
+    playerEl.setAttribute('data-youtube-container', true);
+    el.appendChild(playerEl);
+    el.youtube = new YT.Player(playerEl, {
+        height: '100%',
+        width: '100%',
+        videoId: id,
+        playerVars: {
+            // https://developers.google.com/youtube/player_parameters#Parameters
+            playsinline: 1,
+            autoplay: true,
+            rel: 0
+        },
+        events: {
+            onStateChange: (e)=>onPlayerStateChange(el, e)
+        }
+    });
+    el.getElementsByTagName('img')[0].style.zIndex = '-1';
+    el.getElementsByTagName('button')[0].style.display = 'none';
 }
-
 function delegateClick(e) {
-	if (e.target.closest('[data-youtube-consent-warning]')) {
-		return;
-	}
-
-	var el = e.target.closest('[data-youtube]');
-
-	if (!el) {
-		return;
-	}
-
-	if (!el.youtube) {
-		setupYoutubePlayer(el);
-
-		return;
-	}
-
-	el.youtube.playVideo();
+    if (e.target.closest('[data-youtube-consent-warning]')) {
+        return;
+    }
+    const el = e.target.closest('[data-youtube]');
+    if (!el) {
+        return;
+    }
+    if (!el.youtube) {
+        setupYoutubePlayer(el);
+        return;
+    }
+    el.youtube.playVideo();
 }
-
 function destroyPlayer(el) {
-	if (el.youtube) {
-		var playerEl = el.querySelector('[data-youtube-container]');
-
-		playerEl.parentNode.removeChild(playerEl);
-		el.youtube.destroy();
-		el.youtube = null;
-	}
-
-	el.getElementsByTagName('img')[0].style.zIndex = null;
-	el.getElementsByTagName('button')[0].style.display = null;
+    if (el.youtube) {
+        const playerEl = el.querySelector('[data-youtube-container]');
+        playerEl.parentNode.removeChild(playerEl);
+        el.youtube.destroy();
+        el.youtube = null;
+    }
+    el.getElementsByTagName('img')[0].style.zIndex = null;
+    el.getElementsByTagName('button')[0].style.display = null;
 }
-
 function setupPlayers(container) {
-	var players = container.querySelectorAll('[data-youtube]');
-
-	if (!players.length) {
-		return;
-	}
-
-	[].forEach.call(players, createCover);
+    const players = container.querySelectorAll('[data-youtube]');
+    if (!players.length) {
+        return;
+    }
+    [].forEach.call(players, createCover);
 }
-
-window.onYouTubeIframeAPIReady = function () {
-	document.body.addEventListener('click', delegateClick);
+window.onYouTubeIframeAPIReady = ()=>{
+    document.body.addEventListener('click', delegateClick);
 };
-
 setupPlayers(document);
-
-window.addEventListener('consent.onetrust', function (e) {
-	consent = e.detail.includes('C0004');
-
-	setupPlayers(document);
-});
+window.addEventListener('consent.onetrust', (e)=>{
+    consent = e.detail.includes('C0004');
+    setupPlayers(document);
+});

package/dist/atoms/button/Button.js

@@ -1,55 +1,42 @@
-'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 Button = function () {
-	function Button(button) {
-		var disabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-
-		_classCallCheck(this, Button);
-
-		this.button = button;
-		this.disabled = disabled;
-
-		this.build();
-	}
-
-	_createClass(Button, [{
-		key: 'build',
-		value: function build() {
-			var className = this.button.classList.item(0);
-			var html = '\n\t\t\t<svg class="icon ' + className + '__spinner">\n\t\t\t\t<use xlink:href="#icon-spinner-white"></use>\n\t\t\t</svg>\n\t\t';
-
-			this.button.appendChild(document.createRange().createContextualFragment(html));
-		}
-	}, {
-		key: 'isLoading',
-		value: function isLoading() {
-			return this.button.classList.contains('is-loading');
-		}
-	}, {
-		key: 'start',
-		value: function start() {
-			if (this.disabled) {
-				this.button.setAttribute('disabled', 'disabled');
-			}
-
-			this.button.classList.add('is-loading');
-		}
-	}, {
-		key: 'stop',
-		value: function stop() {
-			if (this.disabled) {
-				this.button.removeAttribute('disabled');
-			}
-
-			this.button.classList.remove('is-loading');
-		}
-	}]);
-
-	return Button;
-}();
-
-module.exports = Button;
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+class Button {
+    build() {
+        const className = this.button.classList.item(0);
+        const html = `
+			<svg class="icon ${className}__spinner">
+				<use xlink:href="#icon-spinner-white"></use>
+			</svg>
+		`;
+        this.button.appendChild(document.createRange().createContextualFragment(html));
+    }
+    isLoading() {
+        return this.button.classList.contains('is-loading');
+    }
+    start() {
+        if (this.disabled) {
+            this.button.setAttribute('disabled', 'disabled');
+        }
+        this.button.classList.add('is-loading');
+    }
+    stop() {
+        if (this.disabled) {
+            this.button.removeAttribute('disabled');
+        }
+        this.button.classList.remove('is-loading');
+    }
+    constructor(button, disabled = true){
+        this.button = button;
+        this.disabled = disabled;
+        this.build();
+    }
+}
+const _default = Button;

package/dist/atoms/file/file.js

@@ -1,29 +1,25 @@
-'use strict';
-
-var inputs = document.querySelectorAll('[type="file"]:not(.wpcf7-file)');
-
-Array.prototype.forEach.call(inputs, function (input) {
-	var label = input.nextElementSibling;
-	var labelText = label.firstElementChild;
-	var labelVal = labelText.innerHTML;
-	var removebutton = label.nextElementSibling;
-
-	function handleFileName(e) {
-		var fileName = '';
-		if (this.files && this.files.length > 1) fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);else fileName = e.target.value.split('\\').pop();
-
-		if (fileName) labelText.innerHTML = fileName;else labelText.innerHTML = labelVal;
-
-		removebutton.classList.remove('is-hidden');
-	}
-
-	input.addEventListener('change', handleFileName);
-
-	removebutton.addEventListener('click', function () {
-		var fileName = '';
-		if (fileName) labelText.innerHTML = fileName;else labelText.innerHTML = labelVal;
-		removebutton.classList.add('is-hidden');
-		input.value = '';
-		input.focus();
-	});
-});
+"use strict";
+const inputs = document.querySelectorAll('[type="file"]:not(.wpcf7-file)');
+Array.prototype.forEach.call(inputs, (input)=>{
+    const label = input.nextElementSibling;
+    const labelText = label.firstElementChild;
+    const labelVal = labelText.innerHTML;
+    const removebutton = label.nextElementSibling;
+    function handleFileName(e) {
+        let fileName = '';
+        if (this.files && this.files.length > 1) fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
+        else fileName = e.target.value.split('\\').pop();
+        if (fileName) labelText.innerHTML = fileName;
+        else labelText.innerHTML = labelVal;
+        removebutton.classList.remove('is-hidden');
+    }
+    input.addEventListener('change', handleFileName);
+    removebutton.addEventListener('click', ()=>{
+        const fileName = '';
+        if (fileName) labelText.innerHTML = fileName;
+        else labelText.innerHTML = labelVal;
+        removebutton.classList.add('is-hidden');
+        input.value = '';
+        input.focus();
+    });
+});

package/dist/atoms/file/filePreview.js

@@ -1,31 +1,27 @@
-'use strict';
-
-var fileInputs = document.querySelectorAll('input[data-id=fileInput]');
-
-Array.prototype.forEach.call(fileInputs, function (fileInput) {
-	var filePreview = fileInput.previousElementSibling.firstElementChild;
-	var label = fileInput.nextElementSibling;
-	var removebutton = label.nextElementSibling;
-
-	var validImgFormats = ['image/jpeg', 'image/png', 'image/gif'];
-
-	function handleFileUpload(inputEvent) {
-		var inputFile = inputEvent.target;
-		var reader = new FileReader();
-
-		if (validImgFormats.indexOf(inputFile.files[0].type) === -1) {
-			console.warning('Välj en bildfil i något av följande filformat: .png, .jpg, and .gif.');
-		}
-
-		reader.readAsDataURL(inputFile.files[0]);
-		reader.onload = function (readerEvent) {
-			filePreview.src = readerEvent.target.result;
-		};
-
-		removebutton.addEventListener('click', function () {
-			filePreview.src = '';
-		});
-	}
-
-	fileInput.addEventListener('change', handleFileUpload, false);
-});
+"use strict";
+const fileInputs = document.querySelectorAll('input[data-id=fileInput]');
+Array.prototype.forEach.call(fileInputs, (fileInput)=>{
+    const filePreview = fileInput.previousElementSibling.firstElementChild;
+    const label = fileInput.nextElementSibling;
+    const removebutton = label.nextElementSibling;
+    const validImgFormats = [
+        'image/jpeg',
+        'image/png',
+        'image/gif'
+    ];
+    function handleFileUpload(inputEvent) {
+        const inputFile = inputEvent.target;
+        const reader = new FileReader();
+        if (validImgFormats.indexOf(inputFile.files[0].type) === -1) {
+            console.warning('Välj en bildfil i något av följande filformat: .png, .jpg, and .gif.');
+        }
+        reader.readAsDataURL(inputFile.files[0]);
+        reader.onload = (readerEvent)=>{
+            filePreview.src = readerEvent.target.result;
+        };
+        removebutton.addEventListener('click', ()=>{
+            filePreview.src = '';
+        });
+    }
+    fileInput.addEventListener('change', handleFileUpload, false);
+});

package/dist/atoms/grid-toggle/grid-toggle.js

@@ -1,12 +1,9 @@
-'use strict';
-
-var element = document.querySelector('.grid-toggle');
-
+"use strict";
+const element = document.querySelector('.grid-toggle');
 function classToggle() {
-	var body = document.querySelector('body');
-	body.classList.toggle('baseline-grid');
+    const body = document.querySelector('body');
+    body.classList.toggle('baseline-grid');
 }
-
 if (element) {
-	element.addEventListener('click', classToggle);
-}
+    element.addEventListener('click', classToggle);
+}