@internetstiftelsen/styleguide 2.24.0-beta.0.2 → 2.24.0

package/README.md

@@ -33,6 +33,14 @@ $namespace: 'mysite-';
 @import '~@internetstiftelsen/styleguide/src/organisms/header/header';
 ```
 
+### SCSS Mixins explained:
+```scss
+@include e(nested-element) {} // Element (.parent-element__nested-element)
+@include m(modifier-name) {} // Modifier (.parent-element--modifier-name)
+	@include b(block-name) {} // Block (.block-name)
+
+```
+
 Peek into the [app.scss](https://github.com/sewebb/iis-styleguide/blob/master/src/app.scss) to see the full set of components.
 
 For javascript it's basically the same thing. In a javascript file:
@@ -43,26 +51,6 @@ import Button from '@internetstiftelsen/styleguide/dist/atoms/button/button';
 
 // Standard ES6 version
 import Button from '@internetstiftelsen/styleguide/src/atoms/button/button';
-
-// Globals and Configuration/Base components are imported by default from the Styleguide Core
-
-// Atoms
-import '@internetstiftelsen/styleguide/src/atoms/button/button';
-import '@internetstiftelsen/styleguide/src/atoms/input/input';
-
-// Molecules
-import '@internetstiftelsen/styleguide/src/molecules/card/card';
-
-// Organisms
-import '~@internetstiftelsen/styleguide/src/organisms/header/header';
-```
-
-### SCSS Mixins explained:
-```scss
-@include e(nested-element) {} // Element (.parent-element__nested-element)
-@include m(modifier-name) {} // Modifier (.parent-element--modifier-name)
-	@include b(block-name) {} // Block (.block-name)
-
 ```
 
 Depending on your browser requirements you may use the src version which is not transpiled to ES5.

package/dist/assets/js/youtube.js

@@ -21,6 +21,9 @@ function onPlayerStateChange(el, e) {
 	if (e.data === YT.PlayerState.PLAYING) {
 		el.getElementsByTagName('img')[0].style.zIndex = '-1';
 		el.getElementsByTagName('button')[0].style.display = 'none';
+	} else if (e.data === YT.PlayerState.UNSTARTED) {
+		el.getElementsByTagName('img')[0].style.zIndex = null;
+		el.getElementsByTagName('button')[0].style.display = null;
 	}
 }
 
@@ -44,6 +47,11 @@ function setupYoutubePlayer(el) {
 		el.youtube.destroy();
 		el.youtube = null;
 		el.removeAttribute('data-youtube-ready');
+<<<<<<< HEAD
+=======
+		el.getElementsByTagName('img')[0].style.zIndex = null;
+		el.getElementsByTagName('button')[0].style.display = null;
+>>>>>>> feature/open-timelineitem
 	}
 
 	playerEl = document.createElement('div');

package/dist/components.js

@@ -1,15 +1,13 @@
 'use strict';
 
-require('./molecules/form');
-
-require('./atoms/textarea/rich-text');
-
 require('./atoms/password-toggle/password-toggle');
 
 require('./utilities/tab-highlighting/tab-highlighting');
 
 require('./molecules/system-error/system-error');
 
+require('a11y-toggle');
+
 require('./molecules/cookie-disclaimer/cookie-disclaimer');
 
 require('./organisms/accordion/accordion');
@@ -28,8 +26,12 @@ require('./atoms/tooltip/tooltip');
 
 require('./atoms/toggle-high-contrast/toggle-high-contrast');
 
+require('./focusTrap');
+
 require('./atoms/height-limiter/height-limiter');
 
+require('./assets/js/conditional');
+
 require('./atoms/file/file');
 
 require('./atoms/file/filePreview');

package/dist/molecules/form/Form.js

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

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

@@ -7,6 +7,8 @@ var _gliderJs2 = _interopRequireDefault(_gliderJs);
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var gliderElementHero = document.querySelector('.js-glider-hero');
+var dataLayer = window.dataLayer || [];
+var gliderLinks = document.querySelectorAll('.glider-slide a');
 
 if (gliderElementHero) {
 	var GliderHero = new _gliderJs2.default(gliderElementHero, {
@@ -41,6 +43,43 @@ if (gliderElementHero) {
 				}, autoplayDelay);
 			}
 		}, 0);
