@internetstiftelsen/styleguide 2.26.23 → 3.0.0

package/README.md

@@ -33,24 +33,36 @@ $namespace: 'mysite-';
 @import '~@internetstiftelsen/styleguide/src/organisms/header/header';
 ```
 
-### SCSS Mixins explained:
-```scss
-@include e(nested-element) {} // Element (.parent-element__nested-element)
-@include m(modifier-name) {} // Modifier (.parent-element--modifier-name)
-	@include b(block-name) {} // Block (.block-name)
-
-```
-
 Peek into the [app.scss](https://github.com/sewebb/iis-styleguide/blob/master/src/app.scss) to see the full set of components.
 
 For javascript it's basically the same thing. In a javascript file:
 
 ```js
-// ES5 build version
+// ES5 build version (path "dist")
 import Button from '@internetstiftelsen/styleguide/dist/atoms/button/button';
 
-// Standard ES6 version
+// Standard ES6 version (path "src")
 import Button from '@internetstiftelsen/styleguide/src/atoms/button/button';
+
+// Globals and Configuration/Base components are imported by default from the Styleguide Core
+
+// Atoms
+import '@internetstiftelsen/styleguide/src/atoms/button/button';
+import '@internetstiftelsen/styleguide/src/atoms/input/input';
+
+// Molecules
+import '@internetstiftelsen/styleguide/src/molecules/card/card';
+
+// Organisms
+import '~@internetstiftelsen/styleguide/src/organisms/header/header';
+```
+
+### SCSS Mixins explained:
+```scss
+@include e(nested-element) {} // Element (.parent-element__nested-element)
+@include m(modifier-name) {} // Modifier (.parent-element--modifier-name)
+	@include b(block-name) {} // Block (.block-name)
+
 ```
 
 Depending on your browser requirements you may use the src version which is not transpiled to ES5.

package/dist/atoms/range/range.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var ranges = document.querySelectorAll('.js-range-wrapper');
+function setValue(range, rangeValue) {
+	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;
+
+	// Sorta magic numbers based on size of the native UI thumb
+	rangeValue.style.left = 'calc(' + newVal + '% + (' + (8 - newVal * 0.15) + 'px))';
+}
+
+ranges.forEach(function (wrap) {
+	var range = wrap.querySelector('.js-range');
+	var rangeValue = wrap.querySelector('.js-range-value');
+
+	range.addEventListener('input', function () {
+		setValue(range, rangeValue);
+		range.focus();
+	});
+
+	setValue(range, rangeValue);
+});

package/dist/components.js

@@ -1,13 +1,15 @@
 'use strict';
 
+require('./molecules/form');
+
+require('./atoms/textarea/rich-text');
+
 require('./atoms/password-toggle/password-toggle');
 
 require('./utilities/tab-highlighting/tab-highlighting');
 
 require('./molecules/system-error/system-error');
 
-require('a11y-toggle');
-
 require('./molecules/cookie-disclaimer/cookie-disclaimer');
 
 require('./organisms/accordion/accordion');
@@ -26,12 +28,8 @@ require('./atoms/tooltip/tooltip');
 
 require('./atoms/toggle-high-contrast/toggle-high-contrast');
 
-require('./focusTrap');
-
 require('./atoms/height-limiter/height-limiter');
 
-require('./assets/js/conditional');
-
 require('./atoms/file/file');
 
 require('./atoms/file/filePreview');
@@ -64,4 +62,6 @@ require('./molecules/overview-navigation/overview-navigation');
 
 require('./organisms/schedule/schedule-filter');
 
-require('./assets/js/ot');
+require('./assets/js/ot');
+
+require('./atoms/range/range');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.26.23",
+	"version": "3.0.0",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"
@@ -19,6 +19,7 @@
 		"imagemin": "imagemin --out-dir=public/assets/img src/**/*.{png,jpg,gif}",
 		"build:css": "npm run stylelint && npm run scss && npm run cssmin",
 		"build:js": "npm run eslint && npm run babel && npm run browserify",
+		"build:js:replace:string": "replace \"require('./components');\" \"//require('./components');\" src/ -r --include=\"app.js\"",
 		"build:img": "npm run imagemin",
 		"watch:css": "onchange 'src/**/*.scss' -- npm run build:css",
 		"watch:js": "onchange 'src/**/*.js' -- npm run build:js",
@@ -34,7 +35,7 @@
 		"copy:zip:build": "copyfiles -f src/assets/zip/* build/assets/zip",
 		"copy:fonts:build": "copyfiles -f src/base/fonts/* build/assets/fonts",
 		"copy:build": "npm run copy:images:build && npm run copy:zip:build && npm run copy:fonts:build && npm run copy:videos:build",
-		"build": "npm run build:css && npm run build:js && npm run uglify && npm run build:fractal && npm run copy:build",
+		"build": "npm run build:css && npm run build:js:replace:string && npm run build:js && npm run uglify && npm run package-js && npm run build:fractal && npm run copy:build && npm run create-icons-config",
 		"dev": "concurrently \"npm:start:fractal\" \"npm:watch\" \"npm:copy:local-assets\"",
 		"package-js": "NODE_ENV=production babel src --out-dir dist --ignore src/**/*.config.js,src/app.js",
 		"create-icons-config": "node ./createIconsJson"
@@ -63,6 +64,7 @@
 		"onchange": "^6.1.0",
 		"postcss-class-prefix": "^0.3.0",
 		"postcss-cli": "^8.3.1",
+		"replace": "^1.2.1",
 		"sass": "^1.35.1",
 		"stylelint": "^13.13.1",
 		"uglify-es": "^3.3.9"

package/src/app.js

@@ -1,5 +1,6 @@
-import './molecules/form';
-import './atoms/textarea/rich-text';
+import 'a11y-toggle';
+import './focusTrap';
+import './assets/js/conditional';
 
 require('./atoms/grid-toggle/grid-toggle');
 require('./components');

package/src/components.js

@@ -1,7 +1,8 @@
+import './molecules/form';
+import './atoms/textarea/rich-text';
 import './atoms/password-toggle/password-toggle';
 import './utilities/tab-highlighting/tab-highlighting';
 import './molecules/system-error/system-error';
-import 'a11y-toggle';
 import './molecules/cookie-disclaimer/cookie-disclaimer';
 import './organisms/accordion/accordion';
 import './organisms/tabs/tabs';
@@ -11,9 +12,7 @@ import './molecules/share/share';
 import './molecules/natural-language-form/natural-language-form';
 import './atoms/tooltip/tooltip';
 import './atoms/toggle-high-contrast/toggle-high-contrast';
-import './focusTrap';
 import './atoms/height-limiter/height-limiter';
-import './assets/js/conditional';
 import './atoms/file/file';
 import './atoms/file/filePreview';
 import './organisms/podcast/podcast';