@internetstiftelsen/styleguide 2.22.4 → 2.23.0

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

@@ -0,0 +1,312 @@
+'use strict';
+
+var video = document.querySelector('.js-video-guide');
+var playBtn = document.querySelector('.js-play-btn');
+var playIcon = document.querySelector('.js-play-icon');
+var pauseIcon = document.querySelector('.js-pause-icon');
+var subtitlesBtn = document.querySelector('.js-subtitles-btn');
+var abortButton = document.querySelector('.js-abort-guide');
+var subtitlesElement = document.getElementById('video-subtitles');
+var subtitlesContainer = document.querySelector('.js-subtitles-container');
+var locationList = document.querySelector('.js-chapters');
+var chapterTrackElement = document.getElementById('video-chapters');
+var trackMetadataElement = document.getElementById('video-metadata');
+var subtitlesTrack = subtitlesElement === null ? '' : subtitlesElement.track;
+var chapterTrack = chapterTrackElement === null ? '' : chapterTrackElement.track;
+var metadataTrack = trackMetadataElement === null ? '' : trackMetadataElement.track;
+var forwardsButton = document.querySelector('.js-next-chapter');
+var backwardsButton = document.querySelector('.js-previous-chapter');
+var timelinePosts = document.querySelectorAll('.js-timeline-post');
+var navigationButton = document.querySelector('.js-show-timelineposts');
+var timeLinePosts = document.querySelector('.js-timeline-posts');
+var currentChapter = 1;
+var manualStep = false;
+var sourceElement = null;
+
+// Has src attributes been set already?
+if (sourceElement) {
+	document.location.reload();
+} else if (video) {
+	var dataSrc = video.dataset.src;
+
+	sourceElement = document.createElement('source');
+	sourceElement.setAttribute('src', dataSrc);
+	sourceElement.setAttribute('type', 'video/mp4');
+
+	video.appendChild(sourceElement);
+
+	// Store current time in on page reload
+	window.addEventListener('unload', function () {
+		// Set localStorage if video has started playing
+		if (video.currentTime > 0) {
+			var currentGuideURL = window.location.href;
+			var currentGuideImage = document.querySelector('.js-guide-continue-image').src;
+			localStorage.setItem('InmsCurrentTime', video.currentTime);
+			localStorage.setItem('InmsDuration', video.duration); // Get totalt duration of video
+			localStorage.setItem('InmsCurrentGuideURL', currentGuideURL);
+			localStorage.setItem('InmsCurrentGuideImage', currentGuideImage);
+		}
+	});
+
+	// Get value from localStorage in present
+	if (localStorage.getItem('InmsCurrentTime')) {
+		var videoCurrentTime = localStorage.getItem('InmsCurrentTime');
+
+		if (videoCurrentTime > 0) {
+			video.currentTime = videoCurrentTime;
+		}
+	}
+
+	// Toggle subtitles
+	if (subtitlesBtn) {
+		subtitlesBtn.addEventListener('click', function () {
+			subtitlesBtn.classList.toggle('is-active');
+			subtitlesContainer.classList.toggle('is-visible');
+		});
+	}
+
+	// Play / pause
+	if (playBtn) {
+		playBtn.addEventListener('click', function () {
+			if (video.paused) {
+				video.play();
+				pauseIcon.classList.remove('is-hidden');
+				playIcon.classList.add('is-hidden');
+				manualStep = false;
+			} else {
+				video.pause();
+				pauseIcon.classList.add('is-hidden');
+				playIcon.classList.remove('is-hidden');
+				manualStep = true;
+			}
+		});
+
+		video.addEventListener('playing', function () {
+			pauseIcon.classList.remove('is-hidden');
+			playIcon.classList.add('is-hidden');
+			manualStep = false;
+		});
+
+		video.addEventListener('ended', function () {
+			pauseIcon.classList.add('is-hidden');
+			playIcon.classList.remove('is-hidden');
+			video.currentTime = 0;
+			currentChapter = 1;
+			manualStep = false;
+			forwardsButton.removeAttribute('disabled');
+			subtitlesContainer.innerHTML = '';
+			localStorage.removeItem('InmsCurrentTime');
+			localStorage.removeItem('InmsDuration');
+			localStorage.removeItem('InmsCurrentGuideURL');
+			localStorage.removeItem('InmsCurrentGuideImage');
+		});
+	}
+
+	if (abortButton) {
+		abortButton.addEventListener('click', function (e) {
+			e.preventDefault();
+			var urlTarget = abortButton.getAttribute('href');
+			video.pause();
+			video.currentTime = 0;
+			forwardsButton.removeAttribute('disabled');
+			currentChapter = 1;
+			manualStep = false;
+			localStorage.removeItem('InmsCurrentTime');
+			localStorage.removeItem('InmsDuration');
+			localStorage.removeItem('InmsCurrentGuideURL');
+			localStorage.removeItem('InmsCurrentGuideImage');
+			window.location.href = urlTarget;
+		});
+	}
+
+	if (navigationButton) {
+		navigationButton.addEventListener('click', function () {
+			navigationButton.classList.toggle('is-toggeled');
+			timeLinePosts.classList.toggle('is-visible');
+		});
+	}
+}
+
+function displayChapters() {
+	if (chapterTrackElement && trackMetadataElement) {
+		// Set all track elements to hidden mode to allow scripting
+		[].forEach.call(video.textTracks, function (txtTrack) {
+			txtTrack.mode = 'hidden';
+		});
+
+		if (chapterTrack.kind === 'chapters') {
+			video.addEventListener('loadedmetadata', function () {
+				// Loop through chapters and create chapter list
+				// Let data load
+				setTimeout(function () {
+					video.classList.remove('is-loading');
+					[].forEach.call(chapterTrack.cues, function (cues) {
+						var chapterName = cues.text;
+						var start = cues.startTime;
+						var newLocale = document.createElement('li');
+						var location = document.createElement('a');
+
+						location.setAttribute('rel', start);
+						newLocale.setAttribute('id', start);
+						location.setAttribute('tabindex', '0');
+
+						// Plain text from the chapter file into HTML text
+						var localeDescription = chapterName;
+						location.innerHTML = localeDescription;
+						newLocale.appendChild(location);
+						locationList.appendChild(newLocale);
+
+						location.addEventListener('click', function () {
+							video.currentTime = location.id;
+						}, false);
+					});
+
+					// If not set in sessionStorgare, set first cue on forward button on page load
+					if (!localStorage.getItem('InmsCurrentTime')) {
+						forwardsButton.setAttribute('data-id', chapterTrack.cues[0].endTime);
+					}
+				}, 100);
+			});
+
+			forwardsButton.addEventListener('click', function () {
+				var dataId = forwardsButton.dataset.id;
+				var currentTime = parseInt(dataId, 10);
+				manualStep = true;
+				currentTime += 1;
+				video.currentTime = currentTime;
+				currentChapter += 1;
+			});
+
+			backwardsButton.addEventListener('click', function () {
+				var dataId = backwardsButton.dataset.id;
+				var lastTime = parseInt(dataId, 10);
+				lastTime -= 1;
+				video.currentTime = lastTime;
+				forwardsButton.removeAttribute('disabled');
+				manualStep = true;
+				currentChapter -= 1;
+
+				if (video.currentTime <= 0) {
+					backwardsButton.removeAttribute('data-id');
+				}
+			});
+
+			chapterTrack.addEventListener('cuechange', function () {
+				// Fire this whenever the chapters changes
+				var myCues = chapterTrack.activeCues;
+				if (myCues.length > 0) {
+					var currentLocation = chapterTrack.activeCues[0].startTime;
+					var nextLocation = chapterTrack.activeCues[0].endTime;
+					var cueMatch = chapterTrack.activeCues[0].text;
+					var matchingCueArray = document.querySelectorAll('[rel="' + currentLocation + '"]');
+
+					// Set Forward and backwards buttons timestamps
+					forwardsButton.setAttribute('data-id', nextLocation);
+					backwardsButton.setAttribute('data-id', currentLocation);
+
+					// Add chapter stepping even when video is played
+					if (manualStep === false) {
+						currentChapter += 1;
+					}
+
+					// Disable forwardsbutton when on last chapter
+					if (currentChapter >= chapterTrack.cues.length) {
+						forwardsButton.setAttribute('disabled', 'disabled');
+					}
+
+					// Handle current and watched items
+					[].forEach.call(matchingCueArray, function (matchingCue) {
+						var thisChapter = matchingCue;
+						if (thisChapter.innerHTML === cueMatch) {
+							var chapter = thisChapter;
+
+							if (chapter === thisChapter) {
+								// get the chapter <li> elements based on the currentLocation
+								var locations = [].slice.call(chapter.closest('figure').querySelectorAll('.js-chapters li'));
+
+								var counter = 0;
+
+								[].forEach.call(locations, function (location) {
+									// remove current classes from all items on page refresh
+									location.classList.remove('is-current-item');
+									location.querySelector('a').classList.remove('is-current');
+
+									if (location.classList.contains('is-current-item')) {
+										counter += 1; // iterate counter when active chapter is reached
+									}
+									if (counter < 1) {
+										// add watched class to everything before the current chapter to show progress
+										location.classList.add('is-watched');
+									} else {
+										// remove watched on all other items
+										location.classList.remove('is-watched');
+									}
+								});
+								chapter.parentNode.classList.add('is-current-item');
+								chapter.classList.add('is-current');
+							}
+						}
+					});
+				}
+			}, false);
+
+			// Get timeline post IDs from metadata.vtt
+			metadataTrack.addEventListener('cuechange', function () {
+				var metadataCues = metadataTrack.activeCues;
+				var chapterCues = chapterTrack.activeCues[0];
+
+				if (metadataCues.length > 0) {
+					var metadataCueMatch = metadataTrack.activeCues[0].text;
+
+					[].forEach.call(timelinePosts, function (timelinePost) {
+						timelinePost.classList.remove('is-current');
+					});
+
+					var idSelectors = document.querySelectorAll('[data-id="' + metadataCueMatch + '"]');
+
+					[].forEach.call(idSelectors, function (idSelector) {
+						idSelector.classList.add('is-current');
+						idSelector.focus();
+					});
+
+					if (chapterCues) {
+						var chapterStartTime = chapterCues.startTime;
+
+						// Let stuff load
+						var listElement = void 0;
+						var timeOut = null;
+
+						setTimeout(function () {
+							listElement = document.getElementById(chapterStartTime);
+						}, 100);
+
+						timeOut = function wait(condition, callback) {
+							if (typeof condition() !== 'undefined' && listElement) {
+								listElement.classList.add('is-current-item');
+							} else {
+								setTimeout(function () {
+									wait(condition, callback);
+								}, 0);
+							}
+						};
+						timeOut(function () {
+							return listElement;
+						}, function () {});
+					}
+				}
+			}, false);
+
+			// Get subtitles cues from subtitles.vtt
+			subtitlesTrack.addEventListener('cuechange', function () {
+				var subtitlesCues = subtitlesTrack.activeCues;
+
+				if (subtitlesCues.length > 0) {
+					var subtitlesCuesMatch = subtitlesTrack.activeCues[0].text;
+					subtitlesContainer.innerHTML = '<span>' + subtitlesCuesMatch + '</span>';
+				}
+			}, false);
+		}
+	}
+}
+
+displayChapters(chapterTrackElement);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.22.4",
+	"version": "2.23.0",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"
@@ -26,13 +26,15 @@
 		"watch:icons": "onchange 'src/atoms/icon/*.svg' -- npm run create-icons-config",
 		"watch": "concurrently \"npm:watch:css\" \"npm:watch:js\" \"npm:watch:icons\"",
 		"copy:images": "copyfiles -f src/assets/images/* public/assets/images",
