@internetstiftelsen/styleguide 2.20.4 → 2.21.1

package/dist/atoms/textarea/rich-text.js

@@ -141,6 +141,8 @@ function getHTML(editor) {
 }
 
 function setupTextArea(el) {
+	var onChange = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
+
 	var editorEl = document.createElement('div');
 	var editor = new _core.Editor({
 		element: editorEl,
@@ -155,7 +157,9 @@ function setupTextArea(el) {
 			toogleButtonState(props.editor, editorEl);
 		},
 		onUpdate: function onUpdate(props) {
-			el.value = getHTML(props.editor);
+			var html = getHTML(props.editor);
+			el.value = html;
+			onChange(html);
 		}
 	});
 

package/dist/components.js

@@ -48,4 +48,6 @@ require('./molecules/glider/glider-single');
 
 require('./atoms/timeline/anchorScroll');
 
-require('./molecules/timeline-navigation/timeline-navigation');
+require('./molecules/timeline-navigation/timeline-navigation');
+
+require('./molecules/context-menu/context-menu');

package/dist/molecules/context-menu/context-menu.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var elements = document.querySelectorAll('[data-close-on-outside-click]');
+
+function closeElement(element) {
+	document.addEventListener('mouseup', function (e) {
+		var childElement = element.nextElementSibling;
+
+		/* Close menu on all clicks except the trigger button,
+   the menu and it's child elements and if the menu is actually open. */
+		if (!element.contains(e.target) && !childElement.contains(e.target) && element.getAttribute('aria-expanded') === 'true') {
+			element.click();
+		}
+	});
+}
+
+if (elements) {
+	[].forEach.call(elements, closeElement);
+}

package/dist/molecules/modal/modal.js

@@ -9,6 +9,9 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 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.onOpen = onOpen;
+exports.onClose = onClose;
+
 var _focusTrap = require('../../focusTrap');
 
 var _focusTrap2 = _interopRequireDefault(_focusTrap);
@@ -51,6 +54,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 
 var queue = [];
+var globalOnCloseCallbacks = [];
+var globalOnOpenCallbacks = [];
 var active = null;
 var incrementId = 0;
 var modal = null;
@@ -138,6 +143,26 @@ function handleKeyUp(e) {
 	});
 }
 
+/**
+ * Global onOpen handler
+ *
+ * @param {Function} cb
+ * @returns {number}
+ */
+function onOpen(cb) {
+	var index = globalOnOpenCallbacks.push(cb) - 1;
+
+	return function () {
+		globalOnOpenCallbacks.splice(index, 1);
+	};
+}
+
+function dispatchOnOpenHandlers(el, id) {
+	globalOnOpenCallbacks.forEach(function (cb) {
+		return cb(el, id);
+	});
+}
+
 /**
  * Display the active modal.
  */
@@ -167,6 +192,8 @@ function display() {
 		active.settings.onOpen(active.id, active.el);
 	}
 
