@internetstiftelsen/styleguide 3.0.7 → 3.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "3.0.7",
+	"version": "3.0.9",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"
@@ -42,7 +42,7 @@
 	},
 	"devDependencies": {
 		"@frctl/fractal": "^1.5.14",
-		"@frctl/mandelbrot": "^1.10.2",
+		"@frctl/mandelbrot": "^1.10.3",
 		"@internetstiftelsen/eslint-config": "^0.0.5",
 		"@internetstiftelsen/stylelint-config": "^1.0.0",
 		"babel-cli": "^6.26.0",

package/src/molecules/table/_table.scss

@@ -96,7 +96,7 @@
 	}
 }
 
-@keyframes pulse {
+@keyframes xPulse {
 	0% {
 		right: 0;
 		opacity: 1;
@@ -245,7 +245,7 @@
 		right: rhythm(3);
 		width: rhythm(7);
 		height: 0;
-		animation: pulse 2s infinite;
+		animation: xPulse 2s infinite;
 		font-family: $font-family-mono;
 		font-size: 80%;
 		text-transform: uppercase;
@@ -257,7 +257,7 @@
 		z-index: z_index(background);
 		top: -#{rem(4px)};
 		right: 0;
-		animation: pulse 2s infinite;
+		animation: xPulse 2s infinite;
 		font-family: $font-family-mono;
 	}
 }

package/src/organisms/hero/_hero--bbk.scss

@@ -39,6 +39,34 @@
 				padding-bottom: rhythm(10);
 			}
 		}
+
+		@include e(button) {
+			position: absolute;
+			bottom: 0;
+			transform: translateY(50%);
+
+			@extend %box-shadow;
+		}
+
+		@include e(text) {
+			color: $color-snow;
+			margin-left: rhythm(4);
+			transition: opacity 0.25s ease;
+			overflow: hidden;
+			opacity: 1;
+
+			&.is-minimized {
+				opacity: 0;
+			}
+
+			@include bp-up(md) {
+				max-width: 60%;
+			}
+
+			@include bp-up(lg) {
+				max-width: 60%;
+			}
+		}
 	}
 
 	@include e(gauge) {
@@ -110,32 +138,4 @@
 			left: -#{rem(20px)};
 		}
 	}
-
-	@include e(button) {
-		position: absolute;
-		bottom: 0;
-		transform: translateY(50%);
-
-		@extend %box-shadow;
-	}
-
-	@include e(text) {
-		color: $color-snow;
-		margin-left: rhythm(4);
-		transition: opacity 0.25s ease;
-		overflow: hidden;
-		opacity: 1;
-
-		&.is-minimized {
-			opacity: 0;
-		}
-
-		@include bp-up(md) {
-			max-width: 60%;
-		}
-
-		@include bp-up(lg) {
-			max-width: 60%;
-		}
-	}
 }

package/src/organisms/hero/_hero.scss

@@ -62,10 +62,16 @@
 	}
 
 	@include e(paragraph) {
+		color: $color-cyberspace;
+
 		@include plumber(
 			$font-size: 2.5,
 			$line-height: 3
 		);
+
+		@include bp-up(sm) {
+			color: $color-snow;
+		}
 	}
 
 	@include e(tags) {
@@ -196,6 +202,10 @@
 			}
 		}
 
+		@include e(paragraph) {
+			color: $color-cyberspace;
+		}
+
 		&.alignfull {
 			@include e(caption) {
 				.wrapper {

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

@@ -22,7 +22,7 @@ module.exports = {
 				limited_width: true,
 				has_radius: true,
 				has_buttons: false,
-				text: 'Nästan alla i Sverige använder internet – men hur meningsfull är tiden vi spenderar där? I rapporten Svenskarna och internet 2019 frågar vi för första gången om meningsfullhet, och det syns stora skillnader mellan olika aktiviteter. Tid på sociala medier tycker bara var fjärde är meningsfull.',
+				text: 'Nästan alla i Sverige använder internet – men hur meningsfull är tiden vi spenderar där? I rapporten Svenskarna och internet 2019 frågar vi för första gången om meningsfullhet, och det syns stora skillnader mellan olika aktiviteter.',
 			}
 		},
 		{

package/src/organisms/timeline/openTimelineItem.js

@@ -0,0 +1,55 @@
+// DUMMY TIMELINE ITEM OPEN/CLOSE
+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();
+	});
+});

package/src/organisms/timeline/timeline.js

@@ -137,55 +137,3 @@ if (progressBar) {
 		decadeIsVisible();
 	});
 }
-
-// DUMMY TIMELINE ITEM OPEN/CLOSE
-// 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();
-// 	});
-// });