+		"copy:videos": "copyfiles -f src/assets/video/* public/assets/video",
 		"copy:fonts": "copyfiles -f src/base/fonts/* public/assets/fonts",
 		"copy:zip": "copyfiles -f src/assets/zip/* public/assets/zip",
-		"copy:local-assets": "npm run copy:images && npm run copy:fonts && npm run copy:zip",
+		"copy:local-assets": "npm run copy:images && npm run copy:fonts && npm run copy:videos && npm run copy:zip",
 		"copy:images:build": "copyfiles -f src/assets/images/* build/assets/images",
+		"copy:videos:build": "copyfiles -f src/assets/video/* build/assets/video",
 		"copy:zip:build": "copyfiles -f src/assets/zip/* build/assets/zip",
 		"copy:fonts:build": "copyfiles -f src/base/fonts/* build/assets/fonts",
-		"copy:build": "npm run copy:images:build && npm run copy:zip:build && npm run copy:fonts:build",
+		"copy:build": "npm run copy:images:build && npm run copy:zip:build && npm run copy:fonts:build && npm run copy:videos:build",
 		"build": "npm run build:css && npm run build:js && npm run uglify && npm run build:fractal && npm run copy:build",
 		"dev": "concurrently \"npm:start:fractal\" \"npm:watch\" \"npm:copy:local-assets\"",
 		"package-js": "NODE_ENV=production babel src --out-dir dist --ignore src/**/*.config.js,src/app.js",
