a11 v2 updates

GSA · Oct 20, 2023 · 5424626 · 5424626
1 parent 718cca7
commit 5424626
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 19 deletions.
diff --git a/app/assets/stylesheets/site.scss b/app/assets/stylesheets/site.scss
@@ -506,6 +506,15 @@ span.usa-hint.save-notice {
   .question-options.big-thumbs .usa-radio__label::before {
     display: none;
   }
+
+  // Same max-width as texarea
+  .question-options.big-thumbs {
+    max-width: 30rem;
+  }
+  .question-options.big-thumbs .usa-radio__input--tile+.usa-radio__label {
+    color: #005ea2;
+    padding-left: 1rem;
+  }
   // end A-11 V2 customizations
 }
 

diff --git a/app/views/admin/cx_collections/show.html.erb b/app/views/admin/cx_collections/show.html.erb
@@ -15,12 +15,4 @@
   <% end %>
 </p>
 
-
 <%= render @cx_collection %>
-
-<div>
-  <%= link_to "Edit this cx collection", edit_admin_cx_collection_path(@cx_collection) %> |
-  <%= link_to "Back to cx collections", admin_cx_collections_path %>
-
-  <%= button_to "Destroy this cx collection", admin_cx_collection_path(@cx_collection), method: :delete %>
-</div>
diff --git a/app/views/admin/forms/responses.html.erb b/app/views/admin/forms/responses.html.erb
@@ -13,7 +13,7 @@
 <h3>
   Customer Feedback Analysis
 </h3>
-<% if admin_permissions? %>
+<% if admin_permissions? && @form.kind == "a11" %>
   <div class="a11-analysis-widget"><span class="usa-label">Loading A11 Analysis...</span></div>
 <% end %>
 <% if @form.kind == "a11" %>
@@ -30,7 +30,7 @@
 <script>
 $(function() {
   <% if @form.kind == "a11" %>
-    
+
   $.ajax({
     url: "/admin/submissions/a11_analysis?form_id=<%= @form.short_uuid %>",
     type: 'get'

diff --git a/app/views/admin/questions/_form.html.erb b/app/views/admin/questions/_form.html.erb
@@ -29,7 +29,7 @@
         <br>
       <% end %>
     <% else %>
-      <%= f.select :question_type, Question::QUESTION_TYPES - ["big_thumbs_up_down_buttons", "thumbs_up_down_buttons", "custom_text_display", "yes_no_buttons"], { selected: question.question_type, include_blank: true }, { class: "usa-select" } %>
+      <%= f.select :question_type, Question::QUESTION_TYPES - ["thumbs_up_down_buttons", "custom_text_display", "yes_no_buttons"], { selected: question.question_type, include_blank: true }, { class: "usa-select" } %>
     <% end %>
     </div>
 

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
@@ -6,23 +6,24 @@
 
   <div class="question-options big-thumbs" id="<%= question.answer_field.to_sym %>">
     <div class="grid-row grid-gap-lg">
-      <% question.question_options.each_with_index do |option, index| %>
+      <% question_options = [{ text: 'yes', value: 1 }, { text: 'no', value: 0 }] %>
+      <% question_options.each_with_index do |option, index| %>
+        <% option_id = "question_option_#{question.id}_#{option[:text]}" %>
         <div class="grid-col-6">
           <div class="radio-button usa-radio"
-            id="<%= dom_id(option) %>"
-            data-id="<%= option.id %>"
+            id="<%= question.id %>_<%= question.answer_field %>_<%= option[:text] %>"
+            data-id="<%= question.id %>_<%= question.answer_field %>_<%= option[:text] %>"
             <% if question.help_text.present? %>
             aria-describedby="<%= "question-id-#{question.id}-help-text" %>"
             <% end %>
           >
-          <% @option_id = "#{question.answer_field}_#{(index + 1).to_s}" %>
-          <%= 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.text == "👍" || option.text.downcase == "yes" %>
+          <%= 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 %>
               <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.text == "👎" || option.text.downcase == "no" %>
+            <% elsif option[:value] == 0 %>
               <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
@@ -4079,3 +4079,13 @@
 .fba-modal-dialog .question-options.big-thumbs .usa-radio__label::before {
   display: none;
 }
+
+/* Same max-width as texarea */
+.touchpoints-form-body .big-thumbs {
+  max-width: 30rem;
+}
+
+.question-options.big-thumbs .usa-radio__input--tile+.usa-radio__label {
+  color: #005ea2;
+  padding-left: 1rem;
+}