@internetstiftelsen/styleguide 2.22.3-beta.0.7 → 2.22.4

package/src/molecules/glider/_glider.scss

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-// The Glider components is dependant on JS-classes and is therefore not namespaced
+// The Glider component is dependant on JS-classes and is therefore not namespaced
 
 .glider-contain {
 	display: flex;
@@ -12,6 +12,16 @@
 	padding-left: rhythm(8);
 }
 
+.glider-contain-course {
+	display: flex;
+	position: relative;
+	align-items: center;
+	margin-top: 0;
+	margin-bottom: rhythm(2);
+	padding-left: 0;
+	padding-right: 0;
+}
+
 .glider {
 	position: relative;
 	margin: 0 auto;
@@ -91,17 +101,120 @@
 			}
 		}
 	}
+
+	@include m(course) {
+		margin-left: 0;
+		padding-left: 0;
+		padding-right: 0;
+
+		&::after {
+			display: none;
+		}
+
+		@include e(navigation) {
+			display: flex;
+			justify-content: space-between;
+
+			@include bp-up(lg) {
+				justify-content: flex-start;
+			}
+		}
+
+		@include e(media) {
+
+			&.zoom {
+				pointer-events: none;
+
+				@include bp-up(lg) {
+					pointer-events: auto;
+					cursor: zoom-in;
+					transition: all 0.15s ease-out;
+					position: relative;
+
+					&::after {
+						content: 'Förstora bilden';
+						color: $color-snow;
+						padding: rhythm(1) rhythm(2) rhythm(1) rhythm(4);
+						display: block;
+						position: absolute;
+						top: 0;
+						left: 0;
+						border-top-left-radius: $border-radius;
+						border-bottom-right-radius: $border-radius;
+						width: auto;
+						line-height: 1;
+						height: $icon-size-large * 1.4;
+						background-color: rgba($color-cyberspace, 0.8);
+						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-search' viewbox='0 0 32 32' width='32' height='32' fill='%23ffffff'%3E%3Cpath d='M24,21.8l8,8L29.9,32l-8-8c-5.9,4.6-14.3,3.6-19-2.2S-0.7,7.6,5.1,2.9S19.3-0.7,24,5.1C27.9,10,27.9,16.9,24,21.8L24,21.8z M13.4,23.9c5.8,0,10.5-4.7,10.5-10.5S19.2,3,13.4,3S3,7.7,3,13.4S7.7,23.9,13.4,23.9z'/%3E%3C/svg%3E");
+						background-position: rhythm(1) center;
+						background-size: $icon-size-medium $icon-size-medium;
+						background-repeat: no-repeat;
+
+					}
+
+					img {
+						transition: all 0.25s ease-out;
+					}
+
+					// Image zooming
+					&.is-zoomed {
+						cursor: zoom-out !important;
+						position: fixed;
+						left: 0;
+						right: 0;
+						top: 0;
+						bottom: 0;
+						z-index: z_index(foreground);
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						background-color: rgba($color-cyberspace, 0.8);
+						flex-direction: column;
+
+						&::after {
+							display: none;
+						}
+
+						img {
+							cursor: zoom-out;
+							max-width: 100%;
+							max-height: 100vh;
+							padding: rhythm(1);
+							height: auto;
+						}
+
+						figcaption {
+							max-width: rem(612px);
+							text-align: center;
+							color: $color-snow;
+							padding-left: rhythm(2);
+							padding-right: rhythm(2);
+							margin-bottom: 0 !important;
+							padding-bottom: 0 !important;
+						}
+					}
+				}
+			}
+
+			figcaption {
+				margin-top: rhythm(1);
+			}
+			@include bp-up(lg) {
+				display: flex;
+				flex-direction: column-reverse;
+				margin-top: 0;
+			}
+		}
+	}
 }
 
 .glider-nav {
 	position: absolute;
 	top: 50%;
 	left: 0;
-	z-index: z_index(middleground);
 	transform: translateY(-50%);
 	transition: background-color 0.25s ease-out;
 	user-select: none;
-	cursor: pointer;
 
 	&:focus {
 		background-color: $color-snow;

package/src/molecules/glider/glider-course.js

@@ -1,9 +1,9 @@
 import Glider from 'glider-js';
 
-const gliderElementCourse = document.querySelector('.js-glider-course');
+const gliderElementSingle = document.querySelector('.js-glider-course');
 
-if (gliderElementCourse) {
-	const GliderCourse = new Glider(gliderElementCourse, {
+if (gliderElementSingle) {
+	const GliderSingle = new Glider(gliderElementSingle, {
 		scrollLock: true,
 		slidesToShow: 1,
 		slidesToScroll: 1,
@@ -13,7 +13,7 @@ if (gliderElementCourse) {
 	const prevBtns = document.querySelectorAll('.js-glider-prev');
 	const siteMain = document.querySelector('#siteMain');
 	const zoomImages = document.querySelectorAll('.js-zoom.zoom');
-	let slideIndex = GliderCourse.getCurrentSlide();
+	let slideIndex = GliderSingle.getCurrentSlide();
 	let bounding = 0;
 
 	const scrollTop = () => {
@@ -23,7 +23,7 @@ if (gliderElementCourse) {
 	if (nextBtns) {
 		[].forEach.call(nextBtns, (nextBtn) => {
 			nextBtn.addEventListener('click', () => {
-				GliderCourse.scrollItem(slideIndex += 1, true);
+				GliderSingle.scrollItem(slideIndex += 1, true);
 
 				if (siteMain) {
 					bounding = siteMain.getBoundingClientRect();
@@ -38,7 +38,7 @@ if (gliderElementCourse) {
 	if (prevBtns) {
 		[].forEach.call(prevBtns, (prevBtn) => {
 			prevBtn.addEventListener('click', () => {
-				GliderCourse.scrollItem(slideIndex -= 1, true);
+				GliderSingle.scrollItem(slideIndex -= 1, true);
 
 				if (siteMain) {
 					bounding = siteMain.getBoundingClientRect();
@@ -58,5 +58,5 @@ if (gliderElementCourse) {
 		});
 	}
 
-	module.exports = GliderCourse;
+	module.exports = GliderSingle;
 }

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

@@ -17,13 +17,6 @@ module.exports = {
 			context: {
 				single: true
 			}
-		},
-		{
-			name: 'Hero',
-			status: 'wip',
-			context: {
-				single: true
-			}
 		}
 	]
 }

package/src/organisms/hero/_hero.scss

@@ -376,22 +376,6 @@
 		}
 	}
 
-	@include m(video-wide) {
-		width: 100%;
-
-		@include e(video) {
-			width: 100%;
-			object-fit: cover;
-			object-position: 50% center;
-
-			@include bp-up(sm) {
-				min-height: rem(500px);
-				max-height: 50vh;
-			}
-
-		}
-	}
-
 	// Event
 	@include m(event) {
 		width: 100%;

package/src/organisms/hero/hero.config.js

@@ -77,7 +77,7 @@ module.exports = {
 		},
 		{
 			name: 'Event hero with button',
-			status: 'ready',
+			status: 'wip',
 				context: {
 					event_title: 'Framtidsoptimism och problemlösning i en uppkopplad värld',
 					organizer: 'Heja framtiden',
@@ -113,14 +113,5 @@ module.exports = {
 				has_buttons: false,
 			}
 		},
-		{
-			name: 'Dynamic headline',
-			status: 'wip',
-			context: {
-				has_image: true,
-				hero_image: '/assets/images/Reprogramming_ENIAC2.png',
-				heading: 'Datadamer - Kvinnorna som digitaliserade världen',
-			}
-		},
 	]
 }

package/src/pages/timeline/timeline.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+	status: 'prototype',
+
+	context: {
+		alt: 'Hands typing on laptop',
+		img_url: '/assets/images/ALX_0876.jpg',
+		title: 'Gymnasieskolor med hög bandbredd har bättre skolresultat',
+		url: 'http://www.google.se',
+		exerpt: 'Eget nulla <strong>facilisi etiam</strong> dignissim diam quis enim lobortis scelerisque. Faucibus a pellentesque sit amet porttitor.',
+		is_padded: true,
+		is_wide: true,
+		has_shadow: false,
+		has_button: false,
+		read_time: true,
+		has_border: false,
+		has_image: true,
+		has_radius: true
+	}
+}

package/src/structures/_article.scss

@@ -38,9 +38,9 @@
 			> ul,
 			> ol,
 			> div:not(.wp-block-iis-info):not(.wp-block-image):not(.wp-block-iis-hero):not(.wp-block-iis-grid):not([class*='accordion']),
-			> figure:not(.wp-block-iis-info):not(.wp-block-image):not(.wp-block-iis-hero):not(.wp-block-iis-grid):not([class*='accordion']),
 			> .wp-block-iis-card,
 			> .wp-block-image > figure,
+			> figure,
 			> blockquote {
 				&:not(.alignfull):not(.alignleft):not(.alignright):not(.alignwide) {
 					max-width: calc(#{rem(612px)} + #{($indent * 2)});
@@ -75,8 +75,8 @@
 				> ul,
 				> ol,
 				> div:not(.wp-block-iis-info):not(.wp-block-image):not(.wp-block-iis-hero):not(.wp-block-iis-grid):not([class*='accordion']),
-				> figure:not(.wp-block-iis-info):not(.wp-block-image):not(.wp-block-iis-hero):not(.wp-block-iis-grid):not([class*='accordion']),
 				> .wp-block-iis-card,
+				> figure,
 				> blockquote {
 					&:not(.alignfull):not(.alignleft):not(.alignright):not(.alignwide) {
 						max-width: 46.364%;
@@ -103,8 +103,8 @@
 			> ul,
 			> ol,
 			> div:not(.wp-block-iis-info):not(.wp-block-image):not(.wp-block-iis-hero):not(.wp-block-iis-grid):not([class*='accordion']),
-			> figure:not(.wp-block-iis-info):not(.wp-block-image):not(.wp-block-iis-hero):not(.wp-block-iis-grid):not([class*='accordion']),
 			> .wp-block-iis-card,
+			> figure,
 			> blockquote {
 				&:not(.alignfull):not(.alignleft):not(.alignright):not(.alignwide) {
 					margin-right: $grid-margin-right;

package/dist/assets/js/anchorScroll.js

@@ -1,16 +0,0 @@
-'use strict';
-
-var _smoothScroll = require('smooth-scroll');
-
-var _smoothScroll2 = _interopRequireDefault(_smoothScroll);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var anchorScroll = new _smoothScroll2.default('a[href*="#"]', {
-	speed: 1500,
-	speedAsDuration: true,
-	easing: 'easeOutCubic',
-	ignore: '[data-scroll-ignore]'
-});
-
-module.exports = anchorScroll;

package/dist/assets/js/offset.js

@@ -1,26 +0,0 @@
-"use strict";
-
-module.exports = {
-	// Get top of element relative to window
-	offsetTop: function offsetTop(el) {
-		var rect = el.getBoundingClientRect();
-		var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-		return rect.top + scrollTop;
-	},
-
-
-	// Get bottom of element relative to window
-	offsetBottom: function offsetBottom(el) {
-		var rect = el.getBoundingClientRect();
-		var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-		return rect.bottom + scrollTop;
-	},
-
-
-	// Get left of element relative to window
-	offsetLeft: function offsetLeft(el) {
-		var rect = el.getBoundingClientRect();
-		var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-		return rect.left + scrollLeft;
-	}
-};

package/dist/assets/js/parallax.js

@@ -1,17 +0,0 @@
-'use strict';
-
-function isInView(el) {
-	var box = el.getBoundingClientRect();
-	return box.top < window.innerHeight && box.bottom >= 0;
-}
-
-var parallaxes = document.querySelectorAll('.js-parallax');
-
-window.addEventListener('scroll', function () {
-	[].forEach.call(parallaxes, function (parallax) {
-		var visible = isInView(parallax);
-		if (visible) {
-			parallax.classList.add('animate');
-		}
-	});
-});

package/dist/molecules/continue-video-guide/continue-video-guide.js

@@ -1,91 +0,0 @@
-'use strict';
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _className = require('../../assets/js/className');
-
-var _className2 = _interopRequireDefault(_className);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _CustomElement() {
-	return Reflect.construct(HTMLElement, [], this.__proto__.constructor);
-}
-
-;
-Object.setPrototypeOf(_CustomElement.prototype, HTMLElement.prototype);
-Object.setPrototypeOf(_CustomElement, HTMLElement);
-
-var ProgressRing = function (_CustomElement2) {
-	_inherits(ProgressRing, _CustomElement2);
-
-	function ProgressRing() {
-		_classCallCheck(this, ProgressRing);
-
-		var _this = _possibleConstructorReturn(this, (ProgressRing.__proto__ || Object.getPrototypeOf(ProgressRing)).call(this));
-
-		var stroke = _this.getAttribute('stroke');
-		var radius = _this.getAttribute('radius');
-		var normalizedRadius = radius - stroke * 2;
-		_this.circumference = normalizedRadius * 2 * Math.PI;
-
-		_this.root = _this.attachShadow({ mode: 'open' });
-		_this.root.innerHTML = '\n\t\t<svg\n\t\theight="' + radius * 2 + '"\n\t\twidth="' + radius * 2 + '"\n\t\t>\n\t\t<circle\n\t\tstroke="white"\n\t\tstroke-dasharray="' + _this.circumference + ' ' + _this.circumference + '"\n\t\tstyle="stroke-dashoffset:' + _this.circumference + '"\n\t\tstroke-width="' + stroke + '"\n\t\tfill="transparent"\n\t\tr="' + normalizedRadius + '"\n\t\tcx="' + radius + '"\n\t\tcy="' + radius + '"\n\t\t/>\n\t\t</svg>\n\n\t\t<style>\n\t\tcircle {\n\t\t\ttransition: stroke-dashoffset 0.35s;\n\t\t\ttransform: rotate(-90deg);\n\t\t\ttransform-origin: 50% 50%;\n\t\t}\n\t\t</style>\n\t\t';
-		return _this;
-	}
-
-	_createClass(ProgressRing, [{
-		key: 'setProgress',
-		value: function setProgress(percent) {
-			var offset = this.circumference - percent / 100 * this.circumference;
-			var circle = this.root.querySelector('circle');
-			circle.style.strokeDashoffset = offset;
-		}
-	}, {
-		key: 'attributeChangedCallback',
-		value: function attributeChangedCallback(name, oldValue, newValue) {
-			if (name === 'progress') {
-				this.setProgress(newValue);
-			}
-		}
-	}], [{
-		key: 'observedAttributes',
-		get: function get() {
-			return ['progress'];
-		}
-	}]);
-
-	return ProgressRing;
-}(_CustomElement);
-
-window.customElements.define('progress-ring', ProgressRing);
-
-// Get value from sessionStorage if present
-if (sessionStorage.getItem('InmsCurrentTime')) {
-	var videoCurrentTime = sessionStorage.getItem('InmsCurrentTime');
-	var videoDuration = sessionStorage.getItem('InmsDuration');
-	var continueElement = document.querySelector('.js-guide-continue');
-	var progressRing = document.querySelector('progress-ring');
-	var continueLink = document.querySelector('.js-guide-continue-link');
-	var guideURL = sessionStorage.getItem('InmsCurrentGuideURL');
-	var guideImage = sessionStorage.getItem('InmsCurrentGuideImage');
-
-	if (videoCurrentTime > 0 && progressRing && continueElement && guideImage && continueLink) {
-		var alternativeText = continueLink.dataset.altText;
-		var currentProgress = videoCurrentTime / videoDuration;
-		var currentGuideImage = document.querySelector('.js-guide-continue-image');
-
-		continueElement.classList.add((0, _className2.default)('m-continue-video-guide--has-progress'));
-		continueLink.setAttribute('href', guideURL);
-		currentGuideImage.src = guideImage;
-		continueLink.querySelector('span').innerText = alternativeText;
-		// Calculate percentage played
-		progressRing.setAttribute('progress', Math.floor(currentProgress * 100));
-	}
-}

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

@@ -1,23 +0,0 @@
-'use strict';
-
-var _gliderJs = require('glider-js');
-
-var _gliderJs2 = _interopRequireDefault(_gliderJs);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var gliderElementHero = document.querySelector('.js-glider-hero');
-
-if (gliderElementHero) {
-	var GliderHero = new _gliderJs2.default(gliderElementHero, {
-		scrollLock: true,
-		slidesToShow: 1,
-		slidesToScroll: 1,
-		arrows: {
-			prev: '.js-glider-prev',
-			next: '.js-glider-next'
-		}
-	});
-
-	module.exports = GliderHero;
-}

package/dist/organisms/timeline/timeline.js

@@ -1,154 +0,0 @@
-'use strict';
-
-require('../../assets/js/parallax');
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-var _require = require('../../assets/js/offset'),
-    offsetTop = _require.offsetTop,
-    offsetBottom = _require.offsetBottom,
-    offsetLeft = _require.offsetLeft;
-
-var progressBar = document.querySelector('.js-progress-bar');
-var decadeContainer = document.querySelector('.js-decade-container');
-var decadeSections = document.querySelectorAll('.js-timeline-decade');
-var firstDecade = document.querySelector('h2.godzilla');
-var decades = document.querySelectorAll('h2.godzilla');
-var triggerPoint = 0;
-
-// Create decade links in timeline
-function buildTimelineNavigation() {
-	[].forEach.call(decades, function (decade) {
-		var decadeLink = document.createElement('a');
-		var textContent = decade.textContent;
-
-		decadeLink.setAttribute('href', '#' + textContent);
-		decadeLink.innerText = textContent;
-		decadeContainer.appendChild(decadeLink);
-	});
-}
-
-/* Set trigger point (vertical position in viewport)
-for when a new decade should start being "active" */
-function setTriggerPoint() {
-	triggerPoint = window.innerHeight * 0.5;
-}
-
-// Animate progress bar when user is scolling within the timeline
-function animateProgressBar() {
-	var currentSection = 0;
-	var sectionIndex = 0;
-	var currentPosition = document.documentElement.scrollTop + triggerPoint;
-	var decadeLinks = document.querySelectorAll('.js-decade-container a');
-	var progressBarWidth = 0;
-
-	// Check if we are above the first section
-	if (currentPosition < offsetTop(firstDecade)) {
-		currentSection = 0;
-		progressBarWidth = 0;
-		progressBar.style.width = '0';
-
-		[].forEach.call(decadeLinks, function (decadeLink) {
-			decadeLink.classList.remove('is-reading');
-		});
-	} else {
-		// Otherwise add 1 to sectionIndex while scrolling;
-		[].forEach.call(decades, function (decade) {
-			var sectionTop = offsetTop(decade);
-
-			if (currentPosition >= sectionTop) {
-				currentSection = sectionIndex;
-
-				[].forEach.call(decadeLinks, function (decadeLink) {
-					decadeLink.classList.remove('is-reading');
-				});
-
-				decadeLinks[sectionIndex].classList.add('is-reading');
-			}
-
-			sectionIndex += 1;
-		});
-	}
-
-	// Calculate speed of the progressBar width while scrolling based on section height
-	var startPoint = decadeLinks[currentSection];
-	var startPointX = offsetLeft(startPoint);
-	var startPointWidth = startPoint.offsetWidth;
-	var startSection = decadeSections[currentSection];
-	var startSectionY = offsetTop(startSection);
-	var endSectionY = offsetBottom(startSection);
-	var sectionLength = endSectionY - startSectionY;
-	var scrollY = currentPosition - startSectionY;
-	var sectionProgress = scrollY / sectionLength;
-	progressBarWidth = startPointX + startPointWidth * sectionProgress;
-
-	// Use result to animate progressbar
-	progressBar.style.width = progressBarWidth + 'px';
-}
-
-// Run functions on page load
-if (progressBar) {
-	buildTimelineNavigation();
-	setTriggerPoint();
-	animateProgressBar();
-
-	// Re-run functions on window events
-	window.addEventListener('resize', function () {
-		setTriggerPoint();
-		animateProgressBar();
-	});
-	window.addEventListener('scroll', function () {
-		animateProgressBar();
-	});
-}
-
-// DUMMY TIMELINE ITEM OPEN/CLOSE
-function wrap(el, wrapper) {
-	el.parentNode.insertBefore(wrapper, el);
-	wrapper.classList.add('wrapper');
-	wrapper.appendChild(el);
-}
-
-var timeLineItems = document.querySelectorAll('.js-timeline-item');
-var timeLineItemScrollPosition = 0;
-
-[].forEach.call(timeLineItems, function (timeLineItem) {
-	var timeLineItemLink = timeLineItem.querySelector('a');
-	var timeLineItemClose = timeLineItem.querySelector('.js-timeline-item-close');
-	var timeLineItemBottomClose = timeLineItem.querySelector('.js-timeline-item-bottom-close');
-
-	timeLineItemLink.addEventListener('click', function () {
-		timeLineItemScrollPosition = window.pageYOffset;
-		sessionStorage.setItem('scroll-position', timeLineItemScrollPosition);
-
-		if (!timeLineItem.classList.contains('is-open')) {
-			timeLineItem.classList.add('is-open');
-			timeLineItem.closest('.row').classList.add('row-has-open-child');
-
-			// Wrap open timeline item
-			wrap(timeLineItem.querySelector('.wp-block-iis-card'), document.createElement('div'));
-		}
-	});
-
-	timeLineItemClose.addEventListener('click', function () {
-		timeLineItem.classList.remove('is-open');
-		timeLineItem.closest('.row').classList.remove('row-has-open-child');
-
-		// Destroy generated wrapper
-		var wrapper = timeLineItemClose.nextElementSibling;
-		wrapper.replaceWith.apply(wrapper, _toConsumableArray(wrapper.childNodes));
-
-		var top = sessionStorage.getItem('scroll-position');
-		if (top !== null) {
-			window.scrollTo(0, parseInt(top, 10));
-		}
-		sessionStorage.removeItem('scroll-position');
-
-		// Trigger scroll event to reveal timeline items not yet parallaxed into view
-		window.dispatchEvent(new CustomEvent('scroll'));
-	});
-
-	timeLineItemBottomClose.addEventListener('click', function () {
-		timeLineItemClose.click();
-	});
-});