@internetstiftelsen/styleguide 2.25.0 → 2.25.1-beta.0.1

package/dist/molecules/form/Form.js

@@ -14,10 +14,6 @@ var _lodash = require('lodash.template');
 
 var _lodash2 = _interopRequireDefault(_lodash);
 
-var _Events = require('../../assets/js/Events');
-
-var _Events2 = _interopRequireDefault(_Events);
-
 var _Button = require('../../atoms/button/Button');
 
 var _Button2 = _interopRequireDefault(_Button);
@@ -64,7 +60,6 @@ var Form = function () {
 		};
 
 		this.displayError = function (error) {
-			_this.events.emit('error', error);
 			_this.setLoading(false);
 
 			if ('response' in error) {
@@ -136,8 +131,6 @@ var Form = function () {
 
 			_this.success.classList.remove('is-hidden');
 			_this.success.innerHTML = tmpl(json);
-
-			_this.events.emit('success', json);
 		};
 
 		this.captchaCallback = function () {
@@ -161,7 +154,6 @@ var Form = function () {
 		this.submit = new _Button2.default(this.element.querySelector('button[type="submit"]'));
 		this.error = this.element.querySelector('[data-form-error]');
 		this.success = this.element.querySelector('[data-form-success]');
-		this.events = new _Events2.default();
 
 		if (this.success) {
 			var tpl = document.getElementById(this.success.getAttribute('data-form-success'));

package/dist/molecules/form/index.js

@@ -10,6 +10,6 @@ var elements = document.querySelectorAll('[data-form]');
 
 if (elements.length) {
 	elements.forEach(function (element) {
-		element.form = new _Form2.default(element);
+		return new _Form2.default(element);
 	});
 }

package/dist/molecules/glider/glider-hero.js

@@ -58,44 +58,44 @@ function initHeroGlider(node) {
 				}, parseInt(autoplayDelay, 10));
 			}
 		}, 0);
-	}
-
-	document.querySelector('.js-glider-prev').addEventListener('click', function () {
-		dataLayer.push({
-			event: 'carousel',
-			eventInfo: {
-				category: 'carousel',
-				action: 'click',
-				label: 'arrow_left'
-			}
-		});
-	});
-
-	document.querySelector('.js-glider-next').addEventListener('click', function () {
-		dataLayer.push({
-			event: 'carousel',
-			eventInfo: {
-				category: 'carousel',
-				action: 'click',
-				label: 'arrow_right'
-			}
+	} else {
+		document.querySelector('.js-glider-prev').addEventListener('click', function () {
+			dataLayer.push({
+				event: 'carousel',
+				eventInfo: {
+					category: 'carousel',
+					action: 'click',
+					label: 'arrow_left'
+				}
+			});
 		});
-	});
 
-	[].forEach.call(gliderLinks, function (gliderLink) {
-		gliderLink.addEventListener('click', function () {
-			var linkTarget = gliderLink.href;
-			console.log(linkTarget);
+		document.querySelector('.js-glider-next').addEventListener('click', function () {
 			dataLayer.push({
 				event: 'carousel',
 				eventInfo: {
 					category: 'carousel',
 					action: 'click',
-					label: linkTarget
+					label: 'arrow_right'
 				}
 			});
 		});
-	});
+
+		[].forEach.call(gliderLinks, function (gliderLink) {
+			gliderLink.addEventListener('click', function () {
+				var linkTarget = gliderLink.href;
+				console.log(linkTarget);
+				dataLayer.push({
+					event: 'carousel',
+					eventInfo: {
+						category: 'carousel',
+						action: 'click',
+						label: linkTarget
+					}
+				});
+			});
+		});
+	}
 }
 
 (0, _nodeAdded2.default)('.js-glider-hero', initHeroGlider);

package/dist/organisms/podcast/podcast.js

@@ -100,14 +100,6 @@ document.body.addEventListener('click', function (e) {
 	var playBtn = e.target.closest('.js-play-episode');
 	if (playBtn) {
 		e.preventDefault();
-
-		// Clear old episodedata
-		audio.currentTime = 0;
-		timeupdate();
-		audio.pause();
-		sessionStorage.removeItem('episodeData');
-
-		// Play new episode
 		playEpisode(playBtn);
 	}
 });

package/dist/organisms/timeline/timeline.js

@@ -94,32 +94,27 @@ function isInViewport(element) {
 		top += element.offsetTop;
 	}
 
-	return top < window.scrollY + window.innerHeight && top + height / 4 > window.scrollY;
+	return top < window.pageYOffset + window.innerHeight && top + height > window.pageYOffset;
 }
 
 function decadeIsVisible() {
 	[].forEach.call(decadeSections, function (decadeSection) {
-		// Don't trigger Decade Visible too fast to prevent dataLayer.push
-		// to trigger while user is scrolled past a decade.
-		var timeOut = 1000;
-		var viewTimeout = setTimeout(function () {
-			if (isInViewport(decadeSection) && !decadeSection.classList.contains('is-in-view')) {
-				decadeSection.classList.add('is-in-view');
-				var decadeId = decadeSection.id;
-
-				dataLayer.push({
-					event: 'timeline',
-					eventInfo: {
-						category: 'timeline',
-						action: 'active_year',
-						label: decadeId
-					}
-				});
-			} else if (!isInViewport(decadeSection)) {
-				decadeSection.classList.remove('is-in-view');
-				clearTimeout(viewTimeout);
-			}
-		}, timeOut);
+		if (isInViewport(decadeSection) && !decadeSection.classList.contains('is-in-view')) {
+			decadeSection.classList.add('is-in-view');
+
+			var decade = decadeSection.id;
+
+			dataLayer.push({
+				event: 'timeline',
+				eventInfo: {
+					category: 'timeline',
+					action: 'active_year',
+					label: decade
+				}
+			});
+		} else if (!isInViewport(decadeSection)) {
+			decadeSection.classList.remove('is-in-view');
+		}
 	});
 }
 

package/dist/organisms/video-guide/VideoGuidePlayback.js

@@ -59,15 +59,6 @@ var VideoGuidePlayback = function () {
 			_this.setForwardState(false);
 
 			_this.video.currentTime = 0;
-
-			_this.dataLayer.push({
-				event: 'guided_tour',
-				eventInfo: {
-					category: 'guided_tour',
-					action: 'guide_completed',
-					label: window.location.href
-				}
-			});
 		};
 
 		this.onAbort = function () {
@@ -112,15 +103,6 @@ var VideoGuidePlayback = function () {
 			if (activeCueIndex < cues.length - 1) {
 				_this.video.currentTime = cues[activeCueIndex + 1].startTime + 0.01;
 				_this.updateChapterState();
-
-				_this.dataLayer.push({
-					event: 'guided_tour',
-					eventInfo: {
-						category: 'guided_tour',
-						action: 'player_click',
-						label: 'Forward'
-					}
-				});
 			}
 		};
 
@@ -132,19 +114,9 @@ var VideoGuidePlayback = function () {
 			if (activeCueIndex > 0) {
 				_this.video.currentTime = Math.max(0, cues[activeCueIndex - 1].startTime + 0.01);
 				_this.updateChapterState();
-
-				_this.dataLayer.push({
-					event: 'guided_tour',
-					eventInfo: {
-						category: 'guided_tour',
-						action: 'player_click',
-						label: 'Backward'
-					}
-				});
 			}
 		};
 
-		this.dataLayer = window.dataLayer || [];
 		this.video = video;
 		this.playBtn = element.querySelector('.js-play-btn');
 		this.playIcon = element.querySelector('.js-play-icon');
@@ -191,7 +163,7 @@ var VideoGuidePlayback = function () {
 			var seconds = Math.floor(this.duration % 60);
 			var formattedDuration = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
 
-			this.totaltimeElement.innerText = formattedDuration;
+			this.totaltimeElement.innerText = formattedDuration + ' \u2013 ';
 		}
 	}, {
 		key: 'sync',
@@ -227,30 +199,12 @@ var VideoGuidePlayback = function () {
 		value: function setPlayActive() {
 			this.pauseIcon.classList.remove('is-hidden');
 			this.playIcon.classList.add('is-hidden');
-
-			this.dataLayer.push({
-				event: 'guided_tour',
-				eventInfo: {
-					category: 'guided_tour',
-					action: 'player_click',
-					label: 'Play'
-				}
-			});
 		}
 	}, {
 		key: 'setPauseActive',
 		value: function setPauseActive() {
 			this.pauseIcon.classList.add('is-hidden');
 			this.playIcon.classList.remove('is-hidden');
-
-			this.dataLayer.push({
-				event: 'guided_tour',
-				eventInfo: {
-					category: 'guided_tour',
-					action: 'player_click',
-					label: 'Pause'
-				}
-			});
 		}
 	}, {
 		key: 'setForwardState',

package/dist/organisms/video-guide/VideoGuideSubtitles.js

@@ -32,20 +32,8 @@ var VideoGuideSubtitles = function () {
 		this.toggleSubtitles = function () {
 			_this.subtitlesBtn.classList.toggle('is-active');
 			_this.subtitlesContainer.classList.toggle('is-visible');
-
-			_this.dataLayer.push({
-				event: 'guided_tour',
-				eventInfo: {
-					category: 'guided_tour',
-					action: 'player_click',
-					label: 'Subtitles'
-				}
-			});
-
-			console.log(_this.dataLayer);
 		};
 
-		this.dataLayer = window.dataLayer || [];
 		this.element = element;
 		this.video = video;
 		this.subtitlesBtn = element.querySelector('.js-subtitles-btn');

package/dist/organisms/video-guide/VideoGuideTimeline.js

@@ -25,23 +25,14 @@ var VideoGuideTimeline = function () {
 
 			if (activeCues.length > 0) {
 				var activeCue = activeCues[0];
-				var activePost = _this.posts.find(function (post) {
-					return post.dataset.id === activeCue.text;
-				});
-
-				if (activePost) {
-					_this.posts.forEach(function (post) {
-						post.classList.remove('is-current');
-					});
-
-					activePost.classList.add('is-current');
-				}
 
-				_this.images.forEach(function (post) {
+				_this.posts.forEach(function (post) {
 					if (post.dataset.id === activeCue.text) {
 						post.classList.add('is-current');
 
-						_this.createImageHeadline(activeCue, post);
+						if (post.classList.contains('js-timeline-image') && activeCue.id) {
+							_this.createImageHeadline(activeCue, post);
+						}
 					} else {
 						post.classList.remove('is-current');
 					}
@@ -52,8 +43,7 @@ var VideoGuideTimeline = function () {
 		this.element = element;
 		this.video = video;
 		this.container = element.querySelector('.js-timeline-posts');
-		this.posts = Array.from(element.querySelectorAll('.js-timeline-post:not(.js-timeline-image)'));
-		this.images = Array.from(element.querySelectorAll('.js-timeline-image'));
+		this.posts = Array.from(element.querySelectorAll('.js-timeline-post'));
 		this.toggleBtn = element.querySelector('.js-show-timelineposts');
 		this.headlineTpl = element.querySelector('[data-video-headline-tpl]');
 		this.headlineCache = {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.25.0",
+	"version": "2.25.1-beta.0.1",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/app.js

@@ -73,13 +73,3 @@ const unsubscribeOpen = onOpen((el, id) => {
 });
 
 // Call unsubscribe to remove callback
-
-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/src/app.scss

@@ -67,6 +67,7 @@ $namespace: '';
 @import 'molecules/glider/glider-course';
 @import 'molecules/glider/glider-hero';
 @import 'molecules/continue-video-guide/continue-video-guide';
+@import 'molecules/overview-navigation/overview-navigation';
 
 // Organisms
 @import 'organisms/header/header';

package/src/atoms/button/_button.scss

@@ -317,6 +317,24 @@
 		}
 	}
 
+	@include m(ocean-light) {
+		box-shadow: 0 0 0 1px inset $color-ocean;
+		color: $color-ocean-light;
+
+		&:hover,
+		&:focus {
+			color: $color-ocean;
+		}
+
+		@include e(text) {
+			color: $color-cyberspace;
+		}
+
+		@include e(icon) {
+			fill: $color-cyberspace;
+		}
+	}
+
 	@include m(jade) {
 		color: $color-jade;
 

package/src/atoms/button/button.config.js

@@ -168,7 +168,7 @@ module.exports = {
 		{
 			name: 'Transparent with icon',
 			context: {
-				modifiers: ['transparent a-button--icon'],
+				modifiers: ['transparent'],
 				text: 'Going home',
 				icon: 'arrow-forwards',
 				el: 'button'

package/src/atoms/height-limiter/_height-limiter.scss

@@ -20,6 +20,16 @@
 		}
 	}
 
+	@include m(white) {
+		@include e(inner) {
+			&.is-limited {
+				&::after {
+					background-image: linear-gradient(to bottom, rgba($color-snow, 0) 0%, rgba($color-snow, 1) 100%);
+				}
+			}
+		}
+	}
+
 	@include e(btn) {
 		display: flex;
 		position: relative;

package/src/atoms/hr/hr.config.js

@@ -0,0 +1,42 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		color: null,
+		modifier: null,
+	},
+	variants: [
+		{
+			name: 'alignfull',
+			context: {
+				class: 'alignfull',
+				color: 'color-cyberspace',
+				modifier: 'alignfull',
+			}
+		},
+		{
+			name: 'alignwide',
+			context: {
+				class: 'alignwide',
+				color: 'color-cyberspace',
+				modifier: 'alignwide',
+			}
+		},
+		{
+			name: 'aligncenter',
+			context: {
+				class: null,
+				color: 'color-cyberspace',
+				modifier: 'aligncenter',
+			}
+		},
+		{
+			name: 'alignleft',
+			context: {
+				class: null,
+				color: 'has-cyberspace-color',
+				modifier: 'alignleft',
+			}
+		}
+	]
+}

package/src/atoms/hr/readme.md

@@ -0,0 +1,2 @@
+# Note! 
+Component is using block classes from wordpress instead of Atomic Design methodology

package/src/components.js

@@ -24,6 +24,8 @@ import './molecules/glider/glider-course';
 import './molecules/glider/glider-hero';
 import './molecules/context-menu/context-menu';
 import './molecules/alert/alert';
+import './molecules/modal/modal-graph';
 import './molecules/continue-video-guide/continue-video-guide';
 import './organisms/video-guide/video-guide';
 import './organisms/timeline/timeline';
+import './molecules/overview-navigation/overview-navigation';

package/src/configurations/_extends.scss

@@ -165,3 +165,13 @@
 		fill: $color-cyberspace;
 	}
 }
+
+%is-fixed,
+.is-fixed {
+	position: fixed !important;
+}
+
+%prevent-scroll,
+.prevent-scroll {
+	overflow: hidden !important;
+}

package/src/configurations/_wordpress.scss

@@ -348,3 +348,44 @@ div.aligncenter {
 		margin-top: -#{rhythm(3)};
 	}
 }
+
+.wp-block-separator {
+	display: flex;
+	border-color: currentColor;
+
+	&[class*=align] {
+		height: 22px;
+		background-color: currentColor;
+		--mask:
+			radial-gradient(9.18px at 50% calc(100% + 3.15px),#0000 calc(99% - 3px),#000 calc(101% - 3px) 99%,#0000 101%) calc(50% - 14px) calc(50% - 5px + .5px)/28px 10px repeat-x,
+			radial-gradient(9.18px at 50% -3.15px,#0000 calc(99% - 3px),#000 calc(101% - 3px) 99%,#0000 101%) 50% calc(50% + 5px)/28px 10px repeat-x;
+		-webkit-mask: var(--mask);
+		mask: var(--mask);
+	}
+
+	&.aligncenter {
+		width: 50vw;
+		max-width: rem(469px);
+		margin-top: rhythm(2);
+		margin-bottom: rhythm(2);
+	}
+
+	&.alignleft {
+		margin-left: $indent * 2;
+		float: none;
+		max-width: rem(90px);
+		margin-top: rhythm(2);
+		margin-bottom: rhythm(2);
+	}
+
+	&.alignwide {
+		max-width: none;
+		width: 100%;
+		max-width: 1360px;
+	}
+
+	&.alignfull {
+		max-width: none;
+		width: 100vw;
+	}
+}

package/src/configurations/typography/_typography.scss

@@ -323,6 +323,9 @@ blockquote {
 
 	@include bp-up(sm) {
 		padding-right: rhythm(3);
+		max-width: rem(613px);
+		margin-left: auto;
+		margin-right: auto;
 	}
 
 	@include bp-up(md) {
@@ -331,11 +334,13 @@ blockquote {
 
 		p {
 			@include plumber(
-				$font-size: 3,
+				$font-size: 2.7,
 				$line-height: 4,
 				$leading-bottom: 0,
 				$leading-top: 1
 			);
+
+			line-height: 32px;
 		}
 
 		.meta {
@@ -343,6 +348,11 @@ blockquote {
 			line-height: rhythm(3.5);
 		}
 	}
+
+	@include bp-up(lg) {
+		margin-left: initial;
+		margin-right: initial;
+	}
 }
 
 b,

package/src/molecules/card/_card.scss

@@ -137,14 +137,6 @@
 				padding-left: rhythm(4);
 			}
 		}
-
-		&.wp-block-iis-visualization {
-			@include e(content) {
-				p {
-					margin-top: 0;
-				}
-			}
-		}
 	}
 
 	@include m(bordered) {

package/src/molecules/form/Form.js

@@ -1,5 +1,4 @@
 import template from 'lodash.template';
-import Events from '../../assets/js/Events';
 import Button from '../../atoms/button/Button';
 import className from '../../assets/js/className';
 import validationMessage from '../../assets/js/validationMessage';
@@ -11,7 +10,6 @@ export default class Form {
 		this.submit = new Button(this.element.querySelector('button[type="submit"]'));
 		this.error = this.element.querySelector('[data-form-error]');
 		this.success = this.element.querySelector('[data-form-success]');
-		this.events = new Events();
 
 		if (this.success) {
 			const tpl = document.getElementById(this.success.getAttribute('data-form-success'));
@@ -165,7 +163,6 @@ export default class Form {
 	}
 
 	displayError = (error) => {
-		this.events.emit('error', error);
 		this.setLoading(false);
 
 		if ('response' in error) {
@@ -277,8 +274,6 @@ export default class Form {
 
 		this.success.classList.remove('is-hidden');
 		this.success.innerHTML = tmpl(json);
-
-		this.events.emit('success', json);
 	};
 
 	captchaCallback = () => {

package/src/molecules/form/index.js

@@ -3,7 +3,5 @@ import Form from './Form';
 const elements = document.querySelectorAll('[data-form]');
 
 if (elements.length) {
-	elements.forEach((element) => {
-		element.form = new Form(element);
-	});
+	elements.forEach((element) => new Form(element));
 }

package/src/molecules/glider/_glider-hero.scss

@@ -133,14 +133,6 @@
 	}
 }
 
-.glider {
-	visibility: hidden;
-
-	&[data-glider-initialized="true"] {
-		visibility: visible;
-	}
-}
-
 .glider-slide {
 	width: 100vw;