SWED-2337 toggle switch UI update

SwedbankPay · Oct 31, 2024 · 7212e57 · 7212e57
1 parent a70c635
commit 7212e57
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 59 deletions.
diff --git a/src/App/ComponentsDocumentation/components/Togglebox/constants.js b/src/App/ComponentsDocumentation/components/Togglebox/constants.js
@@ -48,6 +48,24 @@ export const toggleboxShowCase = {
 							},
 						],
 					},
+					{
+						id: "color-theme",
+						title: "Color theme",
+						values: [
+							{
+								name: "Grey",
+								value: {
+									colorTheme: "grey",
+								},
+							},
+							{
+								name: "White",
+								value: {
+									colorTheme: "white",
+								},
+							},
+						],
+					},
 				],
 			},
 			title: "Togglebox",

diff --git a/src/App/components/FormComponents/Togglebox.js b/src/App/components/FormComponents/Togglebox.js
@@ -1,7 +1,14 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-const Togglebox = ({ id, checked, disabled, label, labelTop }) => {
+const Togglebox = ({
+	id,
+	checked,
+	disabled,
+	label,
+	labelTop,
+	colorTheme = "grey",
+}) => {
 	const attrs = {
 		type: "checkbox",
 		id: id || null,
@@ -12,7 +19,10 @@ const Togglebox = ({ id, checked, disabled, label, labelTop }) => {
 	return (
 		<div className={`togglebox${labelTop ? " label-top" : ""}`}>
 			{"\n"}
-			<input {...attrs} />
+			<input
+				{...attrs}
+				className={colorTheme === "white" ? "theme-white" : "theme-grey"}
+			/>
 			{"\n"}
 			{label ? (
 				<label htmlFor={id}>

diff --git a/src/less/components/togglebox.less b/src/less/components/togglebox.less
@@ -1,9 +1,22 @@
 @import "../global.less";
 @import "./form.less";
 
-@toggle-border-color: @brand-secondary;
-
 .togglebox {
+	--checked-nod-color: var(--brand-green);
+	--checked-bg-color: var(--brand-green-light);
+	--unchecked-nod-color: var(--brown-soft);
+	// this one depends of the theme-color
+	--unchecked-bg-color: var(--bg-brown);
+
+	--height-bg: 2.25rem;
+	--width-bg: 3.75rem;
+	--height-nod: 1.75rem;
+	--spacing-nod: calc((var(--height-bg) - var(--height-nod)) / 2);
+
+	&:has(input.theme-white) {
+		--unchecked-bg-color: var(--white);
+	}
+
 	position: relative;
 	display: flex;
 	width: 100%;
@@ -25,76 +38,63 @@
 		right: 7px;
 		margin: 1.5rem;
 
-		&:focus {
-			outline: none;
-
-			&:before {
-				content: "";
-				position: absolute;
-				bottom: 0.5px;
-				left: -15px;
-				height: (1.375rem + 0.2);
-				width: (1.375rem * 2.2);
-				border: 2px solid @brand-secondary;
-				border-radius: 1rem;
-				outline: 4px solid transparent;
+		&:focus-visible {
+			+ label:after,
+			+ label:before {
+				outline: 2px solid var(--brand-secondary);
 			}
 		}
 
+		// BG of the toggle
 		+ label:before {
-			background-color: @white;
+			background-color: var(--unchecked-bg-color);
 			transition: background-color 0.2s ease;
 			content: "";
 			position: absolute;
 			top: 0;
 			right: 0;
-			height: 1.375rem;
-			width: (1.375rem * 2);
-			border: 1px solid @toggle-border-color;
-			border-radius: 1rem;
-			color: @white;
+			height: var(--height-bg);
+			width: var(--width-bg);
+			border-radius: var(--height-bg);
 			cursor: pointer;
 		}
 
+		// nod of the toggle
 		+ label:after {
 			transition: right 0.2s;
 			content: "";
 			position: absolute;
 			visibility: visible;
-			background-color: @white;
-			margin: 2px;
+			background-color: var(--unchecked-nod-color);
+			margin: var(--spacing-nod);
 			top: 0;
-			right: 1.35rem;
-			height: 1.15rem;
-			width: 1.15rem;
-			border: 1px solid @toggle-border-color;
+			right: calc(
+				var(--width-bg) - var(--height-nod) -(var(--spacing-nod) * 2)
+			);
+			aspect-ratio: 1;
+			height: var(--height-nod);
 			border-radius: 50%;
-			color: @white;
 			cursor: pointer;
 		}
 
 		&:checked + label:before {
 			transition: background-color 0.2s ease;
-			background-color: @brand-secondary;
-			border-color: @brand-secondary;
+			background-color: var(--checked-bg-color);
+			border: none;
 		}
 
 		&:checked + label:after {
 			transition: right 0.2s ease;
-			border-color: @white;
 			right: 0;
-			background-color: @white;
+			background-color: var(--checked-nod-color);
 		}
 
 		&[disabled] {
 			+ label:before,
 			+ label:after {
-				background: @input-bg-disabled;
-				border-color: @input-checked-bg-disabled;
-			}
-
-			&:checked + label:before {
-				background: @light-brown;
+				background: var(--input-bg-disabled);
+				border-color: var(--input-checked-bg-disabled);
+				border: 1px solid var(--brand-secondary-light-3);
 			}
 
 			+ label,
@@ -105,15 +105,9 @@
 				cursor: not-allowed;
 			}
 
-			&:checked {
-				+ label:after {
-					border: none;
-				}
-			}
-
 			+ label {
 				i[data-tooltip] {
-					color: @brand-secondary-light-3;
+					color: var(--brand-secondary-light-3);
 					pointer-events: none;
 				}
 			}
@@ -131,7 +125,9 @@
 			+ label:after {
 				left: 0;
 				top: 100%;
-				transition: 0.2s ease, top 0;
+				transition:
+					0.2s ease,
+					top 0;
 			}
 
 			+ label:after {
@@ -144,7 +140,9 @@
 				}
 
 				+ label:after {
-					left: 1.35rem;
+					left: calc(
+						var(--width-bg) - var(--height-nod) - (var(--spacing-nod) * 2)
+					);
 					transition: left 0.2s ease;
 				}
 			}

diff --git a/src/less/documentation-swedbankpay.less b/src/less/documentation-swedbankpay.less
@@ -1110,7 +1110,7 @@
 		padding: var(--base-padding-lg);
 		margin: var(--base-margin-sm) 0 0 0;
 		border-radius: 2px 0;
-		border: 1px solid @brand-secondary-light-3;
+		border: 1px solid var(--brand-secondary-light-3);
 
 		&.showcasepanel-sm {
 			max-width: 20rem;
@@ -1185,7 +1185,7 @@
 							position: absolute;
 							bottom: 2px;
 							width: 100%;
-							border-bottom: 1px solid @brand-secondary-light-3;
+							border-bottom: 1px solid var(--brand-secondary-light-3);
 						}
 
 						&#undefined-ul {
@@ -1207,7 +1207,7 @@
 						align-items: center;
 						cursor: pointer;
 						height: 40px;
-						border-bottom: 1px solid @brand-secondary-light-3;
+						border-bottom: 1px solid var(--brand-secondary-light-3);
 						padding: 0 1rem;
 
 						&.hidden {
@@ -1221,7 +1221,7 @@
 
 							&:focus {
 								border-radius: 0.125rem;
-								box-shadow: 0 0 0 2px @black;
+								box-shadow: 0 0 0 2px var(--black);
 								outline: 2px solid transparent;
 							}
 						}
@@ -1246,7 +1246,7 @@
 
 			.component-preview {
 				margin-top: 2.5rem;
-				border-bottom: 1px solid @brand-secondary-light-3;
+				border-bottom: 1px solid var(--brand-secondary-light-3);
 
 				.component-preview-content {
 					position: relative;
@@ -1263,7 +1263,7 @@
 					}
 
 					&.component-preview-alt-background {
-						background-color: @brand-primary;
+						background-color: var(--brand-primary);
 					}
 
 					form {
@@ -1279,6 +1279,10 @@
 							background-color: var(--brand-secondary);
 						}
 					}
+
+					&:has(input[type="checkbox"].theme-white) {
+						background: var(--gray);
+					}
 				}
 			}
 
@@ -1301,7 +1305,7 @@
 				background-color: @white;
 				display: none;
 				min-width: 0;
-				border-left: 1px solid @brand-secondary-light-3;
+				border-left: 1px solid var(--brand-secondary-light-3);
 				transition: min-width 1s ease-in-out;
 				z-index: calc(100 + 2);
 
@@ -1316,7 +1320,7 @@
 					display: flex;
 					justify-content: space-between;
 					align-items: center;
-					border-bottom: 1px solid @brand-secondary-light-3;
+					border-bottom: 1px solid var(--brand-secondary-light-3);
 					height: 2.5rem;
 
 					.options-close {
@@ -1326,7 +1330,7 @@
 						&:focus {
 							border: none;
 							border-radius: 0.125rem;
-							box-shadow: 0 0 0 2px @black;
+							box-shadow: 0 0 0 2px var(--black);
 						}
 					}
 				}
@@ -1395,7 +1399,7 @@
 			justify-content: center;
 			width: 100%;
 			height: 9.75rem;
-			background-color: @white;
+			background-color: var(--white);
 			padding: 2rem;
 		}
 	}

diff --git a/src/less/variables-payex.less b/src/less/variables-payex.less
@@ -301,6 +301,9 @@ body {
 	--help-block-text: #707070;
 	--tab-link: var(--help-block-text, #707070);
 	--radiobutton-border: var(--help-block-text, #707070);
+	// copied from SwedbankPay brand colors - please PayEx people check it out and adapt where necessary
+	--brand-green: #497125;
+	--brand-green-light: #70b63a;
 
 	/* UNIVERSAL UTILITIES */
 	--border-radius: 8px;

diff --git a/src/less/variables-swedbankpay.less b/src/less/variables-swedbankpay.less
@@ -195,6 +195,8 @@
 	// Color pool
 	--brand-turquoise-lighter: #ebf8f2;
 	--brand-orange-lighter: #fbeadb;
+	--brand-green: #497125;
+	--brand-green-light: #70b63a;
 	--brand-green-lighter: #e7f8d2;
 	--brand-red-lighter: #ffe9e9;
 	--brand-blue: #335bb1;