@internetstiftelsen/styleguide 2.22.3-beta.0.2 → 2.22.3-beta.0.20

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

@@ -66,15 +66,15 @@ var ProgressRing = function (_CustomElement2) {
 
 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');
+// Get value from localStorage if present
+if (localStorage.getItem('InmsCurrentTime')) {
+	var videoCurrentTime = localStorage.getItem('InmsCurrentTime');
+	var videoDuration = localStorage.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');
+	var guideURL = localStorage.getItem('InmsCurrentGuideURL');
+	var guideImage = localStorage.getItem('InmsCurrentGuideImage');
 
 	if (videoCurrentTime > 0 && progressRing && continueElement && guideImage && continueLink) {
 		var alternativeText = continueLink.dataset.altText;

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

@@ -19,5 +19,28 @@ if (gliderElementHero) {
 		}
 	});
 
+	var autoplayDelay = gliderElementHero.dataset.timeout;
+
+	if (autoplayDelay) {
+		var autoplay = setInterval(function () {
+			GliderHero.scrollItem('next');
+		}, autoplayDelay);
+
+		gliderElementHero.addEventListener('mouseover', function () {
+			if (autoplay !== null) {
+				clearInterval(autoplay);
+				autoplay = null;
+			}
+		}, 0);
+
+		gliderElementHero.addEventListener('mouseout', function () {
+			if (autoplay === null) {
+				autoplay = setInterval(function () {
+					GliderHero.scrollItem('next');
+				}, autoplayDelay);
+			}
+		}, 0);
+	}
+
 	module.exports = GliderHero;
 }

package/dist/organisms/timeline/timeline.js

@@ -126,7 +126,7 @@ var timeLineItemScrollPosition = 0;
 			timeLineItem.closest('.row').classList.add('row-has-open-child');
 
 			// Wrap open timeline item
-			wrap(timeLineItem.querySelector('.wp-block-iis-card'), document.createElement('div'));
+			wrap(timeLineItem.querySelector('.wp-block-iis-timeline-post'), document.createElement('div'));
 		}
 	});
 

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

@@ -17,6 +17,8 @@ var metadataTrack = trackMetadataElement === null ? '' : trackMetadataElement.tr
 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;
