@internetstiftelsen/styleguide 2.22.0 → 2.22.3-beta.0.1

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

@@ -77,7 +77,7 @@ module.exports = {
 		},
 		{
 			name: 'Event hero with button',
-			status: 'wip',
+			status: 'ready',
 				context: {
 					event_title: 'Framtidsoptimism och problemlösning i en uppkopplad värld',
 					organizer: 'Heja framtiden',
@@ -113,5 +113,14 @@ module.exports = {
 				has_buttons: false,
 			}
 		},
+		{
+			name: 'Dynamic headline',
+			status: 'wip',
+			context: {
+				has_image: true,
+				hero_image: '/assets/images/Reprogramming_ENIAC2.png',
+				heading: 'Kvinnorna som digitaliserade världen',
+			}
+		},
 	]
 }

package/src/organisms/timeline/_timeline.scss

@@ -0,0 +1,292 @@
+@charset "UTF-8";
+
+html {
+	scroll-behavior: smooth;
+}
+
+@include organism(timeline) {
+	position: sticky;
+	top: -1px;
+	left: 0;
+	right: 0;
+	z-index: z_index(middlegroundImportant);
+	background: $color-ash;
+
+	@include card-shadow($color-cyberspace, 0.2);
+
+	&::after {
+		background-color: $color-concrete;
+		content: '';
+		display: block;
+		height: rhythm(1);
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: -1;
+	}
+
+
+	@include e(progress-bar) {
+		display:flex;
+		height: rhythm(1);
+		background-image: linear-gradient(90deg, #55c7b4 0vw, #55c7b4 14.285vw, #c27fec 14.285vw, #c27fec 28.57vw, #ffa94d 28.57vw, #ffa94d 42.855vw, #ffce2e 42.855vw, #ffce2e 57.14vw, #50b2fc 57.14vw, #50b2fc 71.425vw, #ff4069 71.425vw, #ff4069 85.71vw, #8E9297 85.71vw, #8E9297 100%);
+		width: 0;
+	}
+
+	@include e(decades-container) {
+		display: flex;
+		justify-content: space-around;
+		align-items: stretch;
+
+		> a {
+			display: block;
+			flex: 1;
+			text-decoration: none;
+			color: $color-cyberspace;
+			text-align: center;
+			padding-top: rhythm(1);
+			padding-bottom: rhythm(1);
+			font-family: $font-family-headings;
+			font-size: $size-medium;
+
+			&.is-reading {
+				&:nth-child(1) {
+					color: $color-jade;
+				}
+
+				&:nth-child(2) {
+					color: $color-peacock;
+				}
+
+				&:nth-child(3) {
+					color: $color-sandstone;
+				}
+
+				&:nth-child(4) {
+					color: $color-lemon;
+				}
+
+				&:nth-child(5) {
+					color: $color-ocean;
+				}
+
+				&:nth-child(6) {
+					color: $color-ruby;
+				}
+
+				&:nth-child(7) {
+					color: $color-granit;
+				}
+			}
+
+			@include bp-up(lg) {
+				font-size: $size-base;
+				padding-top: rhythm(2);
+				padding-bottom: rhythm(2);
+			}
+		}
+	}
+
+	@include e(decade) {
+		@include e(intro) {
+			padding-top: rhythm(4);
+			margin-bottom: rhythm(8);
+
+			@include bp-up(sm) {
+				margin-bottom: rhythm(10);
+			}
+
+			@include bp-up(md) {
+				margin-bottom: rhythm(12);
+			}
+
+			@include bp-up(lg) {
+				margin-bottom: rhythm(14);
+			}
+
+			@include bp-up(xl) {
+				margin-bottom: rhythm(18);
+			}
+		}
+	}
+
+
+	// "Parallax" scroll items
+	@include e(parallax) {
+		opacity: 0;
+		transition: opacity 1s ease-out, transform 5s cubic-bezier(0, 1, 0, 1);
+		transform: translateY(200px);
+		will-change: opacity, transform;
+		transition-delay: 0.5s;
+		flex: 100%;
+
+		&.animate {
+			transform: translateY(0);
+			opacity: 1;
+			z-index: z_index(middleGround);
+
+
+		}
+	}
+
+	@include e(item) {
+		@include e(content) {
+			display: none;
+			padding-bottom: 0;
+			margin-top: 0;
+
+			@include e(meta) {
+				@include e(related) {
+					margin-top: rhythm(4);
+					border-top: 1px solid $color-granit;
+					padding-top: rhythm(4);
+
+					img {
+						max-height: 100px;
+						width: 100%;
+						object-fit: cover;
+						object-position: 50% 25%;
+						border-radius: $border-radius;
+					}
+				}
+			}
+		}
+
+		&.is-open {
+			flex: 0 0 100%;
+			background-color: $color-cyberspace;
+			width: 100vw;
+			max-width: 100vw;
+			min-width: 100vw;
+			margin-left: calc(50% - 50vw);
+			margin-right: calc(50% - 50vw);
+			transform: translateY(0) !important;
+			z-index: z_index(middlegroundImportant);
+			padding-top: rhythm(6);
+			padding-bottom: rhythm(4);
+
+			@include bp-up(md) {
+				padding-top: rhythm(8);
+				padding-bottom: rhythm(8);
+			}
+
+			h1,
+			h2,
+			h3,
+			h4,
+			p,
+			a,
+			li {
+				color: $color-snow;
+			}
+
+			a[data-scroll-ignore] {
+				pointer-events: none;
+
+				&:hover,
+				&:focus {
+					text-decoration: none;
+					cursor: default;
+				}
+
+				&::after {
+					display: none;
+				}
+
+				h1 {
+					@extend %alpha;
+				}
+			}
+
+			p[class*='card__text'] {
+				@extend %preamble;
+			}
+
+			.wp-block-iis-card {
+				margin-left: auto;
+				margin-right: auto;
+
+				@include bp-up(sm) {
+					width: make_col(16);
+				}
+
+				@include bp-up(md) {
+					width: make_col(12);
+				}
+
+				@include bp-up(lg) {
+					width: make_col(12);
+				}
+
+				@include bp-up(xl) {
+					width: make_col(9);
+				}
+			}
+
+			& + .grid-18 {
+				transform: translateY(0) !important;
+			}
+
+			button {
+				display: inline-block;
+				position: absolute;
+				right: rhythm(1);
+				transform: translateY(-#{rhythm(1)});
+
+				&:first-child {
+					top: rhythm(1);
+					transform: none;
+				}
+
+				@include bp-up(md) {
+					right: rhythm(2);
+					transform: translateY(rhythm(2));
+
+					&:first-child {
+						top: rhythm(2);
+					}
+				}
+			}
+
+			[class*='content'] {
+				display: block;
+			}
+		}
+	}
+
+	@include e(item-close) {
+		display: none;
+	}
+
+	@include e(heading) {
+		@include plumber(
+			$font-size: 2,
+			$line-height: 3,
+			$leading-top: 0,
+			$leading-bottom: 0,
+			$baseline: $body-baseline
+		);
+
+		@include bp-up(sm) {
+			@include plumber(
+				$font-size: 2.2,
+				$line-height: 3,
+				$leading-top: 0,
+				$leading-bottom: 0,
+			);
+		}
+	}
+
+	@include e(card-text) {
+		display: none;
+
+		@include bp-up(lg) {
+			display: block;
+		}
+	}
+}
+
+.row-has-open-child {
+	margin-bottom: 0 !important;
+}

package/src/organisms/timeline/timeline.config.js

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

package/src/organisms/timeline/timeline.js

@@ -0,0 +1,146 @@
+import '../../assets/js/parallax';
+
+const { offsetTop, offsetBottom, offsetLeft } = require('../../assets/js/offset');
+
+const progressBar = document.querySelector('.js-progress-bar');
+const decadeContainer = document.querySelector('.js-decade-container');
+const decadeSections = document.querySelectorAll('.js-timeline-decade');
+const firstDecade = document.querySelector('h2.godzilla');
+const decades = document.querySelectorAll('h2.godzilla');
+let triggerPoint = 0;
+
+// Create decade links in timeline
+function buildTimelineNavigation() {
+	[].forEach.call(decades, (decade) => {
+		const decadeLink = document.createElement('a');
+		const { textContent } = decade;
+		decadeLink.setAttribute('href', `#${textContent}`);
+		decadeLink.innerText = textContent;
+		decadeContainer.appendChild(decadeLink);
+	});
+}
+
+/* Set trigger point (vertical position in viewport)
+for when a new decade should start being "active" */
+function setTriggerPoint() {
+	triggerPoint = window.innerHeight * 0.5;
+}
+
+// Animate progress bar when user is scolling within the timeline
+function animateProgressBar() {
+	let currentSection = 0;
+	let sectionIndex = 0;
+	const currentPosition = document.documentElement.scrollTop + triggerPoint;
+	const decadeLinks = document.querySelectorAll('.js-decade-container a');
+	let progressBarWidth = 0;
+
+	// Check if we are above the first section
+	if (currentPosition < offsetTop(firstDecade)) {
+		currentSection = 0;
+		progressBarWidth = 0;
+		progressBar.style.width = '0';
+
+		[].forEach.call(decadeLinks, (decadeLink) => {
+			decadeLink.classList.remove('is-reading');
+		});
+	} else {
+		// Otherwise add 1 to sectionIndex while scrolling;
+		[].forEach.call(decades, (decade) => {
+			const sectionTop = offsetTop(decade);
+
+			if (currentPosition >= sectionTop) {
+				currentSection = sectionIndex;
+
+				[].forEach.call(decadeLinks, (decadeLink) => {
+					decadeLink.classList.remove('is-reading');
+				});
+
+				decadeLinks[sectionIndex].classList.add('is-reading');
+			}
+
+			sectionIndex += 1;
+		});
+	}
+
+	// Calculate speed of the progressBar width while scrolling based on section height
+	const startPoint = decadeLinks[currentSection];
+	const startPointX = offsetLeft(startPoint);
+	const startPointWidth = startPoint.offsetWidth;
+	const startSection = decadeSections[currentSection];
+	const startSectionY = offsetTop(startSection);
+	const endSectionY = offsetBottom(startSection);
+	const sectionLength = endSectionY - startSectionY;
+	const scrollY = currentPosition - startSectionY;
+	const sectionProgress = scrollY / sectionLength;
+	progressBarWidth = startPointX + (startPointWidth * sectionProgress);
+
+	// Use result to animate progressbar
+	progressBar.style.width = `${progressBarWidth}px`;
+}
+
+// Run functions on page load
+if (progressBar) {
+	buildTimelineNavigation();
+	setTriggerPoint();
+	animateProgressBar();
+
+	// Re-run functions on window events
+	window.addEventListener('resize', () => {
+		setTriggerPoint();
+		animateProgressBar();
+	});
+	window.addEventListener('scroll', () => {
+		animateProgressBar();
+	});
+}
+
+// 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-card'), 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();
+	});
+});