@internetstiftelsen/styleguide 2.22.2 → 2.22.3-beta.0.3

package/src/base/fonts/_fonts.scss

@@ -6,8 +6,8 @@
 	font-style: normal;
 	font-weight: normal;
 	src:
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-regular-webfont.woff2') format('woff2'),
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-regular-webfont.woff') format('woff');
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-Light.woff2') format('woff2'),
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-Light.woff') format('woff');
 	font-display: swap;
 }
 
@@ -16,8 +16,8 @@
 	font-style: normal;
 	font-weight: normal;
 	src:
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-medium-webfont.woff2') format('woff2'),
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-medium-webfont.woff') format('woff');
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-Medium.woff2') format('woff2'),
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-Medium.woff') format('woff');
 	font-display: swap;
 }
 
@@ -26,8 +26,8 @@
 	font-style: normal;
 	font-weight: normal;
 	src:
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-semibold-webfont.woff2') format('woff2'),
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-semibold-webfont.woff') format('woff');
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-SemiBold.woff2') format('woff2'),
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-SemiBold.woff') format('woff');
 	font-display: swap;
 }
 
@@ -36,8 +36,8 @@
 	font-style: normal;
 	font-weight: normal;
 	src:
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-bold-webfont.woff2') format('woff2'),
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-bold-webfont.woff') format('woff');
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-Bold.woff2') format('woff2'),
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-Bold.woff') format('woff');
 	font-display: swap;
 }
 

package/src/components.js

@@ -21,7 +21,9 @@ import './assets/js/responsivePosition';
 import './assets/js/youtube';
 import './molecules/glider/glider';
 import './molecules/glider/glider-course';
-import './atoms/timeline/anchorScroll';
-import './molecules/timeline-navigation/timeline-navigation';
+import './molecules/glider/glider-hero';
 import './molecules/context-menu/context-menu';
 import './molecules/alert/alert';
+import './molecules/continue-video-guide/continue-video-guide';
+import './organisms/video-guide/video-guide';
+import './organisms/timeline/timeline';

package/src/configurations/_extends.scss

@@ -146,13 +146,17 @@
 	}
 
 	&:disabled {
-		background-color: $color-granit !important;
+		background-color: $color-concrete !important;
 		box-shadow: none;
 		cursor: not-allowed;
 
 		[class*='text'] {
 			color: $color-snow !important;
 		}
+
+		svg {
+			fill: $color-granit;
+		}
 	}
 
 	svg {

package/src/configurations/_variables.scss

@@ -11,9 +11,9 @@ $font-family-medium: 'HK Grotesk Medium', sans-serif !default;
 $font-family-bold: 'HK Grotesk Bold', sans-serif !default;
 $font-family-mono: 'Roboto Mono Regular', monospace !default;
 
-$headings-baseline: 0.09 !default; // HK Semibold
-$body-baseline: 0.09 !default; // HK Regular
-$mono-baseline: 0.111 !default; // Roboto Mono Regular
+$headings-baseline: 0.150 !default; // HK Semibold
+$body-baseline: 0.150 !default; // HK Regular
+$mono-baseline: 0.110 !default; // Roboto Mono Regular
 
 // Size base
 $size-base: 18px !default;

package/src/configurations/grid/_grid.scss

@@ -18,7 +18,8 @@
 // Set the container width, and override it for fixed navbars in media queries.
 
 @if $enable-grid-classes {
-	.wrapper {
+	.wrapper,
+	%wrapper {
 		@include make-container();
 		@include make-container-max-widths();
 
@@ -57,6 +58,12 @@
 		> [class*='grid-']:nth-child(#{$i}) {
 			transform: translateY(rhythm($col-gap));
 		}
+
+		@include bp-only(sm) {
+			> [class*='grid-']:last-child {
+				transform: translateY(rhythm($gap));
+			}
+		}
 	}
 }
 
@@ -75,7 +82,7 @@
 		@include make-asymmetric-cols($bp-gap, true);
 	}
 
-	@include bp-up(md) {
+	@include bp-up(sm) {
 		$bp-gap: $gap * 1.25;
 
 		margin: rhythm($margin * 1.25) 0 0;
@@ -89,6 +96,12 @@
 		}
 	}
 
+	@include bp-up(md) {
+		&.asymmetric-reversed {
+			margin-bottom: calc(100px);
+		}
+	}
+
 	@include bp-up(lg) {
 		$bp-gap: $gap * 1.5;
 
@@ -100,6 +113,7 @@
 
 		&.asymmetric-reversed {
 			@include make-asymmetric-cols($bp-gap, true);
+			margin-bottom: calc(180px);
 		}
 	}
 
@@ -114,6 +128,7 @@
 
 		&.asymmetric-reversed {
 			@include make-asymmetric-cols($bp-gap, true);
+			margin-bottom: calc(216px);
 		}
 	}
 }

