feat: 🎸 extended and cleanup <RadioButton/>

src/components/radioButton/RadioButton.tsx

@@ -2,18 +2,21 @@ import * as React from 'react';
 import './radioButton.styles';
 
 export interface RadioButtonItem {
+	checked: boolean;
+	handleRadioButton: Function;
 	inputId: string;
-	name: string;
 	label: string;
-	checked: boolean;
+	name: string;
+	type: 'default' | 'box';
+	value: string;
 }
 
-export const RadioButton = (props) => {
+export const RadioButton = (props: RadioButtonItem) => {
 	return (
-		<div className="radioButton">
+		<div className={`radioButton radioButton--${props.type}`}>
 			<div className="radioButton__contentWrapper">
 				<input
-					onClick={props.handleRadioButton}
+					onClick={(e) => props.handleRadioButton(e)}
 					id={props.inputId}
 					className="radioButton__input"
 					type="radio"

src/components/radioButton/radioButton.styles.scss

@@ -1,23 +1,12 @@
-$input-size: 20px;
+$input-size: 24px;
 $button-height: 50px;
 
 .radioButton {
-	border: 1px solid $form-primary;
 	width: 100%;
-	max-width: $max-input-width;
 	height: $button-height;
 	display: inline-block;
 	text-align: start;
-	border-radius: 24px;
-
-	@include breakpoint($fromMedium) {
-		width: auto;
-		padding-right: $grid-base-two;
-	}
-
-	@include breakpoint($fromLarge) {
-		max-width: 229px;
-	}
+	overflow: hidden;
 
 	&__contentWrapper {
 		height: 100%;
@@ -42,14 +31,13 @@ $button-height: 50px;
 		width: $input-size;
 		border-radius: 50%;
 		cursor: pointer;
-		margin-left: 10px;
 		flex: 0 0 auto;
 		outline: none;
 		box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, 0.1);
 
 		&:checked {
 			box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, 0.1),
-				inset 0 0 0 3px $white;
+				inset 0 0 0 5px $white;
 			background-color: $primary;
 		}
 
@@ -59,15 +47,42 @@ $button-height: 50px;
 	}
 
 	&__label {
-		display: flex;
-		align-items: center;
+		display: inline-block;
 		width: 100%;
-		height: 100%;
-		margin-left: 9px;
+		text-align: left;
+		line-height: $button-height;
+		padding: 0 8px;
 		color: $form-secondary;
 		cursor: pointer;
 	}
 
+	&--default {
+		.radioButton__label {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+
+	&--box {
+		border: 1px solid $form-primary;
+		border-radius: 24px;
+		max-width: $max-input-width;
+
+		@include breakpoint($fromMedium) {
+			width: auto;
+			padding-right: $grid-base-two;
+		}
+
+		@include breakpoint($fromLarge) {
+			max-width: 229px;
+		}
+
+		.radioButton__input {
+			margin-left: 10px;
+		}
+	}
+
 	& + .radioButton {
 		margin-left: 0;
 		margin-top: $grid-base;

src/components/registration/Registration.tsx

@@ -526,13 +526,14 @@ const Registration = () => {
 					<RadioButton
 						key={index}
 						name={component.name}
-						value={index}
 						handleRadioButton={(e) =>
 							handleGeneratedInputfieldValueChange(
 								e.target.value,
 								component.name
 							)
 						}
+						type="box"
+						value={index}
 						{...radio}
 					/>
 				);