@internetstiftelsen/styleguide 2.21.31 → 2.22.0

package/dist/assets/js/conditional.js

@@ -87,10 +87,12 @@ function update(element, value) {
 		return v;
 	});
 	var matches = values.some(function (match) {
-		return match === value;
+		return match === value || match.indexOf('!') === 0 && match.substring(1) !== value;
 	});
 	var conditionMet = !values.length && !!value || matches;
 
+	console.log(values, value, matches);
+
 	if (effect === 'disable') {
 		effectDisable(element, !conditionMet, value);
 	} else if (effect === 'toggle') {

package/dist/assets/js/validationMessage.js

@@ -14,7 +14,7 @@ function validationMessage(message) {
 	    data = _message$split2[1];
 
 	if (!('Iis_Lang' in window)) {
-		return rule;
+		return message;
 	}
 
 	var validation = window.Iis_Lang.validation;

package/package.json

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

package/src/assets/js/conditional.js

@@ -69,9 +69,11 @@ function effectText(element, value) {
 function update(element, value) {
 	const effect = element.getAttribute('data-if-effect') || 'toggle';
 	const values = element.getAttribute('data-if').split('|').map((match) => match.split(':')[1]).filter((v) => v);
-	const matches = values.some((match) => match === 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') {

package/src/pages/conditional/conditional.hbs

@@ -3,6 +3,7 @@
 	<p data-if="type:podd" style="display: none">Den här texten visas bara om podd är vald.</p>
 	<p data-if="type:podd|type:workshop" style="display: none">Den här texten visas om podd eller workshop är vald.</p>
 	<p data-if="type" style="display: none">Den här texten visas ifall "Typ" har ett värde</p>
+	<p data-if="type:!podd" style="display: none">Den här texten visas ifall "Typ" <strong>inte</strong> är podd.</p>
 
 	<div class="field-group">
 		<label for="select">Typ</label>