@internetstiftelsen/styleguide 2.21.0 → 2.21.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/package.json

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

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/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;