@internetstiftelsen/styleguide 5.0.18 → 5.1.0

package/dist/atoms/height-limiter/height-limiter.js

@@ -1,55 +1,42 @@
-'use strict';
-
-var elements = document.querySelectorAll('.js-height-limit');
+"use strict";
+const elements = document.querySelectorAll('.js-height-limit');
 function update(innerContainer, button, height) {
-	if (button.classList.contains('is-clicked')) {
-		return;
-	}
-
-	if (innerContainer.offsetHeight >= height) {
-		innerContainer.setAttribute('style', 'max-height:' + height + 'px;');
-		innerContainer.classList.add('is-limited');
-		button.classList.remove('is-hidden');
-	} else {
-		innerContainer.removeAttribute('style');
-		innerContainer.classList.remove('is-limited');
-		button.classList.add('is-hidden');
-	}
+    if (button.classList.contains('is-clicked')) {
+        return;
+    }
+    if (innerContainer.offsetHeight >= height) {
+        innerContainer.setAttribute('style', `max-height:${height}px;`);
+        innerContainer.classList.add('is-limited');
+        button.classList.remove('is-hidden');
+    } else {
+        innerContainer.removeAttribute('style');
+        innerContainer.classList.remove('is-limited');
+        button.classList.add('is-hidden');
+    }
 }
-
 function setup(element) {
-	var height = element.getAttribute('data-height');
-	var innerContainer = element.querySelector('[class*="inner"]');
-	var button = element.querySelector('.js-toggle-height');
-	var buttonTextElement = button.querySelector('span');
-	var buttonText = buttonTextElement.innerText;
-	var toggleText = element.getAttribute('data-toggle-text');
-	var topPosition = void 0;
-
-	update(innerContainer, button, height);
-
-	button.addEventListener('click', function () {
-		innerContainer.classList.toggle('is-limited');
-		innerContainer.setAttribute('style', innerContainer.style.maxHeight === height + 'px' ? 'max-height:none' : 'max-height:' + height + 'px');
-		buttonTextElement.innerText = buttonTextElement.innerText === buttonText ? toggleText : buttonText;
-		button.classList.toggle('is-clicked');
-
-		if (!innerContainer.classList.contains('is-limited')) {
-			topPosition = document.documentElement.scrollTop;
-		} else {
-			window.scroll(0, topPosition);
-		}
-
-		setTimeout(function () {
-			return update(innerContainer, button, height);
-		}, 1);
-	});
-
-	window.addEventListener('resize', function () {
-		return update(innerContainer, button, height);
-	});
+    const height = element.getAttribute('data-height');
+    const innerContainer = element.querySelector('[class*="inner"]');
+    const button = element.querySelector('.js-toggle-height');
+    const buttonTextElement = button.querySelector('span');
+    const buttonText = buttonTextElement.innerText;
+    const toggleText = element.getAttribute('data-toggle-text');
+    let topPosition;
+    update(innerContainer, button, height);
+    button.addEventListener('click', ()=>{
+        innerContainer.classList.toggle('is-limited');
+        innerContainer.setAttribute('style', innerContainer.style.maxHeight === `${height}px` ? 'max-height:none' : `max-height:${height}px`);
+        buttonTextElement.innerText = buttonTextElement.innerText === buttonText ? toggleText : buttonText;
+        button.classList.toggle('is-clicked');
+        if (!innerContainer.classList.contains('is-limited')) {
+            topPosition = document.documentElement.scrollTop;
+        } else {
+            window.scroll(0, topPosition);
+        }
+        setTimeout(()=>update(innerContainer, button, height), 1);
+    });
+    window.addEventListener('resize', ()=>update(innerContainer, button, height));
 }
-
 if (elements) {
-	[].forEach.call(elements, setup);
-}
+    [].forEach.call(elements, setup);
+}

package/dist/atoms/password-toggle/password-toggle.js

