@internetstiftelsen/styleguide 2.23.5 → 2.23.7

package/dist/assets/js/conditional.js

@@ -6,6 +6,7 @@ var selectStore = {};
 
 function effectChain(element, value) {
 	var options = element.querySelectorAll('option[data-if-chain]');
+	var oldValue = element.value;
 
 	if (!(element.name in selectStore)) {
 		// First time, cache options
@@ -47,6 +48,10 @@ function effectChain(element, value) {
 	if (newOptions.length === 1) {
 		element.value = newOptions[0].value;
 	}
+
+	if (oldValue !== element.value) {
+		element.dispatchEvent(new Event('change', { bubbles: true }));
+	}
 }
 
 function effectDisable(element, disable, value) {
@@ -91,8 +96,6 @@ function update(element, value) {
 	});
 	var conditionMet = !values.length && !!value || matches;
 
-	console.log(values, value, matches);
-
 	if (effect === 'disable') {
 		effectDisable(element, !conditionMet, value);
 	} else if (effect === 'toggle') {
@@ -102,33 +105,6 @@ function update(element, value) {
 	}
 }
 
-function delegate(_ref3) {
-	var target = _ref3.target;
-	var name = target.name;
-
-
-	if (!name) {
-		return;
-	}
-
-	var elements = document.querySelectorAll('[data-if^="' + name + '"]');
-
-	if (!elements.length) {
-		return;
-	}
-
-	var value = target.value;
-
-
-	if (['checkbox', 'radio'].includes(target.getAttribute('type'))) {
-		value = target.checked ? target.value : null;
-	}
-
-	[].forEach.call(elements, function (element) {
-		return update(element, value);
-	});
-}
-
 function init() {
 	var elements = document.querySelectorAll('[data-if]');
 
@@ -159,5 +135,32 @@ function init() {
 	});
 }
 
+function delegate(_ref3) {
+	var target = _ref3.target;
+	var name = target.name;
+
+
+	if (!name) {
+		return;
+	}
+
+	var elements = document.querySelectorAll('[data-if^="' + name + '"]');
+
+	if (!elements.length) {
+		return;
+	}
+
+	var value = target.value;
+
+
+	if (['checkbox', 'radio'].includes(target.getAttribute('type'))) {
+		value = target.checked ? target.value : null;
+	}
+
+	[].forEach.call(elements, function (element) {
+		return update(element, value);
+	});
+}
+
 init();
 document.body.addEventListener('change', delegate);

package/package.json

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

package/src/assets/js/conditional.js

@@ -2,6 +2,7 @@ const selectStore = {};
 
 function effectChain(element, value) {
 	const options = element.querySelectorAll('option[data-if-chain]');
+	const oldValue = element.value;
 
 	if (!(element.name in selectStore)) {
 		// First time, cache options
@@ -39,6 +40,10 @@ function effectChain(element, value) {
 	if (newOptions.length === 1) {
 		element.value = newOptions[0].value;
 	}
+
+	if (oldValue !== element.value) {
+		element.dispatchEvent(new Event('change', { bubbles: true }));
+	}
 }
 
 function effectDisable(element, disable, value) {
@@ -72,8 +77,6 @@ function update(element, value) {
 	const matches = values.some((match) => match === value || (match.indexOf('!') === 0 && match.substring(1) !== value));
 	const conditionMet = (!values.length && !!value) || matches;
 
-	console.log(values, value, matches);
-
 	if (effect === 'disable') {
 		effectDisable(element, !conditionMet, value);
 	} else if (effect === 'toggle') {
@@ -83,28 +86,6 @@ function update(element, value) {
 	}
 }
 
-function delegate({ target }) {
-	const { name } = target;
-
-	if (!name) {
-		return;
-	}
-
-	const elements = document.querySelectorAll(`[data-if^="${name}"]`);
-
-	if (!elements.length) {
-		return;
-	}
-
-	let { value } = target;
-
-	if (['checkbox', 'radio'].includes(target.getAttribute('type'))) {
-		value = (target.checked) ? target.value : null;
-	}
-
-	[].forEach.call(elements, (element) => update(element, value));
-}
-
 function init() {
 	const elements = document.querySelectorAll('[data-if]');
 
@@ -131,5 +112,27 @@ function init() {
 	});
 }
 
+function delegate({ target }) {
+	const { name } = target;
+
+	if (!name) {
+		return;
+	}
+
+	const elements = document.querySelectorAll(`[data-if^="${name}"]`);
+
+	if (!elements.length) {
+		return;
+	}
+
+	let { value } = target;
+
+	if (['checkbox', 'radio'].includes(target.getAttribute('type'))) {
+		value = (target.checked) ? target.value : null;
+	}
+
+	[].forEach.call(elements, (element) => update(element, value));
+}
+
 init();
 document.body.addEventListener('change', delegate);

package/src/configurations/grid/_grid.scss

@@ -49,7 +49,7 @@
 // Rows contain and clear the floats of your columns.
 
 @mixin make-asymmetric-cols($gap, $reversed: false) {
-	@for $i from 1 through $grid-columns {
+	@for $i from 1 through 3 {
 		$col-gap: $gap * ($i - 1);
 
 		@if $reversed == false {

package/src/molecules/system-error/_system-error.scss

@@ -38,67 +38,4 @@
 			);
 		}
 	}
-}
-
-@keyframes rumble {
-	1% { transform: rotate(0deg); }
-	1.2% { transform: translate(rem(20px), 0) rotate(-10deg); }
-	1.4% { transform: translate(0, -#{rem(20px)}) rotate(0deg); }
-	1.6% { transform: translate(-#{rem(20px)}, 0) rotate(10deg); }
-	1.8% { transform: translate(0, rem(20px)) rotate(0deg); }
-
-	2% { transform: rotate(0deg); }
-	2.2% { transform: translate(rem(20px), 0) rotate(-10deg); }
-	2.4% { transform: translate(0, -#{rem(20px)}) rotate(0deg); }
-	2.6% { transform: translate(-#{rem(20px)}, 0) rotate(10deg); }
-	2.8% { transform: translate(0, rem(20px)) rotate(0deg); }
-
-	3% { transform: rotate(0deg); }
-	3.2% { transform: translate(rem(20px), 0) rotate(-10deg); }
-	3.4% { transform: translate(0, -#{rem(20px)}) rotate(0deg); }
-	3.6% { transform: translate(-#{rem(20px)}, 0) rotate(10deg); }
-	3.8% { transform: translate(0, rem(20px)) rotate(0deg); }
-
-	4% { transform: rotate(0deg); }
-	4.2% { transform: translate(rem(20px), 0) rotate(-10deg); }
-	4.4% { transform: translate(0, -#{rem(20px)}) rotate(0deg); }
-	4.6% { transform: translate(-#{rem(20px)}, 0) rotate(10deg); }
-	4.8% { transform: translate(rem(20px), 0) rotate(0deg); }
-	5% { transform: rotate(0deg); }
-
-	5.2% { transform: translate(rem(20px), 0) rotate(-10deg); }
-	5.4% { transform: translate(0, -#{rem(20px)}) rotate(0deg); }
-	5.6% { transform: translate(-#{rem(20px)}, 0) rotate(10deg); }
-	5.8% { transform: translate(0, rem(20px)) rotate(0deg); }
-
-	6% { transform: rotate(0deg); }
-	6.2% { transform: translate(rem(20px), 0) rotate(-10deg); }
-	6.4% { transform: translate(0, -#{rem(20px)}) rotate(0deg); }
-	6.6% { transform: translate(-#{rem(20px)}, 0) rotate(10deg); }
-	6.8% { transform: translate(0, rem(20px)) rotate(0deg); }
-
-	7% { transform: rotate(0deg); }
-	7.2% { transform: translate(rem(20px), 0) rotate(-10deg); }
-	7.4% { transform: translate(0, -#{rem(20px)}) rotate(0deg); }
-	7.6% { transform: translate(-#{rem(20px)}, 0) rotate(10deg); }
-	7.8% { transform: translate(0, rem(20px)) rotate(0deg); }
-
-	8% { transform: rotate(0deg); }
-	8.2% { transform: translate(rem(20px), 0) rotate(-10deg); }
-	8.4% { transform: translate(0, -#{rem(20px)}) rotate(0deg); }
-	8.6% { transform: translate(-#{rem(20px)}, 0) rotate(10deg); }
-	8.8% { transform: translate(0, rem(20px)) rotate(0deg); }
-
-	9% { transform: rotate(0deg); }
-	9.2% { transform: translate(rem(20px), 0) rotate(-10deg); }
-	9.4% { transform: translate(0, -#{rem(20px)}) rotate(0deg); }
-	9.6% { transform: translate(-#{rem(20px)}, 0) rotate(10deg); }
-	9.8% { transform: translate(0, rem(20px)) rotate(0deg); }
-
-	10% { transform: rotate(0deg); }
-	10.2% { transform: translate(rem(20px), 0) rotate(-10deg); }
-	10.4% { transform: translate(0, -#{rem(20px)}) rotate(0deg); }
-	10.6% { transform: translate(-#{rem(20px)}, 0) rotate(10deg); }
-	10.8% { transform: translate(0, rem(20px)) rotate(0deg); }
-	11% { transform: rotate(0deg); }
-}
+}