@internetstiftelsen/styleguide 2.21.22 → 2.21.24

package/dist/organisms/mega-menu/mega-menu.js

@@ -11,6 +11,7 @@ var megaMenu = document.getElementById('megaMenu');
 var content = document.getElementById('siteMain');
 var header = document.getElementById('siteHeader');
 var footer = document.getElementById('siteFooter');
+var alert = document.querySelector('.js-dismiss-alert');
 var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
 var focusTrap = null;
 
@@ -92,7 +93,16 @@ function prepareOutAnimation() {
 	var headerRect = megaMenu.getBoundingClientRect();
 	var initialFooterTop = footer.getBoundingClientRect().top;
 
-	megaMenu.style.cssText = '\n        position: absolute;\n        top: ' + headerRect.top + 'px;\n        left: 0;\n        right: 0;\n        display: block;\n\t';
+	/* Take into account it the site has an alert message at the top */
+	var alertHeight = void 0;
+
+	if (alert) {
+		alertHeight = alert.offsetHeight;
+	} else {
+		alertHeight = 0;
+	}
+
+	megaMenu.style.cssText = '\n        position: absolute;\n        top: ' + (headerRect.top - alertHeight) + 'px;\n        left: 0;\n        right: 0;\n        display: block;\n\t';
 
 	content.removeAttribute('style');
 	header.removeAttribute('style');

package/package.json

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

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

@@ -4,7 +4,8 @@ module.exports = {
 	context: {
 		name: 'Information',
 		type: 'info',
-		text: 'Meddelanderuta med vanlig information, t.ex information om öppettider. <a href="https://internetstiftelsen.se">Dessa meddelanden</a> är fasta dv.s inget dom dyker upp tillfälligt när användaren interagerar med tjänsten.'
+		text: 'Meddelanderuta med vanlig information, t.ex information om öppettider. <a href="https://internetstiftelsen.se">Dessa meddelanden</a> är fasta dv.s inget dom dyker upp tillfälligt när användaren interagerar med tjänsten.',
+		additional_classes: false,
 	},
 	variants: [
 		{

package/src/molecules/alert/alert.hbs

@@ -1,4 +1,4 @@
-<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}}>
+<div{{#if role}} id="alert-1" role="{{role}}"{{/if}} class="m-alert m-alert--{{type}}{{#if additional_classes}} {{additional_classes}}{{/if}}{{#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-1">
 		<span class="a-button__text">Stäng</span>

package/src/organisms/mailchimp/_mailchimp.scss

@@ -63,7 +63,7 @@
 
 	@include m(sliding) {
 		position: fixed;
-		z-index: z_index(foreground);
+		z-index: z_index(middleground);
 		top: rhythm(1);
 		right: -500px;
 		bottom: rhythm(1);
@@ -114,6 +114,8 @@
 			max-width: 100%;
 			padding-right: rhythm(3);
 			padding-bottom: rhythm(2);
+			overflow-y: auto;
+			max-height: calc(100vh - 77px);
 		}
 
 		@include b(m-form__row) {

package/src/organisms/mega-menu/mega-menu.js

@@ -8,6 +8,7 @@ const megaMenu = document.getElementById('megaMenu');
 const content = document.getElementById('siteMain');
 const header = document.getElementById('siteHeader');
 const footer = document.getElementById('siteFooter');
+const alert = document.querySelector('.js-dismiss-alert');
 const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
 let focusTrap = null;
 
@@ -98,9 +99,18 @@ function prepareOutAnimation() {
 	const headerRect = megaMenu.getBoundingClientRect();
 	const initialFooterTop = footer.getBoundingClientRect().top;
 
+	/* Take into account it the site has an alert message at the top */
+	let alertHeight;
+
+	if (alert) {
+		alertHeight = alert.offsetHeight;
+	} else {
+		alertHeight = 0;
+	}
+
 	megaMenu.style.cssText = `
         position: absolute;
-        top: ${headerRect.top}px;
+        top: ${headerRect.top - alertHeight}px;
         left: 0;
         right: 0;
         display: block;