feat(template): implement optional honorifics/titles for Donor name #3011

assets/src/css/frontend/forms.scss

@@ -143,7 +143,21 @@ form.give-form {
 		display: none;
 	}
 
-	.give-tooltip {
+  .give-title-prefix-wrap{
+
+	.form-row-first,
+	.form-row-last {
+	  float: left;
+	  width: 40%;
+	}
+
+	.form-row-title {
+	  float: left;
+	  width: 15%;
+	}
+  }
+
+  .give-tooltip {
 		margin: 0 3px;
 		padding: 0;
 		font-size: 14px;
@@ -219,15 +233,20 @@ form.give-form {
 
 	}
 
-	.form-row-first,
-	.form-row-last {
-		float: left;
-		width: 48.5%;
+    .form-row-title,
+	.form-row-first {
+	  margin-right: 2.5%;
 	}
 
-	.form-row-last {
-		float: right;
-	}
+  .form-row-first,
+  .form-row-last {
+	float: left;
+	width: 48.5%;
+  }
+
+  .form-row-last {
+	float: right;
+  }
 
 	.form-row-wide {
 		@include clearfix();

assets/src/js/admin/admin-forms.js

@@ -203,6 +203,22 @@ jQuery.noConflict();
 				$( '#email_notification_options .give-field-wrap:not(._give_email_options_field)' ).hide();
 			}
 		} ).change();
+
+		// Title Prefixes.
+		var defaultNameTitlePrefixChecked = $( 'input[name="_give_name_title_prefix"]:checked').val();
+		if ( 'required' === defaultNameTitlePrefixChecked || 'optional' === defaultNameTitlePrefixChecked ) {
+			$( '.give-title-prefixes-wrap' ).show();
+		}
+
+		$( 'input[name="_give_name_title_prefix"]').on( 'change', function() {
+			var titlePrefixChecked = $( 'input[name="_give_name_title_prefix"]:checked').val();
+
+			if ( 'required' === titlePrefixChecked || 'optional' === titlePrefixChecked ) {
+				$( '.give-title-prefixes-wrap' ).show();
+			} else {
+				$( '.give-title-prefixes-wrap' ).hide();
+			}
+		});
 	};
 
 	//Handle Repeatable Row ID