@internetstiftelsen/styleguide 3.0.11 → 3.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "3.0.11",
+	"version": "3.0.12",
 	"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