@@ -48,6 +50,8 @@
 		"babel-eslint": "^10.0.3",
 		"babel-plugin-syntax-dynamic-import": "^6.18.0",
 		"babel-plugin-transform-class-properties": "^6.24.1",
+		"babel-plugin-transform-custom-element-classes": "^0.1.0",
+		"babel-plugin-transform-es2015-classes": "^6.24.1",
 		"babel-plugin-transform-object-rest-spread": "^6.26.0",
 		"babel-preset-env": "^1.7.0",
 		"browserify": "^16.5.0",

package/src/app.scss

@@ -42,7 +42,6 @@ $namespace: '';
 @import 'atoms/ribbon/ribbon';
 @import 'atoms/quote/quote';
 @import 'atoms/rating/rating';
-@import 'atoms/timeline/timeline';
 
 // Molecules
 @import 'molecules/breadcrumb/breadcrumb';
@@ -65,13 +64,15 @@ $namespace: '';
 @import 'molecules/icon-overlay/icon-overlay';
 @import 'molecules/submenu/submenu';
 @import 'molecules/glider/glider';
-@import 'molecules/timeline-navigation/timeline-navigation';
+@import 'molecules/glider/glider-course';
+@import 'molecules/glider/glider-hero';
 
 // Organisms
 @import 'organisms/header/header';
 @import 'organisms/footer/footer';
 @import 'organisms/mega-menu/mega-menu';
 @import 'organisms/hero/hero';