@@ -1,12 +1,10 @@
-'use strict';
-
-var elements = document.querySelectorAll('.js-toggle-input-type');
-
+"use strict";
+const elements = document.querySelectorAll('.js-toggle-input-type');
 if (elements) {
-	[].forEach.call(elements, function (element) {
-		element.addEventListener('click', function () {
-			var input = element.previousElementSibling;
-			input.type = input.type === 'password' ? 'text' : 'password';
-		});
-	});
-}
+    [].forEach.call(elements, (element)=>{
+        element.addEventListener('click', ()=>{
+            const input = element.previousElementSibling;
+            input.type = input.type === 'password' ? 'text' : 'password';
+        });
+    });
+}

package/dist/atoms/range/range.js

@@ -1,41 +1,34 @@
-'use strict';
-
-var ranges = document.querySelectorAll('.js-range-wrapper');
+"use strict";
+const ranges = document.querySelectorAll('.js-range-wrapper');
 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))';
+    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))`;
 }
-
-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, rangeInput);
-		range.focus();
-	});
-
-	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);
-});
+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, rangeInput);
+        range.focus();
+    });
+    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/dist/atoms/textarea/rich-text.js

@@ -1,226 +1,244 @@
-'use strict';
-
+"use strict";
 Object.defineProperty(exports, "__esModule", {
-	value: true
+    value: true
 });
-exports.setupTextArea = setupTextArea;
-exports.init = init;
-
-var _core = require('@tiptap/core');
-
-var _extensionDocument = require('@tiptap/extension-document');
-
-var _extensionDocument2 = _interopRequireDefault(_extensionDocument);
-
-var _extensionParagraph = require('@tiptap/extension-paragraph');
-
-var _extensionParagraph2 = _interopRequireDefault(_extensionParagraph);
-
-var _extensionText = require('@tiptap/extension-text');
-
-var _extensionText2 = _interopRequireDefault(_extensionText);
-
-var _extensionBulletList = require('@tiptap/extension-bullet-list');
-
-var _extensionBulletList2 = _interopRequireDefault(_extensionBulletList);
-
-var _extensionListItem = require('@tiptap/extension-list-item');
-
-var _extensionListItem2 = _interopRequireDefault(_extensionListItem);
-
-var _extensionBold = require('@tiptap/extension-bold');
-
-var _extensionBold2 = _interopRequireDefault(_extensionBold);
-
-var _extensionItalic = require('@tiptap/extension-italic');
-
-var _extensionItalic2 = _interopRequireDefault(_extensionItalic);
-
-var _extensionLink = require('@tiptap/extension-link');
-
-var _extensionHistory = require('@tiptap/extension-history');
-
-var _extensionHistory2 = _interopRequireDefault(_extensionHistory);
-
-var _className = require('../../assets/js/className');
-
-var _className2 = _interopRequireDefault(_className);
-
-var _modal = require('../../molecules/modal/modal');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    init: function() {
+        return init;
+    },
+    setupTextArea: function() {
+        return setupTextArea;
+    }
+});
+const _core = require("@tiptap/core");
+const _extensiondocument = /*#__PURE__*/ _interop_require_default(require("@tiptap/extension-document"));
+const _extensionparagraph = /*#__PURE__*/ _interop_require_default(require("@tiptap/extension-paragraph"));
+const _extensiontext = /*#__PURE__*/ _interop_require_default(require("@tiptap/extension-text"));
+const _extensionbulletlist = /*#__PURE__*/ _interop_require_default(require("@tiptap/extension-bullet-list"));
+const _extensionorderedlist = /*#__PURE__*/ _interop_require_default(require("@tiptap/extension-ordered-list"));
+const _extensionheading = /*#__PURE__*/ _interop_require_default(require("@tiptap/extension-heading"));
+const _extensionlistitem = /*#__PURE__*/ _interop_require_default(require("@tiptap/extension-list-item"));
+const _extensionbold = /*#__PURE__*/ _interop_require_default(require("@tiptap/extension-bold"));
+const _extensionitalic = /*#__PURE__*/ _interop_require_default(require("@tiptap/extension-italic"));
+const _extensionlink = require("@tiptap/extension-link");
+const _extensionhistory = /*#__PURE__*/ _interop_require_default(require("@tiptap/extension-history"));
+const _className = /*#__PURE__*/ _interop_require_default(require("../../assets/js/className"));
+const _modal = require("../../molecules/modal/modal");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function clearAndCapitalize(str) {
-	return str.replace(/-/, '').toUpperCase();
+    return str.replace(/-/, '').toUpperCase();
 }
-
 function kebabToCamel(str) {
-	return str.replace(/-\w/g, clearAndCapitalize);
+    return str.replace(/-\w/g, clearAndCapitalize);
 }
-
 function kebabToPascal(str) {
-	return str.replace(/(^\w|-\w)/g, clearAndCapitalize);
+    return str.replace(/(^\w|-\w)/g, clearAndCapitalize);
+}
+function insertHeading(button, editor) {
+    const levelAttr = button.dataset.richTextControl;
+    const level = parseInt(levelAttr.replace('heading-', ''), 10);
+    editor.commands.toggleHeading({
+        level
+    });
+    const toolbar = button.parentElement; // The toolbar div
+    const headingButtons = toolbar.querySelectorAll('button[data-rich-text-control^="heading-"]');
+    headingButtons.forEach((btn)=>{
+        btn.classList.remove('is-active');
+    });
+    if (editor.isActive('heading', {
+        level
+    })) {
+        button.classList.add('is-active');
+    }
 }
-
 function insertLink(el, editor) {
-	var addLink = function addLink(e, modal, close) {
-		e.preventDefault();
-
-		var value = modal.querySelector('input').value.trim();
-
-		if (!value.length) {
-			editor.commands.unsetLink();
-		} else {
-			var isAbsolute = new RegExp('(?:^[a-z][a-z0-9+.-]*:|//)', 'i');
-
-			if (!isAbsolute.test(value)) {
-				value = 'https://' + value;
-			}
-
-			editor.commands.toggleLink({ href: value });
-		}
-
-		close();
-	};
-
-	if (editor.view.state.selection.empty) {
-		return;
-	}
-
-	var currentValue = editor.getAttributes('link').href ? editor.getAttributes('link').href : '';
-
-	(0, _modal.open)({
-		title: 'Lägg till länk',
-		content: '\n\t\t\t<p class="u-m-b-0 u-m-t-default"><input type="url" value="' + currentValue + '" class="' + (0, _className2.default)('a-input') + '"></p>\n\t\t',
-		actions: [{
-			text: 'Avbryt',
-			color: 'transparent',
-			attrs: {
-				'data-modal-close': null
-			}
-		}, {
-			text: 'Spara',
-			modifier: 'primary',
-			key: 'enter',
-			onClick: addLink
-		}]
-	}, {
-		onOpen: function onOpen(id, modal) {
-			modal.querySelector('input').focus();
-		}
-	});
+    const addLink = (e, modal, close)=>{
+        e.preventDefault();
+        let value = modal.querySelector('input').value.trim();
+        if (!value.length) {
+            editor.commands.unsetLink();
+        } else {
+            const isAbsolute = new RegExp('(?:^[a-z][a-z0-9+.-]*:|//)', 'i');
+            if (!isAbsolute.test(value)) {
+                value = `https://${value}`;
+            }
+            editor.commands.toggleLink({
+                href: value
+            });
+        }
+        close();
+    };
+    if (editor.view.state.selection.empty) {
+        return;
+    }
+    const currentValue = editor.getAttributes('link').href ? editor.getAttributes('link').href : '';
+    (0, _modal.open)({
+        title: 'Lägg till länk',
+        content: `
+			<p class="u-m-b-0 u-m-t-default"><input type="url" value="${currentValue}" class="${(0, _className.default)('a-input')}"></p>
+		`,
+        actions: [
+            {
+                text: 'Avbryt',
+                color: 'transparent',
+                attrs: {
+                    'data-modal-close': null
+                }
+            },
+            {
+                text: 'Spara',
+                modifier: 'primary',
+                key: 'enter',
+                onClick: addLink
+            }
+        ]
+    }, {
+        onOpen (id, modal) {
+            modal.querySelector('input').focus();
+        }
+    });
 }
