@internetstiftelsen/styleguide 5.0.18 → 5.1.0

package/dist/app.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+require("./app.scss");
+require("a11y-toggle");
+require("./focusTrap");
+require("./assets/js/conditional");
+require("./atoms/grid-toggle/grid-toggle");
+require("./components");
+const _Button = /*#__PURE__*/ _interop_require_default(require("./atoms/button/Button"));
+const _modal = require("./molecules/modal/modal");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const demoButtons = document.querySelectorAll('button.a-button.has-loader');
+if (demoButtons.length) {
+    demoButtons.forEach((button)=>{
+        const b = new _Button.default(button);
+        button.addEventListener('click', ()=>{
+            if (b.isLoading()) {
+                return;
+            }
+            b.start();
+            setTimeout(()=>{
+                b.stop();
+            }, 2000);
+        });
+    });
+}
+const demoModal = document.querySelector('[data-open-demo-modal]');
+if (demoModal) {
+    demoModal.addEventListener('click', ()=>{
+        (0, _modal.open)({
+            title: 'My modal title',
+            content: '<p>My modal content.</p>',
+            actions: [
+                {
+                    text: 'Close modal',
+                    color: 'peacock-light',
+                    modifier: 'primary',
+                    attrs: {
+                        'data-modal-close': null
+                    }
+                },
+                {
+                    text: 'Replace modal',
+                    color: 'ruby-light',
+                    modifier: 'secondary',
+                    attrs: {
+                        'data-modal-open': 'modal-container',
+                        'data-modal-replace': true
+                    }
+                }
+            ]
+        }, {
+            onClose: (id)=>console.log('close', id),
+            onOpen: (id)=>console.log('open', id)
+        });
+    });
+}
+const demoForms = document.querySelectorAll('[data-form]');
+[].forEach.call(demoForms, (el)=>{
+    if ('form' in el) {
+        el.form.events.on('success', (data)=>{
+            console.log('Form success', data);
+        });
+    }
+});

package/dist/assets/js/Events.js

@@ -1,80 +1,46 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-	value: true
+    value: true
 });
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-var Events = function () {
-	function Events() {
-		var listeners = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-		_classCallCheck(this, Events);
-
-		this.listeners = listeners;
-	}
-
-	_createClass(Events, [{
-		key: "hasListeners",
-		value: function hasListeners(event) {
-			return event in this.listeners;
-		}
-	}, {
-		key: "on",
-		value: function on(event, cb) {
-			var _this = this;
-
-			if (!(event in this.listeners)) {
-				this.listeners[event] = [];
-			}
-
-			if (!this.listeners[event].includes(cb)) {
-				this.listeners[event].push(cb);
-			}
-
-			return {
-				unsubscribe: function unsubscribe() {
-					return _this.off(event, cb);
-				}
-			};
-		}
-	}, {
-		key: "off",
-		value: function off(event, cb) {
-			if (!this.hasListeners(event)) {
-				return;
-			}
-
-			this.listeners[event] = this.listeners[event].filter(function (subCb) {
-				return subCb !== cb;
-			});
-		}
-	}, {
-		key: "removeAll",
-		value: function removeAll(event) {
-			this.listeners[event] = [];
-		}
-	}, {
-		key: "emit",
-		value: function emit(event) {
-			for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-				args[_key - 1] = arguments[_key];
-			}
-
-			if (!this.hasListeners(event)) {
-				return;
-			}
-
-			this.listeners[event].forEach(function (cb) {
-				cb.call.apply(cb, [null].concat(args));
-			});
-		}
-	}]);
-
-	return Events;
-}();
-
-exports.default = Events;
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return Events;
+    }
+});
+class Events {
+    hasListeners(event) {
+        return event in this.listeners;
+    }
+    on(event, cb) {
+        if (!(event in this.listeners)) {
+            this.listeners[event] = [];
+        }
+        if (!this.listeners[event].includes(cb)) {
+            this.listeners[event].push(cb);
+        }
+        return {
+            unsubscribe: ()=>this.off(event, cb)
+        };
+    }
+    off(event, cb) {
+        if (!this.hasListeners(event)) {
+            return;
+        }
+        this.listeners[event] = this.listeners[event].filter((subCb)=>subCb !== cb);
+    }
+    removeAll(event) {
+        this.listeners[event] = [];
+    }
+    emit(event, ...args) {
+        if (!this.hasListeners(event)) {
+            return;
+        }
+        this.listeners[event].forEach((cb)=>{
+            cb.call(null, ...args);
+        });
+    }
+    constructor(listeners = {}){
+        this.listeners = listeners;
+    }
+}

package/dist/assets/js/RequestError.js

