@internetstiftelsen/styleguide 2.26.21 → 2.26.23-beta.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.26.21",
+	"version": "2.26.23-beta.0.2",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/app.scss

@@ -41,6 +41,8 @@ $namespace: '';
 @import 'atoms/ribbon/ribbon';
 @import 'atoms/quote/quote';
 @import 'atoms/rating/rating';
+@import 'atoms/progress/progress';
+@import 'atoms/range/range';
 
 // Molecules
 @import 'molecules/breadcrumb/breadcrumb';
@@ -74,6 +76,7 @@ $namespace: '';
 @import 'organisms/mega-menu/mega-menu';
 @import 'organisms/hero/hero';
 @import 'organisms/hero/hero--dynamic-headline';
+@import 'organisms/hero/hero--bbk';
 @import 'organisms/sections/sections';
 @import 'organisms/accordion/accordion';
 @import 'organisms/domain-search/domain-search';

package/src/atoms/icon/gauge-pointer.svg

@@ -0,0 +1 @@
+<svg width="32" height="30" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path d="M27.7 18.3C23.4 22.2 0 29.5 0 29.5S9.4 6.8 13.6 3c4.2-3.9 10.8-3.6 14.7.7 3.9 4.2 3.6 10.7-.6 14.6" fill="#3284BF"/><path d="M25.4 11.4c-.1 2.8-2.5 4.9-5.3 4.8-2.8-.1-4.9-2.5-4.8-5.3.1-2.8 2.5-4.9 5.3-4.8 2.7.2 4.9 2.5 4.8 5.3" fill="#FFF"/><path d="M25.4 11.4c-.1 2.8-2.5 4.9-5.3 4.8-2.8-.1-4.9-2.5-4.8-5.3.1-2.8 2.5-4.9 5.3-4.8 2.7.2 4.9 2.5 4.8 5.3" fill="#FFF"/></g></svg>

package/src/atoms/main-menu/_main-menu.scss

@@ -156,6 +156,7 @@
 				width: $icon-size-medium;
 				height: $icon-size-medium;
 				margin-left: rhythm(1);
+				margin-top: -#{rem(3px)};
 				transform-origin: 50% 50%;
 				transition: all 0.3s ease-out;
 				border: 0;

package/src/atoms/meta/_meta.scss

@@ -47,4 +47,28 @@
 	@include m(wrap) {
 		white-space: normal;
 	}
+
+	@include m(responsive) {
+		@include plumber(
+			$font-size: 1.4,
+			$baseline: $mono-baseline,
+			$leading-bottom: 0
+		);
+
+		@include bp-up(md) {
+			@include plumber(
+				$font-size: 1.6,
+				$baseline: $mono-baseline,
+				$leading-bottom: 0
+			);
+		}
+
+		@include bp-up(lg) {
+			@include plumber(
+				$font-size: 1.7,
+				$baseline: $mono-baseline,
+				$leading-bottom: 0
+			);
+		}
+	}
 }

package/src/atoms/progress/_progress.scss

@@ -0,0 +1,48 @@
+@charset "UTF-8";
+
+@include atom(progress) {
+	&[value] {
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+		display: block;
+		color: $color-ocean;
+		background: $color-concrete;
+		border: none;
+		width: 100%;
+		border-radius: 0;
+		height: rhythm(1);
+
+		@include bp-up(md) {
+			height: rhythm(2);
+		}
+	}
+	&[value]::-webkit-progress-bar {
+		border-radius: 0;
+		background: $color-concrete;
+	}
+	&[value]::-webkit-progress-value {
+		border-radius: 0;
+		background: $color-ocean;
+		transition: width 5s ease;
+	}
+	&[value]::-moz-progress-bar {
+		border-radius: 0;
+		background: $color-ocean;
+		transition: padding-bottom 5s ease;
+		padding-left: 60px;
+		padding-bottom: var(--value);
+		height: 0;
+		transform-origin: 0 0;
+		transform: rotate(-90deg) translateX(-60px) ;
+	}
+}
+
+@include atom(progress-label) {
+	display: flex;
+	align-items: center;
+
+	> progress {
+		margin-left: rhythm(1);
+	}
+}

