@internetstiftelsen/styleguide 2.22.3-beta.0.16 → 2.22.3-beta.0.17

package/package.json

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

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/typography/_typography.scss

@@ -145,7 +145,8 @@ small {
 	);
 }
 
-.supersize {
+.supersize,
+%supersize {
 	@include plumber(
 		$font-size: 3,
 		$line-height: 4,

package/src/organisms/timeline/_timeline.scss

@@ -203,7 +203,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,11 +1,18 @@
 @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) {
@@ -33,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 {
@@ -53,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);
@@ -74,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 {
@@ -165,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;
 
@@ -179,8 +206,6 @@
 		@include bp-up(md) {
 			align-items: stretch;
 			flex-direction: row;
-			padding-left: rhythm(2);
-			padding-right: rhythm(2);
 		}
 	}
 
@@ -226,14 +251,113 @@
 
 	@include e(timelineposts) {
 		z-index: 2;
-		width: 100%;
-		max-width: 200px;
+		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) {
@@ -342,8 +466,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;
@@ -114,6 +116,13 @@ if (sourceElement) {
 			window.location.href = urlTarget;
 		});
 	}
+
+	if (navigationButton) {
+		navigationButton.addEventListener('click', () => {
+			navigationButton.classList.toggle('is-toggeled');
+			timeLinePosts.classList.toggle('is-visible');
+		});
+	}
 }
 
 function displayChapters() {
@@ -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;