+	} else {
+		document.querySelector('.js-glider-prev').addEventListener('click', function () {
+			dataLayer.push({
+				event: 'carousel',
+				eventInfo: {
+					category: 'carousel',
+					action: 'click',
+					label: 'arrow_left'
+				}
+			});
+		});
+
+		document.querySelector('.js-glider-next').addEventListener('click', function () {
+			dataLayer.push({
+				event: 'carousel',
+				eventInfo: {
+					category: 'carousel',
+					action: 'click',
+					label: 'arrow_right'
+				}
+			});
+		});
+
+		[].forEach.call(gliderLinks, function (gliderLink) {
+			gliderLink.addEventListener('click', function () {
+				var linkTarget = gliderLink.href;
+				console.log(linkTarget);
+				dataLayer.push({
+					event: 'carousel',
+					eventInfo: {
+						category: 'carousel',
+						action: 'click',
+						label: linkTarget
+					}
+				});
+			});
+		});
 	}
 
 	module.exports = GliderHero;

package/dist/organisms/timeline/timeline.js

@@ -7,6 +7,7 @@ var _require = require('../../assets/js/offset'),
     offsetBottom = _require.offsetBottom,
     offsetLeft = _require.offsetLeft;
 
+var dataLayer = window.dataLayer || [];
 var progressBar = document.querySelector('.js-progress-bar');
 var decadeContainer = document.querySelector('.js-decade-container');
 var decadeSections = document.querySelectorAll('.js-timeline-decade');
@@ -84,6 +85,39 @@ function animateProgressBar() {
 	progressBar.style.width = progressBarWidth + 'px';
 }
 
+function isInViewport(element) {
+	var top = element.offsetTop;
+	var height = element.offsetHeight;
+
+	while (element.offsetParent) {
+		element = element.offsetParent; // eslint-disable-line
+		top += element.offsetTop;
+	}
+
+	return top < window.pageYOffset + window.innerHeight && top + height > window.pageYOffset;
+}
+
+function decadeIsVisible() {
+	[].forEach.call(decadeSections, function (decadeSection) {
+		if (isInViewport(decadeSection) && !decadeSection.classList.contains('is-in-view')) {
+			decadeSection.classList.add('is-in-view');
+
+			var decade = decadeSection.id;
+
+			dataLayer.push({
+				event: 'timeline',
+				eventInfo: {
+					category: 'timeline',
+					action: 'active_year',
+					label: decade
+				}
+			});
+		} else if (!isInViewport(decadeSection)) {
+			decadeSection.classList.remove('is-in-view');
+		}
+	});
+}
+
 // Run functions on page load
 if (progressBar) {
 	buildTimelineNavigation();
@@ -97,10 +131,12 @@ if (progressBar) {
 	});
 	window.addEventListener('scroll', function () {
 		animateProgressBar();
+		decadeIsVisible();
 	});
 }
 
 // DUMMY TIMELINE ITEM OPEN/CLOSE
