@internetstiftelsen/styleguide 2.23.3 → 2.23.6

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.3",
+	"version": "2.23.6",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"
@@ -11,14 +11,13 @@
 		"build:fractal": "fractal build",
 		"scss": "sass src/app.scss public/assets/css/app.css",
 		"stylelint": "stylelint 'src/**/*.scss' '!**/vendor/**' '!**/colors/_colors-functions.scss' --fix --cache --cache-location '.stylelintcache'",
-		"autoprefixer": "postcss --use autoprefixer -b 'last 2 versions' public/assets/css/app.css -d public/assets/css/",
 		"cssmin": "postcss --use cssnano -b '' public/assets/css/app.css > public/assets/css/app.min.css",
 		"browserify": "browserify public/assets/js/cjs/app.js -o public/assets/js/scripts.js",
 		"babel": "npx babel src --out-dir public/assets/js/cjs --ignore src/**/*.config.js",
 		"eslint": "eslint --fix src",
 		"uglify": "uglifyjs -o public/assets/js/scripts.js public/assets/js/scripts.js",
 		"imagemin": "imagemin --out-dir=public/assets/img src/**/*.{png,jpg,gif}",
-		"build:css": "npm run stylelint && npm run scss && npm run autoprefixer && npm run cssmin",
+		"build:css": "npm run stylelint && npm run scss && npm run cssmin",
 		"build:js": "npm run eslint && npm run babel && npm run browserify",
 		"build:img": "npm run imagemin",
 		"watch:css": "onchange 'src/**/*.scss' -- npm run build:css",
@@ -45,7 +44,6 @@
 		"@frctl/mandelbrot": "^1.9.2",
 		"@internetstiftelsen/eslint-config": "^0.0.5",
 		"@internetstiftelsen/stylelint-config": "^1.0.0",
-		"autoprefixer": "^10.2.6",
 		"babel-cli": "^6.26.0",
 		"babel-eslint": "^10.0.3",
 		"babel-plugin-syntax-dynamic-import": "^6.18.0",

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/_wordpress.scss

@@ -339,3 +339,12 @@ div.aligncenter {
 	border-radius: $border-radius;
 	overflow: hidden;
 }
+
+.wp-block-graph {
+	padding-top: rhythm(4);
+	margin-top: rhythm(4);
+
+	& + & {
+		margin-top: -#{rhythm(3)};
+	}
+}

package/src/structures/_article.scss

@@ -37,9 +37,8 @@
 			> h6,
 			> ul,
 			> ol,
-			> div:not(.wp-block-iis-info):not(.wp-block-image):not(.wp-block-iis-hero):not(.wp-block-iis-grid):not([class*='accordion']),
+			> :not(.wp-block-iis-info):not(.wp-block-image):not(.wp-block-iis-hero):not(.wp-block-iis-grid):not([class*='accordion']),
 			> .wp-block-iis-card,
-			> figure,
 			> blockquote {
 				&:not(.alignfull):not(.alignleft):not(.alignright):not(.alignwide) {
 					max-width: calc(#{rem(612px)} + #{($indent * 2)});
@@ -136,4 +135,4 @@
 	@include molecule(card) {
 		margin-bottom: rhythm(4);
 	}
-}
+}