@internetstiftelsen/styleguide 4.1.13-beta.0.2 → 5.0.0

package/src/pages/animate-footer/animate-footer.config.js

@@ -5,6 +5,185 @@ module.exports = {
 		hidden: 'true',
 		id: true,
 		addidional_classes: false,
-		label: 'sök en .se- eller .nu-domän'
+		label: 'sök en .se- eller .nu-domän',
+		columns: [
+			{
+				headline: 'Domäner',
+				list_id: 'domains',
+				topics: [
+					{
+						topic: '',
+						items: [
+							{
+								item: 'Är domänen ledig?'
+							},
+							{
+								item: 'Regler och beskrivning av whois'
+							},
+							{
+								item: 'Registrera en domän'
+							},
+							{
+								item: 'Villkor och regler'
+							},
+							{
+								item: '.se-/.nu-domäner som snart kan bli lediga'
+							},
+							{
+								item: 'Tips innan du registrerar en domän/Inspiration och tips'
+							},
+							{
+								item: 'Återförsäljare'
+							},
+							{
+								item: 'Kontakta din kundtjänst'
+							},
+							{
+								item: 'Så fungerar ett domännamn'
+							},
+							{
+								item: 'Oseriösa metoder'
+							},
+							{
+								item: 'Tvistlösning'
+							},
+							{
+								item: 'Domännamnsbranschen'
+							},
+							{
+								item: 'Tjänster'
+							},
+							{
+								item: 'Domänstatistik'
+							},
+
+						]
+					}
+				],
+			},
+			{
+				headline: 'Kunskap',
+				list_id: 'kunskap',
+				topics: [
+					{
+						topic: 'För skolan',
+						items: [
+							{
+								item: 'Digitala lektioner',
+								is_sub_level: true,
+							},
+							{
+								item: 'Lärarfortbildning',
+								is_sub_level: true,
+							},
+							{
+								item: 'Fördjupning',
+								is_sub_level: true,
+							},
+
+						]
+					},
+					{
+						topic: 'För samhället',
+						items: [
+							{
+								item: 'Svenskarna och internet',
+								is_sub_level: true,
+							},
+							{
+								item: 'Projekt internetaccess',
+								is_sub_level: true,
+							},
+							{
+								item: 'Federationers',
+								is_sub_level: true,
+							},
+
+						]
+					}
+				],
+			},
+			{
+				headline: 'Mötesplatser',
+				list_id: 'motesplatser',
+				topics: [
+					{
+						topic: '',
+						items: [
+							{
+								item: 'Internetdagarna',
+								external: true
+							},
+							{
+								item: 'Goto 10',
+								external: true
+							},
+							{
+								item: 'Forskningssamarbeten',
+								external: true
+							},
+							{
+								item: 'Internetstiftelsen stöttar'
+							},
+							{
+								item: 'Investeringar',
+								external: true,
+							},
+
+						]
+					}
+				],
+			},
+			{
+				headline: 'Om oss',
+				list_id: 'om-oss',
+				topics: [
+					{
+						topic: 'Presentation',
+						items: [
+							{
+								item: 'Jobba hos oss',
+								is_sub_level: true,
+								external: true
+							},
+							{
+								item: 'Press',
+								is_sub_level: true,
+							},
+							{
+								item: 'Pressbilder och fotografier',
+								is_sub_level: true,
+							},
+							{
+								item: 'Kontakt',
+								is_sub_level: true,
+							}
+
+						]
+					}
+				],
+			},
+			{
+				headline: 'English',
+				list_id: 'english',
+				topics: [
+					{
+						topic: '',
+						items: [
+							{
+								item: 'Lorem ipsum'
+							},
+							{
+								item: 'Dolor sit amet'
+							},
+							{
+								item: 'Aenean sodales vestibulum'
+							}
+
+						]
+					}
+				],
+			}
+		]
 	}
 }

package/src/print.scss