-
 function createToolbarButton(el, control, editor) {
-	var button = document.createElement('button');
-	var iconId = ['link'].includes(control) ? control : 'richtext-' + control;
-
-	button.setAttribute('data-rich-text-control', control);
-	button.value = kebabToCamel(control);
-	button.innerHTML = '\n\t\t<span class="u-visuallyhidden">' + control.replace('-', ' ') + '</span>\n\t\t<svg class="icon">\n\t\t\t<use xlink:href="#icon-' + iconId + '"></use>\n\t\t</svg>\n\t';
-
-	el.appendChild(button);
-
-	button.addEventListener('click', function (e) {
-		e.preventDefault();
-
-		if (control === 'link') {
-			insertLink(el, editor);
-		} else {
-			var method = 'toggle' + kebabToPascal(control);
-
-			editor.chain().focus()[method]().run();
-		}
-	});
+    const button = document.createElement('button');
+    const iconId = [
+        'link'
+    ].includes(control) ? control : `richtext-${control}`;
+    button.setAttribute('data-rich-text-control', control);
+    button.value = kebabToCamel(control);
+    button.innerHTML = `
+		<span class="u-visuallyhidden">${control.replace('-', ' ')}</span>
+		<svg class="icon">
+			<use xlink:href="#icon-${iconId}"></use>
+		</svg>
+	`;
+    el.appendChild(button);
+    button.addEventListener('click', (e)=>{
+        e.preventDefault();
+        if (control === 'link') {
+            insertLink(el, editor);
+        } else if (control === 'heading-2' || control === 'heading-3') {
+            insertHeading(button, editor);
+        } else {
+            const method = `toggle${kebabToPascal(control)}`;
+            editor.chain().focus()[method]().run();
+        }
+    });
 }
