@internetstiftelsen/styleguide 3.0.11 → 3.0.13

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.11",
+	"version": "3.0.13",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/atoms/input/_input.scss

@@ -18,6 +18,10 @@
 	@include m(discreet) {
 		@extend %discreet;
 	}
+	@include m(small) {
+		font-size: $size-medium;
+		padding: rhythm(0.5);
+	}
 }
 
 @include b(input-icon) {

package/src/atoms/range/_range.scss

@@ -6,6 +6,7 @@
 	background: transparent;
 	cursor: pointer;
 	width: 100%;
+	position: relative;
 
 	&::-webkit-slider-runnable-track {
 		background-color: $color-concrete;
@@ -76,6 +77,12 @@
 		box-shadow: 0 0 0 inset rgba($color-cyberspace, 0.2), 0 1px 2px rgba($color-cyberspace, 0.2), 0 0 0 3px $color-ocean-light;
 	}
 
+	@include m(no-preview) {
+		& + output {
+			display: none;
+		}
+	}
+
 	@include e(value){
 		background-color: $color-concrete;
 		padding: rhythm(0.5) rhythm(1);
@@ -102,3 +109,11 @@
 	}
 }
 
+@include atom(range-input) {
+	position: absolute;
+	top: 0;
+	right: 0;
+	z-index: 0;
+	width: rhythm(5);
+}
+

package/src/atoms/range/range.config.js

@@ -41,5 +41,26 @@ module.exports = {
 				step: '1',
 			}
 		},
+		{
+			name: 'Text input',
+			context: {
+				input: true,
+				value: '0',
+				min: '0',
+				max: '100',
+				step: '1',
+			}
+		},
+		{
+			name: 'No preview',
+			context: {
+				no_preview: true,
+				input: true,
+				value: '0',
+				min: '0',
+				max: '100',
+				step: '1',
+			}
+		}
 	]
 }

package/src/atoms/range/range.js

@@ -1,11 +1,15 @@
 const ranges = document.querySelectorAll('.js-range-wrapper');
-function setValue(range, rangeValue) {
+function setValue(range, rangeValue, rangeInput) {
 	const val = range.value;
 	const min = range.min ? range.min : 0;
 	const max = range.max ? range.max : 100;
 	const 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))`;
 }
@@ -13,11 +17,23 @@ function setValue(range, rangeValue) {
 ranges.forEach((wrap) => {
 	const range = wrap.querySelector('.js-range');
 	const rangeValue = wrap.querySelector('.js-range-value');
+	const rangeInput = wrap.querySelector('.js-range-input');
 
 	range.addEventListener('input', () => {
-		setValue(range, rangeValue);
+		setValue(range, rangeValue, rangeInput);
 		range.focus();
 	});
 
-	setValue(range, rangeValue);
+	if (rangeInput) {
+		rangeInput.addEventListener('input', () => {
+			if (rangeInput.value !== '') {
+				range.value = rangeInput.value;
+				rangeValue.innerHTML = rangeInput.value;
+				setValue(range, rangeValue, rangeInput);
+			}
+			rangeInput.focus();
+		});
+	}
+
+	setValue(range, rangeValue, rangeInput);
 });

package/src/organisms/tabs/tabs.js

@@ -2,7 +2,11 @@ window.a11yTabs = (function tabsComponentIIFE(global, document) {
 	const tabInstances = new WeakMap();
 	const className = 'o-tab-list';
 	const tablistElement = document.querySelector(`.js-${className}`);
-	const updateURLFromHash = tablistElement.getAttribute('data-update-url');
+	let updateURLFromHash;
+
+	if (tablistElement) {
+		updateURLFromHash = tablistElement.getAttribute('data-update-url');
+	}
 
 	/**
 	* Instantiates the component