@internetstiftelsen/styleguide 2.19.5 → 2.20.1

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

@@ -0,0 +1,167 @@
+'use strict';
+
+var _core = require('@tiptap/core');
+
+var _starterKit = require('@tiptap/starter-kit');
+
+var _starterKit2 = _interopRequireDefault(_starterKit);
+
+var _extensionLink = require('@tiptap/extension-link');
+
+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 clearAndCapitalize(str) {
+	return str.replace(/-/, '').toUpperCase();
+}
+
+function kebabToCamel(str) {
+	return str.replace(/-\w/g, clearAndCapitalize);
+}
+
+function kebabToPascal(str) {
+	return str.replace(/(^\w|-\w)/g, clearAndCapitalize);
+}
+
+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();
+		}
+	});
+}
+
+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();
+		}
+	});
+}
+
+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;
+		}
+	});
+}
+
+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);
+	});
+}
+
+function setupTextArea(el) {
+	var editorEl = document.createElement('div');
+	var editor = new _core.Editor({
+		element: editorEl,
+		extensions: [_starterKit2.default, _extensionLink.Link.configure({
+			openOnClick: false,
+			HTMLAttributes: {
+				class: 'u-link'
+			}
+		})],
+		content: el.value,
+		onTransaction: function onTransaction(props) {
+			toogleButtonState(props.editor, editorEl);
+		},
+		onUpdate: function onUpdate(props) {
+			el.value = props.editor.getHTML();
+		}
+	});
+
+	editorEl.className = el.className;
+	editorEl.classList.add((0, _className2.default)('a-textarea--rich-text'));
+
+	el.style.display = 'none';
+	el.editor = editor;
+
+	el.parentNode.insertBefore(editorEl, el);
+
+	createToolbar(editorEl, editor);
+}
+
+var els = document.querySelectorAll('textarea[data-rich-text]');
+
+if (els.length) {
+	[].forEach.call(els, function (el) {
+		return setupTextArea(el, _core.Editor, _starterKit2.default);
+	});
+}

package/dist/focusTrap.js

@@ -1,5 +1,10 @@
 'use strict';
 
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+exports.default = focusTrap;
+
 var _focusTrap = require('focus-trap');
 
 var _focusTrap2 = _interopRequireDefault(_focusTrap);

package/dist/molecules/modal/modal.js

@@ -9,6 +9,10 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
+var _focusTrap = require('../../focusTrap');
+
+var _focusTrap2 = _interopRequireDefault(_focusTrap);
+
 var _className = require('../../assets/js/className');
 
 var _className2 = _interopRequireDefault(_className);
@@ -24,6 +28,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @property {string} text - action content
  * @property {string} url - action link url
  * @property {string} target - action link target
+ * @property {string} key - action click handler key shortcut
  * @property {function} onClick - action click handler
  * @property {object} attrs – action element attributes
  */
@@ -52,6 +57,7 @@ var modal = null;
 var modalContent = null;
 var modalActions = null;
 var modalClose = null;
