@internetstiftelsen/styleguide 5.0.15 → 5.0.16

package/dist/assets/js/iconToggle.js

@@ -1,11 +1,7 @@
 'use strict';
 
 // Usage: data-toggle-icon-target="targetSvg" data-toggle-icon="copy|check"
-function toggleIconOnClick(e) {
-	e.preventDefault();
-
-	var el = e.target;
-
+function toggleIconOnClick(el) {
 	var target = el.dataset.toggleIconTarget ? document.getElementById(el.dataset.toggleIconTarget) : el;
 	var i = parseInt(el.dataset.iconIteration || 0, 10);
 	var options = el.dataset.toggleIcon.split('|');
@@ -17,8 +13,11 @@ function toggleIconOnClick(e) {
 }
 
 document.addEventListener('click', function (e) {
-	if (e.target.closest('[data-toggle-icon]')) {
-		toggleIconOnClick(e);
+	var target = e.target.closest('[data-toggle-icon]');
+
+	if (target) {
+		e.preventDefault();
+		toggleIconOnClick(target);
 		return false;
 	}
 });

package/package.json

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

package/src/app.scss

@@ -67,6 +67,7 @@
 @use 'molecules/overview-navigation/overview-navigation';
 @use 'molecules/multi-select/multi-select';
 @use 'molecules/input-group/input-group';
+@use 'molecules/simple-flow-chart/simple-flow-chart';
 
 // Organisms
 @use 'organisms/header/header';

package/src/assets/js/iconToggle.js

@@ -1,23 +1,23 @@
 // Usage: data-toggle-icon-target="targetSvg" data-toggle-icon="copy|check"
-function toggleIconOnClick(e) {
-	e.preventDefault();
-
-	const el = e.target;
-	 
-	const target = (el.dataset.toggleIconTarget) ? document.getElementById(el.dataset.toggleIconTarget) : el;
+function toggleIconOnClick(el) {
+	const target = el.dataset.toggleIconTarget
+		? document.getElementById(el.dataset.toggleIconTarget)
+		: el;
 	const i = parseInt(el.dataset.iconIteration || 0, 10);
 	const options = el.dataset.toggleIcon.split('|');
-	const nextIteration = (i + 1) === options.length ? 0 : i + 1;
+	const nextIteration = i + 1 === options.length ? 0 : i + 1;
 
 	el.dataset.iconIteration = nextIteration;
 	const useElement = target.querySelector('use');
 	useElement.setAttribute('xlink:href', `#icon-${options[nextIteration]}`);
 }
 
- 
 document.addEventListener('click', (e) => {
-	if (e.target.closest('[data-toggle-icon]')) {
-		toggleIconOnClick(e);
+	let target = e.target.closest('[data-toggle-icon]');
+
+	if (target) {
+		e.preventDefault();
+		toggleIconOnClick(target);
 		return false;
 	}
 });

package/src/molecules/glider/_glider-course.scss

@@ -123,5 +123,49 @@
 				margin-top: 0;
 			}
 		}
+
+		@include bem.e(info-box) {
+			margin-top: 0;
+
+			@include breakpoint.bp-up(lg) {
+				margin-bottom: 0;
+			}
+
+			ol {
+				list-style-type: none;
+				counter-reset: list-counter;
+				padding-left: 0;
+
+				li {
+					padding-left: func.rhythm(5);
+					margin-bottom: func.rhythm(1);
+					position: relative;
+
+					* {
+						display: inline;
+					}
+
+					&::before {
+						content: counter(list-counter);
+						counter-increment: list-counter;
+						display: inline-flex;
+						margin-right: func.rhythm(2);
+						background-color: colors.$color-ruby;
+						color: colors.$color-snow;
+						width: var.$icon-size-large;
+						height: var.$icon-size-large;
+						flex-grow: 0;
+						flex-shrink: 0;
+						border-radius: 50%;
+						align-items: center;
+						justify-content: center;
+						line-height: 1;
+						position: absolute;
+						top: func.to_rem(4px);
+						left: 0;
+					}
+				}
+			}
+		}
 	}
 }

package/src/molecules/icon-overlay/_icon-overlay.scss

@@ -21,6 +21,7 @@
 		object-fit: cover;
 		object-position: 50% center;
 		min-height: 100%;
+		aspect-ratio: 16 / 9;
 	}
 
 	img {

package/src/molecules/simple-flow-chart/_simple-flow-chart.scss

@@ -0,0 +1,60 @@
+@charset "UTF-8";
+@use "sass:math";
+@use "sass:color";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/bem' as bem;
+@use '../../configurations/config' as config;
+@use '../../configurations/variables' as var;
+@use '../../configurations/functions' as func;
+@use '../../configurations/colors/colors' as colors;
+@use '../../configurations/colors/colors-functions' as colorFunc;
+@use '../../vendor/grid/breakpoints' as breakpoint;
+@use '../../vendor/grid/grid' as grid;
+
+@include mixin.molecule(simple-flow-chart) {
+	list-style: none;
+	margin:0 ;
+	padding: 0;
+
+	@include bem.m(jade) {
+		background: rgb(45,137,122);
+		background: linear-gradient(180deg, rgba(45,137,122,1) 0%, rgba(208,240,234,1) 100%);
+	}
+
+	@include bem.e(item) {
+		padding: func.rhythm(3) func.rhythm(2);
+		position: relative;
+		text-align: center;
+		font-family: var.$font-family-headings;
+		font-size: calc(var.$size-base * 1.5);
+
+		& + & {
+			border-top: func.rhythm(1) solid colors.$color-snow;
+		}
+
+		&::after {
+			top: 100%;
+			left: 50%;
+			border: solid transparent;
+			content: '';
+			height: 0;
+			width: 0;
+			position: absolute;
+			pointer-events: none;
+			border-color: rgba(255, 255, 255, 0);
+			border-top-color: #ffffff;
+			border-width: func.rhythm(3) func.rhythm(5) 0 func.rhythm(5);
+			transform: translateX(-50%);
+		}
+
+		&:first-child {
+			color: colors.$color-snow;
+		}
+
+		&:last-child {
+			&::after {
+				display: none;
+			}
+		}
+	}
+}

package/src/molecules/simple-flow-chart/simple-flow-chart.config.js

@@ -0,0 +1,24 @@
+module.exports = {
+	status: 'prototype',
+	default: 'jade',
+
+	context: {
+		background_color: '#ffce2e',
+		icon_fill_color: '#1f2a36',
+		icon_background_hover_color: '#ffce2e',
+	},
+	variants: [
+		{
+			name: 'jade',
+			context: {
+				color: 'jade'
+			}
+		},
+		{
+			name: 'ruby',
+			context: {
+				color: 'jade'
+			}
+		},
+	]
+};