@internetstiftelsen/styleguide 2.26.5-beta.1.0 → 2.26.5

package/dist/assets/js/ot.js

@@ -0,0 +1,13 @@
+'use strict';
+
+document.addEventListener('click', function (e) {
+	var el = e.target.closest('[data-ot-dynamic-show-settings]');
+
+	if (el) {
+		var otButton = document.getElementById('ot-sdk-btn');
+
+		if (otButton) {
+			otButton.click();
+		}
+	}
+});

package/dist/assets/js/youtube.js

@@ -59,8 +59,7 @@ function createConsentWarning(el) {
 	div.setAttribute('data-youtube-consent-warning', true);
 	div.className = (0, _className2.default)('m-icon-overlay__message');
 	button.className = (0, _className2.default)('a-button');
-	button.classList.add('ot-sdk-show-settings');
-	button.setAttribute('id', 'ot-sdk-btn');
+	button.setAttribute('data-ot-dynamic-show-settings', 'true');
 	button.innerHTML = '<span class="' + (0, _className2.default)('a-button__text') + '">Anpassa kakor</span>';
 	message.innerHTML = missingConsentMessage;
 

package/dist/atoms/height-limiter/height-limiter.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var elements = document.querySelectorAll('.js-height-limit');
-
 function update(innerContainer, button, height) {
 	if (button.classList.contains('is-clicked')) {
 		return;
@@ -25,6 +24,7 @@ function setup(element) {
 	var buttonTextElement = button.querySelector('span');
 	var buttonText = buttonTextElement.innerText;
 	var toggleText = element.getAttribute('data-toggle-text');
+	var topPosition = void 0;
 
 	update(innerContainer, button, height);
 
@@ -34,6 +34,12 @@ function setup(element) {
 		buttonTextElement.innerText = buttonTextElement.innerText === buttonText ? toggleText : buttonText;
 		button.classList.toggle('is-clicked');
 
+		if (!innerContainer.classList.contains('is-limited')) {
+			topPosition = document.documentElement.scrollTop;
+		} else {
+			window.scroll(0, topPosition);
+		}
+
 		setTimeout(function () {
 			return update(innerContainer, button, height);
 		}, 1);

package/dist/components.js

@@ -62,4 +62,6 @@ require('./organisms/timeline/timeline');
 
 require('./molecules/overview-navigation/overview-navigation');
 
-require('./organisms/schedule/schedule-filter');
+require('./organisms/schedule/schedule-filter');
+
+require('./assets/js/ot');

package/package.json

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

package/src/assets/js/ot.js

@@ -0,0 +1,11 @@
+document.addEventListener('click', (e) => {
+	const el = e.target.closest('[data-ot-dynamic-show-settings]');
+
+	if (el) {
+		const otButton = document.getElementById('ot-sdk-btn');
+
+		if (otButton) {
+			otButton.click();
+		}
+	}
+});

package/src/assets/js/youtube.js

@@ -44,8 +44,7 @@ function createConsentWarning(el) {
 	div.setAttribute('data-youtube-consent-warning', true);
 	div.className = className('m-icon-overlay__message');
 	button.className = className('a-button');
-	button.classList.add('ot-sdk-show-settings');
-	button.setAttribute('id', 'ot-sdk-btn');
+	button.setAttribute('data-ot-dynamic-show-settings', 'true');
 	button.innerHTML = `<span class="${className('a-button__text')}">Anpassa kakor</span>`;
 	message.innerHTML = missingConsentMessage;
 

package/src/atoms/height-limiter/_height-limiter.scss

@@ -30,6 +30,16 @@
 		}
 	}
 
+	@include m(snow) {
+		@include e(inner) {
+			&.is-limited {
+				&::after {
+					background-image: linear-gradient(to bottom, rgba($color-snow, 0) 0%, rgba($color-snow, 1) 100%);
+				}
+			}
+		}
+	}
+
 	@include e(btn) {
 		display: flex;
 		position: relative;

package/src/atoms/height-limiter/height-limiter.config.js

@@ -4,5 +4,13 @@ module.exports = {
 	context: {
 		title: 'Height limiter',
 		description: 'Toggla höjd på en container'
-	}
+	},
+	variants: [
+		{
+			name: 'On white background',
+			context: {
+				modifiers: ['white']
+			}
+		}
+	]
 }

package/src/atoms/height-limiter/height-limiter.js

@@ -1,5 +1,4 @@
 const elements = document.querySelectorAll('.js-height-limit');
-
 function update(innerContainer, button, height) {
 	if (button.classList.contains('is-clicked')) {
 		return;
@@ -23,6 +22,7 @@ function setup(element) {
 	const buttonTextElement = button.querySelector('span');
 	const buttonText = buttonTextElement.innerText;
 	const toggleText = element.getAttribute('data-toggle-text');
+	let topPosition;
 
 	update(innerContainer, button, height);
 
@@ -34,6 +34,12 @@ function setup(element) {
 			buttonTextElement.innerText === buttonText) ? toggleText : buttonText;
 		button.classList.toggle('is-clicked');
 
+		if (!innerContainer.classList.contains('is-limited')) {
+			topPosition = document.documentElement.scrollTop;
+		} else {
+			window.scroll(0, topPosition);
+		}
+
 		setTimeout(() => update(innerContainer, button, height), 1);
 	});
 

package/src/components.js

@@ -30,3 +30,4 @@ import './organisms/video-guide/video-guide';
 import './organisms/timeline/timeline';
 import './molecules/overview-navigation/overview-navigation';
 import './organisms/schedule/schedule-filter';
+import './assets/js/ot';

package/src/organisms/hero/_hero.scss

@@ -86,7 +86,8 @@
 
 	@include e(buttons) {
 		display: flex;
-		flex-direction: column;
+		flex-direction: row;
+		flex-wrap: wrap;
 		margin: -#{rhythm(1)} 0 0 -#{rhythm(3)};
 
 		@include atom(button) {

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

@@ -133,7 +133,7 @@ module.exports = {
 			context: {
 				no_image_class: 'o-hero--no-break',
 				limited_width: false,
-				has_button: true,
+				has_buttons: true,
 				has_tags: false,
 				has_link: false,
 				has_text: false,

package/src/organisms/schedule/_schedule.scss

@@ -223,7 +223,6 @@
 			}
 		}
 
-
 		@include e(close-btn) {
 			position: absolute;
 			top: 0;
@@ -236,6 +235,10 @@
 			margin-bottom: rhythm(1);
 			align-items: center;
 
+			> span {
+				line-height: 1.2;
+			}
+
 			@include bp-up(lg) {
 				margin-bottom: 0;
 			}
@@ -248,6 +251,7 @@
 
 				> span {
 					text-align: center;
+					margin-top: rhythm(0.5);
 				}
 			}
 		}