+var keyHandlers = {};
 
 /**
  * Increase increment ID and return the latest
@@ -75,7 +81,7 @@ function objectToAttributes(obj) {
 		    key = _ref4[0],
 		    value = _ref4[1];
 
-		return key + '=' + value;
+		return value !== null ? key + '=' + value : key;
 	}).join(' ');
 }
 
@@ -87,7 +93,15 @@ function objectToAttributes(obj) {
 function addAction(action) {
 	var icon = action.icon ? '\n\t\t<svg class="icon ' + (0, _className2.default)('a-button__icon') + '">\n\t\t\t<use xlink:href="#icon-' + action.icon + '"></use>\n\t\t</svg>\n\t' : '';
 
-	var cls = (0, _className2.default)('a-button a-button--' + action.color) + ' ' + (0, _className2.default)('m-modal__button-' + action.modifier) + ' u-m-l-2';
+	var cls = (0, _className2.default)('a-button') + ' u-m-l-2';
+
+	if (action.color) {
+		cls += ' ' + (0, _className2.default)('a-button--' + action.color);
+	}
+
+	if (action.modifier) {
+		cls += ' ' + (0, _className2.default)('m-modal__button-' + action.modifier);
+	}
 
 	if (action.icon) {
 		cls += ' ' + (0, _className2.default)('a-button--icon');
@@ -96,7 +110,32 @@ function addAction(action) {
 	var tag = action.url ? 'a' : 'button';
 	var button = '\n\t\t<' + tag + ' ' + objectToAttributes(_extends({}, action.attrs, { href: action.url, target: action.target })) + ' class="' + cls + '">\n\t\t\t<span class="' + (0, _className2.default)('a-button__text') + '">' + action.text + '</span>\n\t\t\t' + icon + '\n\t\t</' + tag + '>\n\t';
 
-	modalActions.appendChild(document.createRange().createContextualFragment(button));
+	var dummy = document.createElement('div');
+
+	dummy.innerHTML = button;
+
+	var el = dummy.firstElementChild;
+	modalActions.appendChild(el);
+
+	if (action.onClick) {
+		el.addEventListener('click', function (e) {
+			// eslint-disable-next-line no-use-before-define
+			action.onClick(e, modal, close);
+		});
+	}
+}
+
+function handleKeyUp(e) {
+	Object.entries(keyHandlers).forEach(function (_ref5) {
+		var _ref6 = _slicedToArray(_ref5, 2),
+		    key = _ref6[0],
+		    handler = _ref6[1];
+
+		if (e.key.toLowerCase() === key) {
+			// eslint-disable-next-line no-use-before-define
+			handler(e, modal, close);
+		}
+	});
 }
 
 /**
@@ -120,11 +159,30 @@ function display() {
 		}
 	}
 
+	(0, _focusTrap2.default)(active.el);
+
 	active.el.setAttribute('aria-hidden', 'false');
 
 	if (active.settings.onOpen) {
-		active.settings.onOpen(active.id);
+		active.settings.onOpen(active.id, active.el);
 	}
+
+	setTimeout(function () {
+		if (active.el.focusTrap) {
+			active.el.focusTrap.activate();
+		}
+	}, 1);
+
+	// Just to make sure
+	keyHandlers = {};
+
+	active.content.actions.forEach(function (action) {
+		if (action.key && action.onClick) {
+			keyHandlers[action.key] = action.onClick;
+		}
+	});
+
+	document.addEventListener('keyup', handleKeyUp);
 }
 
 /**
@@ -152,6 +210,24 @@ function close() {
 			active.settings.onClose(active.id);
 		}
 
+		active.content.actions.forEach(function (action) {
+			if (action.key && action.onClick) {
+				document.addEventListener('keyup', function (e) {
+					if (e.key.toLowerCase() === action.key) {
+						// eslint-disable-next-line no-use-before-define
+						action.onClick(e, modal, close);
+					}
+				});
+			}
+		});
+
+		document.removeEventListener('keyup', handleKeyUp);
+
+		if (active.el.focusTrap) {
+			active.el.focusTrap.deactivate();
+		}
+
+		keyHandlers = {};
 		active = null;
 	}
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.19.5",
+	"version": "2.20.1",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"
@@ -66,6 +66,9 @@
 		"uglify-es": "^3.3.9"
 	},
 	"dependencies": {
+		"@tiptap/core": "^2.0.0-beta.131",
+		"@tiptap/extension-link": "^2.0.0-beta.25",
+		"@tiptap/starter-kit": "^2.0.0-beta.133",
 		"a11y-toggle": "^2.1.0",
 		"focus-trap": "^4.0.2",
 		"glider-js": "^1.7.7",

package/src/app.js

@@ -1,4 +1,5 @@
 import './molecules/form';
+import './atoms/textarea/rich-text';
 
 require('./atoms/grid-toggle/grid-toggle');
 require('./components');
@@ -39,7 +40,7 @@ if (demoModal) {
 					color: 'peacock-light',
 					modifier: 'primary',
 					attrs: {
-						'data-modal-open': 'modal-container',
+						'data-modal-close': null,
 					},
 				},
 				{

package/src/app.scss

@@ -8,6 +8,7 @@ $namespace: '';
 // Configurations
 @import 'configurations/grid/grid';
 @import 'configurations/colors/colors';
+@import 'configurations/colors/wordpress-colors';
 @import 'configurations/colors/colors-functions';
 @import 'configurations/colors/text-colors';
 @import 'configurations/colors/background-colors';

package/src/atoms/textarea/_textarea.scss

@@ -18,50 +18,30 @@
 	@include m(discreet) {
 		@extend %discreet;
 	}
-}
-
-.ql-editor {
-	@extend %input;
-
-	min-width: 100%;
-	max-width: 100%;
-	min-height: 100px;
 
-	&:focus {
-		@extend %input-focus;
+	@include m(rich-text) {
+		min-height: auto;
+
+		> div {
+			min-height: rhythm(12);
+
+			p,
+			ul,
+			ol {
+				@include plumber(
+					$font-size: 1.75,
+					$leading-bottom: 2
+				);
+			}
+		}
 	}
 
-	&[disabled] {
-		@extend %disabled;
-	}
-
-	p {
-		font-size: rem(16px);
-	}
-}
-
-.ql-toolbar {
-	button {
-		@extend %button-toolbar;
+	@include e(toolbar) {
+		button {
+			@extend %button-toolbar;
 
-		margin-right: rhythm(0.5);
-		margin-bottom: rhythm(1);
+			margin-right: rhythm(0.5);
+			margin-bottom: rhythm(1);
+		}
 	}
 }
-
-.ql-clipboard {
-	position: absolute;
-	top: 50%;
-	left: -100000px;
-	height: 1px;
-	overflow-y: hidden;
-}
-
-.ql-editor p,
-.ql-editor ul,
-.ql-editor ol {
-	@include plumber(
-		$font-size: 1.75,
-		$leading-bottom: 2
-	);
-}

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

@@ -0,0 +1,168 @@
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { Link } from '@tiptap/extension-link';
+import className from '../../assets/js/className';
+import { open } from '../../molecules/modal/modal';
+
+function clearAndCapitalize(str) {
+	return str.replace(/-/, '').toUpperCase();
+}
+
+function kebabToCamel(str) {
+	return str.replace(/-\w/g, clearAndCapitalize);
+}
+
+function kebabToPascal(str) {
+	return str.replace(/(^\w|-\w)/g, clearAndCapitalize);
+}
+
+function insertLink(el, editor) {
+	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 : '';
+
+	open({
+		title: 'Lägg till länk',
+		content: `
+			<p class="u-m-b-0 u-m-t-default"><input type="url" value="${currentValue}" class="${className('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) {
+	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 {
+			const method = `toggle${kebabToPascal(control)}`;
+
+			editor.chain()
+				.focus()[method]()
+				.run();
+		}
+	});
+}
+
+function toogleButtonState(editor, el) {
+	[].forEach.call(el.parentNode.querySelectorAll('[data-rich-text-control]'), (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;
+		}
+	});
+}
+
+function createToolbar(el, editor) {
+	const toolbar = document.createElement('div');
+
+	toolbar.className = className('a-textarea__toolbar');
+
+	el.parentNode.insertBefore(toolbar, el);
+
+	['bold', 'italic', 'link', 'bullet-list'].forEach((control) => {
+		createToolbarButton(toolbar, control, editor);
+	});
+}
+
+function setupTextArea(el) {
+	const editorEl = document.createElement('div');
+	const editor = new Editor({
+		element: editorEl,
+		extensions: [
+			StarterKit,
+			Link.configure({
+				openOnClick: false,
+				HTMLAttributes: {
+					class: 'u-link',
+				},
+			}),
+		],
+		content: el.value,
+		onTransaction(props) {
+			toogleButtonState(props.editor, editorEl);
+		},
+		onUpdate(props) {
+			el.value = props.editor.getHTML();
+		},
+	});
+
+	editorEl.className = el.className;
+	editorEl.classList.add(className('a-textarea--rich-text'));
+
+	el.style.display = 'none';
+	el.editor = editor;
+
+	el.parentNode.insertBefore(editorEl, el);
+
+	createToolbar(editorEl, editor);
+}
+
+const els = document.querySelectorAll('textarea[data-rich-text]');
+
+if (els.length) {
+	[].forEach.call(els, (el) => setupTextArea(el, Editor, StarterKit));
+}

package/src/atoms/textarea/textarea.config.js

@@ -6,7 +6,15 @@ module.exports = {
 		placeholder: 'Meddelande',
 		id:'message',
 		required: false,
-		disabled: false
+		disabled: false,
+		button_primary_color: '#e0bff5',
+		button_primary_hover_color: '#c27fec',
+		button_primary_border_color: '#c27fec',
+		button_primary_text_color: '#1f2a36',
+		button_secondary_color: '#ff9fb4',
+		button_secondary_hover_color: '#ff4069',
+		button_secondary_border_color: '#ff4069',
+		button_secondary_text_color: '#1f2a36',
 	},
 	variants: [
 		{

package/src/atoms/textarea/textarea.hbs

@@ -1,15 +1,18 @@
+<style media="screen">
+	:root {
+		--m-modal-button-primary-color: {{button_primary_color}};
+		--m-modal-button-primary-hover-color: {{button_primary_hover_color}};
+		--m-modal-button-primary-border-color: {{button_primary_border_color}};
+		--m-modal-button-primary-text-color: {{button_primary_text_color}};
+		--m-modal-button-secondary-color: {{button_secondary_color}};
+		--m-modal-button-secondary-hover-color: {{button_secondary_hover_color}};
+		--m-modal-button-secondary-border-color: {{button_secondary_border_color}};
+		--m-modal-button-secondary-text-color: {{button_secondary_text_color}};
+	}
+</style>
 <div class="field-group{{#if is_invalid}} is-invalid{{/if}}">
 	{{> @label for="message" label="Meddelande" }}
-	{{#if is_richtext}}
-	<div id="toolbar" class="ql-toolbar">
-		<!-- Add buttons as you would before -->
-		<button class="ql-bold"><span class="u-visuallyhidden">Bold</span>{{> @icon id="richtext-bold"}}</button>
-		<button class="ql-italic"><span class="u-visuallyhidden">Italic</span>{{> @icon id="richtext-italic"}}</button>
-		<button class="ql-list" value="bullet"><span class="u-visuallyhidden">Bullet list</span>{{> @icon id="richtext-bullet-list"}}</button>
-		<button class="ql-link"><span class="u-visuallyhidden">Link</span>{{> @icon id="link"}}</button>
-	</div>
-	{{/if}}
-	<textarea rows="5" class="a-textarea{{#if modifier}} {{modifier}}{{/if}}" id="{{id}}" {{#if is_invalid}}aria-invalid="true"{{/if}} {{#if required}}required {{/if}} {{#if is_disabled}}disabled {{/if}} placeholder="{{placeholder}}" autocomplete="{{autocomplete}}"{{#if has_help}} aria-describedby="textarea-help"{{/if}} {{#if required}} aria-describedby="textarea-help"{{/if}}></textarea>
+	<textarea rows="5" class="a-textarea{{#if modifier}} {{modifier}}{{/if}}" id="{{id}}" {{#if is_invalid}}aria-invalid="true"{{/if}} {{#if is_richtext}}data-rich-text{{/if}} {{#if required}}required {{/if}} {{#if is_disabled}}disabled {{/if}} placeholder="{{placeholder}}" autocomplete="{{autocomplete}}"{{#if has_help}} aria-describedby="textarea-help"{{/if}} {{#if required}} aria-describedby="textarea-help"{{/if}}></textarea>
 	{{#if has_help}}
 	<div class="input-help" id="textarea-help">
 		Välj det som passar dig bäst

package/src/configurations/_extends.scss

@@ -137,7 +137,7 @@
 	&:hover,
 	&:focus,
 	&:active,
-	&.ql-active {
+	&.is-active {
 		background-color: $color-cyberspace;
 
 		svg {

package/src/configurations/colors/_colors-functions.scss

@@ -92,3 +92,22 @@ $colors: (
 		}
 	}
 }
+
+/// Generate wordpress color classes with attribute and value
+/// Generates this: .has-color-name{$suffix}
+/// @group Colors
+@mixin wordpress_color_classes($map, $attribute,  $separator: '-', $suffix: '', $base: 'base') {
+	@each $key, $value in $map {
+		@if type-of($value) == 'map' {
+			&#{if($key != $base, #{$separator}#{$key}, '')} {
+				content: str-replace($key, 'color-', '');
+				@include wordpress_color_classes($value, $attribute, $separator, '-color');
+			}
+		}
+		@else {
+			&#{if($key != $base, #{$separator}#{$key}, '')}#{$suffix} {
+				#{$attribute}: $value;
+			}
+		}
+	}
+}

package/src/configurations/colors/_wordpress-colors.scss

@@ -0,0 +1,12 @@
+@charset "UTF-8";
+
+// Generate wordpress color classes e.g. .has-ruby-color
+/// @group Colors
+.has {
+	@include wordpress_color_classes (
+		$colors,
+		$attribute: 'color',
+		$separator: '-',
+		$suffix: '-color'
+	);
+}