@internetstiftelsen/styleguide 2.21.16 → 2.21.19-beta.0.1

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

@@ -137,7 +137,7 @@ function createToolbar(el, editor) {
 function getHTML(editor) {
 	var html = editor.getHTML();
 
-	return html;
+	return html.replace(/<li><p>/g, '<li>').replace(/<\/p><\/li>/g, '</li>');
 }
 
 function setupTextArea(el) {
@@ -158,7 +158,7 @@ function setupTextArea(el) {
 		},
 		onUpdate: function onUpdate(props) {
 			var html = getHTML(props.editor);
-			console.log(html);
+
 			el.value = html;
 			onChange(html);
 		}

package/dist/focusTrap.js

@@ -7,17 +7,13 @@ exports.default = focusTrap;
 
 var _focusTrap = require('focus-trap');
 
-var _focusTrap2 = _interopRequireDefault(_focusTrap);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function getContainer(element) {
 	return document.getElementById(element.getAttribute('data-a11y-toggle'));
 }
 
 function focusTrap(container) {
 	if (container && container.getAttribute('data-focus-trap') !== 'false' && !container.focusTrap) {
-		container.focusTrap = (0, _focusTrap2.default)('#' + container.id, { clickOutsideDeactivates: true });
+		container.focusTrap = (0, _focusTrap.createFocusTrap)('#' + container.id, { clickOutsideDeactivates: true });
 		container.setAttribute('data-focus-trap', 'true');
 	}
 }

package/dist/organisms/mega-menu/mega-menu.js

@@ -2,10 +2,6 @@
 
 var _focusTrap = require('focus-trap');
 
-var _focusTrap2 = _interopRequireDefault(_focusTrap);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * Collect the needed elements.
  */
@@ -19,7 +15,7 @@ var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
 var focusTrap = null;
 
 if (megaMenu) {
-	focusTrap = (0, _focusTrap2.default)(megaMenu);
+	focusTrap = (0, _focusTrap.createFocusTrap)(megaMenu);
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.21.16",
+	"version": "2.21.19-beta.0.1",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"
@@ -70,7 +70,7 @@
 		"@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",
+		"focus-trap": "^6.7.3",
 		"glider-js": "^1.7.7",
 		"lodash.template": "^4.5.0",
 		"lodash.throttle": "^4.1.1",

package/src/assets/js/responsivePosition.js

@@ -2,6 +2,7 @@ import throttle from 'lodash.throttle';
 
 const breakpoints = {
 	xs: 0,
+	smxs: 469,
 	sm: 576,
 	md: 769,
 	lg: 961,

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

@@ -131,7 +131,9 @@ function createToolbar(el, editor) {
 function getHTML(editor) {
 	const html = editor.getHTML();
 
-	return html;
+	return html
+		.replace(/<li><p>/g, '<li>')
+		.replace(/<\/p><\/li>/g, '</li>');
 }
 
 export function setupTextArea(el, onChange = () => {}) {
@@ -153,7 +155,7 @@ export function setupTextArea(el, onChange = () => {}) {
 		},
 		onUpdate(props) {
 			const html = getHTML(props.editor);
-			console.log(html);
+
 			el.value = html;
 			onChange(html);
 		},

package/src/components.js

@@ -20,7 +20,7 @@ import './organisms/podcast/podcast';
 import './assets/js/responsivePosition';
 import './assets/js/youtube';
 import './molecules/glider/glider';
-import './molecules/glider/glider-single';
+import './molecules/glider/glider-course';
 import './atoms/timeline/anchorScroll';
 import './molecules/timeline-navigation/timeline-navigation';
 import './molecules/context-menu/context-menu';

package/src/configurations/_wordpress.scss

@@ -334,3 +334,8 @@ div.aligncenter {
 		border-radius: $border-radius;
 	}
 }
+
+.wp-block-embed-youtube {
+	border-radius: $border-radius;
+	overflow: hidden;
+}

package/src/focusTrap.js

@@ -1,4 +1,4 @@
-import createFocusTrap from 'focus-trap';
+import { createFocusTrap } from 'focus-trap';
 
 function getContainer(element) {
 	return document.getElementById(element.getAttribute('data-a11y-toggle'));

package/src/molecules/glider/_glider.scss

@@ -12,7 +12,7 @@
 	padding-left: rhythm(8);
 }
 
-.glider-contain-single {
+.glider-contain-course {
 	display: flex;
 	position: relative;
 	align-items: center;
@@ -250,18 +250,18 @@
 	}
 }
 
-.glider-single-prev,
-.glider-single-next {
+.glider-course-prev,
+.glider-course-next {
 	&.disabled {
 		display: none;
 
-		+ .glider-single-finish {
+		+ .glider-course-finish {
 			display: inline-flex;
 		}
 	}
 }
 
-.glider-single-finish {
+.glider-course-finish {
 	display: none;
 }
 

package/src/molecules/glider/{glider--single.hbs → glider--course.hbs}

@@ -1,7 +1,7 @@
 <div class="wrapper">
-	<div class="glider-contain-single">
-		<div class="glider{{#if single}} js-glider-single{{else}} js-glider{{/if}}">
-			<div class="glider-slide glider-slide--single">
+	<div class="glider-contain-course">
+		<div class="glider{{#if single}} js-glider-course{{else}} js-glider{{/if}}">
+			<div class="glider-slide glider-slide--course">
 				<div class="row flex-column-reverse flex-lg-row">
 					<div class="grid-18 grid-lg-8">
 						<div class="u-m-b-2">
@@ -17,7 +17,7 @@
 						<p>Bluffmejl ser oftast ut som vanliga mejl. Avsändaren vill att du ska klicka på länkar och lämna privat information utan att tänka. Du kan uppmanas uppge ditt lösenord, dina kontokortsuppgifter eller annan personlig information.</p>
 						<div id="slide-1-ImageContainerMobile"></div>
 						<nav class="glider-slide__navigation">
-							{{> @button el="button" button_type="button" icon="arrow-forwards" additional_classes="a-button--jade-light glider-single-next js-glider-next" text="Starta kursen"}}
+							{{> @button el="button" button_type="button" icon="arrow-forwards" additional_classes="a-button--jade-light glider-course-next js-glider-next" text="Starta kursen"}}
 						</nav>
 					</div>
 					<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-1-ImageContainer">
@@ -29,7 +29,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="glider-slide glider-slide--single">
+			<div class="glider-slide glider-slide--course">
 				<div class="row flex-column-reverse flex-lg-row">
 					<div class="grid-18 grid-lg-8">
 						<div class="u-m-b-2">
@@ -42,8 +42,8 @@
 						<p>Bluffmejl ser oftast ut som vanliga mejl. Avsändaren vill att du ska klicka på länkar och lämna privat information utan att tänka. Du kan uppmanas uppge ditt lösenord, dina kontokortsuppgifter eller annan personlig information.</p>
 						<div id="slide-2-ImageContainerMobile"></div>
 						<nav class="glider-slide__navigation">
-							{{> @button el="button" button_type="button" icon="arrow-backwards" additional_classes="a-button--icon-left a-button--transparent a-button--transparent--small-icon glider-single-prev js-glider-prev" text="Gå bakåt"}}
-							{{> @button el="button" button_type="button" icon="arrow-forwards" additional_classes="a-button--peacock-light glider-single-next js-glider-next" text="Gå framåt" }}
+							{{> @button el="button" button_type="button" icon="arrow-backwards" additional_classes="a-button--icon-left a-button--transparent a-button--transparent--small-icon glider-course-prev js-glider-prev" text="Gå bakåt"}}
+							{{> @button el="button" button_type="button" icon="arrow-forwards" additional_classes="a-button--peacock-light glider-course-next js-glider-next" text="Gå framåt" }}
 						</nav>
 					</div>
 					<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-2-ImageContainer">
@@ -56,7 +56,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="glider-slide glider-slide--single">
+			<div class="glider-slide glider-slide--course">
 				<div class="row flex-column-reverse flex-lg-row">
 					<div class="grid-18 grid-lg-8">
 						<div class="u-m-b-2">
@@ -68,8 +68,8 @@
 						<p>Bluffmejl ser oftast ut som vanliga mejl. Avsändaren vill att du ska klicka på länkar och lämna privat information utan att tänka. Du kan uppmanas uppge ditt lösenord, dina kontokortsuppgifter eller annan personlig information.</p>
 						<div id="slide-3-ImageContainerMobile"></div>
 						<nav class="glider-slide__navigation">
-							{{> @button el="button" button_type="button" icon="arrow-backwards" additional_classes="a-button--icon-left a-button--transparent a-button--transparent--small-icon glider-single-prev js-glider-prev" text="Gå bakåt"}}
-							{{> @button el="button" button_type="button" icon="arrow-forwards" additional_classes="a-button--peacock-light glider-single-next js-glider-next" text="Gå framåt"}}
+							{{> @button el="button" button_type="button" icon="arrow-backwards" additional_classes="a-button--icon-left a-button--transparent a-button--transparent--small-icon glider-course-prev js-glider-prev" text="Gå bakåt"}}
+							{{> @button el="button" button_type="button" icon="arrow-forwards" additional_classes="a-button--peacock-light glider-course-next js-glider-next" text="Gå framåt"}}
 						</nav>
 					</div>
 					<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-3-ImageContainer">
@@ -89,7 +89,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="glider-slide glider-slide--single">
+			<div class="glider-slide glider-slide--course">
 				<div class="row flex-column-reverse flex-lg-row">
 					<div class="grid-18 grid-lg-8">
 						<div class="u-m-b-2">
@@ -103,7 +103,7 @@
 
 						{{> @rating additional_classes='u-m-b-2'}}
 						<nav class="glider-slide__navigation">
-							{{> @button el="button" button_type="button" icon="arrow-backwards" additional_classes="a-button--icon-left a-button--transparent a-button--transparent--small-icon glider-single-prev js-glider-prev" text="Gå bakåt"}}
+							{{> @button el="button" button_type="button" icon="arrow-backwards" additional_classes="a-button--icon-left a-button--transparent a-button--transparent--small-icon glider-course-prev js-glider-prev" text="Gå bakåt"}}
 							{{> @button el="a" url="#" additional_classes="a-button--jade-light" icon="check" text="Avsluta kursen"}}
 						</nav>
 					</div>

package/src/molecules/glider/{glider-single.js → glider-course.js}

@@ -1,6 +1,6 @@
 import Glider from 'glider-js';
 
-const gliderElementSingle = document.querySelector('.js-glider-single');
+const gliderElementSingle = document.querySelector('.js-glider-course');
 
 if (gliderElementSingle) {
 	const GliderSingle = new Glider(gliderElementSingle, {

package/src/molecules/glider/glider.config.js

@@ -12,7 +12,7 @@ module.exports = {
 			}
 		},
 		{
-			name: 'Single',
+			name: 'Course',
 			status: 'wip',
 			context: {
 				single: true

package/src/organisms/mega-menu/mega-menu.js

@@ -1,4 +1,4 @@
-import createFocusTrap from 'focus-trap';
+import { createFocusTrap } from 'focus-trap';
 /**
  * Collect the needed elements.
  */

package/src/pages/responsive-position/responsive-position.hbs

@@ -1,6 +1,7 @@
 <form class="wrapper">
 	<div id="location1" style="background: #aae3d9; padding: 40px">
-		<div data-responsive="xs:location1,lg:location2">I am text</div>
+		<div data-responsive="xs:location1,smxs:location2,lg:location3">I am text</div>
 	</div>
 	<div id="location2" style="background: #fcccb1; padding: 40px"></div>
+	<div id="location3" style="background: #ffe696; padding: 40px"></div>
 </form>