+<<<<<<< HEAD
 /*
 function wrap(el, wrapper) {
 	el.parentNode.insertBefore(wrapper, el);
@@ -152,4 +188,56 @@ let timeLineItemScrollPosition = 0;
 		timeLineItemClose.click();
 	});
 });
-*/
+*/
+=======
+// function wrap(el, wrapper) {
+// 	el.parentNode.insertBefore(wrapper, el);
+// 	wrapper.classList.add('wrapper');
+// 	wrapper.appendChild(el);
+// }
+//
+// const timeLineItems = document.querySelectorAll('.js-timeline-item');
+// let timeLineItemScrollPosition = 0;
+//
+// [].forEach.call(timeLineItems, (timeLineItem) => {
+// 	const timeLineItemLink = timeLineItem.querySelector('a');
+// 	const timeLineItemClose = timeLineItem.querySelector('.js-timeline-item-close');
+// 	const timeLineItemBottomClose = timeLineItem.querySelector('.js-timeline-item-bottom-close');
+//
+// 	timeLineItemLink.addEventListener('click', () => {
+// 		timeLineItemScrollPosition = window.pageYOffset;
+// 		sessionStorage.setItem('scroll-position', timeLineItemScrollPosition);
+//
+// 		if (!timeLineItem.classList.contains('is-open')) {
+// 			timeLineItem.classList.add('is-open');
+// 			timeLineItem.closest('.row').classList.add('row-has-open-child');
+//
+// 			// Wrap open timeline item
+// 			wrap(timeLineItem.querySelector('.wp-block-iis-timeline-post'),
+//			document.createElement('div'));
+// 		}
+// 	});
+//
+// 	timeLineItemClose.addEventListener('click', () => {
+// 		timeLineItem.classList.remove('is-open');
+// 		timeLineItem.closest('.row').classList.remove('row-has-open-child');
+//
+// 		// Destroy generated wrapper
+// 		const wrapper = timeLineItemClose.nextElementSibling;
+// 		wrapper.replaceWith(...wrapper.childNodes);
+//
+// 		const top = sessionStorage.getItem('scroll-position');
+// 		if (top !== null) {
+// 			window.scrollTo(0, parseInt(top, 10));
+// 		}
+// 		sessionStorage.removeItem('scroll-position');
+//
+// 		// Trigger scroll event to reveal timeline items not yet parallaxed into view
+// 		window.dispatchEvent(new CustomEvent('scroll'));
+// 	});
+//
+// 	timeLineItemBottomClose.addEventListener('click', () => {
+// 		timeLineItemClose.click();
+// 	});
+// });
+>>>>>>> feature/open-timelineitem

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

@@ -8,7 +8,6 @@ var subtitlesBtn = document.querySelector('.js-subtitles-btn');
 var abortButton = document.querySelector('.js-abort-guide');
 var subtitlesElement = document.getElementById('video-subtitles');
 var subtitlesContainer = document.querySelector('.js-subtitles-container');
-var locationList = document.querySelector('.js-chapters');
 var chapterTrackElement = document.getElementById('video-chapters');
 var trackMetadataElement = document.getElementById('video-metadata');
 var subtitlesTrack = subtitlesElement === null ? '' : subtitlesElement.track;
@@ -19,28 +18,17 @@ 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 currentChapter = 0;
 var manualStep = false;
-var sourceElement = null;
 
 // Has src attributes been set already?
