@internetstiftelsen/styleguide 4.1.13 → 5.0.1

package/src/vendor/grid/_grid-framework.scss

@@ -1,13 +1,18 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use "sass:map";
+@use "sass:math";
+@use "sass:list";
+@use '../../configurations/variables' as var;
+@use '../../configurations/functions' as func;
+@use 'breakpoints' as breakpoint;
+@use 'grid' as m5;
 
 // Framework grid generation
 //
 // Used to generate the correct number of grid classes given
 // any value of `$grid-columns`.
 
-@use "sass:math";
-
-@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+@mixin make-grid-columns($columns: var.$grid-columns, $gutter: var.$grid-gutter-width, $breakpoints: var.$grid-breakpoints) {
 	// Common properties for all breakpoints
 	%grid-column {
 		position: relative;
@@ -17,8 +22,8 @@
 		padding-left: math.div($gutter, 2);
 	}
 
-	@each $breakpoint in map-keys($breakpoints) {
-		$infix: breakpoint-infix($breakpoint, $breakpoints);
+	@each $breakpoint in map.keys($breakpoints) {
+		$infix: breakpoint.breakpoint-infix($breakpoint, $breakpoints);
 
 		// Allow columns to stretch full width below their breakpoints
 		@for $i from 1 through $columns {
@@ -32,7 +37,7 @@
 			@extend %grid-column;
 		}
 
-		@include bp-up($breakpoint, $breakpoints) {
+		@include breakpoint.bp-up($breakpoint, $breakpoints) {
 			// Provide basic `.grid-{bp}` classes for equal-width flexbox columns
 			.grid#{$infix} {
 				flex-basis: 0;
@@ -48,7 +53,7 @@
 
 			@for $i from 1 through $columns {
 				.grid#{$infix}-#{$i} {
-					@include make-col($i, $columns);
+					@include m5.make-col($i, $columns);
 				}
 			}
 
@@ -62,7 +67,7 @@
 			@for $i from 0 through ($columns - 1) {
 				@if not ($infix == '' and $i == 0) { // Avoid emitting useless .offset-0
 					.offset#{$infix}-#{$i} {
-						@include make-col-offset($i, $columns); }
+						@include m5.make-col-offset($i, $columns); }
 				}
 			}
 		}

package/src/vendor/grid/_grid.scss

@@ -1,23 +1,26 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use "sass:math";
+@use "sass:list";
+@use '../../configurations/variables' as var;
+@use '../../configurations/functions' as func;
+@use 'breakpoints' as breakpoint;
 
 /// Grid system
 //
 // Generate semantic grid columns with these mixins.
 
-@use "sass:math";
-
 @mixin make-container() {
 	width: 100%;
 	margin-right: auto;
 	margin-left: auto;
-	padding-right: math.div($grid-gutter-width, 2);
-	padding-left: math.div($grid-gutter-width, 2);
+	padding-right: math.div(var.$grid-gutter-width, 2);
+	padding-left: math.div(var.$grid-gutter-width, 2);
 }
 
 // For each breakpoint, define the maximum width of the container in a media query
-@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
+@mixin make-container-max-widths($max-widths: var.$container-max-widths, $breakpoints: var.$grid-breakpoints) {
 	@each $breakpoint, $container-max-width in $max-widths {
-		@include bp-up($breakpoint, $breakpoints) {
+		@include breakpoint.bp-up($breakpoint, $breakpoints) {
 			max-width: $container-max-width;
 		}
 	}
@@ -26,8 +29,8 @@
 @mixin make-row() {
 	display: flex;
 	flex-wrap: wrap;
-	margin-right: math.div($grid-gutter-width, -2);
-	margin-left: math.div($grid-gutter-width, -2);
+	margin-right: math.div(var.$grid-gutter-width, -2);
+	margin-left: math.div(var.$grid-gutter-width, -2);
 }
 
 @mixin make-col-ready() {
@@ -37,18 +40,18 @@
 	// later on to override this initial width.
 	width: 100%;
 	min-height: 1px; // Prevent collapsing
-	padding-right: math.div($grid-gutter-width, 2);
-	padding-left: math.div($grid-gutter-width, 2);
+	padding-right: math.div(var.$grid-gutter-width, 2);
+	padding-left: math.div(var.$grid-gutter-width, 2);
 }
 
-@mixin make-col($size, $columns: $grid-columns) {
-	flex: 0 0 percentage(math.div($size, $columns));
+@mixin make-col($size, $columns: var.$grid-columns) {
+	flex: 0 0 math.percentage(math.div($size, $columns));
 	// Add a `max-width` to ensure content within each column does not blow out
 	// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
 	// do not appear to require this.
-	max-width: percentage(math.div($size, $columns));
+	max-width: math.percentage(math.div($size, $columns));
 }
 
-@mixin make-col-offset($size, $columns: $grid-columns) {
-	margin-left: percentage(math.div($size, $columns));
+@mixin make-col-offset($size, $columns: var.$grid-columns) {
+	margin-left: math.percentage(math.div($size, $columns));
 }

package/src/vendor/grid/_spacing.scss

@@ -1,6 +1,11 @@
-@each $breakpoint in map-keys($grid-breakpoints) {
-	@include bp-up($breakpoint) {
-		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+@use "sass:map";
+@use '../../configurations/variables' as var;
+@use '../../configurations/functions' as func;
+@use 'breakpoints' as breakpoint;
+
+@each $breakpoint in map.keys(var.$grid-breakpoints) {
+	@include breakpoint.bp-up($breakpoint) {
+		$infix: breakpoint.breakpoint-infix($breakpoint, var.$grid-breakpoints);
 
 		// Some special margin utils
 		.m#{$infix}-auto { margin: auto !important; }

package/src/atoms/toggle-high-contrast/readme.md

@@ -1,6 +0,0 @@
-# Toggle High Contrast
-When clicked, this component triggers the class ```high-contrast``` on the body-element which activated high contrast styles based on that class. The background is made dark and the text is made white.
-
-When activated, the site is not supposed to "look good". It's suppose to make text easier to read.
-
-The javascript is activated by this class: ```js-toggle-high-contrast```

package/src/atoms/toggle-high-contrast/toggle-high-contrast.config.js

@@ -1,8 +0,0 @@
-module.exports = {
-	status: 'ready',
-
-	context: {
-		button_text: 'Toggle high contrast',
-		trigger_class: 'js-toggle-high-contrast'
-	}
-}

package/src/atoms/toggle-high-contrast/toggle-high-contrast.js

@@ -1,10 +0,0 @@
-const element = document.querySelector('.js-toggle-high-contrast');
-
-function classToggle() {
-	const body = document.querySelector('body');
-	body.classList.toggle('high-contrast');
-}
-
-if (element) {
-	element.addEventListener('click', classToggle);
-}

package/src/molecules/modal/modal-graph.js

@@ -1,40 +0,0 @@
-/**
- * Close overlay on graph modal
- */
-
-const graphModals = document.querySelectorAll('.js-modal-graph');
-const graphModalButtons = document.querySelectorAll('.js-modal-graph-button');
-
-const addMultipleListeners = (el, types, listener, options, useCapture) => {
-	types.forEach((type) => el.addEventListener(type, listener, options, useCapture));
-};
-
-function closeOverlay(graphModalButton) {
-	// Close overlay button on 'click' on itself
-	graphModalButton.addEventListener('click', () => {
-		graphModalButton.classList.add('is-hidden');
-		graphModalButton.blur();
-	});
-
-	[].forEach.call(graphModals, (graphModal) => {
-		const closeButton = graphModal.querySelector('.js-toggle-modal');
-
-		closeButton.addEventListener('click', () => {
-			graphModalButton.classList.remove('is-hidden');
-		});
-
-		// Close overlay button on 'wheel', 'scroll', 'touchstart' on modal container
-		addMultipleListeners(
-			graphModal,
-			['wheel', 'scroll', 'touchstart'],
-			() => {
-				graphModalButton.classList.add('is-hidden');
-				console.log('fire!');
-			},
-		);
-	});
-}
-
-if (graphModalButtons && graphModals) {
-	[].forEach.call(graphModalButtons, closeOverlay);
-}