add text to big thumbs buttons

* show a preview of a Form's Success message
GSA · Dec 18, 2023 · 73f99f7 · 73f99f7
1 parent 8a53ef6
commit 73f99f7
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 5 deletions.
diff --git a/app/views/admin/questions/_success_text.html.erb b/app/views/admin/questions/_success_text.html.erb
@@ -1,6 +1,6 @@
 <%= form_with(model: form, url: (form.persisted? ? admin_form_path(form) : admin_forms_path), local: true) do |f| %>
   <div class="grid-row grid-gap-md">
-    <div class="grid-col-6">
+    <div class="grid-col-12">
       <div class="field">
         <%= f.label :success_text_heading, "SUCCESS TEXT HEADING", class: "usa-label text-uppercase font-body-3xs" %>
         <%= f.text_field :success_text_heading, class: "usa-input success_text", data_url:  admin_form_path(form) %>
@@ -38,5 +38,13 @@
         $('.usa-hint.save-notice.survey-success-text').fadeOut(2000);
       });
     });
+
+    $("#form_success_text_heading").on("keyup", function(event, b) {
+      $(".fba-alert.usa-alert--success h3.usa-alert__heading").text(event.target.value)
+    });
+
+    $("#form_success_text").on("keyup", function(event, b) {
+      $(".fba-alert.usa-alert--success .usa-alert__text").html(event.target.value)
+    });
   })
 </script>
diff --git a/app/views/components/forms/_flash.html.erb b/app/views/components/forms/_flash.html.erb
@@ -3,9 +3,9 @@
     <h3 class="usa-alert__heading">
       <%= form.success_text_heading %>
     </h3>
-    <p class="usa-alert__text">
+    <div class="usa-alert__text">
       <%= sanitize(form.success_text) %>
-    </p>
+    </div>
   </div>
 </div>
 <div class="fba-alert-error usa-alert usa-alert--error" role="alert" hidden>

diff --git a/app/views/components/forms/edit/_builder.html.erb b/app/views/components/forms/edit/_builder.html.erb
@@ -78,16 +78,30 @@
   </div>
 </div>
 <br>
+
 <hr style="border: none; border-top: 1px solid #E5E5E5;">
-<div id="success_text_div">
-  <%= render "admin/questions/success_text", {form: form} %>
+
+<div class="grid-row grid-gap-lg">
+  <div class="grid-col-5">
+    <div id="success_text_div">
+      <%= render "admin/questions/success_text", {form: form} %>
+    </div>
+  </div>
+  <div class="grid-col-7">
+    <br>
+    <br>
+    <%= render "components/forms/flash", form: form %>
+  </div>
 </div>
+
 <br>
 
 <script>
 $(function() {
   $(".question-option-edit").hide();
 
+  $(".fba-alert").attr("hidden", false);
+
   <%- if form_permissions?(form: form) %>
     $('.survey-title-input').on("blur", function(event) {
       event.preventDefault();

diff --git a/app/views/components/forms/question_types/_big_thumbs_up_down_buttons.html.erb b/app/views/components/forms/question_types/_big_thumbs_up_down_buttons.html.erb
@@ -20,10 +20,12 @@
           <%= radio_button_tag(option_id, option[:value], nil, { id: option_id, name: question.answer_field, class: "usa-radio__input usa-radio__input--tile", required: question.is_required  }) %>
           <%= label_tag(option_id, nil, class: "usa-radio__label font-sans-3xl text-center") do %>
             <%- if option[:value] == 1 %>
+              <span class="usa-sr-only">Thumbs-up</span>
               <svg class="usa-icon margin-top-2" aria-hidden="true" focusable="false" role="img">
                 <use xlink:href="<%= asset_path "sprite.svg#thumb_up_alt" %>"></use>
               </svg>
             <% elsif option[:value] == 0 %>
+              <span class="usa-sr-only">Thumbs-down</span>
               <svg class="usa-icon margin-top-2" aria-hidden="true" focusable="false" role="img">
                 <use xlink:href="<%= asset_path "sprite.svg#thumb_down_alt" %>"></use>
               </svg>

diff --git a/app/views/components/widget/_widget.css.erb b/app/views/components/widget/_widget.css.erb
@@ -4583,4 +4583,10 @@
 /* Override */
 .touchpoint-form .usa-form--large {
   max-width: 35rem;
+}
+
+.fba-modal-dialog .usa-sr-only{
+  position:absolute;
+  left:-999em;
+  right:auto;
 }