@internetstiftelsen/styleguide 2.21.14 → 2.21.15

package/dist/components.js

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

package/dist/molecules/alert/alert.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var alerts = document.querySelectorAll('.js-dismiss-alert');
+
+function dismiss(alert) {
+	var target = alert.querySelector('[data-a11y-toggle]');
+	var id = target.closest('[role]').getAttribute('id');
+	var idElement = document.getElementById(id);
+
+	if (sessionStorage.getItem(id) !== 'is-dismissed') {
+		window.addEventListener('DOMContentLoaded', function () {
+			idElement.setAttribute('aria-hidden', 'false');
+		});
+
+		target.addEventListener('click', function () {
+			sessionStorage.setItem(id, 'is-dismissed');
+		});
+	}
+}
+
+if (alerts) {
+	[].forEach.call(alerts, dismiss);
+}

package/package.json

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

package/src/molecules/alert/alert.hbs

@@ -10,15 +10,3 @@
 	<h2 class="u-m-b-1">{{name}}</h2>
 	<p>{{{text}}}</p>
 </div>
-<div{{#if role}} id="alert-2" role="{{role}}"{{/if}} class="m-alert m-alert--error{{#if is_dismissable}} m-alert--dismissable{{/if}}{{#if js_class}} {{js_class}}{{/if}}" {{#if is_dismissable}} aria-hidden="true"{{/if}}>
-	{{#if is_dismissable}}
-	<button class="a-button a-button--icon a-button--standalone-icon a-button--icon" data-a11y-toggle="alert-2">
-		<span class="a-button__text">Stäng</span>
-		<svg class="icon a-button__icon">
-			<use xlink:href="#icon-close"></use>
-		</svg>
-	</button>
-	{{/if}}
-	<h2 class="u-m-b-1">{{name}}</h2>
-	<p>{{{text}}}</p>
-</div>