@@ -35,20 +37,20 @@ if (sourceElement) {
 
 	// Store current time in on page reload
 	window.addEventListener('unload', function () {
-		// Set sessionStorage if video has started playing
+		// 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;
-			sessionStorage.setItem('InmsCurrentTime', video.currentTime);
-			sessionStorage.setItem('InmsDuration', video.duration); // Get totalt duration of video
-			sessionStorage.setItem('InmsCurrentGuideURL', currentGuideURL);
-			sessionStorage.setItem('InmsCurrentGuideImage', currentGuideImage);
+			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 sessionStorage in present
-	if (sessionStorage.getItem('InmsCurrentTime')) {
-		var videoCurrentTime = sessionStorage.getItem('InmsCurrentTime');
+	// Get value from localStorage in present
+	if (localStorage.getItem('InmsCurrentTime')) {
+		var videoCurrentTime = localStorage.getItem('InmsCurrentTime');
 
 		if (videoCurrentTime > 0) {
 			video.currentTime = videoCurrentTime;
@@ -93,10 +95,10 @@ if (sourceElement) {
 			manualStep = false;
 			forwardsButton.removeAttribute('disabled');
 			subtitlesContainer.innerHTML = '';
-			sessionStorage.removeItem('InmsCurrentTime');
-			sessionStorage.removeItem('InmsDuration');
-			sessionStorage.removeItem('InmsCurrentGuideURL');
-			sessionStorage.removeItem('InmsCurrentGuideImage');
+			localStorage.removeItem('InmsCurrentTime');
+			localStorage.removeItem('InmsDuration');
+			localStorage.removeItem('InmsCurrentGuideURL');
+			localStorage.removeItem('InmsCurrentGuideImage');
 		});
 	}
 
@@ -109,13 +111,20 @@ if (sourceElement) {
 			forwardsButton.removeAttribute('disabled');
 			currentChapter = 1;
 			manualStep = false;
-			sessionStorage.removeItem('InmsCurrentTime');
-			sessionStorage.removeItem('InmsDuration');
-			sessionStorage.removeItem('InmsCurrentGuideURL');
-			sessionStorage.removeItem('InmsCurrentGuideImage');
+			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() {
@@ -153,7 +162,7 @@ function displayChapters() {
 					});
 
 					// If not set in sessionStorgare, set first cue on forward button on page load
-					if (!sessionStorage.getItem('InmsCurrentTime')) {
+					if (!localStorage.getItem('InmsCurrentTime')) {
 						forwardsButton.setAttribute('data-id', chapterTrack.cues[0].endTime);
 					}
 				}, 100);
@@ -253,7 +262,12 @@ function displayChapters() {
 						timelinePost.classList.remove('is-current');
 					});
 
-					document.querySelector('[data-id="' + metadataCueMatch + '"]').classList.add('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;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.22.3-beta.0.2",
+	"version": "2.22.3-beta.0.20",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/assets/video/chapters.vtt

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

package/src/assets/video/metadata.vtt

@@ -1,8 +1,11 @@
 WEBVTT
 
-00:00:00.000 --> 00:00:39.000
+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
 

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

@@ -76,7 +76,7 @@ $colors: (
 	@each $key, $value in $map {
 		&#{if($key != $base, #{$separator}#{$key}, '')} {
 			@if type-of($value) == 'map' {
-				@include color_classes($value, $attribute, $prefix, $separator: '-', $element:  $element);
+				@include color_classes($value, $attribute, $prefix: '.', $separator: '-', $element:  $element);
 			}
 			@else {
 				@if ($element != '') {
@@ -94,13 +94,12 @@ $colors: (
 }
 
 /// Generate wordpress color classes with attribute and value
-/// Generates this: .has-color-name{$suffix}
+/// Generates this: .has-colorname-color
 /// @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');
 			}
 		}

package/src/configurations/typography/_typography.scss

@@ -145,7 +145,8 @@ small {
 	);
 }
 
-.supersize {
+.supersize,
+%supersize {
 	@include plumber(
 		$font-size: 3,
 		$line-height: 4,
@@ -178,30 +179,30 @@ small {
 		$leading-bottom: 0
 	);
 
-	line-height: 84px;
+	line-height: 79px;
 	font-size: 120px;
 	font-family: $font-family-bold;
 	letter-spacing: -#{rem(5px)};
 
 	@include bp-up(sm) {
-		line-height: 105px;
+		line-height: 100px;
 		font-size: 150px;
 	}
 
 	@include bp-up(md) {
-		line-height: 139px;
+		line-height: 135px;
 		font-size: 200px;
 		letter-spacing: -#{rem(10px)};
 	}
 
 	@include bp-up(lg) {
-		line-height: 207px;
+		line-height: 201px;
 		font-size: 295px;
 		letter-spacing: -#{rem(20px)};
 	}
 
 	@include bp-up(xl) {
-		line-height: 251px;
+		line-height: 247px;
 		font-size: 360px;
 	}
 
@@ -225,8 +226,8 @@ small {
 %preamble {
 
 	@include plumber(
-		$font-size: 2.5,
-		$line-height: 3,
+		$font-size: 2.55555,
+		$line-height: 4,
 		$leading-bottom: 4
 	);
 

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

@@ -55,15 +55,15 @@ class ProgressRing extends HTMLElement {
 
 window.customElements.define('progress-ring', ProgressRing);
 
-// Get value from sessionStorage if present
-if (sessionStorage.getItem('InmsCurrentTime')) {
-	const videoCurrentTime = sessionStorage.getItem('InmsCurrentTime');
-	const videoDuration = sessionStorage.getItem('InmsDuration');
+// Get value from localStorage if present
+if (localStorage.getItem('InmsCurrentTime')) {
+	const videoCurrentTime = localStorage.getItem('InmsCurrentTime');
+	const videoDuration = localStorage.getItem('InmsDuration');
 	const continueElement = document.querySelector('.js-guide-continue');
 	const progressRing = document.querySelector('progress-ring');
 	const continueLink = document.querySelector('.js-guide-continue-link');
-	const guideURL = sessionStorage.getItem('InmsCurrentGuideURL');
-	const guideImage = sessionStorage.getItem('InmsCurrentGuideImage');
+	const guideURL = localStorage.getItem('InmsCurrentGuideURL');
+	const guideImage = localStorage.getItem('InmsCurrentGuideImage');
 
 	if ((videoCurrentTime > 0)
 		&& progressRing

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

@@ -134,6 +134,8 @@
 }
 
 .glider-slide {
+	width: 100vw;
+
 	@include m(hero) {
 		margin: 0;
 		padding: 0;

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

@@ -13,5 +13,28 @@ if (gliderElementHero) {
 		},
 	});
 
+	const autoplayDelay = gliderElementHero.dataset.timeout;
+
+	if (autoplayDelay) {
+		let autoplay = setInterval(() => {
+			GliderHero.scrollItem('next');
+		}, autoplayDelay);
+
+		gliderElementHero.addEventListener('mouseover', () => {
+			if (autoplay !== null) {
+				clearInterval(autoplay);
+				autoplay = null;
+			}
+		}, 0);
+
+		gliderElementHero.addEventListener('mouseout', () => {
+			if (autoplay === null) {
+				autoplay = setInterval(() => {
+					GliderHero.scrollItem('next');
+				}, autoplayDelay);
+			}
+		}, 0);
+	}
+
 	module.exports = GliderHero;
 }

package/src/organisms/hero/_hero--dynamic-headline.scss

@@ -18,6 +18,10 @@
 			right: 0;
 			bottom: 0;
 			z-index: -1;
+
+			@include bp-up(xxl) {
+				object-position: 50% 50%;
+			}
 		}
 
 		@include e(caption) {
@@ -32,7 +36,7 @@
 
 			> h1 {
 				--minFontSize: 22px;
-				--maxFontSize: 300px;
+				--maxFontSize: 200px;
 				--scaler: 10vw;
 
 				font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
@@ -40,6 +44,14 @@
 				margin: 0;
 				padding: 0;
 				line-height: 1.2;
+
+				@include bp-up(md) {
+					line-height: 1.1;
+				}
+
+				@include bp-up(lg) {
+					line-height: 1;
+				}
 			}
 
 			@include bp-up(sm-xs) {
@@ -88,7 +100,6 @@
 
 				@include bp-up(xxl) {
 					font-size: 24px !important;
-					margin-left: rhythm(2);
 				}
 			}
 		}
@@ -126,29 +137,29 @@
 
 		@keyframes pulse2 {
 			0% {
-				transform: translateY(-25%) scale(2);
+				transform: translateY(0) scale(2);
 			}
 
 			50% {
-				transform: translateY(-50%) scale(2);
+				transform: translateY(-25%) scale(2);
 			}
 
 			100% {
-				transform: translateY(-25%) scale(2);
+				transform: translateY(0) scale(2);
 			}
 		}
 
 		@keyframes pulse3 {
 			0% {
-				transform: translateY(-50%) scale(3);
+				transform: translateY(0) scale(3);
 			}
 
 			50% {
-				transform: translateY(-75%) scale(3);
+				transform: translateY(-25%) scale(3);
 			}
 
 			100% {
-				transform: translateY(-50%) scale(3);
+				transform: translateY(0) scale(3);
 			}
 		}
 

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

@@ -119,7 +119,7 @@ module.exports = {
 			context: {
 				has_image: true,
 				hero_image: '/assets/images/Reprogramming_ENIAC2.png',
-				heading: 'Kvinnorna som digitaliserade världen',
+				heading: 'Datadamer - Kvinnorna som digitaliserade världen',
 			}
 		},
 	]

package/src/organisms/timeline/_timeline.scss

@@ -135,6 +135,15 @@ html {
 			display: none;
 			padding-bottom: 0;
 			margin-top: 0;
+			min-height: 150px;
+			background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='lds-ring' style='background: none;'%3E%3Ccircle cx='50' cy='50' ng-attr-r='%7B%7Bconfig.radius%7D%7D' ng-attr-stroke='%7B%7Bconfig.base%7D%7D' ng-attr-stroke-width='%7B%7Bconfig.width%7D%7D' fill='none' r='43' stroke='%23a7d8fd' stroke-width='7'%3E%3C/circle%3E%3Ccircle cx='50' cy='50' ng-attr-r='%7B%7Bconfig.radius%7D%7D' ng-attr-stroke='%7B%7Bconfig.stroke%7D%7D' ng-attr-stroke-width='%7B%7Bconfig.innerWidth%7D%7D' ng-attr-stroke-linecap='%7B%7Bconfig.linecap%7D%7D' fill='none' r='43' stroke='%2350b2fc' stroke-width='7' stroke-linecap='square' transform='rotate(27.6965 50 50)'%3E%3CanimateTransform 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'%3E%3C/animateTransform%3E%3Canimate 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'%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E%0A");
+			background-repeat: no-repeat;
+			background-position: center center;
+			background-size: 30% 30%;
+
+			&[data-timeline-post-expanded-content="true"] {
+				background-image: none;
+			}
 
 			@include e(meta) {
 				@include e(related) {
@@ -181,6 +190,18 @@ html {
 				color: $color-snow;
 			}
 
+			p a,
+			li a,
+			h1 a,
+			h2 a,
+			h3 a,
+			h4 a {
+				&:hover,
+				&:focus {
+					color: $color-cyberspace;
+				}
+			}
+
 			a[data-scroll-ignore] {
 				pointer-events: none;
 
@@ -203,7 +224,7 @@ html {
 				@extend %preamble;
 			}
 
-			.wp-block-iis-card {
+			.wp-block-iis-timeline-post {
 				margin-left: auto;
 				margin-right: auto;
 

package/src/organisms/timeline/timeline.js

@@ -118,7 +118,7 @@ let timeLineItemScrollPosition = 0;
 			timeLineItem.closest('.row').classList.add('row-has-open-child');
 
 			// Wrap open timeline item
-			wrap(timeLineItem.querySelector('.wp-block-iis-card'), document.createElement('div'));
+			wrap(timeLineItem.querySelector('.wp-block-iis-timeline-post'), document.createElement('div'));
 		}
 	});
 

package/src/organisms/video-guide/_video-guide.scss

@@ -1,14 +1,26 @@
 @charset "UTF-8";
 
-@include molecule(video-guide) {
+@include organism(video-guide) {
 	flex-direction: column;
 	background-color: $color-snow;
 
+	@include e(inner-wrapper) {
+		width: 100%;
+		position: relative;
+	}
+
+	> figure {
+		display: flex;
+		overflow: hidden;
+		position: relative;
+	}
+
 	@include e(video-container) {
 		position: relative;
 		padding-top: 70vh;
 		width: 100%;
 		display: flex;
+		flex-direction: column;
 		justify-content: center;
 
 		@include bp-up(sm) {
@@ -28,13 +40,14 @@
 		bottom: 0;
 		z-index: 1;
 		justify-content: center;
-		display: none;
+		opacity: 0;
+		transition: opacity 0.25s ease-out;
 		margin: 0;
 		padding: 0;
 
 		&:first-child,
 		&.is-current {
-			display: flex;
+			opacity: 1;
 		}
 
 		img {
@@ -48,8 +61,8 @@
 		@include e(text) {
 			position: absolute;
 			top: 50%;
-			left: auto;
-			right: auto;
+			left: 0;
+			right: 0;
 			text-align: center;
 			padding-left: rhythm(2);
 			padding-right: rhythm(2);
@@ -69,16 +82,38 @@
 			@include bp-up(xl) {
 				left: rhythm(8);
 				width: calc(100% - rhythm(16));
-				max-width: 70%;
 				text-align: left;
 			}
 
-			> h2 {
+			@include e(headline) {
 				font-family: $font-family-bold;
 				color: $color-snow;
 				text-shadow: 0 0 rem(50px) rgba($color-black, 1),
 					0 0 rem(10px) rgba($color-black, 1),
 					rem(1px) rem(1px) rem(2px) rgba($color-black, 0.6);
+
+				@include plumber(
+					$font-size: 3,
+					$line-height: 4,
+					$leading-bottom: 1,
+					$baseline: $headings-baseline
+				);
+
+				@include bp-up(sm) {
+					@include plumber(
+						$font-size: 4.5,
+						$line-height: 5,
+						$leading-bottom: 1
+					);
+				}
+
+				@include bp-up(lg) {
+					@include plumber(
+						$font-size: 7,
+						$line-height: 8,
+						$leading-bottom: 2
+					);
+				}
 			}
 
 			> a {
@@ -160,10 +195,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding-top: rhythm(2);
-		padding-bottom: rhythm(2);
-		padding-left: rhythm(1);
-		padding-right: rhythm(1);
+		padding: rhythm(2);
 		flex-direction: column-reverse;
 		overflow: hidden;
 
@@ -174,8 +206,6 @@
 		@include bp-up(md) {
 			align-items: stretch;
 			flex-direction: row;
-			padding-left: rhythm(2);
-			padding-right: rhythm(2);
 		}
 	}
 
@@ -219,9 +249,115 @@
 		}
 	}
 
+	@include e(timelineposts) {
+		z-index: 2;
+		width: 250px;
+		min-width: 250px;
+		background-color: $color-cyberspace;
+		position: relative;
+		transform: translateX(100%);
+		transition: transform 0.25s ease-out;
+		flex-shrink: 0;
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+
+		@include bp-up(md) {
+			transform: translateX(0);
+			position: relative;
+			top: auto;
+			right: auto;
+			bottom: auto;
+		}
+
+		@include bp-up(xl) {
+			width: 350px;
+		}
+
+		&.is-visible {
+			transform: translateX(0);
+		}
+
+		@include e(list) {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			overflow-y: auto;
+
+			dt {
+				color: $color-snow;
+				font-family: $font-family-headings;
+				padding: rhythm(1) rhythm(2);
+
+				@include bp-up(md) {
+					padding-top: rhythm(2);
+					padding-bottom: rhythm(2);
+				}
+			}
+
+			dd {
+				padding: 0;
+				margin: 0;
+				display: block;
+				border-top: 1px solid lighten($color-cyberspace, 10%);
+			}
+		}
+
+		@include e(link) {
+			display: flex;
+			padding: rhythm(1) rhythm(2);
+			color: $color-snow;
+			text-decoration: none;
+			font-size: $size-medium;
+			position: relative;
+			line-height: 1.5;
+
+			&:hover,
+			&:focus,
+			&.is-current {
+				background-color: lighten($color-cyberspace, 10%);
+
+				&::after {
+					content: attr(data-label);
+					display: block;
+					background-color: $color-peacock;
+					font-family: $font-family-headings;
+					padding: rhythm(1);
+					line-height: 1;
+					align-self: flex-end;
+					white-space: nowrap;
+					border-radius: $border-radius;
+					transform: translateX(rhythm(0.5));
+					margin-left: rhythm(1);
+				}
+			}
+
+			&.is-current {
+				font-family: $font-family-headings;
+			}
+		}
+
+		@include e(button-navigation) {
+			transform: translateX(-100%);
+
+			@include bp-up(md) {
+				display: none;
+			}
+
+			&.is-toggeled {
+				transform: translateX(0) scaleX(-1);
+				position: absolute;
+				right: rhythm(1);
+				z-index: 2;
+			}
+		}
+	}
+
 	@include e(buttons) {
 		display: flex;
-		width: 100%;
 	}
 
 	@include e(button) {
@@ -284,6 +420,7 @@
 		width: auto;
 		position: absolute;
 		bottom: rhythm(1);
+		right: rhythm(1);
 		z-index: 3;
 		font-family: $font-family-headings;
 		min-width: 200px;
@@ -309,12 +446,16 @@
 		@include bp-up(lg) {
 			font-size: $size-base * 1.7;
 			min-width: 500px;
-			max-width: 800px;
+			max-width: 700px;
 			bottom: rhythm(2);
 			align-self: flex-end;
 			right: rhythm(2);
 		}
 
+		@include bp-up(xxl) {
+			max-width: 800px;
+		}
+
 		&.is-visible {
 			display: inline-block;
 
@@ -330,8 +471,15 @@
 	}
 
 	@include e(button-abort) {
-		align-self: center;
-		margin-left: auto;
+		position: absolute;
+		top: rhythm(1);
+		left: rhythm(1);
 		flex-grow: 0;
+		z-index: 2;
+		font-size: $size-small;
+
+		@include bp-up(md) {
+			font-size: initial;
+		}
 	}
 }

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

@@ -15,6 +15,8 @@ const metadataTrack = (trackMetadataElement === null) ? '' : trackMetadataElemen
 const forwardsButton = document.querySelector('.js-next-chapter');
 const backwardsButton = document.querySelector('.js-previous-chapter');
 const timelinePosts = document.querySelectorAll('.js-timeline-post');
+const navigationButton = document.querySelector('.js-show-timelineposts');
+const timeLinePosts = document.querySelector('.js-timeline-posts');
 let currentChapter = 1;
 let manualStep = false;
 let sourceElement = null;
@@ -33,20 +35,20 @@ if (sourceElement) {
 
 	// Store current time in on page reload
 	window.addEventListener('unload', () => {
-		// Set sessionStorage if video has started playing
+		// Set localStorage if video has started playing
 		if (video.currentTime > 0) {
 			const currentGuideURL = window.location.href;
 			const currentGuideImage = document.querySelector('.js-guide-continue-image').src;
-			sessionStorage.setItem('InmsCurrentTime', video.currentTime);
-			sessionStorage.setItem('InmsDuration', video.duration); // Get totalt duration of video
-			sessionStorage.setItem('InmsCurrentGuideURL', currentGuideURL);
-			sessionStorage.setItem('InmsCurrentGuideImage', currentGuideImage);
+			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 sessionStorage in present
-	if (sessionStorage.getItem('InmsCurrentTime')) {
-		const videoCurrentTime = sessionStorage.getItem('InmsCurrentTime');
+	// Get value from localStorage in present
+	if (localStorage.getItem('InmsCurrentTime')) {
+		const videoCurrentTime = localStorage.getItem('InmsCurrentTime');
 
 		if (videoCurrentTime > 0) {
 			video.currentTime = videoCurrentTime;
@@ -91,10 +93,10 @@ if (sourceElement) {
 			manualStep = false;
 			forwardsButton.removeAttribute('disabled');
 			subtitlesContainer.innerHTML = '';
-			sessionStorage.removeItem('InmsCurrentTime');
-			sessionStorage.removeItem('InmsDuration');
-			sessionStorage.removeItem('InmsCurrentGuideURL');
-			sessionStorage.removeItem('InmsCurrentGuideImage');
+			localStorage.removeItem('InmsCurrentTime');
+			localStorage.removeItem('InmsDuration');
+			localStorage.removeItem('InmsCurrentGuideURL');
+			localStorage.removeItem('InmsCurrentGuideImage');
 		});
 	}
 
@@ -107,13 +109,20 @@ if (sourceElement) {
 			forwardsButton.removeAttribute('disabled');
 			currentChapter = 1;
 			manualStep = false;
-			sessionStorage.removeItem('InmsCurrentTime');
-			sessionStorage.removeItem('InmsDuration');
-			sessionStorage.removeItem('InmsCurrentGuideURL');
-			sessionStorage.removeItem('InmsCurrentGuideImage');
+			localStorage.removeItem('InmsCurrentTime');
+			localStorage.removeItem('InmsDuration');
+			localStorage.removeItem('InmsCurrentGuideURL');
+			localStorage.removeItem('InmsCurrentGuideImage');
 			window.location.href = urlTarget;
 		});
 	}
+
+	if (navigationButton) {
+		navigationButton.addEventListener('click', () => {
+			navigationButton.classList.toggle('is-toggeled');
+			timeLinePosts.classList.toggle('is-visible');
+		});
+	}
 }
 
 function displayChapters() {
@@ -151,7 +160,7 @@ function displayChapters() {
 					});
 
 					// If not set in sessionStorgare, set first cue on forward button on page load
-					if (!sessionStorage.getItem('InmsCurrentTime')) {
+					if (!localStorage.getItem('InmsCurrentTime')) {
 						forwardsButton.setAttribute('data-id', chapterTrack.cues[0].endTime);
 					}
 				}, 100);
@@ -252,7 +261,12 @@ function displayChapters() {
 						timelinePost.classList.remove('is-current');
 					});
 
-					document.querySelector(`[data-id="${metadataCueMatch}"]`).classList.add('is-current');
+					const idSelectors = document.querySelectorAll(`[data-id="${metadataCueMatch}"]`);
+
+					[].forEach.call(idSelectors, (idSelector) => {
+						idSelector.classList.add('is-current');
+						idSelector.focus();
+					});
 
 					if (chapterCues) {
 						const chapterStartTime = chapterCues.startTime;

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/src/utilities/_hide.scss

@@ -97,3 +97,7 @@
 .u-overflow-hidden {
 	overflow: hidden !important;
 }
+
+.u-overflow-visible {
+	overflow: visible !important;
+}

package/src/utilities/_links.scss

@@ -79,3 +79,14 @@
 		text-decoration: underline;
 	}
 }
+
+// Generate parent element link color classes e.g. .u-color-ruby a
+/// @group Colors
+.u-link-color {
+	@include color_classes (
+		$map: $colors,
+		$separator: '-',
+		$attribute: 'color',
+		$element: 'a'
+	);
+}