@internetstiftelsen/styleguide 5.0.19 → 5.1.1

package/dist/atoms/textarea/rich-text.js

@@ -1,274 +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 _extensionOrderedList = require('@tiptap/extension-ordered-list');
-
-var _extensionOrderedList2 = _interopRequireDefault(_extensionOrderedList);
-
-var _extensionHeading = require('@tiptap/extension-heading');
-
-var _extensionHeading2 = _interopRequireDefault(_extensionHeading);
-
-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) {
-
-	var levelAttr = button.dataset.richTextControl;
-
-	var level = parseInt(levelAttr.replace('heading-', ''), 10);
-
-	editor.commands.toggleHeading({ level: level });
-
-	var toolbar = button.parentElement; // The toolbar div
-	var headingButtons = toolbar.querySelectorAll('button[data-rich-text-control^="heading-"]');
-
-	headingButtons.forEach(function (btn) {
-		btn.classList.remove('is-active');
-	});
-
-	if (editor.isActive('heading', { level: level })) {
-		button.classList.add('is-active');
-	}
+    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 if (control === 'heading-2' || control === 'heading-3') {
-			insertHeading(button, 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) {
-	var buttons = el.parentNode.querySelectorAll('[data-rich-text-control]');
-
-	buttons.forEach(function (button) {
-		var control = button.getAttribute('data-rich-text-control');
-		var value = kebabToCamel(control);
-
-		// 🧠 Handle heading separately
-		if (control === 'heading-2' || control === 'heading-3') {
-			var level = parseInt(control.replace('heading-', ''), 10);
-			if (editor.isActive('heading', { level: 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;
-		}
-	});
+    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);
-
-	['heading-2', 'heading-3', 'bold', 'italic', 'link', 'bullet-list', 'ordered-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, _extensionOrderedList2.default, _extensionHeading2.default.configure({
-			levels: [2, 3]
-		}), _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();

package/dist/atoms/tooltip/tooltip.js

@@ -1,22 +1,18 @@
-'use strict';
-
-var toolTip = document.querySelector('[role="tooltip"]');
-var toolTipText = document.querySelector('[data-tooltip]');
-
+"use strict";
+const toolTip = document.querySelector('[role="tooltip"]');
+const toolTipText = document.querySelector('[data-tooltip]');
 function isInViewport(elem) {
-	var distance = elem.getBoundingClientRect();
-	return distance.top >= 30 && distance.left >= 30 && distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) && distance.right <= (window.innerWidth || document.documentElement.clientWidth);
+    const distance = elem.getBoundingClientRect();
+    return distance.top >= 30 && distance.left >= 30 && distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) && distance.right <= (window.innerWidth || document.documentElement.clientWidth);
 }
-
 function positionToolTip() {
-	if (isInViewport(toolTip)) {
-		toolTipText.classList.remove('down');
-	} else {
-		toolTipText.classList.add('down');
-	}
+    if (isInViewport(toolTip)) {
+        toolTipText.classList.remove('down');
+    } else {
+        toolTipText.classList.add('down');
+    }
 }
-
 if (toolTip) {
-	positionToolTip();
-	window.addEventListener('scroll', positionToolTip);
-}
+    positionToolTip();
+    window.addEventListener('scroll', positionToolTip);
+}