@internetstiftelsen/styleguide 2.22.1 → 2.22.3-beta.0.2

package/src/organisms/sections/sections.config.js

@@ -0,0 +1,68 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		sections: [
+			{
+				type: false,
+				modifier: false,
+				heading: 'Section grey',
+				heading_class: false,
+				text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum enim ac facilisis vehicula. Ut consequat consequat velit vel tempus. Sed non massa purus. Donec iaculis justo tristique ultrices tempus. Sed erat lectus, malesuada non lectus a, accumsan aliquam libero. Nunc sed dolor turpis. Nunc efficitur malesuada enim non viverra. Vestibulum in mi suscipit, laoreet purus eu, elementum nunc. Aliquam mattis leo sit amet erat posuere fermentum. Nunc mollis tortor quis enim facilisis, nec porttitor metus volutpat. Ut eu augue porttitor, placerat quam in, molestie nunc. Nam lacinia dignissim justo, ac mollis lorem vulputate sit amet. Maecenas feugiat eget erat nec suscipit. Phasellus pretium tellus ut pellentesque fringilla. In sodales maximus lorem eget vulputate. Donec viverra massa vel urna efficitur rutrum.'
+			},
+			{
+				type: 'white',
+				modifier: 'rectangle-left',
+				heading: 'Section white',
+				text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum enim ac facilisis vehicula. Ut consequat consequat velit vel tempus. Sed non massa purus. Donec iaculis justo tristique ultrices tempus. Sed erat lectus, malesuada non lectus a, accumsan aliquam libero. Nunc sed dolor turpis. Nunc efficitur malesuada enim non viverra. Vestibulum in mi suscipit, laoreet purus eu, elementum nunc. Aliquam mattis leo sit amet erat posuere fermentum. Nunc mollis tortor quis enim facilisis, nec porttitor metus volutpat. Ut eu augue porttitor, placerat quam in, molestie nunc. Nam lacinia dignissim justo, ac mollis lorem vulputate sit amet. Maecenas feugiat eget erat nec suscipit. Phasellus pretium tellus ut pellentesque fringilla. In sodales maximus lorem eget vulputate. Donec viverra massa vel urna efficitur rutrum.'
+			},
+			{
+				type: false,
+				modifier: false,
+				heading: 'Section grey',
+				text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum enim ac facilisis vehicula. Ut consequat consequat velit vel tempus. Sed non massa purus. Donec iaculis justo tristique ultrices tempus. Sed erat lectus, malesuada non lectus a, accumsan aliquam libero. Nunc sed dolor turpis. Nunc efficitur malesuada enim non viverra. Vestibulum in mi suscipit, laoreet purus eu, elementum nunc. Aliquam mattis leo sit amet erat posuere fermentum. Nunc mollis tortor quis enim facilisis, nec porttitor metus volutpat. Ut eu augue porttitor, placerat quam in, molestie nunc. Nam lacinia dignissim justo, ac mollis lorem vulputate sit amet. Maecenas feugiat eget erat nec suscipit. Phasellus pretium tellus ut pellentesque fringilla. In sodales maximus lorem eget vulputate. Donec viverra massa vel urna efficitur rutrum.'
+			},
+			{
+				type: 'white',
+				modifier: 'rectangle-right',
+				heading: 'Section white',
+				text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum enim ac facilisis vehicula. Ut consequat consequat velit vel tempus. Sed non massa purus. Donec iaculis justo tristique ultrices tempus. Sed erat lectus, malesuada non lectus a, accumsan aliquam libero. Nunc sed dolor turpis. Nunc efficitur malesuada enim non viverra. Vestibulum in mi suscipit, laoreet purus eu, elementum nunc. Aliquam mattis leo sit amet erat posuere fermentum. Nunc mollis tortor quis enim facilisis, nec porttitor metus volutpat. Ut eu augue porttitor, placerat quam in, molestie nunc. Nam lacinia dignissim justo, ac mollis lorem vulputate sit amet. Maecenas feugiat eget erat nec suscipit. Phasellus pretium tellus ut pellentesque fringilla. In sodales maximus lorem eget vulputate. Donec viverra massa vel urna efficitur rutrum.'
+			}
+		]
+	},
+	variants: [
+		{
+			name: 'Header and assymetric grid',
+			context: {
+				sections: [
+					{
+						type: false,
+						modifier: false,
+						heading: 'With header and assymetric grid',
+						heading_class: 'supersize',
+						has_header: true,
+						text: 'Internetstiftelsens vision är att alla vill, vågar och kan använda internet. Här har vi samlat våra utbildningssatsningar som gör att du enklare kan förstå och använda internets tjänster, och som bidrar till ökad digital kompetens.',
+					},
+					{
+						type: 'white',
+						modifier: 'rectangle-left o-section__content--peacock',
+						heading: 'Section white',
+						has_header: true,
+						has_grid: true,
+						meta: true,
+						text: 'Vi tycker om och tror på internet och brinner för att dela med oss av vår kunskap. Vår vision är att alla i Sverige vill, vågar och kan använda internet. För att det ska bli verklighet krävs kunskap om hur internet och digital teknik fungerar, både vad gäller tekniska aspekter och saker som källkritik och riskmedvetenhet.'
+					},
+					{
+						type: false,
+						modifier: 'rectangle-right o-section__content--jade',
+						heading: 'Section grey',
+						has_header: true,
+						has_grid: true,
+						meta: true,
+						text: 'Vi verkar för ett internet som bidrar positivt till människan och samhället. Därför är vi intresserade av hur internet i Sverige används och hur vi kan hjälpa medborgarna att använda det bättre och försäkra sig om att de får vad de betalar för.'
+					},
+				]
+			}
+		}
+	]
+}