-if (sourceElement) {
-	document.location.reload();
-} else if (video) {
-	var dataSrc = video.dataset.src;
-
-	sourceElement = document.createElement('source');
-	sourceElement.setAttribute('src', dataSrc);
-	sourceElement.setAttribute('type', 'video/mp4');
-
-	video.appendChild(sourceElement);
-
+if (video) {
 	// Store current time in on page reload
 	window.addEventListener('unload', function () {
 		// 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;
+			var currentGuideImage = video.dataset.featuredImage;
 			localStorage.setItem('InmsCurrentTime', video.currentTime);
 			localStorage.setItem('InmsDuration', video.duration); // Get totalt duration of video
 			localStorage.setItem('InmsCurrentGuideURL', currentGuideURL);
@@ -140,26 +128,6 @@ function displayChapters() {
 				// Let data load
 				setTimeout(function () {
 					video.classList.remove('is-loading');
-					[].forEach.call(chapterTrack.cues, function (cues) {
-						var chapterName = cues.text;
-						var start = cues.startTime;
-						var newLocale = document.createElement('li');
-						var location = document.createElement('a');
-
-						location.setAttribute('rel', start);
-						newLocale.setAttribute('id', start);
-						location.setAttribute('tabindex', '0');
-
-						// Plain text from the chapter file into HTML text
-						var localeDescription = chapterName;
-						location.innerHTML = localeDescription;
-						newLocale.appendChild(location);
-						locationList.appendChild(newLocale);
-
-						location.addEventListener('click', function () {
-							video.currentTime = location.id;
-						}, false);
-					});
 
 					// If not set in sessionStorgare, set first cue on forward button on page load
 					if (!localStorage.getItem('InmsCurrentTime')) {
@@ -224,23 +192,10 @@ function displayChapters() {
 								// get the chapter <li> elements based on the currentLocation
 								var locations = [].slice.call(chapter.closest('figure').querySelectorAll('.js-chapters li'));
 
-								var counter = 0;
-
 								[].forEach.call(locations, function (location) {
 									// remove current classes from all items on page refresh
 									location.classList.remove('is-current-item');
 									location.querySelector('a').classList.remove('is-current');
-
-									if (location.classList.contains('is-current-item')) {
-										counter += 1; // iterate counter when active chapter is reached
-									}
-									if (counter < 1) {
-										// add watched class to everything before the current chapter to show progress
-										location.classList.add('is-watched');
-									} else {
-										// remove watched on all other items
-										location.classList.remove('is-watched');
-									}
 								});
 								chapter.parentNode.classList.add('is-current-item');
 								chapter.classList.add('is-current');
@@ -266,7 +221,6 @@ function displayChapters() {
 
 					[].forEach.call(idSelectors, function (idSelector) {
 						idSelector.classList.add('is-current');
-						idSelector.focus();
 					});
 
 					if (chapterCues) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.24.0-beta.0.2",
+	"version": "2.24.0",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"
@@ -19,7 +19,6 @@
 		"imagemin": "imagemin --out-dir=public/assets/img src/**/*.{png,jpg,gif}",
 		"build:css": "npm run stylelint && npm run scss && npm run cssmin",
 		"build:js": "npm run eslint && npm run babel && npm run browserify",
-		"build:js:replace:string": "replace \"require('./components');\" \"//require('./components');\" src/ -r --include=\"app.js\"",
 		"build:img": "npm run imagemin",
 		"watch:css": "onchange 'src/**/*.scss' -- npm run build:css",
 		"watch:js": "onchange 'src/**/*.js' -- npm run build:js",
@@ -35,7 +34,7 @@
 		"copy:zip:build": "copyfiles -f src/assets/zip/* build/assets/zip",
 		"copy:fonts:build": "copyfiles -f src/base/fonts/* build/assets/fonts",
 		"copy:build": "npm run copy:images:build && npm run copy:zip:build && npm run copy:fonts:build && npm run copy:videos:build",
-		"build": "npm run build:css && npm run build:js:replace:string && npm run build:js && npm run uglify && npm run package-js && npm run build:fractal && npm run copy:build && npm run create-icons-config",
+		"build": "npm run build:css && npm run build:js && npm run uglify && npm run build:fractal && npm run copy:build",
 		"dev": "concurrently \"npm:start:fractal\" \"npm:watch\" \"npm:copy:local-assets\"",
 		"package-js": "NODE_ENV=production babel src --out-dir dist --ignore src/**/*.config.js,src/app.js",
 		"create-icons-config": "node ./createIconsJson"
@@ -64,7 +63,6 @@
 		"onchange": "^6.1.0",
 		"postcss-class-prefix": "^0.3.0",
 		"postcss-cli": "^8.3.1",
-		"replace": "^1.2.1",
 		"sass": "^1.35.1",
 		"stylelint": "^13.13.1",
 		"uglify-es": "^3.3.9"

package/src/app.js

@@ -1,6 +1,5 @@
-import 'a11y-toggle';
-import './focusTrap';
-import './assets/js/conditional';
+import './molecules/form';
+import './atoms/textarea/rich-text';
 
 require('./atoms/grid-toggle/grid-toggle');
 require('./components');

package/src/app.scss

@@ -66,6 +66,7 @@ $namespace: '';
 @import 'molecules/glider/glider';
 @import 'molecules/glider/glider-course';
 @import 'molecules/glider/glider-hero';
+@import 'molecules/continue-video-guide/continue-video-guide';
 
 // Organisms
 @import 'organisms/header/header';
@@ -85,6 +86,8 @@ $namespace: '';
 @import 'organisms/event-listing-item/event-listing-item';
 @import 'organisms/podcast/podcast-episodes';
 @import 'organisms/podcast/podcast-player';
+@import 'organisms/video-guide/video-guide';
+@import 'organisms/timeline/timeline';
 
 // Structures
 @import 'structures/manifest';

package/src/assets/js/youtube.js

@@ -15,6 +15,9 @@ function onPlayerStateChange(el, e) {
 	if (e.data === YT.PlayerState.PLAYING) {
 		el.getElementsByTagName('img')[0].style.zIndex = '-1';
 		el.getElementsByTagName('button')[0].style.display = 'none';
+	} else if (e.data === YT.PlayerState.UNSTARTED) {
+		el.getElementsByTagName('img')[0].style.zIndex = null;
+		el.getElementsByTagName('button')[0].style.display = null;
 	}
 }
 
@@ -38,6 +41,8 @@ function setupYoutubePlayer(el) {
 		el.youtube.destroy();
 		el.youtube = null;
 		el.removeAttribute('data-youtube-ready');
+		el.getElementsByTagName('img')[0].style.zIndex = null;
+		el.getElementsByTagName('button')[0].style.display = null;
 	}
 
 	playerEl = document.createElement('div');

package/src/assets/video/metadata.vtt

@@ -1,28 +1,28 @@
 WEBVTT
 
 00:00:00.000 --> 00:00:25.000
-6513
+89108
 
 00:00:25.000 --> 00:00:39.000
-5555
+91027
 
 00:00:39.000 --> 00:01:51.500
-1376
+81345
 
 00:01:51.500 --> 00:02:23.000
-666
+76810
 
 00:02:23.000 --> 00:03:27.000
-777
+86454
 
 00:03:27.000 --> 00:03:56.500
-888
+80127
 
 00:03:56.500 --> 00:04:34.000
-242
+76325
 
 00:04:34.000 --> 00:05:17.000
-1337
+76280
 
 00:05:17.000 --> 00:06:28.000
-1177
+80725

package/src/atoms/tag/_tag.scss

@@ -25,6 +25,7 @@
 
 	@include e(text) {
 		color: $color-cyberspace;
+		letter-spacing: 0.025rem;
 	}
 
 	@include m(light) {

package/src/atoms/tag/tag.config.js

@@ -69,6 +69,16 @@ module.exports = {
 				hover_color: 'dark',
 				color: 'jade'
 			}
+		},
+		{
+			name: 'Border variation',
+			context: {
+				text: 'border',
+				href: '#',
+				is_light: false,
+				border: true,
+				background_color: false
+			}
 		}
 	]
 }

package/src/components.js

@@ -1,8 +1,7 @@
-import './molecules/form';
-import './atoms/textarea/rich-text';
 import './atoms/password-toggle/password-toggle';
 import './utilities/tab-highlighting/tab-highlighting';
 import './molecules/system-error/system-error';
+import 'a11y-toggle';
 import './molecules/cookie-disclaimer/cookie-disclaimer';
 import './organisms/accordion/accordion';
 import './organisms/tabs/tabs';
@@ -12,7 +11,9 @@ import './molecules/share/share';
 import './molecules/natural-language-form/natural-language-form';
 import './atoms/tooltip/tooltip';
 import './atoms/toggle-high-contrast/toggle-high-contrast';
+import './focusTrap';
 import './atoms/height-limiter/height-limiter';
+import './assets/js/conditional';
 import './atoms/file/file';
 import './atoms/file/filePreview';
 import './organisms/podcast/podcast';
@@ -23,3 +24,6 @@ import './molecules/glider/glider-course';
 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/forms/_fields.scss

@@ -25,6 +25,14 @@
 
 		@include b(input-help) {
 			background-color: $color-ruby-light;
+
+			&::selection {
+				background-color: $color-ruby;
+			}
+	
+			&::-moz-selection {
+				background-color: $color-ruby;
+			}
 		}
 	}
 }

package/src/globals.scss

@@ -25,30 +25,4 @@
 @import 'base/fonts/fonts';
 
 // Utilities
-@import 'utilities/margin';
-@import 'utilities/padding';
-@import 'utilities/hide';
-@import 'utilities/show';
-@import 'utilities/lists';
-@import 'utilities/position';
-@import 'utilities/fonts';
-@import 'utilities/tab-highlighting/tab-highlighting';
-@import 'utilities/border';
-@import 'utilities/align';
-@import 'utilities/vertical-align';
-@import 'utilities/icons';
-@import 'utilities/wrap';
-@import 'utilities/accessibility-helpers';
-@import 'utilities/links';
-@import 'utilities/z-index';
-@import 'utilities/box-shadow';
-@import 'utilities/flex';
-@import 'utilities/display';
-@import 'utilities/misc';
-@import 'utilities/gutter';
-@import 'utilities/text';
-@import 'utilities/pointer-events';
-@import 'utilities/clear';
-@import 'utilities/fill';
-@import 'utilities/indent';
-@import 'utilities/font-size';
+@import 'utilities/manifest';

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

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