@internetstiftelsen/styleguide - npm Package Compare versions

Comparing version 4.1.0 to 4.1.1

package.json

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

src/assets/js/charCounter.js

@@ -52,3 +52,5 @@ import className from './className';
 			this.counterEl.textContent = `${count}/${this.min}`;
-			this.counterEl.className = `color-ruby ${className('a-meta')}`;
+			this.counterEl.className = `backgrond-ruby-light ${className('a-meta')}`;
+			this.el.setAttribute('aria-invalid', 'true');
+			this.counterEl.closest('.field-group').classList.add('is-invalid');
 
@@ -60,4 +62,5 @@ return;
 			this.counterEl.textContent = `${count}/${this.max}`;
-			this.counterEl.classList.remove('color-granit');
-			this.counterEl.className = `color-ruby ${className('a-meta')}`;
+			this.counterEl.className = `background-ruby-light ${className('a-meta')}`;
+			this.el.setAttribute('aria-invalid', 'true');
+			this.counterEl.closest('.field-group').classList.add('is-invalid');
 
@@ -68,3 +71,5 @@ return;
 		this.counterEl.textContent = `${count}/${this.max || this.min}`;
-		this.counterEl.className = `color-jade ${className('a-meta')}`;
+		this.counterEl.className = `background-jade-light ${className('a-meta')}`;
+		this.el.removeAttribute('aria-invalid');
+		this.counterEl.closest('.field-group').classList.remove('is-invalid');
 	}
@@ -89,4 +94,4 @@
 
-		counter.className = `color-granit ${className('a-meta')}`;
-		counter.style.cssText = 'position: absolute; top: 5px; right: 10px; z-index: 501;';
+		counter.className = `color-cyberspace ${className('a-meta')}`;
+		counter.style.cssText = 'position: absolute; top: .5rem; right: .5rem; z-index: 501;background-color: #ff9fb4; border-radius: 0.25rem; padding: .25rem; line-height: 1;margin: 0';
 
@@ -93,0 +98,0 @@ wrapper.appendChild(counter);

src/assets/js/textToggle.js

@@ -9,6 +9,11 @@ // Usage: data-toggle-target="toggleButton" data-toggle-text="First|Second|Third"
 	const options = el.dataset.toggleText.split('|');
-	const nextIteration = (i + 1) === options.length ? 0 : i + 1;
+	const nextIteration = (i + 1) === options.length ?	 0 : i + 1;
+	const ariaPressed = el.getAttribute('aria-pressed');
 
 	el.dataset.iteration = nextIteration;
 	target.innerText = options[nextIteration];
+
+	if (ariaPressed) {
+		el.setAttribute('aria-pressed', ariaPressed === 'true' ? 'false' : 'true');
+	}
 }
@@ -15,0 +20,0 @@

src/atoms/toggle-button/readme.md

 # Toggle button
-This component uses the textToggle.js file located here: `/assets/js/`
+This component uses the textToggle.js and iconToggle.js files located here: `/assets/js/`

src/atoms/toggle-button/toggle-button.config.js

@@ -6,3 +6,3 @@ module.exports = {
 	context: {
-		target_id: 'boo',
+		target_id: 'myToggleTarget',
 		external_target: false,
@@ -17,3 +17,3 @@ toggle_text: true,
 			context: {
-				target_id: 'boo',
+				target_id: 'myToggleTarget',
 				external_target: true,
@@ -29,3 +29,3 @@ toggle_text_primary_value: 'Toggle text',
 			context: {
-				target_id: 'boo',
+				target_id: 'myToggleTarget',
 				external_target: false,
@@ -40,3 +40,3 @@ toggle_text_primary_value: 'Toggle icon',
 			context: {
-				target_id: 'boo',
+				target_id: 'myToggleTarget',
 				external_target: false,
@@ -48,3 +48,26 @@ toggle_text_primary_value: 'Toggle text and icon ',
 		},
+		{
+			name: 'Three text toggles',
+			context: {
+				target_id: 'myToggleTarget',
+				external_target: false,
+				toggle_text_primary_value: 'Toggle text 3 times',
+				toggle_text: true,
+				toggle_icon: false,
+				toggle_thrice: true,
+				aria_pressed: false,
+			}
+		},
+		{
+			name: 'Aria-pressed state',
+			context: {
+				target_id: 'myToggleTarget',
+				external_target: false,
+				toggle_text_primary_value: 'Toggle text and aria-pressed',
+				toggle_text: true,
+				toggle_icon: false,
+				aria_pressed: true,
+			}
+		},
 	]
 }

No alert changes

Improved metrics

Total package byte prevSize

64315467

Lines of code

12338

increased by0.26%

No dependency changes