+	dispatchOnOpenHandlers(active.el, active.id);
+
 	setTimeout(function () {
 		if (active.el.focusTrap) {
 			active.el.focusTrap.activate();
@@ -200,6 +227,26 @@ function dispatch() {
 	display();
 }
 
+/**
+ * Global onClose handler
+ *
+ * @param {Function} cb
+ * @returns {number}
+ */
+function onClose(cb) {
+	var index = globalOnCloseCallbacks.push(cb) - 1;
+
+	return function () {
+		globalOnCloseCallbacks.splice(index, 1);
+	};
+}
+
+function dispatchOnCloseHandlers(el, id) {
+	globalOnCloseCallbacks.forEach(function (cb) {
+		return cb(el, id);
+	});
+}
+
 /**
  * Close currently active modal
  * and dispatch next in queue.
@@ -212,6 +259,8 @@ function close() {
 			active.settings.onClose(active.id);
 		}
 
+		dispatchOnCloseHandlers(active.el, active.id);
+
 		document.removeEventListener('keyup', handleKeyUp);
 
 		if (active.el.focusTrap) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.20.4",
+	"version": "2.21.1",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/app.js

@@ -5,7 +5,7 @@ require('./atoms/grid-toggle/grid-toggle');
 require('./components');
 
 const Button = require('./atoms/button/Button');
-const { open } = require('./molecules/modal/modal');
+const { open, onClose, onOpen } = require('./molecules/modal/modal');
 
 const demoButtons = document.querySelectorAll('button.a-button.has-loader');
 
@@ -59,3 +59,17 @@ if (demoModal) {
 		});
 	});
 }
+
+// eslint-disable-next-line no-unused-vars
+const unsubscribe = onClose((el, id) => {
+	console.log('Global onClose', el, id);
+});
+
+// Call unsubscribe to remove callback
+
+// eslint-disable-next-line no-unused-vars
+const unsubscribeOpen = onOpen((el, id) => {
+	console.log('Global onOpen', el, id);
+});
+
+// Call unsubscribe to remove callback

package/src/atoms/textarea/rich-text.js

@@ -136,7 +136,7 @@ function getHTML(editor) {
 		.replace(/<\/p><\/li>/g, '</li>');
 }
 
-export function setupTextArea(el) {
+export function setupTextArea(el, onChange = () => {}) {
 	const editorEl = document.createElement('div');
 	const editor = new Editor({
 		element: editorEl,
@@ -154,7 +154,9 @@ export function setupTextArea(el) {
 			toogleButtonState(props.editor, editorEl);
 		},
 		onUpdate(props) {
-			el.value = getHTML(props.editor);
+			const html = getHTML(props.editor);
+			el.value = html;
+			onChange(html);
 		},
 	});
 

package/src/components.js

@@ -23,3 +23,4 @@ import './molecules/glider/glider';
 import './molecules/glider/glider-single';
 import './atoms/timeline/anchorScroll';
 import './molecules/timeline-navigation/timeline-navigation';
+import './molecules/context-menu/context-menu';

package/src/molecules/context-menu/context-menu.config.js

@@ -4,14 +4,24 @@ module.exports = {
 	context: {
 		name: 'Context menu',
 		controls: 'contextMenu',
-		focusTrap: true
+		focusTrap: true,
+		outsideClick: false
 	},
 	variants: [
 		{
 		name: 'No focus trap',
 		context: {
 			controls: 'contextMenu2',
-			focusTrap: false
+			focusTrap: false,
+			outsideClick: false
+			}
+		},
+		{
+		name: 'Close on outside click',
+		context: {
+			controls: 'contextMenu3',
+			focusTrap: false,
+			outsideClick: true
 			}
 		}
 	]

package/src/molecules/context-menu/context-menu.hbs

@@ -1,5 +1,5 @@
 <nav class="m-context-menu js-context-menu">
-	<button type="button" class="a-button a-button--icon a-button--transparent a-button--icon js-context-menu-btn" aria-expanded="false" data-a11y-toggle="{{controls}}" aria-controls="{{controls}}">
+	<button type="button" class="a-button a-button--icon a-button--transparent a-button--icon js-context-menu-btn" aria-expanded="false" data-a11y-toggle="{{controls}}" aria-controls="{{controls}}" {{#if outsideClick}}data-close-on-outside-click="true"{{/if}}>
 		<span class="a-button__text">Exportera</span>
 		<svg class="icon a-button__icon">
 			<use xlink:href="#icon-download"></use>

package/src/molecules/context-menu/context-menu.js

@@ -0,0 +1,17 @@
+const elements = document.querySelectorAll('[data-close-on-outside-click]');
+
+function closeElement(element) {
+	document.addEventListener('mouseup', (e) => {
+		const childElement = element.nextElementSibling;
+
+		/* Close menu on all clicks except the trigger button,
+		 the menu and it's child elements and if the menu is actually open. */
+		if (!element.contains(e.target) && !childElement.contains(e.target) && element.getAttribute('aria-expanded') === 'true') {
+			element.click();
+		}
+	});
+}
+
+if (elements) {
+	[].forEach.call(elements, closeElement);
+}

