@internetstiftelsen/styleguide 3.0.12 → 3.0.14

package/dist/atoms/range/range.js

@@ -1,13 +1,17 @@
 'use strict';
 
 var ranges = document.querySelectorAll('.js-range-wrapper');
-function setValue(range, rangeValue) {
+function setValue(range, rangeValue, rangeInput) {
 	var val = range.value;
 	var min = range.min ? range.min : 0;
 	var max = range.max ? range.max : 100;
 	var newVal = Number((val - min) * 100 / (max - min));
 	rangeValue.innerHTML = val;
 
+	if (rangeInput) {
+		rangeInput.value = val;
+	}
+
 	// Sorta magic numbers based on size of the native UI thumb
 	rangeValue.style.left = 'calc(' + newVal + '% + (' + (8 - newVal * 0.15) + 'px))';
 }
@@ -15,11 +19,23 @@ function setValue(range, rangeValue) {
 ranges.forEach(function (wrap) {
 	var range = wrap.querySelector('.js-range');
 	var rangeValue = wrap.querySelector('.js-range-value');
+	var rangeInput = wrap.querySelector('.js-range-input');
 
 	range.addEventListener('input', function () {
-		setValue(range, rangeValue);
+		setValue(range, rangeValue, rangeInput);
 		range.focus();
 	});
 
-	setValue(range, rangeValue);
+	if (rangeInput) {
+		rangeInput.addEventListener('input', function () {
+			if (rangeInput.value !== '') {
+				range.value = rangeInput.value;
+				rangeValue.innerHTML = rangeInput.value;
+				setValue(range, rangeValue, rangeInput);
+			}
+			rangeInput.focus();
+		});
+	}
+
+	setValue(range, rangeValue, rangeInput);
 });

package/dist/organisms/tabs/tabs.js

@@ -2,6 +2,13 @@
 
 window.a11yTabs = function tabsComponentIIFE(global, document) {
 	var tabInstances = new WeakMap();
+	var className = 'o-tab-list';
+	var tablistElement = document.querySelector('.js-' + className);
+	var updateURLFromHash = void 0;
+
+	if (tablistElement) {
+		updateURLFromHash = tablistElement.getAttribute('data-update-url');
+	}
 
 	/**
  * Instantiates the component
@@ -13,8 +20,6 @@ window.a11yTabs = function tabsComponentIIFE(global, document) {
 			return;
 		}
 
-		var className = 'o-tab-list';
-		var tablistElement = document.querySelector('.js-' + className);
 		var namespace = getComputedStyle(tablistElement, ':before').content.replace(/["']/g, '');
 
 		var defaults = {
@@ -46,7 +51,6 @@ window.a11yTabs = function tabsComponentIIFE(global, document) {
 
 		this.tabLinks.forEach(function (item, index) {
 			item.setAttribute('role', 'tab');
-			// item.setAttribute('id', `tab${index}`);
 
 			if (index > 0) {
 				item.setAttribute('tabindex', '-1');
@@ -71,14 +75,10 @@ window.a11yTabs = function tabsComponentIIFE(global, document) {
 
 		tabInstances.set(this.element, this);
 
-		this.eventCallback = handleEvents.bind(this); // eslint-disable-line
-		this.tabList.addEventListener('click', this.eventCallback, false);
-		this.tabList.addEventListener('keydown', this.eventCallback, false);
-
-		tabInstances.set(this.element, this);
-
-		// New line to select the correct tab based on URL hash
-		this.selectTabFromHash(); // Call the new method after setup
+		// Select the correct tab based on URL hash
+		if (updateURLFromHash) {
+			this.selectTabFromHash();
+		}
 	};
 
 	TabComponent.prototype = {
@@ -116,16 +116,18 @@ window.a11yTabs = function tabsComponentIIFE(global, document) {
 			this.tabLinks[newIndex].setAttribute('aria-selected', 'true');
 			this.tabItems[newIndex].setAttribute('data-tab-active', '');
 			this.tabLinks[newIndex].removeAttribute('tabindex');
-			this.tabLinks[newIndex].focus();
+			this.tabLinks[newIndex].focus(); // Focus the newly selected tab
 
 			// update tab panels
 			this.tabPanels[currentIndex].setAttribute('hidden', '');
 			this.tabPanels[newIndex].removeAttribute('hidden');
 
-			// After updating tabs and tab panels, add the URL update feature
 			// Update the browser's URL hash to reflect the current tab's ID
 			var selectedTabId = this.tabLinks[newIndex].id;
-			global.history.pushState(null, '', '#' + selectedTabId);
+
+			if (updateURLFromHash) {
+				window.history.pushState(null, '', '#' + selectedTabId);
+			}
 
 			this.currentIndex = newIndex;
 

package/package.json

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

package/src/atoms/range/_range.scss

@@ -45,6 +45,7 @@
 
 	&:focus {
 		outline: none;
+		box-shadow: none !important;
 
 		& + output {
 			background-color: $color-ocean-light;

package/src/organisms/tabs/_tabs.scss

@@ -44,7 +44,7 @@
 		}
 	}
 
-	[role='presentation'] {
+	@include e(item) {
 		display: flex;
 		flex: 0 0 auto;
 		padding: 0;
@@ -54,7 +54,7 @@
 		}
 	}
 
-	[role='tab'] {
+	@include e(link) {
 		@extend %normalize-links;
 
 		display: inline-flex;
@@ -104,3 +104,33 @@
 		}
 	}
 }
+
+.no-js {
+	@include organism(tab-list) {
+		padding: initial;
+		margin: initial;
+		list-style-type: disc;
+
+		@include plumber(
+			$leading-bottom: 3
+		);
+
+		@include e(item) {
+			display: list-item;
+			margin-top: rhythm(1);
+			margin-left: rhythm(4);
+			padding-top: rhythm(0.25);
+			padding-bottom: rhythm(0.25);
+			padding-top: 0;
+			padding-left: 0;
+		}
+
+		@include e(link) {
+			background-color: transparent;
+			padding: 0;
+			border-radius: 0;
+
+			@extend %link-styles;
+		}
+	}
+}

package/src/utilities/tab-highlighting/_tab-highlighting.scss

@@ -22,6 +22,14 @@ $color-tab-highlight: $color-ruby !default;
 			box-shadow: 0 0 0 2px inset $color-tab-highlight !important;
 		}
 	}
+
+	&::-webkit-slider-thumb {
+		box-shadow: 0 0 0 inset rgba($color-cyberspace, 0.2), 0 1px 2px rgba($color-cyberspace, 0.2), 0 0 0 3px inset $color-tab-highlight !important;
+	}
+
+	&::-moz-range-thumb {
+		box-shadow: 0 0 0 inset rgba($color-cyberspace, 0.2), 0 1px 2px rgba($color-cyberspace, 0.2), 0 0 0 3px inset $color-tab-highlight !important;
+	}
 }
 
 // Use when element is on dark background