package/src/atoms/progress/progress.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+	status: 'wip',
+
+	context: {
+		has_label: true,
+		value: '40',
+		max: '100',
+		max_width: false,
+		additional_classes: false,
+	}
+}

package/src/atoms/range/_range.scss

@@ -0,0 +1,104 @@
+@charset 'UTF-8';
+
+@include atom(range) {
+	-webkit-appearance: none;
+	appearance: none;
+	background: transparent;
+	cursor: pointer;
+	width: 100%;
+
+	&::-webkit-slider-runnable-track {
+		background-color: $color-concrete;
+		height: rhythm(1);
+		border-radius: $border-radius;
+		border-top: 1px solid lighten($color-granit, 15%);
+	}
+
+	&::-moz-range-track {
+		background-color: $color-concrete;
+		height: rhythm(1);
+		border-radius: $border-radius;
+		border-top: 1px solid $color-granit;
+	}
+
+	&::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		margin-top: -#{rhythm(1.125)};
+		background-color: $color-ash;
+		height: rhythm(3);
+		width: rhythm(1.5);
+		border: 1px solid $color-granit;
+		border-radius: $border-radius;
+	}
+
+	&::-moz-range-thumb {
+		background-color: $color-ash;
+		height: rhythm(3);
+		width: rhythm(1.5);
+		border-radius: 0;
+		border: 0;
+		border: 1px solid $color-granit;
+		border-radius: $border-radius;
+	}
+
+	&:focus {
+		outline: none;
+
+		& + output {
+			background-color: $color-ocean-light;
+
+			&::after {
+				border-bottom-color: $color-ocean-light;
+			}
+		}
+	}
+
+	&:disabled {
+		cursor: not-allowed;
+		opacity: 0.45;
+
+		& + output {
+			cursor: not-allowed;
+			opacity: 0.45;
+		}
+	}
+
+	&:focus::-webkit-slider-thumb {
+		background-color: $color-snow;
+		border-color: $color-ocean;
+		box-shadow: 0 0 0 inset rgba($color-cyberspace, 0.2), 0 1px 2px rgba($color-cyberspace, 0.2), 0 0 0 3px $color-ocean-light;
+	}
+
+	&:focus::-moz-range-thumb {
+		background-color: $color-snow;
+		border-color: $color-ocean;
+		box-shadow: 0 0 0 inset rgba($color-cyberspace, 0.2), 0 1px 2px rgba($color-cyberspace, 0.2), 0 0 0 3px $color-ocean-light;
+	}
+
+	@include e(value){
+		background-color: $color-concrete;
+		padding: rhythm(0.5) rhythm(1);
+		position: absolute;
+		border-radius: $border-radius;
+		left: 50%;
+		transform: translateX(-50%) translateY(calc(100% + 8px));
+		font-size: $size-medium;
+
+		&::after {
+			bottom: 100%;
+			left: 50%;
+			border: solid transparent;
+			content: "";
+			height: 0;
+			width: 0;
+			position: absolute;
+			pointer-events: none;
+			border-color: rgba($color-concrete, 0);
+			border-bottom-color: $color-concrete;
+			border-width: 4px;
+			margin-left: -4px;
+		}
+	}
+}
+

package/src/atoms/range/range.config.js

@@ -0,0 +1,45 @@
+module.exports = {
+	status: 'wip',
+
+	context: {
+		label: 'Värde',
+		id: 'value',
+		disabled: false,
+		value: '0',
+		min: '0',
+		max: '100',
+		step: '1',
+	},
+	variants: [
+		{
+			name: 'Decimals',
+			context: {
+				disabled: false,
+				value: '0',
+				min: '0',
+				max: '1',
+				step: '0.01'
+			}
+		},
+		{
+			name: 'Minus value',
+			context: {
+				disabled: false,
+				value: '0',
+				min: '-100',
+				max: '100',
+				step: '01',
+			}
+		},
+		{
+			name: 'Disabled',
+			context: {
+				disabled: true,
+				value: '0',
+				min: '0',
+				max: '100',
+				step: '1',
+			}
+		},
+	]
+}

