Merge pull request #514 from wmde/highlight-custom-amount-radios

Add radio inputs to amount field
wmde · Oct 18, 2024 · 3049ad0 · 3049ad0
2 parents 4a287ee + 9e77c07
commit 3049ad0
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 17 deletions.
diff --git a/src/components/shared/form_fields/AmountField.vue b/src/components/shared/form_fields/AmountField.vue
@@ -30,6 +30,10 @@
 		<div class="form-field-amount-custom" :class="{ active: isCustomAmount }">
 			<label class="form-field-amount-help-text" for="amount-custom">{{ $t('donation_form_payment_amount_label') }}</label>
 			<div class="form-field-amount-custom-euro-symbol" :class="{ active: isCustomAmount }">
+				<div class="radio radio-form-input">
+					<input type="radio" class="form-field-amount-custom-radio" :checked="isCustomAmount" aria-hidden="true" tabindex="-1"/>
+				</div>
+
 				<TextFormInput
 					v-model="customAmount"
 					input-type="text"
@@ -149,6 +153,7 @@ watch( () => props.modelValue, ( newValue: string ) => {
 @use '@src/scss/settings/colors';
 @use '@src/scss/settings/forms';
 @use '@src/scss/mixins/visibility';
+@use '@src/scss/settings/breakpoints';
 @use 'sass:map';
 
 $max-width: 384px;
@@ -164,39 +169,33 @@ $input-height: 50px;
 	&-radio-container {
 		display: flex;
 		flex-wrap: wrap;
-		margin: 0 ( -( map.get( units.$spacing, 'small' ) ) );
+		margin: 0 ( -( map.get( units.$spacing, 'xx-small' ) ) );
 	}
 
 	&-radio {
-		width: 25%;
-		padding: 0 map.get( units.$spacing, 'small' ) map.get( units.$spacing, 'small' );
+		width: 50%;
+		padding: 0 map.get( units.$spacing, 'xx-small' ) map.get( units.$spacing, 'small' );
 		font-size: 16px;
 
+		@include breakpoints.tablet-up {
+			width: 25%;
+		}
+
 		.radio-form-input {
 			padding: 0;
 			margin: 0;
 			width: 100%;
 			min-width: auto;
 			height: $input-height;
 			line-height: $input-height;
-			text-align: center;
+			text-align: left;
 			transition: background 100ms global.$easing, color 100ms global.$easing;
 
-			input {
-				@include visibility.screen-reader-only;
-			}
-
 			label {
-				padding: 0;
+				padding: 0 0 0 36px;
 			}
 
 			&.is-active {
-				label {
-					background: colors.$primary;
-					color: colors.$white;
-					font-weight: bold;
-				}
-
 				label:hover,
 				input:focus + label,
 				input:hover + label {
@@ -231,7 +230,7 @@ $input-height: 50px;
 		}
 
 		input {
-			padding: 0 map.get( units.$spacing, 'medium' );
+			padding: 0 map.get( units.$spacing, 'medium' ) 0 map.get( units.$spacing, 'xx-large' );
 			text-align: right;
 		}
 
@@ -253,9 +252,27 @@ $input-height: 50px;
 			}
 			&:after {
 				right: auto;
-				left: 10px;
+				left: 44px;
 			}
 		}
 	}
+
+	&-custom .radio-form-input {
+		position: absolute;
+		z-index: 1;
+		height: 16px;
+		width: 16px;
+		min-width: 16px;
+		top: 50%;
+		transform: translateY( -50% );
+		left: 16px;
+
+		input {
+			padding: 0;
+			top: 0;
+			margin-top: 0;
+			left: 0;
+		}
+	}
 }
 </style>
diff --git a/tests/unit/components/shared/form_fields/AmountField.spec.ts b/tests/unit/components/shared/form_fields/AmountField.spec.ts
@@ -135,6 +135,22 @@ describe( 'AmountField.vue', () => {
 		expect( wrapper.find( '.form-field-amount-custom.active' ).exists() ).toBeFalsy();
 	} );
 
+	it( 'Checks the custom amount radio when value is custom', async () => {
+		const wrapper = getWrapper();
+		const customAmountInput = wrapper.find( '#amount-custom' );
+
+		expect( wrapper.find<HTMLInputElement>( '.form-field-amount-custom-radio' ).element.checked ).toBeFalsy();
+
+		await customAmountInput.setValue( '1998' );
+		await customAmountInput.trigger( 'blur' );
+
+		expect( wrapper.find<HTMLInputElement>( '.form-field-amount-custom-radio' ).element.checked ).toBeTruthy();
+
+		await wrapper.find( 'input[value="29900"]' ).trigger( 'change' );
+
+		expect( wrapper.find<HTMLInputElement>( '.form-field-amount-custom-radio' ).element.checked ).toBeFalsy();
+	} );
+
 	it( 'does not select amounts for choices that are below minimum amount', async () => {
 		const wrapper = getWrapper();