package/src/configurations/icons.json

@@ -1 +1 @@
-[{"id":"search","name":"Search"},{"id":"arrow-forwards","name":"Arrow Forwards"},{"id":"arrow-backwards","name":"Arrow Backwards"},{"id":"arrow-down","name":"Arrow Down"},{"id":"arrow-variant","name":"Arrow Variant"},{"id":"hamburger","name":"Hamburger"},{"id":"close","name":"Close"},{"id":"check","name":"Check"},{"id":"quote","name":"Quote"},{"id":"file","name":"File"},{"id":"download","name":"Download"},{"id":"upload","name":"Upload"},{"id":"filter","name":"Filter"},{"id":"read","name":"Read"},{"id":"pin","name":"Pin"},{"id":"user","name":"User"},{"id":"language","name":"Language"},{"id":"linkedin","name":"Linkedin"},{"id":"facebook","name":"Facebook"},{"id":"instagram","name":"Instagram"},{"id":"twitter","name":"Twitter"},{"id":"external-link","name":"External Link"},{"id":"app-share","name":"App Share"},{"id":"print","name":"Print"},{"id":"chapters","name":"Chapters"},{"id":"article","name":"Article"},{"id":"padlock","name":"Padlock"},{"id":"trash","name":"Trash"},{"id":"link","name":"Link"},{"id":"share","name":"Share"},{"id":"questionmark","name":"Questionmark"},{"id":"info","name":"Info"},{"id":"contrast","name":"Contrast"},{"id":"gauge","name":"Gauge"},{"id":"backward-15","name":"Backward 15"},{"id":"play","name":"Play"},{"id":"forward-60","name":"Forward 60"},{"id":"pause","name":"Pause"},{"id":"author","name":"Author"},{"id":"speaker","name":"Speaker"},{"id":"mute","name":"Mute"},{"id":"settings","name":"Settings"},{"id":"lte","name":"Lte"},{"id":"wifi","name":"Wifi"},{"id":"reception","name":"Reception"},{"id":"2g","name":"2g"},{"id":"3g","name":"3g"},{"id":"4g","name":"4g"},{"id":"5g","name":"5g"},{"id":"latency","name":"Latency"},{"id":"spinner","name":"Spinner"},{"id":"spinner-white","name":"Spinner White"},{"id":"3d","name":"3d"},{"id":"accessibility","name":"Accessibility"},{"id":"cafe","name":"Cafe"},{"id":"capacity","name":"Capacity"},{"id":"display","name":"Display"},{"id":"email","name":"Email"},{"id":"headset","name":"Headset"},{"id":"phone","name":"Phone"},{"id":"plus","name":"Plus"},{"id":"podcast","name":"Podcast"},{"id":"richtext-bold","name":"Richtext Bold"},{"id":"richtext-bullet-list","name":"Richtext Bullet List"},{"id":"richtext-italic","name":"Richtext Italic"},{"id":"streaming","name":"Streaming"},{"id":"time","name":"Time"},{"id":"drag-item","name":"Drag Item"},{"id":"personal-data","name":"Personal Data"},{"id":"romance","name":"Romance"},{"id":"shopping","name":"Shopping"},{"id":"warning","name":"Warning"}]
+[{"id":"search","name":"Search"},{"id":"arrow-forwards","name":"Arrow Forwards"},{"id":"arrow-backwards","name":"Arrow Backwards"},{"id":"arrow-down","name":"Arrow Down"},{"id":"arrow-variant","name":"Arrow Variant"},{"id":"hamburger","name":"Hamburger"},{"id":"close","name":"Close"},{"id":"check","name":"Check"},{"id":"quote","name":"Quote"},{"id":"file","name":"File"},{"id":"download","name":"Download"},{"id":"upload","name":"Upload"},{"id":"filter","name":"Filter"},{"id":"read","name":"Read"},{"id":"pin","name":"Pin"},{"id":"user","name":"User"},{"id":"language","name":"Language"},{"id":"linkedin","name":"Linkedin"},{"id":"facebook","name":"Facebook"},{"id":"instagram","name":"Instagram"},{"id":"twitter","name":"Twitter"},{"id":"external-link","name":"External Link"},{"id":"app-share","name":"App Share"},{"id":"print","name":"Print"},{"id":"chapters","name":"Chapters"},{"id":"article","name":"Article"},{"id":"padlock","name":"Padlock"},{"id":"trash","name":"Trash"},{"id":"link","name":"Link"},{"id":"share","name":"Share"},{"id":"questionmark","name":"Questionmark"},{"id":"info","name":"Info"},{"id":"contrast","name":"Contrast"},{"id":"gauge","name":"Gauge"},{"id":"backward-15","name":"Backward 15"},{"id":"step-backwards","name":"Step Backwards"},{"id":"play","name":"Play"},{"id":"step-forwards","name":"Step Forwards"},{"id":"forward-60","name":"Forward 60"},{"id":"pause","name":"Pause"},{"id":"subtitles","name":"Subtitles"},{"id":"author","name":"Author"},{"id":"speaker","name":"Speaker"},{"id":"mute","name":"Mute"},{"id":"settings","name":"Settings"},{"id":"lte","name":"Lte"},{"id":"wifi","name":"Wifi"},{"id":"reception","name":"Reception"},{"id":"2g","name":"2g"},{"id":"3g","name":"3g"},{"id":"4g","name":"4g"},{"id":"5g","name":"5g"},{"id":"latency","name":"Latency"},{"id":"spinner","name":"Spinner"},{"id":"spinner-white","name":"Spinner White"},{"id":"3d","name":"3d"},{"id":"accessibility","name":"Accessibility"},{"id":"cafe","name":"Cafe"},{"id":"capacity","name":"Capacity"},{"id":"display","name":"Display"},{"id":"email","name":"Email"},{"id":"headset","name":"Headset"},{"id":"phone","name":"Phone"},{"id":"plus","name":"Plus"},{"id":"podcast","name":"Podcast"},{"id":"richtext-bold","name":"Richtext Bold"},{"id":"richtext-bullet-list","name":"Richtext Bullet List"},{"id":"richtext-italic","name":"Richtext Italic"},{"id":"streaming","name":"Streaming"},{"id":"time","name":"Time"},{"id":"drag-item","name":"Drag Item"},{"id":"personal-data","name":"Personal Data"},{"id":"romance","name":"Romance"},{"id":"shopping","name":"Shopping"},{"id":"warning","name":"Warning"}]