package/src/atoms/range/range.js

@@ -0,0 +1,23 @@
+const ranges = document.querySelectorAll('.js-range-wrapper');
+function setValue(range, rangeValue) {
+	const val = range.value;
+	const min = range.min ? range.min : 0;
+	const max = range.max ? range.max : 100;
+	const newVal = Number(((val - min) * 100) / (max - min));
+	rangeValue.innerHTML = val;
+
+	// Sorta magic numbers based on size of the native UI thumb
+	rangeValue.style.left = `calc(${newVal}% + (${8 - newVal * 0.15}px))`;
+}
+
+ranges.forEach((wrap) => {
+	const range = wrap.querySelector('.js-range');
+	const rangeValue = wrap.querySelector('.js-range-value');
+
+	range.addEventListener('input', () => {
+		setValue(range, rangeValue);
+		range.focus();
+	});
+
+	setValue(range, rangeValue);
+});

package/src/components.js

@@ -31,3 +31,4 @@ import './organisms/timeline/timeline';
 import './molecules/overview-navigation/overview-navigation';
 import './organisms/schedule/schedule-filter';
 import './assets/js/ot';
+import './atoms/range/range';

package/src/configurations/typography/_typography.scss

@@ -42,6 +42,15 @@ h2,
 
 		line-height: 1.75rem;
 	}
+
+	@include m(responsive) {
+		@include plumber(
+			$font-size: 2,
+			$line-height: 3,
+			$leading-bottom: 1,
+			$baseline: $headings-baseline
+		);
+	}
 }
 
 h3,

package/src/molecules/card/_card.scss

@@ -292,4 +292,13 @@
 			}
 		}
 	}
+
+	@include m(mini) {
+		padding: rhythm(1) rhythm(2);
+		background-color: $color-snow;
+
+		@include bp-up(md) {
+			padding: rhythm(2) rhythm(3);
+		}
+	}
 }

package/src/organisms/hero/_hero--bbk.scss

