@internetstiftelsen/styleguide - npm Package Compare versions

Comparing version 2.5.4 to 2.5.5

package.json

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

src/molecules/natural-language-form/natural-language-form.config.js

@@ -6,6 +6,7 @@ module.exports = {
 	context: {
-		title: 'select',
+		title: 'Select',
 		select: true,
 		textElement: 'h1',
-		elementClass: 'supersize'
+		elementClass: 'supersize',
+		modifier: false,
 
@@ -16,2 +17,11 @@ },
 		{
+		name: 'Select with arrow',
+			context: {
+				select: true,
+				textElement: 'h1',
+				elementClass: 'supersize',
+				modifier:'arrow'
+			}
+		},
+		{
 		name: 'Other text element',
@@ -21,3 +31,4 @@ context: {
 				textElement: 'h2',
-				elementClass: false
+				elementClass: false,
+				modifier: false,
 			}
@@ -30,3 +41,4 @@ },
 				textElement: 'h1',
-				elementClass: false
+				elementClass: false,
+				modifier: false
 			}
@@ -33,0 +45,0 @@ }

src/molecules/natural-language-form/natural-language-form.js

@@ -14,5 +14,17 @@ const selects = document.querySelectorAll('.js-natural-language-select');
 			tempTextElement.classList.remove('is-hidden');
-			const selectWidth = tempTextElement.offsetWidth + 3;
+
+			let selectWidth = '';
+
+			const className = select.className.split('-');
+
+			if (className.indexOf('arrow') !== -1) {
+				selectWidth = tempTextElement.offsetWidth + 40;
+			} else {
+				selectWidth = tempTextElement.offsetWidth + 3;
+			}
+
 			// Hide temp select again
 			tempTextElement.classList.add('is-hidden');
+
+			// Set width to select
 			select.style.width = `${selectWidth}px`;
@@ -19,0 +31,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

31802957

increased by0.24%

Number of package files

464

increased by2.43%

Lines of code

10091

increased by0.24%

No dependency changes