package/src/molecules/modal/modal.js

@@ -33,6 +33,8 @@ import className from '../../assets/js/className';
  */
 
 const queue = [];
+const globalOnCloseCallbacks = [];
+const globalOnOpenCallbacks = [];
 let active = null;
 let incrementId = 0;
 let modal = null;
@@ -117,6 +119,24 @@ function handleKeyUp(e) {
 	});
 }
 
+/**
+ * Global onOpen handler
+ *
+ * @param {Function} cb
+ * @returns {number}
+ */
+export function onOpen(cb) {
+	const index = globalOnOpenCallbacks.push(cb) - 1;
+
+	return () => {
+		globalOnOpenCallbacks.splice(index, 1);
+	};
+}
+
+function dispatchOnOpenHandlers(el, id) {
+	globalOnOpenCallbacks.forEach((cb) => cb(el, id));
+}
+
 /**
  * Display the active modal.
  */
@@ -149,6 +169,8 @@ function display() {
 		active.settings.onOpen(active.id, active.el);
 	}
 
+	dispatchOnOpenHandlers(active.el, active.id);
+
 	setTimeout(() => {
 		if (active.el.focusTrap) {
 			active.el.focusTrap.activate();
@@ -182,6 +204,24 @@ function dispatch() {
 	display();
 }
 
+/**
+ * Global onClose handler
+ *
+ * @param {Function} cb
+ * @returns {number}
+ */
+export function onClose(cb) {
+	const index = globalOnCloseCallbacks.push(cb) - 1;
+
+	return () => {
+		globalOnCloseCallbacks.splice(index, 1);
+	};
+}
+
+function dispatchOnCloseHandlers(el, id) {
+	globalOnCloseCallbacks.forEach((cb) => cb(el, id));
+}
+
 /**
  * Close currently active modal
  * and dispatch next in queue.
@@ -194,6 +234,8 @@ function close() {
 			active.settings.onClose(active.id);
 		}
 
+		dispatchOnCloseHandlers(active.el, active.id);
+
 		document.removeEventListener('keyup', handleKeyUp);
 
 		if (active.el.focusTrap) {

package/src/organisms/footer/_footer.scss

@@ -19,6 +19,14 @@ $footer-font-size: 18px; // To ensure all footers on all sites have the same fon
 		z-index: z_index(foreground);
 	}
 
+	@include m(row) {
+		display: flex;
+		flex-wrap: wrap;
+		max-width: none !important;
+		margin-right: math.div($grid-gutter-width, -2);
+		margin-left: math.div($grid-gutter-width, -2);
+	}
+
 	@include e(logotype) {
 		width: 100%;
 		max-width: 250px;
@@ -45,98 +53,17 @@ $footer-font-size: 18px; // To ensure all footers on all sites have the same fon
 	}
 
 	@include e(info) {
+		min-height: 445px;
 		background-color: $color-cyberspace;
 		color: $color-snow;
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
 
-		@include e(freetext) {
-			padding: rhythm(4) rhythm(3);
-			border-bottom: 1px solid $color-black;
-
-			@include bp-up(xl) {
-				padding: rhythm(4) rhythm(6);
-				border-bottom: 0;
-			}
-		}
-
-		@include e(contact) {
-			border-left: 1px solid $color-black;
-			font-size: 80%;
-
-			@include e(address) {
-				font-size: inherit;
-
-				@include e(li) {
-					font-size: #{($footer-font-size) - 3px};
-					line-height: 1.3;
-				}
-			}
-
-			@include bp-up(xxl) {
-				padding-right: rhythm(1);
-
-				& + & {
-					padding-right: 0;
-					padding-left: rhythm(1);
-				}
-			}
-
-			@include e(row-first) {
-				border-bottom: 1px solid $color-black;
-			}
-
-			@include e(row-second) {
-			}
-		}
-
-		@include e(address1) {
-			padding: rhythm(3);
-			border-bottom: 1px solid $color-black;
-
-			@include bp-only(md) {
-				border-bottom: 0;
-				border-right: 1px solid $color-black;
-			}
-
-			@include bp-up(xl) {
-				border-right: 1px solid $color-black;
-				border-bottom: 0;
-				padding: rhythm(3) rhythm(3) rhythm(3) rhythm(6);
-			}
-		}
-
-		@include e(address2) {
-			padding: rhythm(3) 0 rhythm(3) rhythm(3);
-
-			@include bp-up(xl) {
-				padding-left: rhythm(6);
-			}
-		}
-
-		@include e(ISO) {
-			border-right: 1px solid $color-black;
-			border-bottom: 1px solid $color-black;
+		@include e(inner) {
 			padding: rhythm(3);
-			display: flex;
-			align-items: center;
 
 			@include bp-up(md) {
-				border-bottom: 0;
-			}
-
-			@include bp-up(xl) {
-				padding: rhythm(3) rhythm(3) rhythm(3) rhythm(6);
-			}
-		}
-
-		@include e(CC) {
-			padding: rhythm(3);
-			display: flex;
-			align-items: center;
-
-			@include bp-up(xl) {
-				padding-left: rhythm(6);
+				padding: rhythm(4) rhythm(5);
 			}
 		}
 	}
@@ -149,8 +76,6 @@ $footer-font-size: 18px; // To ensure all footers on all sites have the same fon
 		font-size: $footer-font-size;
 
 		a {
-			@extend %normalize-links;
-
 			color: $color-jade;
 			text-decoration: none;
 
@@ -160,10 +85,17 @@ $footer-font-size: 18px; // To ensure all footers on all sites have the same fon
 				text-decoration: underline;
 			}
 		}
+	}
 
-		@include bp-up(xxl) {
-			@include make-col(14);
-			max-width: rem(612px);
+	@include bp-down(md) {
+		@include e(paragraph) {
+			max-width: 70%;
+		}
+	}
+
+	@include bp-down(sm) {
+		@include e(paragraph) {
+			max-width: none;
 		}
 	}
 
@@ -171,6 +103,11 @@ $footer-font-size: 18px; // To ensure all footers on all sites have the same fon
 		max-width: 100%;
 		height: auto;
 		background-color: $color-snow;
+	}
+
+	@include e(grid-row) {
+		height: 100%;
+		overflow: hidden;
 
 		@include e(item) {
 			display: flex;
@@ -190,15 +127,15 @@ $footer-font-size: 18px; // To ensure all footers on all sites have the same fon
 			}
 
 			@include bp-up(md) {
-				flex-basis: 50%;
+				flex-basis: 33.333333%;
 			}
 
 			@include bp-up(lg) {
-				flex-basis: 33.333333%;
+				flex-basis: 50%;
 			}
 
 			@include bp-up(xl) {
-				flex-basis: 16.666666%;
+				flex-basis: 33.333333%;
 			}
 
 			@include e(link) {
@@ -263,15 +200,40 @@ $footer-font-size: 18px; // To ensure all footers on all sites have the same fon
 					display: inline-block;
 					max-width: 300px;
 
-					@include plumber(
-						$font-size: 1.7,
-						$line-height: 2
-					);
+					@include bp-down(lg) {
+						@include plumber(
+							$font-size: 1.7,
+							$line-height: 2
+						);
+					}
 				}
 			}
 		}
 	}
 
+	@include e(contact) {
+		font-size: 80%;
+
+		@include e(address) {
+			margin-bottom: rhythm(2);
+			font-size: inherit;
+
+			@include e(li) {
+				font-size: #{($footer-font-size) - 3px};
+				line-height: 1.3;
+			}
+		}
+
+		@include bp-up(xxl) {
+			padding-right: rhythm(1);
+
+			& + & {
+				padding-right: 0;
+				padding-left: rhythm(1);
+			}
+		}
+	}
+
 	@include e(logo-link) {
 		display: flex;
 		justify-content: center;

package/src/organisms/footer/footer.config.js

@@ -1,11 +1,11 @@
 module.exports = {
-	status: 'wip',
+	status: 'ready',
 
 	context: {
 		id: '',
 		footer_text: '<p class="o-footer__paragraph"><a class="o-footer__link" href="https://internetstiftelsen.se">Internetstiftelsen</a> verkar för ett internet som bidrar positivt till människan och samhället. Vi är en oberoende organisation som säkerställer en stark och säker infrastruktur för internet i Sverige. Vårt mål är att alla ska våga och kunna använda internet. Vi finns i Sverige och ansvarar för den svenska toppdomänen .se och driften av toppdomänen .nu.</p>',
-		contact_1: '<ul class="u-list-clean o-footer__info__contact__address"><li class="o-footer__info__contact__address__li">Internetstiftelsen</li><li class="o-footer__info__contact__address__li">Hammarby Kaj 10D</li><li class="o-footer__info__contact__address__li">Box 92073</li><li class="o-footer__info__contact__address__li">120 07 Stockholm</li></ul>',
-		contact_2: '<ul class="u-list-clean o-footer__info__contact__address"><li class="o-footer__info__contact__address__li">E-post: <a class="o-footer__link" href="mailto:info@internetstiftelsen.se">info@internetstiftelsen.se</a></li><li class="o-footer__info__contact__address__li">Telefon: <a class="o-footer__link" href="tel:084523500">08-452 35 00</a></li><li class="o-footer__info__contact__address__li">Organisationsnummer: 802405-0190</li></ul>',
+		contact_1: '<ul class="u-list-clean o-footer__contact__address"><li class="o-footer__contact__address__li">Internetstiftelsen</li><li class="o-footer__contact__address__li">Hammarby Kaj 10D</li><li class="o-footer__contact__address__li">Box 92073</li><li class="o-footer__contact__address__li">120 07 Stockholm</li></ul>',
+		contact_2: '<ul class="u-list-clean o-footer__contact__address"><li class="o-footer__contact__address__li">E-post: <a class="o-footer__link" href="mailto:info@internetstiftelsen.se">info@internetstiftelsen.se</a></li><li class="o-footer__contact__address__li">Telefon: <a class="o-footer__link" href="tel:084523500">08-452 35 00</a></li><li class="o-footer__contact__address__li">Organisationsnummer: 802405-0190</li></ul>',
 		ISO_link: 'https://internetstiftelsen.se/docs/Certifikat_27001_UKAS_sv.pdf',
 		ISO_image: 'https://internetstiftelsen.se/app/themes/internetstiftelsen/images/ISO_27001_2013_black_TM.svg',
 		ISO_text: 'Certifierade enligt ISO/IEC<br>27001:2013',
@@ -21,6 +21,6 @@ module.exports = {
 		site_heading_5: 'Internetmuseum',
 		site_description_5: 'Internetmuseum är ett digitalt museum som byggts, och kureras av Internetstiftelsen',
 		site_heading_6: 'Digitala lektioner',
-		site_description_6: 'Digitala lektioner är en öppen digital lärresurs från Internetstiftelsen med färdiga lektioner för alla stadier i grundskolan.',
+		site_description_6: 'Digitala lektioner är en öppen digital lärresurs från Internetstiftelsen. Du hittar färdiga lektioner inom olika ämnesområden för alla stadier i grundskolan',
 	}
 }

package/src/organisms/footer/footer.hbs

@@ -1,131 +1,121 @@
 <div class="wrapper-fluid">
-	<div class="o-footer" id="siteFooter">
-		<div class="row">
-			<div class="grid-18 o-footer__info">
-				<div class="row">
-					<div class="grid-18 grid-lg-9 o-footer__info__freetext">
-						{{{footer_text}}}
+	<div class="o-footer--row o-footer" id="siteFooter">
+		<div class="grid-xl-7 grid-lg-9 grid-18 o-footer__info">
+			<div class="o-footer__info__inner">
+				{{{footer_text}}}
+				<div class="o-footer--row">
+					<div class="grid-xxl-9 grid-18 o-footer__contact">
+						{{{contact_1}}}
 					</div>
-					<div class="grid-18 grid-lg-9 o-footer__info__contact">
-						<div class="row o-footer__info__contact__row-first">
-							<div class="grid-md-9 grid-lg-18 grid-xl-9 grid-18 o-footer__info__address1">
-								{{{contact_1}}}
+					<div class="grid-xxl-9 grid-18 o-footer__contact">
+						{{{contact_2}}}
+					</div>
+				</div>
+				<div class="o-footer--row u-m-t-2 align-items-center">
+					<div class="o-footer-grid">
+						<a href="{{ISO_link}}" class="o-footer__link o-footer__external-link">
+							<img src="{{ISO_image}}" class="o-footer__external-logo" alt="Certifierade enligt ISO/IEC 27001:2013">
+							<span>{{{ISO_text}}}</span>
+						</a>
+					</div>
+					<div class="o-footer-grid">
+						<a href="https://creativecommons.org/licenses/by/4.0/legalcode.sv" class="o-footer__link o-footer__external-link">
+							<img class="o-footer__external-logo" src="https://svenskarnaochinternet.se/app/uploads/2019/10/ccby.png" alt="{{CC_license}}">
+							<span>{{{CC_license}}}</span>
+						</a>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="grid-xl-11 grid-lg-9 grid-18 o-footer__logotypes">
+			<div class="o-footer--row o-footer__grid-row">
+				<div class="o-footer__grid-row__item">
+					<a href="https://svenskarnaochinternet.se" class="o-footer__grid-row__item__link">
+						<div class="o-footer__grid-row__item__inner">
+							<div class="o-footer__grid-row__item__front">
+								<img class="o-footer__logotype" alt="Svenskarna och internet" src="https://static.iis.se/images/logotypes/svenskarna-och-internet.svg">
 							</div>
-							<div class="grid-md-9 grid-lg-18 grid-xl-9 grid-18 o-footer__info__address2">
-								{{{contact_2}}}
+							<div class="o-footer__grid-row__item__back">
+								<h2>{{site_heading_1}}</h2>
+								<span>{{site_description_1}}</span>
 							</div>
 						</div>
-						<div class="row o-footer__info__contact__row-second">
-							<div class="grid-19 grid-md-9 o-footer__info__ISO">
-								<a href="{{ISO_link}}" class="o-footer__link o-footer__external-link">
-									<img src="{{ISO_image}}" class="o-footer__external-logo" alt="Certifierade enligt ISO/IEC 27001:2013">
-									<span>{{{ISO_text}}}</span>
-								</a>
+					</a>
+				</div>
+				<div class="o-footer__grid-row__item">
+					<a href="https://internetdagarna.se" class="o-footer__grid-row__item__link">
+						<div class="o-footer__grid-row__item__inner">
+							<div class="o-footer__grid-row__item__front">
+								<img class="o-footer__logotype" alt="Internetdagarna" src="https://static.iis.se/images/logotypes/internetdagarna.svg">
 							</div>
-							<div class="grid-19 grid-md-9 o-footer__info__CC">
-								<a href="https://creativecommons.org/licenses/by/4.0/legalcode.sv" class="o-footer__link o-footer__external-link">
-									<img class="o-footer__external-logo" src="https://svenskarnaochinternet.se/app/uploads/2019/10/ccby.png" alt="{{CC_license}}">
-									<span>{{{CC_license}}}</span>
-								</a>
+							<div class="o-footer__grid-row__item__back">
+								<h2>{{site_heading_2}}</h2>
+								<span>{{site_description_2}}</span>
 							</div>
 						</div>
-					</div>
+					</a>
 				</div>
-			</div>
-		</div>
-		<div class="row">
-			<div class="grid-18 o-footer__logotypes">
-				<div class="row">
-					<div class="o-footer__logotypes__item">
-						<a href="https://svenskarnaochinternet.se" class="o-footer__logotypes__item__link">
-							<div class="o-footer__logotypes__item__inner">
-								<div class="o-footer__logotypes__item__front">
-									<img class="o-footer__logotype" alt="Svenskarna och internet" src="https://static.iis.se/images/logotypes/svenskarna-och-internet.svg">
-								</div>
-								<div class="o-footer__logotypes__item__back">
-									<h2>{{site_heading_1}}</h2>
-									<span>{{site_description_1}}</span>
-								</div>
+				<div class="o-footer__grid-row__item">
+					<a href="https://goto10.se" class="o-footer__grid-row__item__link">
+						<div class="o-footer__grid-row__item__inner">
+							<div class="o-footer__grid-row__item__front">
+								<img class="o-footer__logotype"  alt="Goto10" src="https://static.iis.se/images/logotypes/goto-10.svg">
 							</div>
-						</a>
-					</div>
-					<div class="o-footer__logotypes__item">
-						<a href="https://internetdagarna.se" class="o-footer__logotypes__item__link">
-							<div class="o-footer__logotypes__item__inner">
-								<div class="o-footer__logotypes__item__front">
-									<img class="o-footer__logotype" alt="Internetdagarna" src="https://static.iis.se/images/logotypes/internetdagarna.svg">
-								</div>
-								<div class="o-footer__logotypes__item__back">
-									<h2>{{site_heading_2}}</h2>
-									<span>{{site_description_2}}</span>
-								</div>
+							<div class="o-footer__grid-row__item__back">
+								<h2>{{site_heading_3}}</h2>
+								<span>{{site_description_3}}</span>
 							</div>
-						</a>
-					</div>
-					<div class="o-footer__logotypes__item">
-						<a href="https://goto10.se" class="o-footer__logotypes__item__link">
-							<div class="o-footer__logotypes__item__inner">
-								<div class="o-footer__logotypes__item__front">
-									<img class="o-footer__logotype"  alt="Goto10" src="https://static.iis.se/images/logotypes/goto-10.svg">
-								</div>
-								<div class="o-footer__logotypes__item__back">
-									<h2>{{site_heading_3}}</h2>
-									<span>{{site_description_3}}</span>
-								</div>
+						</div>
+					</a>
+				</div>
+				<div class="o-footer__grid-row__item">
+					<a href="https://bredbandskollen.se" class="o-footer__grid-row__item__link">
+						<div class="o-footer__grid-row__item__inner">
+							<div class="o-footer__grid-row__item__front">
+								<img class="o-footer__logotype"  alt="Bredbandskollen" src="https://static.iis.se/images/logotypes/bredbandskollen.svg">
 							</div>
-						</a>
-					</div>
-					<div class="o-footer__logotypes__item">
-						<a href="https://bredbandskollen.se" class="o-footer__logotypes__item__link">
-							<div class="o-footer__logotypes__item__inner">
-								<div class="o-footer__logotypes__item__front">
-									<img class="o-footer__logotype"  alt="Bredbandskollen" src="https://static.iis.se/images/logotypes/bredbandskollen.svg">
-								</div>
-								<div class="o-footer__logotypes__item__back">
-									<h2>{{site_heading_4}}</h2>
-									<span>{{site_description_4}}</span>
-								</div>
+							<div class="o-footer__grid-row__item__back">
+								<h2>{{site_heading_4}}</h2>
+								<span>{{site_description_4}}</span>
 							</div>
-						</a>
-					</div>
-					<div class="o-footer__logotypes__item">
-						<a href="https://internetmuseum.se" class="o-footer__logotypes__item__link">
-							<div class="o-footer__logotypes__item__inner">
-								<div class="o-footer__logotypes__item__front">
-									<img class="o-footer__logotype"  alt="Internetmuseum" src="https://static.iis.se/images/logotypes/internetmuseum.svg">
-								</div>
-								<div class="o-footer__logotypes__item__back">
-									<h2>{{site_heading_5}}</h2>
-									<span>{{site_description_5}}</span>
-								</div>
+						</div>
+					</a>
+				</div>
+				<div class="o-footer__grid-row__item">
+					<a href="https://internetmuseum.se" class="o-footer__grid-row__item__link">
+						<div class="o-footer__grid-row__item__inner">
+							<div class="o-footer__grid-row__item__front">
+								<img class="o-footer__logotype"  alt="Internetmuseum" src="https://static.iis.se/images/logotypes/internetmuseum.svg">
 							</div>
-						</a>
-					</div>
-					<div class="o-footer__logotypes__item">
-						<a href="https://digitalalektioner.se" class="o-footer__logotypes__item__link">
-							<div class="o-footer__logotypes__item__inner">
-								<div class="o-footer__logotypes__item__front">
-									<img class="o-footer__logotype"  alt="Digitala lektioner" src="https://static.iis.se/images/logotypes/digitala-lektioner.svg">
-								</div>
-								<div class="o-footer__logotypes__item__back">
-									<h2>{{site_heading_6}}</h2>
-									<span>{{site_description_6}}</span>
-								</div>
+							<div class="o-footer__grid-row__item__back">
+								<h2>{{site_heading_5}}</h2>
+								<span>{{site_description_5}}</span>
 							</div>
-						</a>
-					</div>
+						</div>
+					</a>
+				</div>
+				<div class="o-footer__grid-row__item">
+					<a href="https://digitalalektioner.se" class="o-footer__grid-row__item__link">
+						<div class="o-footer__grid-row__item__inner">
+							<div class="o-footer__grid-row__item__front">
+								<img class="o-footer__logotype"  alt="Digitala lektioner" src="https://static.iis.se/images/logotypes/digitala-lektioner.svg">
+							</div>
+							<div class="o-footer__grid-row__item__back">
+								<h2>{{site_heading_6}}</h2>
+								<span>{{site_description_6}}</span>
+							</div>
+						</div>
+					</a>
 				</div>
 			</div>
 		</div>
-		<div class="row">
-			<div class="u-p-y-1 o-footer__bottom-links">
-				<nav>
-					<ul class="u-list-clean display-flex">
-						<li class="u-p-x-1"><a href="https://internetstiftelsen.se/om-webbplatsen/" class="o-footer__link o-footer__about-link">Om webbplatsen</a></li>
-						<li class="u-p-x-1"><a href="https://internetstiftelsen.se/om-webbplatsen/cookies/" class="o-footer__link o-footer__about-link">Om cookies</a></li>
-					</ul>
-				</nav>
-			</div>
+		<div class="u-p-y-1 o-footer__bottom-links">
+			<nav>
+				<ul class="u-list-clean display-flex">
+					<li class="u-p-x-1"><a href="https://internetstiftelsen.se/om-webbplatsen/" class="o-footer__link o-footer__about-link">Om webbplatsen</a></li>
+					<li class="u-p-x-1"><a href="https://internetstiftelsen.se/om-webbplatsen/cookies/" class="o-footer__link o-footer__about-link">Om cookies</a></li>
+				</ul>
+			</nav>
 		</div>
 	</div>
 </div>

package/src/utilities/_icons.scss

@@ -11,6 +11,11 @@ $fill-color: $color-black;
 	background-position: center center !important;
 
 	// Sizes
+	@include m(smallest) {
+		width: $icon-size-smallest !important;
+		height: $icon-size-smallest !important;
+	}
+	
 	@include m(small) {
 		width: $icon-size-small !important;
 		height: $icon-size-small !important;