@@ -0,0 +1,141 @@
+@charset 'UTF-8';
+
+@include organism(hero) {
+	@include m(bbk) {
+		background-color: $color-ocean-dark;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		position: relative;
+		overflow: visible;
+
+		@include e(top) {
+			display: flex;
+			flex-direction: row;
+			justify-content: center;
+			align-items: center;
+			position: relative;
+			padding-top: rhythm(2);
+			padding-bottom: rhythm(2);
+			max-width: 100%;
+
+			@include bp-up(md) {
+				padding-top: rhythm(4);
+				padding-bottom: rhythm(4);
+			}
+
+			@include bp-up(lg) {
+				max-width: 900px;
+			}
+
+			@include bp-up(xl) {
+				padding-top: rhythm(8);
+				padding-bottom: rhythm(8);
+			}
+
+			@include bp-up(xxl) {
+				padding-top: rhythm(10);
+				padding-bottom: rhythm(10);
+			}
+		}
+	}
+
+	@include e(gauge) {
+		width: rem(162px);
+		height: rem(162px);
+		flex-shrink: 0;
+		transform: scale(.7) translate3d(0,0,0);
+		position: relative;
+
+
+		@include bp-up(md) {
+			position: absolute;
+			left: 0;
+			top:37%;
+			transition: left 0.25s ease;
+			transform: scale(.7) translate3d(0,-50%,0);
+
+			&.is-testing {
+				left: 50%;
+				transition: scale 0.25s ease, transform 0.25s, left 0.25s ease;
+				transform: scale(.7) translate3d(-70%,-50%,0);
+			}
+		}
+
+		@include bp-up(xl) {
+			top: 50%;
+			transform: scale(1) translate3d(0,-50%,0);
+
+			&.is-testing {
+				left: 50%;
+				transition: scale 0.25s ease, transform 0.25s, left 0.25s ease;
+				transform: translate3d(-50%,-50%,0);
+			}
+		}
+
+	}
+
+	@include e(icon-gauge) {
+		fill: $color-snow;
+		width: 100%;
+		height: 100%;
+	}
+
+	@include e(icon-pointer) {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: rhythm(2);
+		height: rhythm(2);
+		margin-top: -#{rhythm(1)};
+		margin-left: -#{rhythm(1)};
+		transform: rotate(0deg);
+		transition: transform .8s;
+
+		&.is-testing {
+			transform: rotate(188deg);
+		}
+
+		&::before {
+			content: '';
+			display: block;
+			width: 46px;
+			height: 43px;
+			background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbC1ydWxlPSJub256ZXJvIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjcuNyAxOC4zQzIzLjQgMjIuMiAwIDI5LjUgMCAyOS41UzkuNCA2LjggMTMuNiAzYzQuMi0zLjkgMTAuOC0zLjYgMTQuNy43IDMuOSA0LjIgMy42IDEwLjctLjYgMTQuNiIgZmlsbD0iIzMyODRCRiIvPjxwYXRoIGQ9Ik0yNS40IDExLjRjLS4xIDIuOC0yLjUgNC45LTUuMyA0LjgtMi44LS4xLTQuOS0yLjUtNC44LTUuMy4xLTIuOCAyLjUtNC45IDUuMy00LjggMi43LjIgNC45IDIuNSA0LjggNS4zIiBmaWxsPSIjRkZGIi8+PHBhdGggZD0iTTI1LjQgMTEuNGMtLjEgMi44LTIuNSA0LjktNS4zIDQuOC0yLjgtLjEtNC45LTIuNS00LjgtNS4zLjEtMi44IDIuNS00LjkgNS4zLTQuOCAyLjcuMiA0LjkgMi41IDQuOCA1LjMiIGZpbGw9IiNGRkYiLz48L2c+PC9zdmc+Cg==');
+			background-repeat: no-repeat;
+			background-size: 46px 43px;
+			position: absolute;
+			top: -#{rem(7px)};
+			left: -#{rem(20px)};
+		}
+	}
+
+	@include e(button) {
+		position: absolute;
+		bottom: 0;
+		transform: translateY(50%);
+
+		@extend %box-shadow;
+	}
+
+	@include e(text) {
+		color: $color-snow;
+		margin-left: rhythm(4);
+		transition: opacity 0.25s ease;
+		overflow: hidden;
+		opacity: 1;
+
+		&.is-minimized {
+			opacity: 0;
+		}
+
+		@include bp-up(md) {
+			max-width: 60%;
+		}
+
+		@include bp-up(lg) {
+			max-width: 60%;
+		}
+	}
+}

package/src/organisms/mega-menu/mega-menu.config.js