+@import 'organisms/hero/hero--dynamic-headline';
 @import 'organisms/sections/sections';
 @import 'organisms/accordion/accordion';
 @import 'organisms/domain-search/domain-search';

package/src/assets/js/anchorScroll.js

@@ -0,0 +1,10 @@
+import SmoothScroll from 'smooth-scroll';
+
+const anchorScroll = new SmoothScroll('a[href*="#"]', {
+	speed: 1500,
+	speedAsDuration: true,
+	easing: 'easeOutCubic',
+	ignore: '[data-scroll-ignore]',
+});
+
+module.exports = anchorScroll;

package/src/assets/js/offset.js

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

package/src/assets/js/parallax.js

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

package/src/assets/video/chapters.vtt

@@ -0,0 +1,25 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:39.000
+Kapitel 1 / 8: Introduktion
+
+00:00:39.000 --> 00:01:51.500
+Kapitel 2 / 8: Idén om internet
+
+00:01:51.500 --> 00:02:53.000
+Kapitel 3 / 8: Arpanet blir till
+
+00:02:53.000 --> 00:03:27.000
+Kapitel 4 / 8: TCP/IP uppfinns
+
+00:03:27.000 --> 00:03:56.500
+Kapitel 5 / 8: Sveriges första internetnod
+
+00:03:56.500 --> 00:04:34.000
+Kapitel 6 / 8: Toppdomänen .se registreras
+
+00:04:34.000 --> 00:05:17.000
+Kapitel 7 / 8: World Wide Web
+
+00:05:17.000 --> 00:06:28.000
+Kapitel 8 / 8: Mosaic - den grafiska webbläsaren

package/src/assets/video/metadata.vtt

@@ -0,0 +1,28 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:25.000
+6513
+
+00:00:25.000 --> 00:00:39.000
+5555
+
+00:00:39.000 --> 00:01:51.500
+1376
+
+00:01:51.500 --> 00:02:23.000
+666
+
+00:02:23.000 --> 00:03:27.000
+777
+
+00:03:27.000 --> 00:03:56.500
+888
+
+00:03:56.500 --> 00:04:34.000
+242
+
+00:04:34.000 --> 00:05:17.000
+1337
+
+00:05:17.000 --> 00:06:28.000
+1177

