Merge branch 'develop' into feature/SWED-2336-radio_buttons_ui

.github/workflows/pull-request.yml

@@ -34,7 +34,7 @@ jobs:
       - name: Tests and linting
         run: npm run lint && npm run test:coverage
 
-      - uses: codecov/codecov-action@v4.2.0
+      - uses: codecov/codecov-action@v4.3.0
         # with:
         #   files: ./coverage/lcov.info
         # fail_ci_if_error: true

RELEASE_NOTES.md

@@ -4,9 +4,18 @@
 
 ## Component changes
 
+- Input fields
+
+  - labels line-height increased & mobile values adjusted, so values are in sync with `h4` typography style
+
+- Buttons
+  - minor non-breaking UI updates (height for size large, unify hover state, modify active & focus-visible UI, and more)
+  - add Danish MitId button style (you can use either `i.bank-id-dk` OR `i.mitid-dk`, both are supported)
+
 ## Technical changes
 
-- chore update deps minor versions
+- chore deps (update deps packages minor versions)
+
 - remove Sentry from codebase
 
 ## Design System website

src/App/ComponentsDocumentation/components/Buttons/constants.js

@@ -92,7 +92,7 @@ const IconButtonOptions = (idAddOn) => ({
 			title: "Sizes",
 			values: [
 				{
-					name: "Default (Large)",
+					name: "Large (default)",
 					value: {
 						size: "lg",
 					},
@@ -111,6 +111,32 @@ const IconButtonOptions = (idAddOn) => ({
 				},
 			],
 		},
+		{
+			// button variant primary secondary tertiary
+			id: `${idAddOn ? idAddOn : ""}button-variant`,
+			title: "Button variant",
+			values: [
+				{
+					name: "Primary",
+					value: {
+						variant: "primary",
+					},
+				},
+				{
+					name: "Secondary",
+					default: true,
+					value: {
+						variant: "secondary",
+					},
+				},
+				{
+					name: "Tertiary",
+					value: {
+						variant: "tertiary",
+					},
+				},
+			],
+		},
 	],
 });
 
@@ -230,6 +256,7 @@ export const overviewButtons = {
 					icon="at-cloud-database"
 					size="lg"
 					iconOnly={true}
+					variant="secondary"
 				/>
 			),
 			title: "Icon only button",
@@ -265,6 +292,12 @@ export const overviewButtons = {
 									bankId: "no",
 								},
 							},
+							{
+								name: "Denmark",
+								value: {
+									bankId: "dk",
+								},
+							},
 						],
 					},
 					{
@@ -319,8 +352,8 @@ export const overviewButtons = {
 				<p>
 					Use BankID buttons as the main call to action on a page when the
 					following action is signing or verifying something with BankID.
-					Currently only available for Swedish and Norwegian BankID. Avoid using
-					multiple BankID buttons on a single page.
+					Currently available for Swedish and Norwegian BankID as well as for
+					Danish MitId. Avoid using multiple BankID buttons on a single page.
 				</p>
 			),
 		},

src/App/components/Button/index.js