-
 function toogleButtonState(editor, el) {
-	[].forEach.call(el.parentNode.querySelectorAll('[data-rich-text-control]'), function (control) {
-		if (editor.isActive(control.value)) {
-			control.classList.add('is-active');
-		} else {
-			control.classList.remove('is-active');
-		}
-
-		if (control.value === 'link' && editor.view.state.selection.empty) {
-			control.disabled = true;
-		} else if (control.value === 'link') {
-			control.disabled = false;
-		}
-	});
+    const buttons = el.parentNode.querySelectorAll('[data-rich-text-control]');
+    buttons.forEach((button)=>{
+        const control = button.getAttribute('data-rich-text-control');
+        const value = kebabToCamel(control);
+        // 🧠 Handle heading separately
+        if (control === 'heading-2' || control === 'heading-3') {
+            const level = parseInt(control.replace('heading-', ''), 10);
+            if (editor.isActive('heading', {
+                level
+            })) {
+                button.classList.add('is-active');
+            } else {
+                button.classList.remove('is-active');
+            }
+            return;
+        }
+        // 🔠 Handle all others like bold, italic, bullet-list, etc.
+        if (editor.isActive(value)) {
+            button.classList.add('is-active');
+        } else {
+            button.classList.remove('is-active');
+        }
+        // 🔗 Special logic for link
+        if (value === 'link') {
+            button.disabled = editor.view.state.selection.empty;
+        }
+    });
 }
-
 function createToolbar(el, editor) {
-	var toolbar = document.createElement('div');
-
-	toolbar.className = (0, _className2.default)('a-textarea__toolbar');
-
-	el.parentNode.insertBefore(toolbar, el);
-
-	['bold', 'italic', 'link', 'bullet-list'].forEach(function (control) {
-		createToolbarButton(toolbar, control, editor);
-	});
+    const toolbar = document.createElement('div');
+    toolbar.className = (0, _className.default)('a-textarea__toolbar');
+    el.parentNode.insertBefore(toolbar, el);
+    [
+        'heading-2',
+        'heading-3',
+        'bold',
+        'italic',
+        'link',
+        'bullet-list',
+        'ordered-list'
+    ].forEach((control)=>{
+        createToolbarButton(toolbar, control, editor);
+    });
 }
