@internetstiftelsen/styleguide 2.20.7 → 2.21.3-beta.0.1

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.7",
+	"version": "2.21.3-beta.0.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/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/glider/_glider.scss

@@ -67,7 +67,7 @@
 	padding: rhythm(2) 0;
 	overflow: hidden;
 
-	img {
+	img:not([class]) {
 		display: block;
 		border-radius: $border-radius;
 		width: 100%;

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/hero/_hero.scss

@@ -349,6 +349,13 @@
 				}
 			}
 		}
+
+		@include bp-only(xs) {
+			.wrapper {
+				padding-left: 0;
+				padding-right: 0;
+			}
+		}
 	}
 
 	// Hero with video
@@ -386,10 +393,10 @@
 		}
 
 		@include e(content) {
-			padding: rhythm(2) rhythm(1);
+			padding: rhythm(2) 0;
 
 			@include bp-up(sm) {
-				padding: rhythm(4) rhythm(6);
+				padding: rhythm(4);
 			}
 
 			@include e(icon) {

package/src/organisms/hero/hero.config.js

@@ -19,6 +19,7 @@ module.exports = {
 				has_radius: true,
 				limited_width: true,
 				has_radius: true,
+				has_buttons: false,
 				text: 'Nästan alla i Sverige använder internet – men hur meningsfull är tiden vi spenderar där? I rapporten Svenskarna och internet 2019 frågar vi för första gången om meningsfullhet, och det syns stora skillnader mellan olika aktiviteter. Tid på sociala medier tycker bara var fjärde är meningsfull.',
 			}
 		},
@@ -27,6 +28,7 @@ module.exports = {
 			context: {
 				has_tags: false,
 				has_buttons: true,
+				limited_width: false,
 				text: 'Så gott som alla svenskar använder internet och digitala tjänster idag',
 			},
 		},
@@ -38,6 +40,7 @@ module.exports = {
 				has_image: false,
 				has_buttons: false,
 				has_tags: true,
+				limited_width: false,
 				text: 'Nästan alla i Sverige använder internet – men hur meningsfull är tiden vi spenderar där? I rapporten Svenskarna och internet 2019 frågar vi för första gången om meningsfullhet, och det syns stora skillnader mellan olika aktiviteter. Tid på sociala medier tycker bara var fjärde är meningsfull.',
 			}
 		},
@@ -49,7 +52,8 @@ module.exports = {
 				video_class: 'o-hero--video',
 				limited_width: true,
 				has_video: true,
-				has_image: false
+				has_image: false,
+				has_buttons: false,
 			}
 		},
 		{
@@ -63,10 +67,11 @@ module.exports = {
 					no_image_class: 'o-hero--no-image',
 					icon_share: 'share',
 					icon_export: 'external-link',
-					limited_width: true,
+					limited_width: false,
 					has_image: false,
 					has_video: false,
 					is_event: true,
+					has_buttons: false,
 					background_color: 'background-peacock-light'
 				}
 		},
@@ -83,7 +88,7 @@ module.exports = {
 					geometric_figures: false,
 					icon_share: 'share',
 					icon_export: 'external-link',
-					limited_width: true,
+					limited_width: false,
 					has_image: false,
 					has_video: false,
 					is_event: true,
@@ -96,12 +101,16 @@ module.exports = {
 			name: 'Clean',
 			context: {
 				no_image_class: 'o-hero--clean',
+				limited_width: false,
+				has_buttons: false,
 			}
 		},
 		{
 			name: 'Early breakpoint',
 			context: {
 				no_image_class: 'o-hero--break-early o-hero--clean',
+				limited_width: false,
+				has_buttons: false,
 			}
 		},
 	]

package/src/organisms/hero/hero.hbs

@@ -1,5 +1,5 @@
 {{#if limited_width}}
-{{#unless is_event}}<div class="wrapper">{{/unless}}
+<div class="wrapper">
 	<div class="row">
 		<div class="grid">
 {{/if}}
@@ -8,28 +8,25 @@
 	{{#if has_video}}
 		<iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/3RVcnx-hOk8?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 	{{else if is_event}}
-		<div class="wrapper">
-			<figcaption>
-				<div class="o-hero__content">
-					<p class="o-hero__text">{{event_text}} {{#if city}}<strong>{{city}}</strong>{{/if}}</p>
-					<h1 class="supersize">{{event_title}}</h1>
-					<p class="o-hero__text display-flex flex-wrap">
-						<span class="meta u-m-y-0 u-p-y-0 u-p-r-1">{{time}}</span>
-						<span class="o-hero__spacer">|</span>
-						<span>Arrangör: <a href="#">{{organizer}}
-							<svg class="icon o-mega-menu__link__icon">
-								<use xlink:href="#icon-external-link"></use>
-							</svg></a>
-						</span>
-					</p>
-						{{#if has_button}}
-							{{> @button el="a" modifiers="lemon a-button--inline u-m-y-2 u-m-r-2"}}
-						{{/if}}
-						{{> @share modifiers="inline"}}
-
+		<figcaption class="o-hero__content">
+			<div class="wrapper">
+				<p class="o-hero__text">{{event_text}} {{#if city}}<strong>{{city}}</strong>{{/if}}</p>
+				<h1 class="supersize">{{event_title}}</h1>
+				<p class="o-hero__text display-flex flex-wrap">
+					<span class="meta u-m-y-0 u-p-y-0 u-p-r-1">{{time}}</span>
+					<span class="o-hero__spacer">|</span>
+					<span>Arrangör: <a href="#">{{organizer}}
+						<svg class="icon o-mega-menu__link__icon">
+							<use xlink:href="#icon-external-link"></use>
+						</svg></a>
+					</span>
+				</p>
+					{{#if has_button}}
+						{{> @button el="a" modifiers="lemon a-button--inline u-m-y-2 u-m-r-2"}}
+					{{/if}}
+					{{> @share modifiers="inline"}}
 			</div>
-		</figcaption>
-	</div>
+	</figcaption>
 	{{else}}
 	<figcaption class="o-hero__caption">
 		<div class="wrapper">
@@ -56,5 +53,5 @@
 {{#if limited_width}}
 		</div>
 	</div>
-{{#unless is_event}}</div>{{/unless}}
+</div>
 {{/if}}

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;