package/src/assets/video/videoplayer.vtt

@@ -0,0 +1,25 @@
+WEBVTT
+
+1
+00:00:00.500 --> 00:00:02.000
+Lorem ipsum dolor sit amet, consectetur adipiscing elit
+
+2
+00:00:02.100 --> 00:00:03.000
+Phasellus eget lorem dui
+
+3
+00:00:03.100 --> 00:00:04.500
+Morbi ac nisi ac purus maximus semper a vitae diam fusce sit amet libero non tortor
+
+4
+00:00:04.600 --> 00:00:05.500
+Ut scelerisque sagittis justo vitae viverra
+
+5
+00:00:05.600 --> 00:00:06.500
+unc blandit justo sed odio tempus ultrices. Pellentesque sollicitudin justo.
+
+6
+00:00:06.100 --> 00:00:08.000
+Etiam ut volutpat tortor. Nunc iaculis luctus sapien.

package/src/atoms/button/_button.scss

@@ -64,7 +64,6 @@
 
 	@include e(text) {
 		position: relative;
-		top: -#{rhythm(0.2)};
 		transform: translateY(0);
 		transition: 0.3s opacity, 0.3s transform;
 		transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
@@ -172,8 +171,8 @@
 
 		@include e(icon) {
 			position: static;
-			width: $icon-size-medium;
-			height: $icon-size-medium;
+			width: $icon-size;
+			height: $icon-size;
 			transform: none;
 			fill: $color-cyberspace;
 		}
@@ -246,22 +245,20 @@
 		}
 	}
 