@@ -3,7 +3,172 @@ module.exports = {
 
 	context: {
 		hidden: 'false',
-		id: 'mega-menu'
+		id: 'mega-menu',
+		modifier:'',
+		columns: [
+			 {
+				headline: 'Domäner',
+				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',
+				topics: [
+					{
+						topic: 'För skolan',
+						items: [
+							{
+								item: 'Digitala lektioner'
+							},
+							{
+								item: 'Lärarfortbildning'
+							},
+							{
+								item: 'Fördjupning'
+							},
+
+						]
+					},
+					{
+						topic: 'För samhället',
+						items: [
+							{
+								item: 'Svenskarna och internet'
+							},
+							{
+								item: 'Projekt internetaccess'
+							},
+							{
+								item: 'Federationers'
+							},
+
+						]
+					}
+				],
+			},
+			{
+				headline: 'Mötesplatser',
+				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',
+				topics: [
+					{
+						topic: 'Presentation',
+						items: [
+							{
+								item: 'Jobba hos oss',
+								external: true
+							},
+							{
+								item: 'Press'
+							},
+							{
+								item: 'Pressbilder och fotografier'
+							},
+							{
+								item: 'Kontakt'
+							}
+
+						]
+					}
+				],
+			},
+			{
+				headline: 'English',
+				topics: [
+					{
+						topic: '',
+						items: [
+							{
+								item: 'Lorem ipsum'
+							},
+							{
+								item: 'Dolor sit amet'
+							},
+							{
+								item: 'Aenean sodales vestibulum'
+							}
+
+						]
+					}
+				],
+			}
+		]
 	},
 	variants: [
 		{

package/src/pages/bredbandskollen/bredbandskollen.config.js

@@ -0,0 +1,100 @@
+module.exports = {
+	status: 'wip',
+
+	context: {
+		hidden: 'true',
+		id: true,
+		addidional_classes: false,
+		columns: [
+			{
+				headline: 'Om Bredbandskollen',
+				topics: [
+					{
+						topic: 'Mer om Bredbandskollen',
+						items: [
+							{
+								item: 'Appar för'
+							},
+							{
+								item: 'IOS och Android'
+							},
+							{
+								item: 'Värdera din uppkoppling'
+							},
+							{
+								item: 'Bredbandskollen över IPv6'
+							},
+							{
+								item: 'Bredbandskollen CLI'
+							},
+							{
+								item: 'Appar och behörighet'
+							},
+							{
+								item: 'Problem med webbläsartillägg'
+							},
+							{
+								item: 'Mätning över http och websockets'
+							}
+
+
+						]
+					}
+				],
+			},
+			{
+				headline: 'Hjälp',
+				topics: [
+					{
+						topic: '',
+						items: [
+							{
+								item: 'Frågor och svar'
+							},
+							{
+								item: 'Surfa mobilt'
+							},
+							{
+								item: 'Surfa trådlöst'
+							},
+
+						]
+					}
+				],
+			},
+			{
+				headline: 'English',
+				topics: [
+					{
+						topic: 'About Bredbandskollen',
+						items: [
+							{
+								item: 'More about Bredbandskollen'
+							},
+							{
+								item: 'Contact'
+							}
+
+						]
+					}
+				],
+			},
+			{
+				headline: 'Kontakt',
+				topics: [
+					{
+						topic: '',
+						items: [
+							{
+								item: 'Avtalsvillkor',
+							},
+							{
+								item: 'Integritetspolicy',
+							}
+						]
+					}
+				],
+			},
+		]
+	}
+}

package/src/utilities/_fill.scss

@@ -3,3 +3,15 @@
 .u-fill-snow {
 	fill: $color-snow !important;
 }
+
+.u-fill-concrete {
+	fill: $color-concrete !important;
+}
+
+.u-fill-granit {
+	fill: $color-granit !important;
+}
+
+.u-fill-ocean-dark {
+	fill: $color-ocean-dark !important;
+}

package/src/utilities/_hide.scss

@@ -101,3 +101,9 @@
 .u-overflow-visible {
 	overflow: visible !important;
 }
+
+.u-hide-empty {
+	&:empty {
+		display: none !important;
+	}
+}

package/src/utilities/_icons.scss

@@ -15,7 +15,7 @@ $fill-color: $color-black;
 		width: $icon-size-smallest !important;
 		height: $icon-size-smallest !important;
 	}
-	
+
 	@include m(small) {
 		width: $icon-size-small !important;
 		height: $icon-size-small !important;
@@ -36,6 +36,16 @@ $fill-color: $color-black;
 		height: $icon-size-large * 1.5 !important;
 	}
 
+	@include m(responsive) {
+		width: $icon-size !important;
+		height: $icon-size !important;
+
+		@include bp-up(md) {
+			width: $icon-size-large !important;
+			height: $icon-size-large !important;
+		}
+	}
+
 	// Specific icons
 	@include m(check) {
 		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24.42' fill='" + $fill-color + "'%3E%3Cpolygon points='12.04 24.42 0 13.26 2.87 10.16 11.81 18.44 28.9 0 32 2.87 12.04 24.42' data-name='Layer 3'/%3E%3C/svg%3E") !important;