@internetstiftelsen/styleguide 2.21.14-beta.0.9 → 2.21.16

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-beta.0.9",
+	"version": "2.21.16",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/atoms/button/button.hbs

@@ -1,12 +1,12 @@
 <{{getelement el "a"}}
-	{{#if id}}id="{{id}}""{{/if}}
+	{{#if id}}id="{{id}}"{{/if}}
 	{{#if button_type}}type="{{button_type}}"{{/if}}
 	{{#if url}}href="{{ url }}"{{/if}}
 	class="a-button{{#if modifiers}} {{getmodifiers modifiers "a-button"}}{{/if}}{{#if icon }} a-button--icon{{/if}}{{#if additional_classes}} {{ additional_classes}}{{/if}}"
 	{{{attr attributes}}}
 	{{#if aria_controls}}aria-controls="{{ aria_controls }}"{{/if}}
 >
-	<span class="a-button__text"{{#if alternative_text}} data-alternative-text="{{alternative_text}}{{/if}}">{{ text }}</span>
+	<span class="a-button__text"{{#if alternative_text}} data-alternative-text="{{alternative_text}}"{{/if}}>{{ text }}</span>
 	{{#if icon}}
 	{{> @icon id=icon additional_classes="a-button__icon"}}
 	{{/if}}

package/src/components.js

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

package/src/configurations/typography/_typography.scss

@@ -86,8 +86,7 @@ th a:not([class*='tag']) {
 }
 
 ul:not([class]),
-ol:not([class]),
-ul.checklist {
+ol:not([class]) {
 	li > a {
 		@extend %break-long-links;
 		@extend %link-styles;

package/src/configurations/typography/typography.hbs

@@ -70,7 +70,7 @@
 		<div class="grid-18 grid-md-14">
 			<ul class="checklist">
 				<li>Lorem ipsum dolor sit amet</li>
-				<li>Sed nisl justo, <a href="#">pharetra non scelerisque</a></li>
+				<li>Sed nisl justo, pharetra non scelerisque</li>
 				<li> Vestibulum ullamcorper</li>
 				<li>
 					Nam vitae mauris blandit

package/src/molecules/alert/_alert.scss

@@ -45,6 +45,10 @@ $alert-text: $color-cyberspace;
 			top: rhythm(1);
 			right: rhythm(1);
 		}
+
+		&[aria-hidden="true"] {
+			display: none;
+		}
 	}
 
 	// Alternate styles

package/src/molecules/alert/alert.config.js

@@ -38,7 +38,7 @@ module.exports = {
 			name: 'dismissable',
 			context: {
 				name: 'Avfärda',
-				type: 'success',
+				type: 'warning',
 				role: 'alert',
 				text: 'Meddelanderuta med som användaren kan välja att klicka bort.',
 				js_class: 'js-dismiss-alert',

package/src/molecules/alert/alert.hbs

@@ -1,6 +1,11 @@
-<div{{#if role}} role="{{role}}"{{/if}} class="m-alert m-alert--{{type}}{{#if is_dismissable}} m-alert--dismissable{{/if}}{{#if js_class}} {{js_class}}{{/if}}">
+<div{{#if role}} id="alert-1" role="{{role}}"{{/if}} class="m-alert m-alert--{{type}}{{#if is_dismissable}} m-alert--dismissable{{/if}}{{#if js_class}} {{js_class}}{{/if}}" {{#if is_dismissable}} aria-hidden="true"{{/if}}>
 	{{#if is_dismissable}}
-		{{> @button el="button" modifiers="icon, standalone-icon" icon="close"}}
+	<button class="a-button a-button--icon a-button--standalone-icon a-button--icon" data-a11y-toggle="alert-1">
+		<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>

package/src/molecules/alert/alert.js

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

package/src/molecules/glider/_glider.scss

@@ -132,18 +132,21 @@
 					position: relative;
 
 					&::after {
-						content: '';
-						padding: rhythm(1);
+						content: 'Förstora bilden';
+						color: $color-snow;
+						padding: rhythm(1) rhythm(2) rhythm(1) rhythm(4);
 						display: block;
 						position: absolute;
 						top: 0;
 						left: 0;
-						border-radius: $border-radius;
-						width: $icon-size-large * 1.4;
+						border-top-left-radius: $border-radius;
+						border-bottom-right-radius: $border-radius;
+						width: auto;
+						line-height: 1;
 						height: $icon-size-large * 1.4;
 						background-color: rgba($color-cyberspace, 0.8);
 						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-search' viewbox='0 0 32 32' width='32' height='32' fill='%23ffffff'%3E%3Cpath d='M24,21.8l8,8L29.9,32l-8-8c-5.9,4.6-14.3,3.6-19-2.2S-0.7,7.6,5.1,2.9S19.3-0.7,24,5.1C27.9,10,27.9,16.9,24,21.8L24,21.8z M13.4,23.9c5.8,0,10.5-4.7,10.5-10.5S19.2,3,13.4,3S3,7.7,3,13.4S7.7,23.9,13.4,23.9z'/%3E%3C/svg%3E");
-						background-position: center center;
+						background-position: rhythm(1) center;
 						background-size: $icon-size-medium $icon-size-medium;
 						background-repeat: no-repeat;
 
@@ -181,9 +184,13 @@
 						}
 
 						figcaption {
+							max-width: rem(612px);
+							text-align: center;
 							color: $color-snow;
-							padding-left: rhythm(1);
-							padding-right: rhythm(1);
+							padding-left: rhythm(2);
+							padding-right: rhythm(2);
+							margin-bottom: 0 !important;
+							padding-bottom: 0 !important;
 						}
 					}
 				}