@internetstiftelsen/styleguide 2.26.3 → 2.26.4-beta.0.2

package/dist/assets/js/getCookieByName.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+exports.default = getCookieByName;
+function getCookieByName(name) {
+	var match = document.cookie.match(new RegExp("(^| )" + name + "=([^;]+)"));
+
+	if (match) {
+		return match[2];
+	}
+
+	return null;
+}

package/dist/assets/js/hasCookieConsent.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+exports.default = hasCookieConsent;
+
+var _getCookieByName = require('./getCookieByName');
+
+var _getCookieByName2 = _interopRequireDefault(_getCookieByName);
+
+var _queryToObj = require('./queryToObj');
+
+var _queryToObj2 = _interopRequireDefault(_queryToObj);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function hasCookieConsent(category) {
+	var defaultIfNoCookie = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+
+	var cookie = (0, _getCookieByName2.default)('OptanonConsent');
+
+	if (!cookie) {
+		return defaultIfNoCookie;
+	}
+
+	var cookieObj = (0, _queryToObj2.default)(cookie);
+
+	if (!('groups' in cookieObj)) {
+		return defaultIfNoCookie;
+	}
+
+	var groups = Object.fromEntries(cookieObj.groups.split(',').map(function (group) {
+		return group.trim().split(':');
+	}));
+
+	if (!(category in groups)) {
+		return defaultIfNoCookie;
+	}
+
+	return groups[category] === '1';
+}

package/dist/assets/js/queryToObj.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
+exports.default = queryToObj;
+/** Parse query string to object */
+function queryToObj(query) {
+	var obj = {};
+	var pairs = query.split('&');
+
+	pairs.forEach(function (pair) {
+		var _pair$split = pair.split('='),
+		    _pair$split2 = _slicedToArray(_pair$split, 2),
+		    key = _pair$split2[0],
+		    value = _pair$split2[1];
+
+		obj[decodeURIComponent(key)] = decodeURIComponent(value || '');
+	});
+
+	return obj;
+}

package/dist/assets/js/youtube.js

@@ -5,6 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 missingConsentMessage = 'För att spela Youtubefilmer krävs att "Riktade kakor" tillåts. Tryck för att "Anpassa kakor"';
+
 function loadYoutubeAPI() {
 	var id = 'iisYoutubeAPI';
 
@@ -31,7 +45,32 @@ function onPlayerStateChange(el, e) {
 	}
 }
 
+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');
+
+	div.setAttribute('data-youtube-consent-warning', true);
+	div.className = (0, _className2.default)('m-icon-overlay__message');
+	button.className = (0, _className2.default)('a-button');
+	button.innerHTML = '<span class="' + (0, _className2.default)('a-button__text') + ' ot-sdk-show-settings">Anpassa kakor</span>';
+	message.innerHTML = missingConsentMessage;
+
+	div.appendChild(message);
+	div.appendChild(button);
+
+	el.appendChild(div);
+}
+
 function createCover(el) {
+	if (!(0, _hasCookieConsent2.default)('C0004')) {
+		createConsentWarning(el);
+	}
+
 	if (el.getElementsByTagName('img').length) {
 		return;
 	}
@@ -79,6 +118,10 @@ function setupYoutubePlayer(el) {
 }
 
 function delegateClick(e) {
+	if (e.target.closest('[data-youtube-consent-warning]')) {
+		return;
+	}
+
 	var el = e.target.closest('[data-youtube]');
 
 	if (!el) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.26.3",
+	"version": "2.26.4-beta.0.2",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/assets/js/getCookieByName.js

@@ -0,0 +1,9 @@
+export default function getCookieByName(name) {
+	const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));
+
+	if (match) {
+		return match[2];
+	}
+
+	return null;
+}

package/src/assets/js/hasCookieConsent.js

@@ -0,0 +1,24 @@
+import getCookieByName from './getCookieByName';
+import queryToObj from './queryToObj';
+
+export default function hasCookieConsent(category, defaultIfNoCookie = true) {
+	const cookie = getCookieByName('OptanonConsent');
+
+	if (!cookie) {
+		return defaultIfNoCookie;
+	}
+
+	const cookieObj = queryToObj(cookie);
+
+	if (!('groups' in cookieObj)) {
+		return defaultIfNoCookie;
+	}
+
+	const groups = Object.fromEntries(cookieObj.groups.split(',').map((group) => group.trim().split(':')));
+
+	if (!(category in groups)) {
+		return defaultIfNoCookie;
+	}
+
+	return groups[category] === '1';
+}

package/src/assets/js/queryToObj.js

@@ -0,0 +1,12 @@
+/** Parse query string to object */
+export default function queryToObj(query) {
+	const obj = {};
+	const pairs = query.split('&');
+
+	pairs.forEach((pair) => {
+		const [key, value] = pair.split('=');
+		obj[decodeURIComponent(key)] = decodeURIComponent(value || '');
+	});
+
+	return obj;
+}

package/src/assets/js/youtube.js

@@ -1,3 +1,9 @@
+// TODO: Should probably implement a way to localize texts in the styleguide
+import className from './className';
+import hasCookieConsent from './hasCookieConsent';
+
+const missingConsentMessage = 'För att spela Youtubefilmer krävs att "Riktade kakor" tillåts. Tryck för att "Anpassa kakor"';
+
 function loadYoutubeAPI() {
 	const id = 'iisYoutubeAPI';
 
@@ -24,7 +30,32 @@ function onPlayerStateChange(el, e) {
 	}
 }
 
+function createConsentWarning(el) {
+	if (el.querySelector('[data-youtube-consent-warning]')) {
+		return;
+	}
+
+	const div = document.createElement('div');
+	const button = document.createElement('button');
+	const message = document.createElement('p');
+
+	div.setAttribute('data-youtube-consent-warning', true);
+	div.className = className('m-icon-overlay__message');
+	button.className = className('a-button');
+	button.innerHTML = `<span class="${className('a-button__text')} ot-sdk-show-settings">Anpassa kakor</span>`;
+	message.innerHTML = missingConsentMessage;
+
+	div.appendChild(message);
+	div.appendChild(button);
+
+	el.appendChild(div);
+}
+
 function createCover(el) {
+	if (!hasCookieConsent('C0004')) {
+		createConsentWarning(el);
+	}
+
 	if (el.getElementsByTagName('img').length) {
 		return;
 	}
@@ -70,6 +101,10 @@ function setupYoutubePlayer(el) {
 }
 
 function delegateClick(e) {
+	if (e.target.closest('[data-youtube-consent-warning]')) {
+		return;
+	}
+
 	const el = e.target.closest('[data-youtube]');
 
 	if (!el) {

package/src/molecules/icon-overlay/_icon-overlay.scss

@@ -28,7 +28,7 @@
 
 	@include e(button) {
 		position: absolute;
-		z-index: z_index(foregroundMinus);
+		z-index: 3;
 		top: 50%;
 		left: 50%;
 		width: rhythm(7);
@@ -63,4 +63,21 @@
 			height: rhythm(10);
 		}
 	}
+
+	@include e(message) {
+		display: flex;
+		flex-direction: column;
+		position: absolute;
+		z-index: 4;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+		background: $color-concrete;
+		padding-left: rhythm(2);
+		padding-right: rhythm(2);
+	}
 }