@@ -21,6 +21,7 @@ const Button = ({
 	bankId,
 	iconAfter,
 	iconOnly,
+	variant,
 }) => {
 	const btnClasses = classnames(
 		"btn",
@@ -32,6 +33,7 @@ const Button = ({
 		disabled && href ? "disabled" : null,
 		bankId ? "btn-bank-id" : null,
 		className ? className : null,
+		type === "icon" && variant ? `btn-${variant}` : null,
 	);
 
 	const attrs = {
@@ -112,6 +114,8 @@ Button.propTypes = {
 		"default",
 		"primary",
 		"secondary",
+		"tertiary",
+		"icon",
 		"link",
 		"guiding-destructive",
 		"executive-destructive",
@@ -131,6 +135,7 @@ Button.propTypes = {
 	input: PropTypes.bool,
 	active: PropTypes.bool,
 	size: PropTypes.oneOf([
+		"xl",
 		"lg",
 		"sm",
 		"xs",
@@ -143,6 +148,7 @@ Button.propTypes = {
 	className: PropTypes.string,
 	iconAfter: PropTypes.bool,
 	iconOnly: PropTypes.bool,
+	variant: PropTypes.oneOf(["primary", "secondary", "tertiary"]),
 };
 
 export default Button;

src/less/components/button.less

@@ -13,50 +13,58 @@
 	touch-action: manipulation;
 	cursor: pointer;
 	line-height: 23.72px;
-	border: 1px solid transparent;
+	border: none;
 	white-space: nowrap;
 	user-select: none;
-	height: 60px;
+	height: 3.5rem;
 	border-radius: var(--border-radius);
-	font-size: 18px;
+	font-size: 1.125rem;
 	padding: 12px 16px;
 
+	&.btn-icon:is(.btn-xs, .btn-sm, .btn-lg, .btn-xl) {
+		height: fit-content;
+	}
+
 	&.btn-xl {
-		height: 72px;
-		font-size: 20px;
+		height: 4.5rem;
+		font-size: 1.25rem;
 		line-height: 24px;
 		padding: 24px;
 	}
 
 	&.btn-lg {
-		height: 60px;
-		font-size: 18px;
+		height: 3.5rem;
+		font-size: 1.125rem;
 		line-height: 23.72px;
 		padding: 12px 16px;
 
 		&.btn-icon {
+			padding: 15px;
+
 			i {
-				font-size: 24px;
+				font-size: 1.5rem;
 			}
 		}
 	}
 
 	&.btn-sm {
-		height: 48px;
-		font-size: 14px;
-		line-height: 16px;
-		padding: 16px;
+		height: 3rem;
+		font-size: 0.875rem;
+		line-height: 1rem;
+		padding: 1rem;
 
 		&.btn-icon {
+			padding: 11px;
+
 			i {
-				font-size: 20px;
+				font-size: 1.5rem;
 			}
 		}
 	}
 
 	&.btn-xs {
-		height: 38px;
-		font-size: 14px;
+		height: 2.375rem;
+		font-size: 0.875rem;
 		line-height: 16px;
 		padding: 12px;
 
@@ -66,45 +74,43 @@
 			display: inline-grid;
 			place-content: center;
 			place-items: center;
+			padding: 9px;
 
 			i {
-				font-size: 18px;
+				font-size: 1.125rem;
 			}
 		}
 	}
 
+	&:not(.loading, [disabled], .disabled, :active):hover {
+		background-color: var(--btn-hover);
+		color: var(--white);
+	}
+
+	&:focus-visible {
+		outline: 3px solid var(--btn-active-color);
+		outline-offset: 0.25rem;
+		border-radius: 0.125rem;
+	}
+
 	&.btn-primary {
 		background-color: var(--btn-primary-color);
 		color: var(--btn-primary-text-color);
 
-		&:not(.loading, [disabled], .disabled):hover {
-			background-color: var(--btn-primary-hover);
-		}
-
-		&:not(.loading, [disabled], .disabled):active {
-			outline: 3px solid var(--btn-active-color);
-			background-color: var(--btn-primary-color);
-		}
-
 		&.btn-bank-id i.bank-id {
 			background-color: var(--btn-primary-text-color);
 		}
 	}
 
 	&.btn-secondary,
-	&.btn-icon {
+	&.btn-icon:not(.btn-primary, .btn-tertiary) {
 		background-color: var(--btn-secondary-color);
 		color: var(--btn-secondary-text-color);
 		border: 1px solid var(--btn-secondary-border-color);
 
-		&:not(.loading, [disabled], .disabled):hover {
-			box-shadow: inset 0 0 0 3px var(--btn-secondary-hover);
-			border-color: var(--btn-secondary-hover);
-		}
-
-		&:not(.loading, [disabled], .disabled):active {
-			box-shadow: inset 0 0 0 3px var(--btn-active-color);
-			border-color: var(--btn-active-color);
+		&.disabled,
+		&[disabled] {
+			border-color: var(--btn-disabled-text);
 		}
 
 		&.btn-bank-id i.bank-id {
@@ -123,30 +129,29 @@
 			background-image: none;
 			margin-left: 0.5rem;
 
-			&-no,
+			&.bank-id-no,
 			&.no {
 				mask-image: url("../../icons/bank-id/bankid_no.svg");
 			}
 
-			&-se,
+			&.bank-id-se,
 			&.se {
 				mask-image: url("../../icons/bank-id/bankid_se.svg");
 			}
+
+			&.bank-id-dk,
+			&.mitid-dk,
+			&.dk {
+				mask-image: url("../../icons/bank-id/mitid_dk.svg");
+				mask-repeat: no-repeat;
+				mask-position: center;
+			}
 		}
 	}
 
 	&.btn-tertiary {
 		background-color: var(--btn-tertiary-color);
 		color: var(--btn-tertiary-text-color);
-
-		&:not(.loading, [disabled], .disabled):hover {
-			background-color: var(--btn-tertiary-hover);
-		}
-
-		&:not(.loading, [disabled], .disabled):active {
-			box-shadow: inset 0 0 0 3px var(--btn-active-color);
-			border-color: var(--btn-active-color);
-		}
 	}
 
 	&.disabled:not(.loading),
@@ -165,7 +170,7 @@
 			box-shadow: none;
 
 			&.btn-secondary {
-				border-color: var(--btn-disabled-text);
+				outline-color: var(--btn-disabled-text);
 			}
 
 			&.btn-primary,
@@ -217,7 +222,7 @@
 
 		&.btn-primary {
 			&:after {
-				border-color: var(--btn-primary-hover);
+				border-color: var(--gray);
 				border-left-color: var(--btn-primary-text-color);
 			}
 		}
@@ -231,7 +236,7 @@
 
 		&.btn-tertiary {
 			&:after {
-				border-color: var(--btn-tertiary-hover);
+				border-color: var(--gray);
 				border-left-color: var(--btn-secondary-text-color);
 			}
 		}

src/less/components/dropdown.less

@@ -149,9 +149,16 @@
 		background-color: var(--white);
 		color: var(--brand-secondary);
 
-		&:hover {
-			box-shadow: inset 0 0 0 3px var(--btn-secondary-hover);
-			border-color: var(--btn-secondary-hover);
+		&:hover:not(:active) {
+			background-color: var(--btn-hover);
+			color: var(--white);
+			border-color: transparent;
+		}
+
+		&:not(.disabled):focus-visible {
+			outline: 3px solid var(--btn-active-color);
+			outline-offset: 0.25rem;
+			border-radius: 0.125rem;
 		}
 
 		& i {

src/less/components/form.less

@@ -232,14 +232,20 @@ legend {
 	}
 }
 
+// typography here comes from typography `h4, .h4` (in typography.less)
 .form-group {
 	label {
-		font-size: 1.25rem;
-		line-height: 1.5rem;
+		font-size: 1.125rem;
+		line-height: 1.625rem;
 		margin-bottom: 0.5rem;
 		color: var(--brand-secondary);
 		font-family: var(--brand-headline);
 		font-weight: var(--font-weight-header, 400);
+
+		@media screen and (min-width: @screen-sm-min) {
+			font-size: 1.25rem;
+			line-height: 1.875rem;
+		}
 	}
 
 	&.small {