@internetstiftelsen/styleguide 5.0.12-beta.0.1 → 5.0.13

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 The Swedish Internet Foundation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/organisms/mega-menu/mega-menu.js

@@ -197,7 +197,7 @@ function toggleMegaMenu(e) {
 }
 
 function handleMouseUp(e) {
-	var button = e.target.closest('.js-toggle-domain-search');
+	var button = e.target.closest('.js-toggle-domain-search-page');
 
 	if (button && megaMenu.getAttribute('aria-hidden') === 'false') {
 		hideMegaMenu();
@@ -249,4 +249,4 @@ if (closeMegaMenuBtn) {
 			document.querySelector('#readspeakerBtn [class*=a-button--icon]').classList.add('u-hide-md');
 		});
 	});
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "5.0.12-beta.0.1",
+	"version": "5.0.13",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

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

@@ -190,10 +190,6 @@
 					transform: rotate(-45deg);
 				}
 			}
-
-			@include breakpoint.bp-up(sm) {
-				font-size: var.$size-base;
-			}
 		}
 
 		@include bem.e(text) {

package/src/atoms/main-menu/main-menu.config.js

@@ -55,9 +55,9 @@ module.exports = {
 				url: false,
 				is_current: false,
 				icon: 'icon-arrow-down',
-				extra_class: 'js-toggle-domain-search',
+				extra_class: 'js-toggle-domain-search-page',
 				has_expandable: true,
-				controls: 'domain-search',
+				controls: 'domain-search-page',
 				hide_mobile: true
 			},
 			{

package/src/organisms/domain-search/_domain-search.scss

@@ -11,75 +11,21 @@
 @use '../../vendor/grid/breakpoints' as breakpoint;
 
 @include mixin.organism(domain-search) {
-	padding: func.rhythm(2) 0 func.rhythm(1) 0;
-
-	&:not([class*='is-in-mega-menu']) {
-		display: none;
-		position: absolute;
-		z-index: func.z_index(middlegroundImportant);
-		bottom: 0;
-		transform: translateY(0);
-		transition: transform 0.25s ease-out;
-
-		&[aria-hidden='false'] {
-
-			@extend %box-shadow;
-
-			transform: translateY(100%);
-
-			a,
-			button,
-			input {
-				animation-direction: reverse;
-			}
-		}
-
-		@include breakpoint.bp-up(xl) {
-			display: flex;
-		}
-
-		&[aria-hidden='true'] {
-			a,
-			button,
-			input {
-				display: none;
-				animation: 0 ease-in 0s 2s reverse both paused fadeIn;
-			}
-		}
-	}
-
-	a {
-		color: colors.$color-cyberspace;
-		text-decoration: underline;
-
-		&:hover,
-		&:focus {
-			border-bottom: func.to_rem(2px) solid colors.$color-jade;
-			border-radius: 0;
-			background-color: transparent;
-			text-decoration: none;
-		}
-
-		[class*='icon'] {
-			transform: translateY(func.to_rem(2px));
-		}
-	}
 
 	@include breakpoint.bp-up(md) {
 		padding: func.rhythm(3) func.rhythm(1);
 	}
 
-	@include bem.e(list-container) {
-		padding: 0 func.rhythm(1) 0 func.rhythm(1);
+	@include bem.e(form-wrapper) {
+		gap: func.rhythm(2);
 	}
 
 	@include bem.e(input) {
 		display: block;
 		width: calc(100% - #{func.rhythm(2)});
-		margin-right: func.rhythm(2);
 		padding: func.rhythm(1) func.rhythm(2);
 		transition: padding 0.25s ease-out;
-		border: 0;
+		border: 1px solid colors.$color-granit;
 		border-radius: var.$border-radius;
 		background-color: color.adjust(colors.$color-ash, $lightness: 4%);
 		letter-spacing: -0.1px;
@@ -89,51 +35,6 @@
 			font-size: func.to_rem(32px);
 		}
 
-		@include bem.m(force-focus-look) {
-			background-color:  color.adjust(colors.$color-ash, $lightness: 4%);
-
-			&:focus {
-				background-color:  color.adjust(colors.$color-ash, $lightness: 4%);
-			}
-		}
-	}
-
-	@include bem.e(list) {
-		display: flex;
-		flex-wrap: wrap;
-		padding: func.rhythm(1) 0 0 0;
-
-		li {
-			padding: func.rhythm(1) 0;
-			white-space: nowrap;
-
-			+ li {
-				border-top: 1px solid colors.$color-concrete;
-
-				@include breakpoint.bp-up(md) {
-					padding-bottom: 0;
-					border-top: 0;
-				}
-			}
-
-			a {
-				padding: 0 func.rhythm(1);
-				border-bottom: 0;
-				font-size: func.to_rem(var.$size-medium-plus);
-				text-decoration: underline;
-
-				@include breakpoint.bp-up(md) {
-					padding: 0;
-				}
-			}
-		}
-	}
-
-	@include breakpoint.bp-up(md) {
-
-		@include bem.e(pretext) {
-			font-size: func.to_rem(32px);
-		}
 	}
 
 	@include bem.e(submit) {
@@ -152,24 +53,10 @@
 		}
 	}
 
-	@include breakpoint.bp-up(xl) {
-		display: none;
-	}
-}
-
-@keyframes fadeIn {
-	0% {
-		opacity: 0;
-		display: none;
-	}
-
-	1% {
-		opacity: 1;
-		display: block;
-	}
-
-	100% {
-		opacity: 1;
-		display: block;
+	@include bem.e(result) {
+		@include bem.e(button-wrapper) {
+			flex-wrap: wrap;
+			gap: func.rhythm(2);
+		}
 	}
 }

package/src/organisms/domain-search/domain-search.config.js

@@ -3,9 +3,49 @@ module.exports = {
 
 	context: {
 		hidden: 'false',
-		id: 'domain-search',
-		addidional_classes: 'o-domain-search--narrow',
+		id: 'domain-search-page',
+		addidional_classes: 'o-domain-search-page--narrow',
 		label: 'sök en .se- eller .nu-domän',
-		white_background: true
-	}
+		white_background: true,
+		result: false,
+		available: false,
+	},
+	variants: [
+		{
+			name: 'result-available',
+			context: {
+				result: false,
+				available: true,
+				wildcard: false,
+				duplicate: false,
+			}
+		},
+		{
+			name: 'result-unavailable',
+			context: {
+				result: true,
+				available: false,
+				wildcard: false,
+				duplicate: false,
+			}
+		},
+		{
+			name: 'result-wildcard',
+			context: {
+				result: true,
+				available: false,
+				wildcard: true,
+				duplicate: false,
+			}
+		},
+		{
+			name: 'result-duplicate',
+			context: {
+				result: true,
+				available: false,
+				wildcard: false,
+				duplicate: true,
+			}
+		}
+	]
 };

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

@@ -209,7 +209,7 @@ function toggleMegaMenu(e) {
 }
 
 function handleMouseUp(e) {
-	const button = e.target.closest('.js-toggle-domain-search');
+	const button = e.target.closest('.js-toggle-domain-search-page');
 
 	if (button && megaMenu.getAttribute('aria-hidden') === 'false') {
 		hideMegaMenu();

package/src/pages/domain-search-page/domain-search-page.config.js

@@ -0,0 +1,53 @@
+module.exports = {
+	status: 'wip',
+
+	context: {
+		noResult: true,
+		singleResult: false,
+		availableResult: false,
+		wildcardResult: false,
+		duplicateResult: false,
+	},
+	variants: [
+		{
+			name: 'result-available',
+			context: {
+				noResult: false,
+				availableResult: true,
+				singleResult: false,
+				wildcardResult: false,
+				duplicateResult: false
+			}
+		},
+		{
+			name: 'result-unavailable',
+			context: {
+				noResult: false,
+				availableResult: false,
+				singleResult: true,
+				wildcardResult: false,
+				duplicateResult: false
+			}
+		},
+		{
+			name: 'result-wildcard',
+			context: {
+				noResult: false,
+				availableResult: false,
+				singleResult: false,
+				wildcardResult: true,
+				duplicateResult: false,
+			}
+		},
+		{
+			name: 'result-duplicate',
+			context: {
+				noResult: false,
+				availableResult: false,
+				singleResult: false,
+				wildcardResult: false,
+				duplicateResult: true,
+			}
+		}
+	]
+};

package/src/utilities/_text.scss

@@ -15,3 +15,15 @@
 .u-style-no-italic {
 	font-style: normal !important;
 }
+
+.u-uppercase {
+	text-transform: uppercase !important;
+}
+
+.u-lowercase {
+	text-transform: lowercase !important;
+}
+
+.u-capitalize {
+	text-transform: capitalize !important;
+}