@internetstiftelsen/styleguide - npm Package Compare versions

Comparing version 2.3.4-beta to 2.4.0

dist/molecules/form/Form.js

@@ -11,4 +11,2 @@ 'use strict';
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -32,2 +30,6 @@
 
+var _request = require('../../assets/js/request');
+
+var _request2 = _interopRequireDefault(_request);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -65,2 +67,11 @@
 
+			if ('response' in error) {
+				var response = error.response;
+
+
+				if ('data' in response && response.data.errors) {
+					_this.errors = response.data.errors;
+				}
+			}
+
 			if (Object.keys(_this.errors).length) {
@@ -72,6 +83,6 @@ Object.entries(_this.errors).forEach(_this.displayFieldError);
 
-			var errorMessage = (typeof error === 'undefined' ? 'undefined' : _typeof(error)) === 'object' ? error.message : error;
+			var message = 'response' in error ? error.response.message : error.statusText;
 
 			_this.error.classList.remove('is-hidden');
-			_this.error.innerHTML = errorMessage || _this.i18n('Något gick fel');
+			_this.error.innerHTML = message || _this.i18n('Något gick fel');
 		};
@@ -116,11 +127,11 @@
 			help.innerHTML = error.map(_validationMessage2.default).join('<br>');
-		};
 
-		this.onSuccess = function (json) {
-			if ('code' in json && json.code !== 200) {
-				_this.displayError(json);
+			var fieldGroup = input.closest('.field-group');
 
-				return;
+			if (fieldGroup) {
+				fieldGroup.classList.add('is-invalid');
 			}
+		};
 
+		this.onSuccess = function (json) {
 			_this.setLoading(false);
@@ -323,2 +334,8 @@
 				}
+
+				var fieldGroup = input.closest('.field-group');
+
+				if (fieldGroup) {
+					fieldGroup.classList.remove('is-invalid');
+				}
 			});
@@ -338,40 +355,11 @@ }
 
-			var data = Object.entries(this.data).map(function (_ref5) {
-				var _ref6 = _slicedToArray(_ref5, 2),
-				    key = _ref6[0],
-				    value = _ref6[1];
-
-				return key + '=' + value;
-			});
+			var data = _extends({}, this.data);
 			var method = this.element.getAttribute('method').toUpperCase() || 'POST';
 			var url = this.element.getAttribute('data-form');
-			var dataParam = data.join('&');
 
 			if (this.token) {
-				dataParam += '&token=' + this.token;
+				data.token = this.token;
 			}
 
-			if (method === 'GET') {
-				if (url.indexOf('?') > -1) {
-					url += '' + dataParam;
-				} else {
-					url += '?' + dataParam;
-				}
-			}
-
-			fetch(url, {
-				method: method,
-				body: method !== 'GET' ? dataParam : null,
-				headers: {
-					'Content-Type': 'application/x-www-form-urlencoded'
-				}
-			}).then(function (response) {
-				if (response.status !== 200) {
-					throw new Error(response.statusText);
-				}
-
-				return response;
-			}).then(function (res) {
-				return res.json();
-			}).then(this.onSuccess).catch(this.displayError);
+			(0, _request2.default)(url, data, method).then(this.onSuccess).catch(this.displayError);
 		}
@@ -378,0 +366,0 @@ }]);

package.json

 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.3.4-beta",
+	"version": "2.4.0",
 	"main": "dist/components.js",
@@ -5,0 +5,0 @@ "ports": {

src/atoms/button/button.config.js

@@ -57,2 +57,9 @@ module.exports = {
 		{
+			name: 'Cyberspace',
+			context: {
+				modifiers: ['cyberspace'],
+				text: 'Cyberspace button'
+			}
+		},
+		{
 			name: 'Transparent',
@@ -72,2 +79,9 @@ context: {
 		{
+			name: 'Full width',
+			context: {
+				modifiers: ['full-width'],
+				text: 'Way wide'
+			}
+		},
+		{
 			name: 'Small',
@@ -74,0 +88,0 @@ context: {

src/molecules/form/Form.js

@@ -5,2 +5,3 @@ import template from 'lodash.template';
 import validationMessage from '../../assets/js/validationMessage';
+import request from '../../assets/js/request';
 
@@ -162,2 +163,10 @@ export default class Form {
 
+		if ('response' in error) {
+			const { response } = error;
+
+			if ('data' in response && response.data.errors) {
+				this.errors = response.data.errors;
+			}
+		}
+
 		if (Object.keys(this.errors).length) {
@@ -169,6 +178,6 @@ Object.entries(this.errors).forEach(this.displayFieldError);
 
-		const errorMessage = (typeof error === 'object') ? error.message : error;
+		const message = ('response' in error) ? error.response.message : error.statusText;
 
 		this.error.classList.remove('is-hidden');
-		this.error.innerHTML = errorMessage || this.i18n('Något gick fel');
+		this.error.innerHTML = message || this.i18n('Något gick fel');
 	};
@@ -209,2 +218,8 @@
 		help.innerHTML = error.map(validationMessage).join('<br>');
+
+		const fieldGroup = input.closest('.field-group');
+
+		if (fieldGroup) {
+			fieldGroup.classList.add('is-invalid');
+		}
 	};
@@ -226,2 +241,8 @@
 			}
+
+			const fieldGroup = input.closest('.field-group');
+
+			if (fieldGroup) {
+				fieldGroup.classList.remove('is-invalid');
+			}
 		});
@@ -239,34 +260,12 @@ }
 
-		const data = Object.entries(this.data).map(([key, value]) => `${key}=${value}`);
+		const data = { ...this.data };
 		const method = this.element.getAttribute('method').toUpperCase() || 'POST';
-		let url = this.element.getAttribute('data-form');
-		let dataParam = data.join('&');
+		const url = this.element.getAttribute('data-form');
 
 		if (this.token) {
-			dataParam += `&token=${this.token}`;
+			data.token = this.token;
 		}
 
-		if (method === 'GET') {
-			if (url.indexOf('?') > -1) {
-				url += `${dataParam}`;
-			} else {
-				url += `?${dataParam}`;
-			}
-		}
-
-		fetch(url, {
-			method,
-			body: (method !== 'GET') ? dataParam : null,
-			headers: {
-				'Content-Type': 'application/x-www-form-urlencoded',
-			},
-		})
-			.then((response) => {
-				if (response.status !== 200) {
-					throw new Error(response.statusText);
-				}
-
-				return response;
-			})
-			.then((res) => res.json()).then(this.onSuccess)
+		request(url, data, method)
+			.then(this.onSuccess)
 			.catch(this.displayError);
@@ -276,8 +275,2 @@ }
 	onSuccess = (json) => {
-		if ('code' in json && json.code !== 200) {
-			this.displayError(json);
-
-			return;
-		}
-
 		this.setLoading(false);
@@ -284,0 +277,0 @@

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31721396

increased by0.05%

Number of package files

451

increased by1.35%

Lines of code

9944

increased by1.05%

Number of low quality alerts

1

decreased by-50%

Number of medium supply chain risk alerts

2

decreased by-33.33%

No dependency changes