@internetstiftelsen/styleguide 2.21.28 → 2.21.29

package/dist/assets/js/validationMessage.js

@@ -24,5 +24,5 @@ function validationMessage(message) {
 		return validation[rule].replace(new RegExp(':' + rule, 'g'), data);
 	}
 
-	return message;
+	return rule;
 }

package/package.json

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

package/src/assets/js/validationMessage.js

@@ -2,7 +2,7 @@ export default function validationMessage(message) {
 	const [rule, data] = message.split(':');
 
 	if (!('Iis_Lang' in window)) {
-		return message;
+		return rule;
 	}
 
 	const { validation } = window.Iis_Lang;
@@ -11,5 +11,5 @@ export default function validationMessage(message) {
 		return validation[rule].replace(new RegExp(`:${rule}`, 'g'), data);
 	}
 
-	return message;
+	return rule;
 }

package/src/atoms/button/_button.scss

@@ -246,6 +246,24 @@
 		}
 	}
 
+	@include m(sandstone) {
+		color: $color-sandstone;
+
+		&:hover,
+		&:focus {
+			color: $color-sandstone-light;
+		}
+
+		@include e(text) {
+			color: $color-cyberspace;
+			text-shadow: 0 0 rhythm(0.5) $color-sandstone-light;
+		}
+
+		@include e(icon) {
+			fill: $color-cyberspace;
+		}
+	}
+
 	@include m(ruby) {
 		color: $color-ruby;
 
@@ -299,6 +317,23 @@
 		}
 	}
 
+	@include m(jade) {
+		color: $color-jade;
+
+		&:hover,
+		&:focus {
+			color: $color-jade-light;
+		}
+
+		@include e(text) {
+			color: $color-cyberspace;
+		}
+
+		@include e(icon) {
+			fill: $color-cyberspace;
+		}
+	}
+
 	@include m(jade-light) {
 		box-shadow: 0 0 0 1px inset $color-jade;
 		color: $color-jade-light;

package/src/atoms/button/button.config.js

@@ -33,6 +33,13 @@ module.exports = {
 				text: 'Ruby dark secondary button'
 			}
 		},
+		{
+			name: 'Jade',
+			context: {
+				modifiers: ['jade'],
+				text: 'Jade button'
+			}
+		},
 		{
 			name: 'Jade light',
 			context: {
@@ -82,6 +89,13 @@ module.exports = {
 				text: 'Cyberspace button'
 			}
 		},
+		{
+			name: 'Sandstone',
+			context: {
+				modifiers: ['sandstone'],
+				text: 'Sandstone button'
+			}
+		},
 		{
 			name: 'Transparent',
 			context: {