@@ -1,33 +1,18 @@
-'use strict';
-
+"use strict";
 Object.defineProperty(exports, "__esModule", {
-	value: true
+    value: true
 });
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var RequestError = function (_Error) {
-	_inherits(RequestError, _Error);
-
-	function RequestError(message) {
-		var response = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-		var status = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 500;
-
-		_classCallCheck(this, RequestError);
-
-		var _this = _possibleConstructorReturn(this, (RequestError.__proto__ || Object.getPrototypeOf(RequestError)).call(this, message));
-
-		_this.name = 'RequestError';
-		_this.status = status;
-		_this.response = response;
-		return _this;
-	}
-
-	return RequestError;
-}(Error);
-
-exports.default = RequestError;
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return RequestError;
+    }
+});
+class RequestError extends Error {
+    constructor(message, response = {}, status = 500){
+        super(message);
+        this.name = 'RequestError';
+        this.status = status;
+        this.response = response;
+    }
+}

package/dist/assets/js/anchorScroll.js

@@ -1,16 +1,23 @@
-'use strict';
-
-var _smoothScroll = require('smooth-scroll');
-
-var _smoothScroll2 = _interopRequireDefault(_smoothScroll);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var anchorScroll = new _smoothScroll2.default('a[href*="#"]', {
-	speed: 1500,
-	speedAsDuration: true,
-	easing: 'easeOutCubic',
-	ignore: '[data-scroll-ignore]'
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
 });
