SWED-2336 style radio checkmark update init

SwedbankPay · Apr 9, 2024 · c184c7d · c184c7d
1 parent 41d1b55
commit c184c7d
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 51 deletions.
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/constants.js b/src/App/ComponentsDocumentation/components/RadioButton/constants.js
@@ -126,6 +126,24 @@ export const radiobuttonShowCase = {
 							},
 						],
 					},
+					{
+						id: "size_radio",
+						title: "Size modifiers",
+						values: [
+							{
+								name: "Small",
+								value: {
+									size: "small",
+								},
+							},
+							{
+								name: "Large",
+								value: {
+									size: "large",
+								},
+							},
+						],
+					},
 				],
 			},
 			title: "Checkmark buttons",

diff --git a/src/App/components/FormComponents/Radio.js b/src/App/components/FormComponents/Radio.js
@@ -15,6 +15,7 @@ const Radio = ({
 	style,
 	helpBlock,
 	errorMessage,
+	size = "small",
 }) => {
 	const attrs = {
 		type: "radio",
@@ -42,7 +43,10 @@ const Radio = ({
 						{style === "checkmark" ? (
 							<div className="radio-row">
 								{options.map(({ label, id, checked }, i) => (
-									<div className={`radio${style ? ` ${style}` : ""}`} key={i}>
+									<div
+										className={`radio${style ? ` ${style}` : ""} ${size === "large" ? "large" : ""}`}
+										key={i}
+									>
 										{"\n"}
 										<input {...attrs} id={id} defaultChecked={checked} />
 										{"\n"}
@@ -97,7 +101,9 @@ const Radio = ({
 				</form>
 			) : (
 				<>
-					<div className={`radio${style ? ` ${style}` : ""}`}>
+					<div
+						className={`radio${style ? ` ${style}` : ""} ${size === "large" ? "large" : ""}`}
+					>
 						{"\n"}
 						<input {...attrs} />
 						{"\n"}
@@ -130,6 +136,7 @@ Radio.propTypes = {
 	className: PropTypes.string,
 	style: PropTypes.string,
 	helpBlock: PropTypes.string,
+	size: PropTypes.oneOf(["small", "large"]),
 };
 
 export default Radio;
diff --git a/src/less/components/radio.less b/src/less/components/radio.less
@@ -1,13 +1,13 @@
 @import "./form.less";
 @import "../global.less";
 
-@radio-height: 1.375rem;
-@radio-width: @radio-height;
+.radio {
+	--radio-height: 1.375rem;
+	--radio-width: var(--radio-height);
 
-@checkmark-width: 7.5rem;
-@checkmark-heigth: 2rem;
+	--checkmark-width: 7.5rem;
+	--checkmark-heigth: 2rem;
 
-.radio {
 	position: relative;
 	display: flex;
 	align-items: center;
@@ -22,8 +22,8 @@
 		position: relative;
 		align-items: center;
 		margin: 0;
-		margin-left: 1.75rem;
-		padding-left: (1rem / 5);
+		margin-inline-start: 1.75rem;
+		padding-inline-start: calc(1rem / 5);
 		min-height: 1.5rem;
 	}
 
@@ -36,10 +36,10 @@
 			position: absolute;
 			visibility: visible;
 			left: -1.5rem;
-			height: @radio-height;
-			width: @radio-width;
+			height: var(--radio-height);
+			width: var(--radio-width);
 			background-color: var(--white);
-			border: 2px solid @brand-secondary-light-2;
+			border: 2px solid var(--brand-secondary-light-2);
 			cursor: pointer;
 			border-radius: 50%;
 		}
@@ -48,20 +48,20 @@
 			background-color: var(--white);
 			background-repeat: no-repeat;
 			background-image: url("../../icons/shapes/circle.svg");
-			border-color: @brand-secondary;
+			border-color: var(--brand-secondary);
 		}
 
 		&:focus + label:before,
 		&:hover + label:before {
-			box-shadow: 0 0 0 0.375rem @brand-secondary-light-3;
-			border-color: @brand-secondary;
+			box-shadow: 0 0 0 0.375rem var(--brand-primary-light);
+			border-color: var(--brand-secondary);
 			outline: 4px solid transparent;
 		}
 
 		&[disabled] {
 			+ label:before {
-				background-color: @input-bg-disabled;
-				border-color: @input-checked-bg-disabled;
+				background-color: var(--input-bg-disabled);
+				border-color: var(--input-checked-bg-disabled);
 				box-shadow: none;
 			}
 
@@ -82,11 +82,15 @@
 .checkmark {
 	border: 2px solid transparent;
 	pointer-events: none;
-	width: @checkmark-width;
-	height: @checkmark-heigth;
+	width: var(--checkmark-width);
+	height: var(--checkmark-heigth);
+
+	&.large {
+		height: 3.5rem;
+	}
 
 	&:not(:last-child) {
-		margin-right: 8px;
+		margin-inline-end: 8px;
 	}
 
 	&:active {
@@ -113,55 +117,56 @@
 		height: 100%;
 		width: 100%;
 		gap: 5px;
-		padding-left: 1.25rem;
-	}
+		padding-inline-end: 1.25rem;
+		justify-content: center;
+		flex-direction: row-reverse;
 
-	label:before {
-		display: none;
-	}
+		&:before {
+			display: none;
+		}
 
-	label
-		:is(
-			i[class^="at-"],
-			i[class*=" at-"],
-			i[class^="swepay-icon-"],
-			i[class*=" swepay-icon-"],
-			.material-icons
-		) {
-		color: var(--white);
-		margin-left: -10px;
+		&
+			:is(
+				i[class^="at-"],
+				i[class*=" at-"],
+				i[class^="swepay-icon-"],
+				i[class*=" swepay-icon-"],
+				.material-icons
+			) {
+			color: inherit;
+			margin-inline-end: -10px;
+		}
 	}
 
 	input[type="radio"]:hover:not(:disabled) + label {
-		background-color: @light-gray;
-		color: @medium-brown;
+		background-color: var(--light-gray);
+		color: var(--brown-medium);
 		border-radius: var(--border-radius, 8px);
 		border: 0 solid transparent;
-		outline: 1px solid @medium-brown;
+		outline: 1px solid var(--brown-medium);
 	}
 
 	input[type="radio"]:checked + label {
-		background-color: @brand-secondary;
 		border-radius: var(--border-radius, 8px);
-		color: var(--white);
-		padding-left: 1.875rem;
+		padding-inline-end: 1.875rem;
+		outline-width: 3px;
 	}
 
 	input[type="radio"]:checked:hover + label {
-		background-color: @medium-brown;
+		background-color: var(--brown-medium);
 		color: var(--white);
 	}
 
 	input[type="radio"]:disabled + label {
-		color: @light-brown;
-		outline: 1px solid @light-brown;
+		color: var(--brown-light);
+		outline: 1px solid var(--brown-light);
 	}
 
 	input[type="radio"]:checked:disabled + label {
-		background-color: @light-brown;
+		background-color: var(--brown-light);
 		color: var(--white);
 		outline: 0;
-		padding-left: 1.25rem;
+		padding-inline-end: 1.25rem;
 
 		i {
 			visibility: hidden;
@@ -171,13 +176,16 @@
 	input[type="radio"] {
 		&:focus + label,
 		&:hover:not(:disabled) + label {
-			box-shadow: 0 0 0 0.3rem @brand-secondary-light-3;
-			border-color: @brand-secondary;
+			box-shadow: 0 0 0 0.3rem var(--brand-secondary-light-3);
+			border-color: var(--brand-secondary);
 		}
 
 		&:not(:checked) + label {
+			padding: 0;
+
 			i {
 				visibility: hidden;
+				display: none;
 			}
 		}
 	}
@@ -202,7 +210,7 @@ fieldset {
 
 		span {
 			font-weight: normal;
-			margin-left: 0.2rem;
+			margin-inline-start: 0.2rem;
 		}
 	}
 
@@ -226,7 +234,7 @@ fieldset {
 		label,
 		legend,
 		.hint-text {
-			color: @light-brown;
+			color: var(--brown-light);
 		}
 	}
 }

diff --git a/src/less/variables-payex.less b/src/less/variables-payex.less
@@ -293,7 +293,8 @@ body {
 	--blue-syntax-highlight: #43d0dd;
 	--yellow-syntax-highlight: #fff3d5;
 	--dark-brown: var(--brand-secondary, #3c3c3c);
-	--light-brown: var(--brand-secondary-light-3, #c8c8c8);
+	--brown-light: var(--brand-secondary-light-3, #c8c8c8);
+	--light-brown: var(--brown-light);
 	--help-block-text: #707070;
 	--tab-link: var(--help-block-text, #707070);
 	--radiobutton-border: var(--help-block-text, #707070);