package/src/configurations/typography/_typography.scss

@@ -1,7 +1,8 @@
 @charset 'UTF-8';
 
 h1,
-.alpha {
+.alpha,
+%alpha {
 	@include plumber(
 		$font-size: 3,
 		$line-height: 4,
@@ -22,7 +23,8 @@ h1,
 }
 
 h2,
-.beta {
+.beta,
+%beta {
 	@include plumber(
 		$font-size: 2.2,
 		$line-height: 3,
@@ -43,7 +45,8 @@ h2,
 }
 
 h3,
-.gamma {
+.gamma,
+%gamma {
 	@include plumber(
 		$font-size: 2.2,
 		$line-height: 3,
@@ -53,7 +56,8 @@ h3,
 }
 
 h4,
-.delta {
+.delta,
+%delta {
 	@include plumber(
 		$font-size: 2,
 		$line-height: 3,
@@ -168,6 +172,55 @@ small {
 	}
 }
 
+.godzilla {
+	@include plumber(
+		$leading-top: 0,
+		$leading-bottom: 0
+	);
+
+	line-height: 84px;
+	font-size: 120px;
+	font-family: $font-family-bold;
+	letter-spacing: -#{rem(5px)};
+
+	@include bp-up(sm) {
+		line-height: 105px;
+		font-size: 150px;
+	}
+
+	@include bp-up(md) {
+		line-height: 139px;
+		font-size: 200px;
+		letter-spacing: -#{rem(10px)};
+	}
+
+	@include bp-up(lg) {
+		line-height: 207px;
+		font-size: 295px;
+		letter-spacing: -#{rem(20px)};
+	}
+
+	@include bp-up(xl) {
+		line-height: 251px;
+		font-size: 360px;
+	}
+
+	// Special rule for decade starting with 1
+	@include m(19) {
+		&::first-letter {
+			letter-spacing: -#{rem(20px)};
+
+			@include bp-up(lg) {
+				letter-spacing: -#{rem(40px)};
+			}
+
+			@include bp-up(xl) {
+				letter-spacing: -#{rem(45px)};
+			}
+		}
+	}
+}
+
 .preamble,
 %preamble {
 

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

@@ -0,0 +1,7 @@
+module.exports = {
+	status: 'wip',
+
+	context: {
+		additional_classes: false
+	}
+}

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

@@ -0,0 +1,84 @@
+import className from '../../assets/js/className';
+
+class ProgressRing extends HTMLElement {
+	constructor() {
+		super();
+		const stroke = this.getAttribute('stroke');
+		const radius = this.getAttribute('radius');
+		const normalizedRadius = radius - stroke * 2;
+		this.circumference = normalizedRadius * 2 * Math.PI;
+
+		this.root = this.attachShadow({ mode: 'open' });
+		this.root.innerHTML = `
+		<svg
+		height="${radius * 2}"
+		width="${radius * 2}"
+		>
+		<circle
+		stroke="white"
+		stroke-dasharray="${this.circumference} ${this.circumference}"
+		style="stroke-dashoffset:${this.circumference}"
+		stroke-width="${stroke}"
+		fill="transparent"
+		r="${normalizedRadius}"
+		cx="${radius}"
+		cy="${radius}"
+		/>
+		</svg>
+
+		<style>
+		circle {
+			transition: stroke-dashoffset 0.35s;
+			transform: rotate(-90deg);
+			transform-origin: 50% 50%;
+		}
+		</style>
+		`;
+	}
+
+	setProgress(percent) {
+		const offset = this.circumference - ((percent / 100) * this.circumference);
+		const circle = this.root.querySelector('circle');
+		circle.style.strokeDashoffset = offset;
+	}
+
+	static get observedAttributes() {
+		return ['progress'];
+	}
+
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (name === 'progress') {
+			this.setProgress(newValue);
+		}
+	}
+}
+
+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');
+	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');
+
+	if ((videoCurrentTime > 0)
+		&& progressRing
+		&& continueElement
+		&& guideImage
+		&& continueLink) {
+		const alternativeText = continueLink.dataset.altText;
+		const currentProgress = videoCurrentTime / videoDuration;
+		const currentGuideImage = document.querySelector('.js-guide-continue-image');
+
+		continueElement.classList.add(className('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/src/molecules/continue-video-guide/continue-video-guide.scss

@@ -0,0 +1,104 @@
+@charset "UTF-8";
+
+@include molecule(continue-video-guide) {
+	position: fixed;
+	bottom: 0;
+	right: 0;
+	z-index: z_index(middlegroundImportant);
+	width: 100px;
+	height: calc(100px + 23px + rhythm(1));
+	transform: scale(0.7);
+
+	@include bp-up(md) {
+		transform: scale(1);
+		bottom: rhythm(2);
+		right: rhythm(2);
+	}
+
+	@include e(inner) {
+		position: relative;
+	}
+
+	@include e(progressbar) {
+		display: none;
+	}
+
+	@include e(continue) {
+		position: absolute;
+		z-index: 3;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100px;
+		height: 100px;
+		border-color: $color-snow;
+
+		&::after {
+			content: 'Guidad tur';
+			display: block;
+			position: absolute;
+			left: auto;
+			right: auto;
+			bottom: 0;
+			transform: translateY(calc(100% + rhythm(1)));
+			text-align: center;
+			background-color: $color-peacock-light;
+			font-size: $size-medium;
+			font-family: $font-family-headings;
+			border-radius: $border-radius;
+			color: $color-cyberspace;
+			padding: rhythm(0.5) rhythm(1);
+			line-height: 1;
+		}
+	}
+
+	@include m(has-progress) {
+		@include e(continue) {
+			&::after {
+				content: 'Fortsätt';
+			}
+
+			@include e(arrow) {
+				width: 0;
+				height: 0;
+				border-style: solid;
+				border-width: 15px 0 15px 20px;
+				transition: border-width 0.25s ease-out;
+				border-color: transparent transparent transparent inherit;
+			}
+
+			&:hover,
+			&:focus {
+				> div {
+					border-width: 20px 0 20px 30px;
+				}
+			}
+		}
+
+		@include e(progressbar) {
+			display: block;
+			position: absolute;
+			z-index: 2;
+			border-radius: 50%;
+
+			&::after {
+				position: absolute;
+				top: 6px;
+				left: 6px;
+				width: 88px;
+				height: 88px;
+				border-radius: 50%;
+				content: '';
+				display: block;
+				border: 4px solid rgba($color-snow, 0.5);
+			}
+		}
+	}
+
+	@include e(image) {
+		position: absolute;
+		z-index: 1;
+		width: 100px;
+		height: 100px;
+	}
+}

package/src/molecules/continue-video-guide/readme.md

@@ -0,0 +1,3 @@
+# Continue Video Guide
+
+This component is dependent on the [Video Guide Component](/components/detail/video-guide). Continuing a guided tour is only possible if the video player has a saved timestamp in sessionStorage

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

@@ -0,0 +1,121 @@
+@charset "UTF-8";
+
+// NOTE: this compnent is dependant on the glider.scss component
+// The Glider components is dependant on JS-classes and is therefore not namespaced
+
+.glider-contain-course {
+	display: flex;
+	position: relative;
+	align-items: center;
+	margin-top: 0;
+	margin-bottom: rhythm(2);
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.glider-slide {
+	@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;
+			}
+		}
+	}
+}