-
-module.exports = anchorScroll;
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _smoothscroll = /*#__PURE__*/ _interop_require_default(require("smooth-scroll"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const anchorScroll = new _smoothscroll.default('a[href*="#"]', {
+    speed: 1500,
+    speedAsDuration: true,
+    easing: 'easeOutCubic',
+    ignore: '[data-scroll-ignore]'
+});
+const _default = anchorScroll;

package/dist/assets/js/charCounter.js

@@ -1,142 +1,100 @@
-'use strict';
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _className = require('./className');
-
-var _className2 = _interopRequireDefault(_className);
-
-var _htmlTextLength = require('./htmlTextLength');
-
-var _htmlTextLength2 = _interopRequireDefault(_htmlTextLength);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-var CharCounter = function () {
-	function CharCounter(el) {
-		_classCallCheck(this, CharCounter);
-
-		this.el = el;
-		this.counterEl = null;
-		this.isRichText = this.el.dataset.richText !== undefined;
-		this.min = parseInt(this.el.getAttribute('data-min') || 0, 10);
-		this.max = parseInt(this.el.getAttribute('data-max') || 0, 10);
-
-		if (!this.min && !this.max) {
-			console.warn('Either min or max must be set and greater than 0.');
-			return;
-		}
-
-		if (this.isRichText) {
-			this.waitForEditor();
-
-			return;
-		}
-
-		this.build();
-		this.attach();
-	}
-
-	_createClass(CharCounter, [{
-		key: 'waitForEditor',
-		value: function waitForEditor() {
-			var _this = this;
-
-			if (this.el.editor) {
-				this.build();
-				this.attach();
-			} else {
-				this.el.addEventListener('editor-ready', function () {
-					_this.build();
-					_this.attach();
-				});
-			}
-		}
-	}, {
-		key: 'count',
-		value: function count() {
-			if (this.isRichText) {
-				return (0, _htmlTextLength2.default)(this.el.editor.getHTML());
-			}
-
-			return this.el.value.length;
-		}
-	}, {
-		key: 'setCountText',
-		value: function setCountText() {
-			var count = this.count();
-
-			if (this.min && count < this.min) {
-				this.counterEl.textContent = count + '/' + this.min;
-				this.counterEl.className = 'backgrond-ruby-light ' + (0, _className2.default)('a-meta');
-				this.el.setAttribute('aria-invalid', 'true');
-
-				return;
-			}
-
-			if (this.max && count > this.max) {
-				this.counterEl.textContent = count + '/' + this.max;
-				this.counterEl.className = 'background-ruby-light ' + (0, _className2.default)('a-meta');
-				this.el.setAttribute('aria-invalid', 'true');
-
-				return;
-			}
-
-			this.counterEl.textContent = count + '/' + (this.max || this.min);
-			this.counterEl.className = 'background-jade-light ' + (0, _className2.default)('a-meta');
-			this.el.removeAttribute('aria-invalid');
-			this.counterEl.closest('.field-group').classList.remove('is-invalid');
-		}
-	}, {
-		key: 'build',
-		value: function build() {
-			var counter = document.createElement('small');
-			var wrapper = void 0;
-
-			if (this.isRichText) {
-				wrapper = this.el.editor.options.element;
-				wrapper.style.paddingRight = '3.8333333333rem';
-			} else {
-				wrapper = document.createElement('div');
-
-				wrapper.className = 'u-position-relative';
-				this.el.parentNode.insertBefore(wrapper, this.el);
-				wrapper.appendChild(this.el);
-
-				this.el.style.paddingRight = '3.8333333333rem';
-			}
-
-			counter.className = 'color-cyberspace ' + (0, _className2.default)('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';
-
-			wrapper.appendChild(counter);
-
-			this.counterEl = counter;
-			this.setCountText();
-		}
-	}, {
-		key: 'attach',
-		value: function attach() {
-			var _this2 = this;
-
-			if (this.isRichText) {
-				this.el.editor.on('update', function () {
-					_this2.setCountText();
-				});
-			} else {
-				this.el.addEventListener('input', function () {
-					_this2.setCountText();
-				});
-			}
-		}
-	}]);
-
-	return CharCounter;
-}();
-
-var elements = document.querySelectorAll('[data-min], [data-max]');
-elements.forEach(function (el) {
-	el.charCounter = new CharCounter(el);
-});
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _className = /*#__PURE__*/ _interop_require_default(require("./className"));
+const _htmlTextLength = /*#__PURE__*/ _interop_require_default(require("./htmlTextLength"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+class CharCounter {
+    waitForEditor() {
+        if (this.el.editor) {
+            this.build();
+            this.attach();
+        } else {
+            this.el.addEventListener('editor-ready', ()=>{
+                this.build();
+                this.attach();
+            });
+        }
+    }
+    count() {
+        if (this.isRichText) {
+            return (0, _htmlTextLength.default)(this.el.editor.getHTML());
+        }
+        return this.el.value.length;
+    }
+    setCountText() {
+        const count = this.count();
+        if (this.min && count < this.min) {
+            this.counterEl.textContent = `${count}/${this.min}`;
+            this.counterEl.className = `backgrond-ruby-light ${(0, _className.default)('a-meta')}`;
+            this.el.setAttribute('aria-invalid', 'true');
+            return;
+        }
+        if (this.max && count > this.max) {
+            this.counterEl.textContent = `${count}/${this.max}`;
+            this.counterEl.className = `background-ruby-light ${(0, _className.default)('a-meta')}`;
+            this.el.setAttribute('aria-invalid', 'true');
+            return;
+        }
+        this.counterEl.textContent = `${count}/${this.max || this.min}`;
+        this.counterEl.className = `background-jade-light ${(0, _className.default)('a-meta')}`;
+        this.el.removeAttribute('aria-invalid');
+        this.counterEl.closest('.field-group').classList.remove('is-invalid');
+    }
+    build() {
+        const counter = document.createElement('small');
+        let wrapper;
+        if (this.isRichText) {
+            wrapper = this.el.editor.options.element;
+            wrapper.style.paddingRight = '3.8333333333rem';
+        } else {
+            wrapper = document.createElement('div');
+            wrapper.className = 'u-position-relative';
+            this.el.parentNode.insertBefore(wrapper, this.el);
+            wrapper.appendChild(this.el);
+            this.el.style.paddingRight = '3.8333333333rem';
+        }
+        counter.className = `color-cyberspace ${(0, _className.default)('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';
+        wrapper.appendChild(counter);
+        this.counterEl = counter;
+        this.setCountText();
+    }
+    attach() {
+        if (this.isRichText) {
+            this.el.editor.on('update', ()=>{
+                this.setCountText();
+            });
+        } else {
+            this.el.addEventListener('input', ()=>{
+                this.setCountText();
+            });
+        }
+    }
+    constructor(el){
+        this.el = el;
+        this.counterEl = null;
+        this.isRichText = this.el.dataset.richText !== undefined;
+        this.min = parseInt(this.el.getAttribute('data-min') || 0, 10);
+        this.max = parseInt(this.el.getAttribute('data-max') || 0, 10);
+        if (!this.min && !this.max) {
+            console.warn('Either min or max must be set and greater than 0.');
+            return;
+        }
+        if (this.isRichText) {
+            this.waitForEditor();
+            return;
+        }
+        this.build();
+        this.attach();
+    }
+}
+const elements = document.querySelectorAll('[data-min], [data-max]');
+elements.forEach((el)=>{
+    el.charCounter = new CharCounter(el);
+});

package/dist/assets/js/className.js

@@ -1,23 +1,22 @@
-'use strict';
-
+"use strict";
 Object.defineProperty(exports, "__esModule", {
-	value: true
+    value: true
 });
-exports.default = className;
-var namespace = null;
-
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return className;
+    }
+});
+let namespace = null;
 function className(classes) {
-	if (!namespace) {
-		var site = document.getElementById('site');
-
-		if (site && site.hasAttribute('data-namespace')) {
-			namespace = site.getAttribute('data-namespace');
-		} else {
-			namespace = '';
-		}
-	}
-
-	return classes.split(' ').map(function (cls) {
-		return '' + namespace + cls;
-	}).join(' ');
-}
+    if (!namespace) {
+        const site = document.getElementById('site');
+        if (site && site.hasAttribute('data-namespace')) {
+            namespace = site.getAttribute('data-namespace');
+        } else {
+            namespace = '';
+        }
+    }
+    return classes.split(' ').map((cls)=>`${namespace}${cls}`).join(' ');
+}