@@ -1,4 +1,4 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 
 /* Hide elements for print */
 @media print {

package/src/structures/_article.scss

@@ -1,34 +1,45 @@
+@charset "UTF-8";
 @use "sass:math";
-
-@mixin indent($text-indent: $indent) {
+@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;
+
+@mixin indent($text-indent: var.$indent) {
 
 }
 
-@include b(article) {
-	@include e(meta) {
-		margin: rhythm(4) 0 rhythm(4.5);
+@include bem.b(article) {
+	@include bem.e(meta) {
+		margin: func.rhythm(4) 0 func.rhythm(4.5);
 	}
 
-	@include e(content) {
+	@include bem.e(content) {
 		> div:not(.wp-block-iis-grid):not(.wp-block-iis-hero),
 		> figure {
-			margin-bottom: rhythm(3);
+			margin-bottom: func.rhythm(3);
 		}
 
 		> figure:not(.wp-block-iis-hero) img {
-			border-radius: $border-radius;
+			border-radius: var.$border-radius;
 		}
 	}
 
-	@include bp-up(lg) {
-		@include m(indent-basic) {
+	@include breakpoint.bp-up(lg) {
+		@include bem.m(indent-basic) {
 			> h1,
 			> p {
-				margin-left: rhythm(3);
+				margin-left: func.rhythm(3);
 			}
 		}
 
-		@include e(content) {
+		@include bem.e(content) {
 			> p:not(.preamble),
 			> h2,
 			> h3,
@@ -43,29 +54,29 @@
 			> figure,
 			> blockquote {
 				&:not(.alignfull):not(.alignleft):not(.alignright):not(.alignwide):not(.wp-block-iis-hero)  {
-					max-width: calc(#{rem(612px)} + #{($indent * 2)});
-					margin-right: math.div($grid-gutter-width, 2);
-					margin-left: $indent * 2;
+					max-width: calc(#{func.to_rem(612px)} + #{(var.$indent * 2)});
+					margin-right: math.div(var.$grid-gutter-width, 2);
+					margin-left: var.$indent * 2;
 				}
 			}
 
 			> [class*='meta'] {
-				margin-left: $indent;
+				margin-left: var.$indent;
 			}
 
 			> p.preamble {
-				max-width: rem(612px);
-				margin-left: $indent;
+				max-width: func.to_rem(612px);
+				margin-left: var.$indent;
 			}
 
 			> [class*='accordion'] {
-				@include bp-up(lg) {
+				@include breakpoint.bp-up(lg) {
 					max-width: none;
 					margin-left: 0;
 				}
 			}
 
-			@include m(full-width) {
+			@include bem.m(full-width) {
 				> p:not(.preamble),
 				> h2,
 				> h3,
@@ -84,13 +95,13 @@
 				}
 
 				> .wp-block-iis-info {
-					max-width: calc(46.364% + #{($indent * 2)});
-					margin-left: $indent;
+					max-width: calc(46.364% + #{(var.$indent * 2)});
+					margin-left: var.$indent;
 				}
 			}
 		}
 
-		@include e(indent) {
+		@include bem.e(indent) {
 			$grid-indent: 5.6703%;
 			$grid-margin-right: 20.335%;
 
@@ -127,14 +138,14 @@
 			}
 		}
 
-		@include m(no-title) {
-			@include e(content) {
+		@include bem.m(no-title) {
+			@include bem.e(content) {
 				margin-left: 0;
 			}
 		}
 	}
 
-	@include molecule(card) {
-		margin-bottom: rhythm(4);
+	@include mixin.molecule(card) {
+		margin-bottom: func.rhythm(4);
 	}
-}
+}

package/src/structures/_core-values.scss

@@ -1,3 +1,15 @@
-@include b(core-values) {
-	margin-top: rhythm(8);
+@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 bem.b(core-values) {
+	margin-top: func.rhythm(8);
 }

package/src/structures/_manifest.scss

@@ -1,4 +1,4 @@
-@import 'site';
-@import 'section';
-@import 'article';
-@import 'core-values';
+@use 'site';
+@use 'section';
+@use 'article';
+@use 'core-values';

package/src/structures/_section.scss

@@ -1,53 +1,65 @@
-@include b(section) {
-	margin-top: rhythm(8);
+@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 m(tight) {
-		margin-top: rhythm(2);
+@include bem.b(section) {
+	margin-top: func.rhythm(8);
 
-		@include bp-up(md) {
-			margin-top: rhythm(4);
+	@include bem.m(tight) {
+		margin-top: func.rhythm(2);
+
+		@include breakpoint.bp-up(md) {
+			margin-top: func.rhythm(4);
 		}
 	}
 
-	@include m(no-margin) {
+	@include bem.m(no-margin) {
 		margin-top: 0;
 	}
 
-	@include m(peacock) {
+	@include bem.m(peacock) {
 		p > a {
-			background-color: $color-peacock-light;
+			background-color: colors.$color-peacock-light;
 		}
 
 		::selection {
-			background-color: $color-peacock-light;
+			background-color: colors.$color-peacock-light;
 		}
 
 		::-moz-selection {
-			background-color: $color-peacock-light;
+			background-color: colors.$color-peacock-light;
 		}
 	}
 
-	@include m(jade) {
+	@include bem.m(jade) {
 		p > a {
-			background-color: $color-jade-light;
+			background-color: colors.$color-jade-light;
 		}
 
 		::selection {
-			background-color: $color-jade-light;
+			background-color: colors.$color-jade-light;
 		}
 
 		::-moz-selection {
-			background-color: $color-jade-light;
+			background-color: colors.$color-jade-light;
 		}
 	}
 
-	@include e(title) {
-		margin-bottom: rhythm(3);
-		padding-right: rem(15px);
-		padding-left: rem(15px);
+	@include bem.e(title) {
+		margin-bottom: func.rhythm(3);
+		padding-right: func.to_rem(15px);
+		padding-left: func.to_rem(15px);
 	}
 
-	@include e(label) {
+	@include bem.e(label) {
 		text-transform: uppercase;
 	}
 }

package/src/structures/_site.scss

@@ -1,28 +1,40 @@
-@include b(site) {
+@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 bem.b(site) {
 	display: flex;
 	flex-direction: column;
 	min-height: 100vh;
 	overflow: hidden;
 
-	@include e(header) {
+	@include bem.e(header) {
 		display: flex;
 		position: relative;
 		flex-direction: column;
 
 		&[style] {
-			z-index: z_index(foreground);
+			z-index: func.z_index(foreground);
 
 			[class*="o-header"] {
-				z-index: z_index(foreground);
+				z-index: func.z_index(foreground);
 			}
 		}
 	}
 
-	@include e(main) {
+	@include bem.e(main) {
 		flex: 1 0 auto;
 
-		@include e(content) {
-			padding-bottom: rhythm(4);
+		@include bem.e(content) {
+			padding-bottom: func.rhythm(4);
 		}
 	}
 }

package/src/theme/_dark-mode.scss

@@ -1,38 +1,39 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../configurations/colors/colors' as colors;
 
 @mixin dark-mode {
 	& {
-		--cyberspace-color: #{$color-snow};
-		--snow-color: #{$color-cyberspace};
-		--ash-color: #{$color-black};
+		--cyberspace-color: #{colors.$color-snow};
+		--snow-color: #{colors.$color-cyberspace};
+		--ash-color: #{colors.$color-black};
 
-		--concrete-color: #{$color-granit};
-		--granit-color: #{$color-concrete};
-		--ocean-dark-color: #{$color-ocean};
+		--concrete-color: #{colors.$color-granit};
+		--granit-color: #{colors.$color-concrete};
+		--ocean-dark-color: #{colors.$color-ocean};
 	}
 
 	.background-snow {
-		background-color: $color-cyberspace !important;
+		background-color: colors.$color-cyberspace !important;
 	}
 
 	.background-ash {
-		background-color: $color-black !important;
+		background-color: colors.$color-black !important;
 	}
 
 	.u-border-top {
-		border-top: 1px solid $color-black;
+		border-top: 1px solid colors.$color-black;
 	}
 
 	.color-granit {
-		color: $color-concrete;
+		color: colors.$color-concrete;
 	}
 
 	.color-ocean-dark {
-		color: $color-ocean !important;
+		color: colors.$color-ocean !important;
 	}
 
 	svg {
-		fill: $color-snow;
+		fill: colors.$color-snow;
 	}
 }
 

package/src/theme/_theme.scss

@@ -1,15 +1,18 @@
-@charset 'UTF-8';
+@use "sass:map";
+@charset "UTF-8";
 
-@import '../configurations/colors/colors';
+@use '../configurations/colors/colors' as colors;
+@use '../configurations/mixins' as mixin;
+@use '../configurations/bem' as bem;
 
 :root {
-	--snow-color: #{$color-snow};
-	--cyberspace-color: #{$color-cyberspace};
-	--black-color: #{$color-black};
-	--ash-color: #{$color-ash};
-	--dark-color: #{$color-cyberspace};
-	--white-color: #{$color-snow};
-	--ocean-dark-color: #{$color-ocean-dark};
+	--snow-color: #{colors.$color-snow};
+	--cyberspace-color: #{colors.$color-cyberspace};
+	--black-color: #{colors.$color-black};
+	--ash-color: #{colors.$color-ash};
+	--dark-color: #{colors.$color-cyberspace};
+	--white-color: #{colors.$color-snow};
+	--ocean-dark-color: #{colors.$color-ocean-dark};
 }
 
 $namespace: '';
@@ -20,21 +23,21 @@ $theme-palette: (
 ) !default;
 
 @function theme_palette($key: 'background') {
-	@return map-get($theme-palette, $key);
+	@return map.get($theme-palette, $key);
 }
 
-@include b(site) {
+@include mixin.b(site) {
 	display: flex;
 	flex-direction: column;
 	min-height: 100vh;
 
-	@include e(header) {
+	@include bem.e(header) {
 		display: flex;
 		position: relative;
 		flex-direction: column;
 	}
 
-	@include e(main) {
+	@include bem.e(main) {
 		flex: 1 0 auto;
 		transition: opacity 0.2s ease-out, height 0.2s ease-out;
 		opacity: 1;
@@ -47,16 +50,16 @@ $theme-palette: (
 }
 
 :root {
-	--m-submenu-background-color: #{$color-ocean-light};
-	--m-submenu-icon-fill-color: #{$color-cyberspace};
-	--m-submenu-icon-background-hover-color: #{$color-ocean-light};
-	--m-info-box-border-color: #{$color-peacock};
-	--m-modal-button-primary-color: #{$color-peacock-light};
-	--m-modal-button-primary-hover-color: #{$color-peacock};
-	--m-modal-button-primary-border-color: #{$color-peacock};
-	--m-modal-button-primary-text-color: #{$color-cyberspace};
-	--m-modal-button-secondary-color: #{$color-ruby-light};
-	--m-modal-button-secondary-hover-color: #{$color-ruby};
-	--m-modal-button-secondary-border-color: #{$color-ruby};
-	--m-modal-button-secondary-text-color: #{$color-cyberspace};
+	--m-submenu-background-color: #{colors.$color-ocean-light};
+	--m-submenu-icon-fill-color: #{colors.$color-cyberspace};
+	--m-submenu-icon-background-hover-color: #{colors.$color-ocean-light};
+	--m-info-box-border-color: #{colors.$color-peacock};
+	--m-modal-button-primary-color: #{colors.$color-peacock-light};
+	--m-modal-button-primary-hover-color: #{colors.$color-peacock};
+	--m-modal-button-primary-border-color: #{colors.$color-peacock};
+	--m-modal-button-primary-text-color: #{colors.$color-cyberspace};
+	--m-modal-button-secondary-color: #{colors.$color-ruby-light};
+	--m-modal-button-secondary-hover-color: #{colors.$color-ruby};
+	--m-modal-button-secondary-border-color: #{colors.$color-ruby};
+	--m-modal-button-secondary-text-color: #{colors.$color-cyberspace};
 }

package/src/utilities/_align.scss

@@ -1,4 +1,4 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 
 .u-align-left {
 	text-align: left !important;

package/src/utilities/_border.scss

@@ -1,7 +1,9 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../configurations/variables' as var;
+@use '../configurations/functions' as func;@use '../configurations/colors/colors-functions' as colorFunc;
 
 .u-border-radius {
-	border-radius: $border-radius !important;
+	border-radius: var.$border-radius !important;
 }
 
 .u-border-radius-50 {
@@ -43,7 +45,7 @@ $class-b-y: u-b-y !default;
 // Generate border color classes e.g. .border-color-ruby
 /// @group Colors
 .u-b {
-	@include color_values($colors, 'border-color', $separator: '-');
+	@include colorFunc.color_values(colorFunc.$colors, 'border-color', $separator: '-');
 }
 
 // Generate classes for border widths e.g. .u-b-0 and .u-b-l-4.

package/src/utilities/_box-shadow.scss

@@ -1,9 +1,12 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../configurations/mixins' as mixin;
+@use '../configurations/extends';
+@use '../configurations/colors/colors' as colors;
 
 .u-box-shadow {
 	@extend %box-shadow;
 }
 
 .u-box-shadow-card {
-	@include card-shadow($color-cyberspace, 0.2);
+	@include mixin.card-shadow(colors.$color-cyberspace, 0.2);
 }

package/src/utilities/_display.scss

@@ -1,4 +1,4 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 
 .u-display-block {
 	display: block !important;