-
 function getHTML(editor) {
-	var html = editor.getHTML();
-
-	return html.replace(/<li><p>/g, '<li>').replace(/<\/p><\/li>/g, '</li>');
+    const html = editor.getHTML();
+    return html.replace(/<li><p>/g, '<li>').replace(/<\/p><\/li>/g, '</li>');
 }
-
-function setupTextArea(el) {
-	var onChange = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
-
-	var editorEl = document.createElement('div');
-	var editor = new _core.Editor({
-		element: editorEl,
-		extensions: [_extensionDocument2.default, _extensionParagraph2.default, _extensionText2.default, _extensionListItem2.default, _extensionBulletList2.default, _extensionBold2.default, _extensionItalic2.default, _extensionLink.Link.configure({
-			openOnClick: false,
-			HTMLAttributes: {
-				class: 'u-link'
-			}
-		}), _extensionHistory2.default.configure({
-			depth: 10
-		})],
-		content: el.value,
-		onTransaction: function onTransaction(props) {
-			toogleButtonState(props.editor, editorEl);
-		},
-		onUpdate: function onUpdate(props) {
-			var html = getHTML(props.editor);
-
-			el.value = html;
-			onChange(html);
-		}
-	});
-
-	editorEl.className = el.className;
-	editorEl.classList.add((0, _className2.default)('a-textarea--rich-text'));
-
-	el.classList.add((0, _className2.default)('a-textarea--hidden'));
-	el.editor = editor;
-
-	el.parentNode.insertBefore(editorEl, el);
-
-	createToolbar(editorEl, editor);
-
-	var event = new CustomEvent('editor-ready', {
-		detail: {
-			editor: editor
-		}
-	});
-
-	el.dispatchEvent(event);
+function setupTextArea(el, onChange = ()=>{}) {
+    const editorEl = document.createElement('div');
+    const editor = new _core.Editor({
+        element: editorEl,
+        extensions: [
+            _extensiondocument.default,
+            _extensionparagraph.default,
+            _extensiontext.default,
+            _extensionlistitem.default,
+            _extensionbulletlist.default,
+            _extensionorderedlist.default,
+            _extensionheading.default.configure({
+                levels: [
+                    2,
+                    3
+                ]
+            }),
+            _extensionbold.default,
+            _extensionitalic.default,
+            _extensionlink.Link.configure({
+                openOnClick: false,
+                HTMLAttributes: {
+                    class: 'u-link'
+                }
+            }),
+            _extensionhistory.default.configure({
+                depth: 10
+            })
+        ],
+        content: el.value,
+        onTransaction (props) {
+            toogleButtonState(props.editor, editorEl);
+        },
+        onUpdate (props) {
+            const html = getHTML(props.editor);
+            el.value = html;
+            onChange(html);
+        }
+    });
+    editorEl.className = el.className;
+    editorEl.classList.add((0, _className.default)('a-textarea--rich-text'));
+    el.classList.add((0, _className.default)('a-textarea--hidden'));
+    el.editor = editor;
+    el.parentNode.insertBefore(editorEl, el);
+    createToolbar(editorEl, editor);
+    const event = new CustomEvent('editor-ready', {
+        detail: {
+            editor
+        }
+    });
+    el.dispatchEvent(event);
 }
-
 function init() {
-	var els = document.querySelectorAll('textarea[data-rich-text]');
-
-	if (els.length) {
-		[].forEach.call(els, function (el) {
-			return setupTextArea(el);
-		});
-	}
+    const els = document.querySelectorAll('textarea[data-rich-text]');
+    if (els.length) {
+        [].forEach.call(els, (el)=>setupTextArea(el));
+    }
 }
-
-init();
+init();