package/src/organisms/tabs/tabs.config.js

@@ -0,0 +1,28 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		tab_item: [
+			{
+				id: 'tab-1',
+				heading: 'De här',
+				content: '<p>Klinisk och min drink. Reserverad potten var nu en kund, men inte bara protein. Renare TV, uppvärmning för någon, chips start. Antioxidanter eller om barnen orienterade, fotboll framför datorn. Medlemmar i dörren var intakt protein. Läxor fotbollstips lejon kartong bananer. Smartphones och bananer temperatur.</p>'
+			},
+			{
+				id: 'tab-2',
+				heading: 'Tabbarna',
+				content: '<p>Ta färdväg åker rot häst se precis det blev därmed se, söka smultron för ingalunda brunsås fram se vi miljoner jäst olika, groda sällan dunge när tiden fram helt sig dock. För sax blivit redan av där vid upprätthållande omfångsrik det på bra, icke dunge på mjuka groda ser del kan stora. År denna gör erfarenheter häst bland tre ta söka redan år, dimma om händer rot dimma att om själv av sjö, sig stig genom och sorgliga själv verkligen nya där.</p>'
+			},
+			{
+				id: 'tab-3',
+				heading: ' Går till elva',
+				content: '<p>Gamla det som mjuka gamla hans gamla bra sista fram gamla, tiden trevnadens se hwila när själv nu har kanske hwila, helt i när groda göras rännil verkligen tid så. Dock upprätthållande ta faktor sällan dimmhöljd ingalunda mjuka, vidsträckt bra tidigare vemod samma att lax redan, bra oss strand dimma redan är. Räv att dimmhöljd söka kunde tiden söka vid när, gör del dag söka vad icke se, göras tidigare vid nu dunge kunde tiden.</p>'
+			},
+			{
+				id: 'tab-4',
+				heading: '<svg width="20" height="20" viewbox="0 0 32 32"><path d="M31.5 18.2v-4.4h-4.7c-.3-1.4-.8-2.6-1.5-3.7l3.3-3.3-3.1-3.1L22.2 7c-1.2-.8-2.6-1.4-4-1.7V.5h-4.4v4.7c-1.4.2-2.7.8-3.9 1.6L6.7 3.6 3.6 6.7l3.2 3.2c-.8 1.2-1.3 2.5-1.6 3.9H.5v4.4h4.7c.3 1.5.9 2.8 1.7 4l-3.3 3.3 3.1 3.1 3.3-3.3c1.1.7 2.4 1.3 3.7 1.5v4.7h4.4v-4.7c1.4-.3 2.7-.8 3.9-1.6l3.4 3.4 3.1-3.1-3.4-3.4c.8-1.2 1.3-2.5 1.6-3.9h4.8zM16 23.5c-4.1 0-7.5-3.4-7.5-7.5s3.4-7.5 7.5-7.5 7.5 3.4 7.5 7.5-3.4 7.5-7.5 7.5z"></path></svg>',
+				content: '<p>Dock upprätthållande ta faktor sällan dimmhöljd ingalunda mjuka, vidsträckt bra tidigare vemod samma att lax redan, bra oss strand dimma redan är. Räv att dimmhöljd söka kunde tiden söka vid när, gör del dag söka vad icke se, göras tidigare vid nu dunge kunde tiden. Gamla det som mjuka gamla hans gamla bra sista fram gamla, tiden trevnadens se hwila när själv nu har kanske hwila, helt i när groda göras rännil verkligen tid så. </p>'
+			}
+		]
+	}
+}

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();
+	});
+});