@internetstiftelsen/styleguide 4.1.13-beta.0.2 → 5.0.0

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

@@ -32,7 +32,7 @@ module.exports = {
 				has_tags: false,
 				has_buttons: true,
 				limited_width: false,
-				hero_image: 'https://stage.goto10.se/app/uploads/2024/05/toppbild-goto-10-linkoping-1-.jpg.webp',
+				hero_image: 'https://www.goto10.se/app/uploads/2024/06/toppbild-goto-10-linkoping-1-.jpg.webp',
 			},
 		},
 		{
@@ -137,7 +137,7 @@ module.exports = {
 				has_buttons: true,
 				limited_width: false,
 				heading: 'Välkommen till Goto 10',
-				hero_image: 'https://stage.goto10.se/app/uploads/2024/05/toppbild-goto-10-linkoping-1-.jpg.webp',
+				hero_image: 'https://www.goto10.se/app/uploads/2024/06/toppbild-goto-10-linkoping-1-.jpg.webp',
 				text: 'Goto 10 är en kostnadsfri mötesplats för kunskapsutbyte och innovation som drivs av Internetstiftelsen. Besök oss i Linköping, Malmö och Stockholm.',
 			},
 		},

package/src/organisms/mailchimp/_mailchimp.scss

@@ -1,26 +1,36 @@
-@charset 'UTF-8';
-
-@include organism(mailchimp) {
+@charset "UTF-8";
+@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;
+@use '../../vendor/baseline/plumber' as plumber;
+
+@include mixin.organism(mailchimp) {
 	clear: both;
 
-	@include e(wrapper) {
-		@include card-shadow($color-cyberspace, 0.2);
+	@include bem.e(wrapper) {
+		@include mixin.card-shadow(colors.$color-cyberspace, 0.2);
 
-		margin-top: rhythm(4);
-		margin-bottom: rhythm(8);
-		padding: rhythm(2);
-		border-radius: $border-radius;
-		background-color: $color-snow;
+		margin-top: func.rhythm(4);
+		margin-bottom: func.rhythm(8);
+		padding: func.rhythm(2);
+		border-radius: var.$border-radius;
+		background-color: colors.$color-snow;
 	}
 
-	@include e(close) {
+	@include bem.e(close) {
 		display: none;
 	}
 
-	@include e(image-container) {
-		margin-bottom: rhythm(2);
+	@include bem.e(image-container) {
+		margin-bottom: func.rhythm(2);
 
-		@include bp-up(lg) {
+		@include breakpoint.bp-up(lg) {
 			display: flex;
 			display: -webkit-box; // Weird Sarafi bug needs this
 			width: 50%;
@@ -28,97 +38,97 @@
 		}
 	}
 
-	@include e(image) {
+	@include bem.e(image) {
 		display: block;
 		flex-grow: 0;
-		border-radius: $border-radius;
+		border-radius: var.$border-radius;
 		object-fit: cover;
 	}
 
-	@include e(image-missing) {
+	@include bem.e(image-missing) {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		width: 100%;
 		height: 100%;
-		padding: rhythm(4);
-		border-radius: $border-radius;
-		background-color: $color-cyberspace;
+		padding: func.rhythm(4);
+		border-radius: var.$border-radius;
+		background-color: colors.$color-cyberspace;
 
 		svg {
 			width: 80%;
 			height: 80%;
-			min-height: rhythm(20);
-			fill: $color-jade;
+			min-height: func.rhythm(20);
+			fill: colors.$color-jade;
 		}
 	}
 
-	@include e(content) {
-		padding: 0 rhythm(3) 0 rhythm(3);
+	@include bem.e(content) {
+		padding: 0 func.rhythm(3) 0 func.rhythm(3);
 
-		@include bp-up(lg) {
-			padding-right: rhythm(4);
+		@include breakpoint.bp-up(lg) {
+			padding-right: func.rhythm(4);
 		}
 	}
 
-	@include m(sliding) {
+	@include bem.m(sliding) {
 		position: fixed;
-		z-index: z_index(foregroundMinus);
-		top: rhythm(1);
+		z-index: func.z_index(foregroundMinus);
+		top: func.rhythm(1);
 		right: -500px;
-		bottom: rhythm(1);
+		bottom: func.rhythm(1);
 		max-width: 420px;
 		transition: right ease-out 0.35s;
 
 		&.is-visible {
 			right: 0;
 
-			@include e(wrapper) {
+			@include bem.e(wrapper) {
 				display: block;
-				border: 1px solid $color-ash;
+				border: 1px solid colors.$color-ash;
 			}
 		}
 
-		@include bp-up(sm) {
+		@include breakpoint.bp-up(sm) {
 			top: auto;
 		}
 
-		@include e(wrapper) {
+		@include bem.e(wrapper) {
 			display: none;
 			margin-top: 0;
 			margin-bottom: 0;
 		}
 
-		@include e(row-bottom) {
+		@include bem.e(row-bottom) {
 			max-height: calc(100vh - 94px);
 			overflow-x: hidden;
 			overflow-y: auto;
 
-			@include bp-up(sm) {
+			@include breakpoint.bp-up(sm) {
 				max-height: none;
 				overflow: visible;
 			}
 		}
 
-		@include e(close) {
+		@include bem.e(close) {
 			display: flex;
 		}
 
-		@include e(image-container) {
+		@include bem.e(image-container) {
 			display: none;
 		}
 
-		@include e(content) {
+		@include bem.e(content) {
 			flex: 0 0 100%;
 			width: 100%;
 			max-width: 100%;
-			padding-right: rhythm(3);
-			padding-bottom: rhythm(2);
+			padding-right: func.rhythm(3);
+			padding-bottom: func.rhythm(2);
 			overflow-y: auto;
 			max-height: calc(100vh - 77px);
 		}
 
-		@include b(m-form__row) {
+		@include bem.b(m-form__row) {
 			flex: 0 0 100%;
 			width: 100%;
 			max-width: 100%;

package/src/organisms/mega-menu/_mega-menu.scss

@@ -1,13 +1,23 @@
+@charset "UTF-8";
 @use "sass:color";
-
-$border-color: color.adjust($color-jade, $lightness: -5%);
-
-@include organism(mega-menu) {
-	z-index: z_index(middlegroundImportant);
+@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;
+
+$border-color: color.adjust(colors.$color-jade, $lightness: -5%);
+
+@include mixin.organism(mega-menu) {
+	z-index: func.z_index(middlegroundImportant);
 	padding-right: 0;
 	padding-left: 0;
 	transition: transform 0.25s ease-out;
-	background-color: $color-jade-light;
+	background-color: colors.$color-jade-light;
 
 	&[aria-hidden='true'] {
 		display: none;
@@ -18,7 +28,7 @@ $border-color: color.adjust($color-jade, $lightness: -5%);
 		transform: translateY(0);
 
 		+ {
-			@include organism(domain-search) {
+			@include mixin.organism(domain-search) {
 				display: none;
 			}
 		}
@@ -32,48 +42,48 @@ $border-color: color.adjust($color-jade, $lightness: -5%);
 		}
 	}
 
-	@include e(wrapper) {
-		padding-top: rhythm(3);
+	@include bem.e(wrapper) {
+		padding-top: func.rhythm(3);
 
-		@include bp-down(md) {
-			padding-right: rhythm(1);
-			padding-left: rhythm(1);
+		@include breakpoint.bp-down(md) {
+			padding-right: func.rhythm(1);
+			padding-left: func.rhythm(1);
 		}
 	}
 
-	@include e(list) {
-		margin-top: rhythm(1);
+	@include bem.e(list) {
+		margin-top: func.rhythm(1);
 
-		@include e(topic) {
-			margin-top: rhythm(2);
-			margin-bottom: rhythm(0.5);
-			padding: rhythm(1) rhythm(1);
+		@include bem.e(topic) {
+			margin-top: func.rhythm(2);
+			margin-bottom: func.rhythm(0.5);
+			padding: func.rhythm(1) func.rhythm(1);
 			border-bottom: 1px solid $border-color;
-			font-family: $font-family-headings;
+			font-family: var.$font-family-headings;
 
 			&:first-child {
 				margin-top: 0;
 			}
 		}
 
-		@include e(item) {
-			margin: 0 0 rhythm(0.5) 0;
-			padding: rhythm(1) rhythm(1);
+		@include bem.e(item) {
+			margin: 0 0 func.rhythm(0.5) 0;
+			padding: func.rhythm(1) func.rhythm(1);
 
 			& + & {
 				border-top: 1px solid $border-color;
 			}
 		}
 
-		@include bp-up(lg) {
+		@include breakpoint.bp-up(lg) {
 
-			@include e(topic) {
+			@include bem.e(topic) {
 				padding: 0;
 				border-bottom: 0;
 			}
 
-			@include e(item) {
-				margin-bottom: rhythm(1);
+			@include bem.e(item) {
+				margin-bottom: func.rhythm(1);
 				padding: 0;
 				line-height: 1.3;
 
@@ -84,10 +94,10 @@ $border-color: color.adjust($color-jade, $lightness: -5%);
 		}
 	}
 
-	@include e(link) {
+	@include bem.e(link) {
 		display: inline-flex;
 		align-items: baseline;
-		color: $color-cyberspace;
+		color: colors.$color-cyberspace;
 		text-decoration: none;
 
 		&:hover {
@@ -96,42 +106,42 @@ $border-color: color.adjust($color-jade, $lightness: -5%);
 			}
 		}
 
-		@include m(large) {
+		@include bem.m(large) {
 			display: block;
-			padding: 0 rhythm(1);
-			font-family: $font-family-headings;
-			font-size: rem(23px);
+			padding: 0 func.rhythm(1);
+			font-family: var.$font-family-headings;
+			font-size: func.to_rem(23px);
 			white-space: nowrap;
 
-			@include bp-up(lg) {
+			@include breakpoint.bp-up(lg) {
 				padding: 0;
 			}
 		}
 
-		@include e(icon) {
-			width: $icon-size-smallest;
-			height: $icon-size-smallest;
+		@include bem.e(icon) {
+			width: var.$icon-size-smallest;
+			height: var.$icon-size-smallest;
 			flex-shrink: 0;
-			margin-left: rhythm(0.5);
+			margin-left: func.rhythm(0.5);
 		}
 	}
 
-	@include bp-up(lg) {
+	@include breakpoint.bp-up(lg) {
 		padding-bottom: 0;
 
-		@include e(link) {
-			@include m(large) {
+		@include bem.e(link) {
+			@include bem.m(large) {
 				padding: 0;
 			}
 		}
 	}
 
-	@include e(search) {
-		@include e(wrapper) {
-			padding: rhythm(2) rhythm(1);
+	@include bem.e(search) {
+		@include bem.e(wrapper) {
+			padding: func.rhythm(2) func.rhythm(1);
 
-			@include bp-up(md) {
-				padding: rhythm(3) rhythm(2);
+			@include breakpoint.bp-up(md) {
+				padding: func.rhythm(3) func.rhythm(2);
 			}
 		}
 	}

package/src/organisms/members-service-product/_members-service-product.scss

@@ -1,44 +1,55 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/typography/typography';
+@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;
+@use '../../vendor/baseline/plumber' as plumber;
 
-@include organism(service-product-list) {
+@include mixin.organism(service-product-list) {
 	list-style: none;
-	margin: 0 0 rhythm(2) 0;
+	margin: 0 0 func.rhythm(2) 0;
 	padding: 0;
 
-	@include e(item) {
+	@include bem.e(item) {
 		display: flex;
 		flex-direction: column;
-		padding: rhythm(3) rhythm(2);
+		padding: func.rhythm(3) func.rhythm(2);
 
 		& + & {
-			border-top: 1px solid $color-concrete;
+			border-top: 1px solid colors.$color-concrete;
 		}
 
-		@include bp-up(sm) {
-			padding-top: rhythm(2);
-			padding-bottom: rhythm(2);
+		@include breakpoint.bp-up(sm) {
+			padding-top: func.rhythm(2);
+			padding-bottom: func.rhythm(2);
 			flex-direction: row;
 			align-items: center;
 		}
 	}
 
-	@include e(logo) {
+	@include bem.e(logo) {
 		flex-shrink: 0;
 
-		@include e(image) {
+		@include bem.e(image) {
 			width: 100px;
 			height: auto;
-			margin-right: rhythm(4);
-			margin-bottom: rhythm(1);
+			margin-right: func.rhythm(4);
+			margin-bottom: func.rhythm(1);
 
-			@include bp-up(sm) {
+			@include breakpoint.bp-up(sm) {
 				margin-bottom: 0;
 			}
 		}
 	}
 
-	@include e(data) {
-		@include e(list) {
+	@include bem.e(data) {
+		@include bem.e(list) {
 			list-style: none;
 			margin: 0;
 			padding: 0;
@@ -53,8 +64,8 @@
 			}
 
 			dd {
-				max-width: calc(#{rem(612px)} + #{($indent * 2)});
+				max-width: calc(#{func.to_rem(612px)} + #{(var.$indent * 2)});
 			}
 		}
 	}
-}
+}

package/src/organisms/members-service-product/members-service-product.config.js

@@ -6,7 +6,7 @@ module.exports = {
 
 	context: {
 		provider: 'Gotit AB',
-		logo: 'https://www.skolfederation.se/wp-content/uploads/2017/02/logo_gotit.png',
+		logo: 'https://skolfederation.se/app/uploads/2017/02/logo_gotit.png',
 		description: 'Ett IT-stöd anpassat för alla former av vuxenutbildning. Alvis stödjer vuxenutbildning i egenregi, upphandlad utbildning eller en blandning av dessa.',
 		serviceName: 'Alvis',
 		heading: 'Filtrera',
@@ -56,19 +56,19 @@ module.exports = {
 				items: [
 					{
 						provider: 'Gotit AB',
-						logo: 'https://www.skolfederation.se/wp-content/uploads/2017/02/logo_gotit.png',
+						logo: 'https://skolfederation.se/app/uploads/2017/02/logo_gotit.png',
 						description: 'Ett IT-stöd anpassat för alla former av vuxenutbildning. Alvis stödjer vuxenutbildning i egenregi, upphandlad utbildning eller en blandning av dessa.',
 						serviceName: 'Alvis',
 					},
 					{
-						provider: 'MV Nordic AB',
-						logo: 'https://www.skolfederation.se/wp-content/uploads/2016/10/MV-Nordic_logotyp-180x34.png',
+						provider: 'Lexplore Nordic AB',
+						logo: 'https://skolfederation.se/app/uploads/2017/06/lexplore_logo-180x55.png',
 						description: 'Avtalen ger dig som uppköpare eller rektor möjlighet att hjälpa elever med dyslexi eller andra läs- och skrivsvårigheter med att klara sig i skolan eller på en utbildning.',
 						serviceName: 'Det flexibla avtalet',
 					},
 					{
 						provider: 'Natur & kultur',
-						logo: 'https://www.skolfederation.se/wp-content/uploads/2015/04/NoK_Logo_35mm.gif',
+						logo: 'https://skolfederation.se/app/uploads/2015/04/NoK_Logo_35mm.gif',
 						description: 'En digitalbok är den tryckta boken i digitalt format. Läs boken på en pekplatta, datorn eller telefon.',
 						serviceName: 'Digitalbok',
 					}