-	@include m(sandstone) {
-		color: $color-sandstone;
+	@include m(snow) {
+		color: transparent;
 
 		&:hover,
 		&:focus {
-			color: darken($color-sandstone, 12%);
-			text-shadow: none;
+			color: $color-snow;
 		}
 
 		@include e(text) {
 			color: $color-snow;
-			text-shadow: 0 0 rhythm(2) $color-sandstone-dark;
 		}
 
 		@include e(icon) {
-			fill: $color-cyberspace;
+			fill: $color-snow;
 		}
 	}
 

package/src/atoms/icon/spinner-white.svg

@@ -1,9 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="icon-spinner-white" viewbox="0 0 100 100" class="spinner" width="100" height="100">
-	<g>
-		<circle cx="50" cy="50" fill="none" r="43" stroke="none" stroke-width="7"></circle>
-		<circle cx="50" cy="50" fill="none" r="43" stroke="#fff" stroke-width="7" stroke-linecap="square" transform="rotate(27.6965 50 50)">
-			<animatetransform attributename="transform" type="rotate" calcmode="linear" values="0 50 50;180 50 50;720 50 50" keytimes="0;0.5;1" dur="2.5s" begin="0s" repeatcount="indefinite"></animatetransform>
-			<animate attributename="stroke-dasharray" calcmode="linear" values="9.42477796076938 179.0707812546182;188.4955592153876 -2.842170943040401e-14;9.42477796076938 179.0707812546182" keytimes="0;0.5;1" dur="2.5" begin="0s" repeatcount="indefinite"></animate>
-		</circle>
-	</g>
-</svg>
+<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ring" style="background: none;"><circle cx="50" cy="50" ng-attr-r="{{config.radius}}" ng-attr-stroke="{{config.base}}" ng-attr-stroke-width="{{config.width}}" fill="none" r="43" stroke="transparent" stroke-width="7"></circle><circle cx="50" cy="50" ng-attr-r="{{config.radius}}" ng-attr-stroke="{{config.stroke}}" ng-attr-stroke-width="{{config.innerWidth}}" ng-attr-stroke-linecap="{{config.linecap}}" fill="none" r="43" stroke="#ffffff" stroke-width="7" stroke-linecap="square" transform="rotate(27.6965 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" dur="2.5s" begin="0s" repeatCount="indefinite"></animateTransform><animate attributeName="stroke-dasharray" calcMode="linear" values="9.42477796076938 179.0707812546182;188.4955592153876 -2.842170943040401e-14;9.42477796076938 179.0707812546182" keyTimes="0;0.5;1" dur="2.5" begin="0s" repeatCount="indefinite"></animate></circle></svg>

package/src/atoms/icon/spinner.svg

@@ -1,9 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="icon-spinner" viewbox="0 0 100 100" class="spinner" width="100" height="100">
-	<g>
-		<circle cx="50" cy="50" fill="none" r="43" stroke="#50b2fc" stroke-width="7"></circle>
-		<circle cx="50" cy="50" fill="none" r="43" stroke="#a7d8fd" stroke-width="7" stroke-linecap="square" transform="rotate(27.6965 50 50)">
-			<animatetransform attributename="transform" type="rotate" calcmode="linear" values="0 50 50;180 50 50;720 50 50" keytimes="0;0.5;1" dur="2.5s" begin="0s" repeatcount="indefinite"></animatetransform>
-			<animate attributename="stroke-dasharray" calcmode="linear" values="9.42477796076938 179.0707812546182;188.4955592153876 -2.842170943040401e-14;9.42477796076938 179.0707812546182" keytimes="0;0.5;1" dur="2.5" begin="0s" repeatcount="indefinite"></animate>
-		</circle>
-	</g>
-</svg>
+<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ring" style="background: none;"><circle cx="50" cy="50" ng-attr-r="{{config.radius}}" ng-attr-stroke="{{config.base}}" ng-attr-stroke-width="{{config.width}}" fill="none" r="43" stroke="#a7d8fd" stroke-width="7"></circle><circle cx="50" cy="50" ng-attr-r="{{config.radius}}" ng-attr-stroke="{{config.stroke}}" ng-attr-stroke-width="{{config.innerWidth}}" ng-attr-stroke-linecap="{{config.linecap}}" fill="none" r="43" stroke="#50b2fc" stroke-width="7" stroke-linecap="square" transform="rotate(27.6965 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" dur="2.5s" begin="0s" repeatCount="indefinite"></animateTransform><animate attributeName="stroke-dasharray" calcMode="linear" values="9.42477796076938 179.0707812546182;188.4955592153876 -2.842170943040401e-14;9.42477796076938 179.0707812546182" keyTimes="0;0.5;1" dur="2.5" begin="0s" repeatCount="indefinite"></animate></circle></svg>

package/src/atoms/icon/sprite.svg

@@ -155,10 +155,16 @@
 			<path d="M16.6 4.1V1l-4.5 4.5 4.5 4.5V7c5.6.3 10 4.9 10 10.6 0 5.9-4.8 10.6-10.6 10.6S5.4 23.4 5.4 17.5c0-3.5 1.8-6.8 4.7-8.8L8.5 6.4c-3.7 2.5-5.9 6.7-5.9 11.2C2.5 25 8.6 31 16 31s13.5-6 13.5-13.5c0-7.2-5.8-13.1-12.9-13.4z"/>
 			<path d="M12.5 14.5c0 .2-.1.5-.6.5h-1.1v1.3h1.6v4.8H14v-7.2h-1.5v.6zM18.7 16c-.3 0-.6 0-.8.1l.2-.8H21v-1.5h-4.1l-.9 4 1.4.4.1-.1c.2-.3.6-.6 1-.6.7 0 1.1.5 1.1 1.1 0 .6-.4 1.1-1.1 1.1-.8 0-1-.6-1.2-1.1v-.2l-1.5.4v.2c.3 1.3 1.4 2.2 2.6 2.2 1.5 0 2.7-1.2 2.7-2.6.1-1.4-1.1-2.6-2.4-2.6z"/>
 		</symbol>
+		<symbol id="icon-step-backwards" viewbox="0 0 32 32">
+			<path d="m25.7 28.9-14.2-13 14.2-13v26zM9.753 28h-5V3h5z"/>
+		</symbol>
 		<symbol id="icon-play" viewbox="0 0 32 32">
 			<path d="M16 28.5c6.9 0 12.5-5.6 12.5-12.5S22.9 3.5 16 3.5 3.5 9.1 3.5 16 9.1 28.5 16 28.5m0 3C7.4 31.5.5 24.6.5 16S7.4.5 16 .5 31.5 7.4 31.5 16 24.6 31.5 16 31.5"/>
 			<path d="M11.7 8.2l11.4 7.7-11.4 7.7z"/>
 		</symbol>
+		<symbol id="icon-step-forwards" viewbox="0 0 32 32">
+			<path d="m4.8 2.9 14.2 13-14.2 13v-26zM20.7 3.1h5v25h-5z"/>
+		</symbol>
 		<symbol id="icon-forward-60" viewbox="0 0 32 32">
 			<path d="M15.4 4.1V1l4.5 4.5-4.5 4.5V7c-5.6.2-10.1 4.9-10.1 10.5 0 5.9 4.8 10.6 10.7 10.6s10.7-4.8 10.7-10.6c0-3.5-1.8-6.8-4.7-8.8l1.6-2.3c3.7 2.5 6 6.7 6 11.2C29.5 25 23.4 31 16 31S2.5 25 2.5 17.5c0-7.2 5.7-13.1 12.9-13.4z"/>
 			<path d="M14.2 16.3c-.2-.1-.5-.1-.7-.2l1.4-2.2H13l-2.1 3.4c-.3.4-.4.9-.4 1.4 0 1.4 1.2 2.6 2.7 2.6 1.5 0 2.7-1.2 2.7-2.6 0-1.1-.7-2-1.7-2.4zm-1 3.4c-.6 0-1.1-.5-1.1-1.1 0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1 0 .7-.5 1.1-1.1 1.1zM18.9 13.8c-2.5 0-2.5 2.8-2.5 3.7 0 2.5.9 3.7 2.6 3.7 1.6 0 2.5-1.3 2.5-3.7 0-2.4-.9-3.7-2.6-3.7zm0 1.6c.9 0 .9 1 .9 2.2 0 1.2-.1 2.2-.9 2.2-.9 0-1-1-1-2.2.1-1.3.2-2.2 1-2.2z"/>
@@ -166,6 +172,17 @@
 		<symbol id="icon-pause" viewbox="0 0 32 32">
 			<path d="M6 3h8v26H6zM18 3h8v26h-8z"/>
 		</symbol>
+		<symbol id="icon-subtitles" viewbox="0 0 32 32">
+			<path d="M27 10v12H5V10h22m3-3H2v18h28V7z"/>
+			<path d="M25 19h-4"/>
+			<path d="M21 18h4v2h-4z"/>
+			<path d="M19 19H7"/>
+			<path d="M7 18h12v2H7z"/>
+			<path d="M7 15h4"/>
+			<path d="M7 14h4v2H7z"/>
+			<path d="M13 15h12"/>
+			<path d="M13 14h12v2H13z"/>
+		</symbol>
 		<symbol id="icon-author" viewbox="0 0 32 32">
 			<path d="M4 29h24v2H4zM10.3 26H4v-6.3L22.1 1.6l6.3 6.3L10.3 26zM6 24h3.5L25.6 7.9l-3.5-3.5L6 20.5V24z"/>
 			<path d="M17.07 6.69l1.414-1.414 6.293 6.293-1.414 1.415z"/>

package/src/atoms/icon/step-backwards.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32" xml:space="preserve"><path d="m25.7 28.9-14.2-13 14.2-13v26zM9.753 28h-5V3h5z"/></svg>

package/src/atoms/icon/step-forwards.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32" xml:space="preserve"><path d="m4.8 2.9 14.2 13-14.2 13v-26zM20.7 3.1h5v25h-5z"/></svg>

package/src/atoms/icon/subtitles.svg

@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 32 32" width="32" height="32" xml:space="preserve"><path d="M27 10v12H5V10h22m3-3H2v18h28V7z"/><path class="st0" d="M25 19h-4"/><path d="M21 18h4v2h-4z"/><path class="st0" d="M19 19H7"/><path d="M7 18h12v2H7z"/><g><path class="st0" d="M7 15h4"/><path d="M7 14h4v2H7z"/></g><g><path class="st0" d="M13 15h12"/><path d="M13 14h12v2H13z"/></g></svg>

package/src/atoms/meta/meta.config.js

@@ -34,7 +34,7 @@ module.exports = {
 			name: 'Lower case',
 			context: {
 				text: '20 min <span class="u-hide-sm">läsning</span>',
-				icon: 'read',
+				icon: 'time',
 				lowercase: true,
 			}
 		},