@internetstiftelsen/styleguide 2.24.0-beta.0.2 → 2.24.0

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 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 = localStorage.getItem('InmsCurrentGuideURL');
+	const guideImage = localStorage.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,110 @@
+@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-bottom: 15px solid transparent;
+				border-left-color: inherit;
+				border-left-style: solid;
+				border-left-width: 20px;
+				border-right: 0 solid transparent;
+    border-top: 15px solid transparent;
+			}
+
+			&: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;
+		border-radius: 50%;
+	}
+}

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/form/Form.js

@@ -237,7 +237,7 @@ export default class Form {
 				help.innerHTML = '';
 			}
 
-			const fieldGroup = input.closest('.field-group');
+			const fieldGroup = input.closest('[class*="field-group"]');
 
 			if (fieldGroup) {
 				fieldGroup.classList.remove('is-invalid');

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

@@ -272,7 +272,6 @@
 			@include bp-up(xl) {
 				bottom: rhythm(8);
 				left: rhythm(8);
-				max-width: 50%;
 
 				@include plumber(
 					$font-size: 7,
@@ -280,10 +279,6 @@
 					$leading-bottom: 0
 				);
 			}
-
-			@include bp-up(xxl) {
-				max-width: 45%;
-			}
 		}
 	}
 }
@@ -292,7 +287,7 @@
 	transform: scale(0.7) translateY(-100%);
 
 	@include bp-up(md) {
-		transform: scale(1) translateY(0);
+		transform: scale(1) translateY(-50%);
 	}
 
 	@include m(hero) {

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

@@ -1,6 +1,8 @@
 import Glider from 'glider-js';
 
 const gliderElementHero = document.querySelector('.js-glider-hero');
+const dataLayer = window.dataLayer || [];
+const gliderLinks = document.querySelectorAll('.glider-slide a');
 
 if (gliderElementHero) {
 	const GliderHero = new Glider(gliderElementHero, {
@@ -35,6 +37,43 @@ if (gliderElementHero) {
 				}, autoplayDelay);
 			}
 		}, 0);
+	} else {
+		document.querySelector('.js-glider-prev').addEventListener('click', () => {
+			dataLayer.push({
+				event: 'carousel',
+				eventInfo: {
+					category: 'carousel',
+					action: 'click',
+					label: 'arrow_left',
+				},
+			});
+		});
+
+		document.querySelector('.js-glider-next').addEventListener('click', () => {
+			dataLayer.push({
+				event: 'carousel',
+				eventInfo: {
+					category: 'carousel',
+					action: 'click',
+					label: 'arrow_right',
+				},
+			});
+		});
+
+		[].forEach.call(gliderLinks, (gliderLink) => {
+			gliderLink.addEventListener('click', () => {
+				const linkTarget = gliderLink.href;
+				console.log(linkTarget);
+				dataLayer.push({
+					event: 'carousel',
+					eventInfo: {
+						category: 'carousel',
+						action: 'click',
+						label: linkTarget,
+					},
+				});
+			});
+		});
 	}
 
 	module.exports = GliderHero;

package/src/molecules/natural-language-form/_natural-language-form.scss

@@ -26,6 +26,10 @@
 				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-down' fill='%2355c7b4' viewBox='0 0 32 18.9' width='100%25' height='100%25'%3E%3Cpolygon points='32,2.9 16,18.9 0,2.9 2.9,0 16,13.1 29.1,0 '%3E%3C/polygon%3E%3C/svg%3E%0A");
 			}
 
+			&[data-color='sandstone'] {
+				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-down' fill='%23f99963' viewBox='0 0 32 18.9' width='100%25' height='100%25'%3E%3Cpolygon points='32,2.9 16,18.9 0,2.9 2.9,0 16,13.1 29.1,0 '%3E%3C/polygon%3E%3C/svg%3E%0A");
+			}
+
 			@include bp-up(sm) {
 				border-bottom: 4px solid currentColor;
 				background-position: calc(100%) 60%;
@@ -70,6 +74,10 @@
 		&[data-color='jade'] {
 			color: $color-jade;
 		}
+
+		&[data-color='sandstone'] {
+			color: $color-sandstone;
+		}
 	}
 
 	@include e(input) {

package/src/organisms/event-listing-item/_event-listing-item.scss

@@ -41,9 +41,11 @@
 
 	@include e(footer) {
 		margin-bottom: rhythm(2);
+		margin-top: rhythm(2);
 
-		@include bp-up(sm) {
+		@include bp-up(sm-xs) {
 			margin-bottom: 0;
+			margin-top: 0;
 		}
 	}
 

package/src/organisms/hero/_hero.scss

@@ -73,6 +73,14 @@
 		@include bp-up(lg) {
 			margin-top: rhythm(3);
 		}
+
+		@include bp-down(sm-xs) {
+			[class*="tag--light"] {
+				[class*="tag__text"] {
+					color: $color-cyberspace;
+				}
+			}
+		}
 	}
 
 	@include e(buttons) {
@@ -209,6 +217,10 @@
 
 		@include b(a-tag) {
 			@include tag;
+
+			[class*=text] {
+				color: $color-cyberspace;
+			}
 		}
 
 		@include bp-up(md) {
@@ -258,6 +270,14 @@
 				background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba($color-black, 0) 55%, rgba($color-black, 1) 100%);
 				text-shadow: 0 0 rhythm(2) rgba($color-black, 0.5);
 			}
+
+			@include bp-down(md) {
+				[class*="tag--light"] {
+					[class*="tag__text"] {
+						color: $color-cyberspace;
+					}
+				}
+			}
 		}
 
 		@include e(text) {

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

@@ -9,7 +9,8 @@ module.exports = {
 		has_buttons: false,
 		has_tags: true,
 		hero_image: '/assets/images/hero.jpg',
-		has_link: true
+		has_link: true,
+		has_pre_heading: false,
 	},
 	variants: [
 		{
@@ -56,6 +57,19 @@ module.exports = {
 				has_buttons: false,
 			}
 		},
+		{
+			name: 'Pre heading',
+			context: {
+				has_pre_heading: true,
+				pre_heading: 'Publicerad 11 oktober 2022',
+				no_image_class: true,
+				has_radius: false,
+				limited_width: false,
+				has_video: false,
+				has_image: true,
+				has_buttons: true,
+			}
+		},
 		{
 			name: 'Event hero',
 				context: {