update modal footer html

* add external link in a form's modal footer * use icons instead of emojis for thumbs up/down * ensure uswds abbr styles for embedded forms * add usa-form class to form * .big-thumbs style for widget (modal embed)
GSA · Sep 28, 2023 · 0a487a0 · 0a487a0
1 parent 841a0f4
commit 0a487a0
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 30 deletions.
diff --git a/app/assets/stylesheets/site.scss b/app/assets/stylesheets/site.scss
@@ -502,6 +502,10 @@ span.usa-hint.save-notice {
   .question-options.icons .usa-checkbox__label {
     text-align: center;
   }
+
+  .question-options.big-thumbs .usa-radio__label::before {
+    display: none;
+  }
   // end A-11 V2 customizations
 }
 

diff --git a/app/views/components/forms/_custom.html.erb b/app/views/components/forms/_custom.html.erb
@@ -1,6 +1,8 @@
 <% multi_section_question_number = 0 %>
 
-<form action="<%= root_url %>touchpoints/<%= form.present? ? form.short_uuid : nil %>/submissions.json" method="POST">
+<form
+  action="<%= root_url %>touchpoints/<%= form.present? ? form.short_uuid : nil %>/submissions.json"
+  method="POST">
   <div class="touchpoints-form-body">
     <%= hidden_field_tag :authenticity_token, form_authenticity_token if form.verify_csrf? -%>
     <%= hidden_field_tag :fba_location_code, params[:location_code] %>

diff --git a/app/views/components/forms/_footer_banner.html.erb b/app/views/components/forms/_footer_banner.html.erb
@@ -1,5 +1,5 @@
 <div class="usa-banner">
-  <header class="usa-banner__header touchpoints-footer-banner">
+  <footer class="usa-banner__header touchpoints-footer-banner">
     <div class="usa-banner__inner">
       <div class="grid-col-auto">
         <img class="usa-banner__header-flag" src="<%= image_url("us_flag_small.png") %>" alt="U.S. flag">
@@ -8,7 +8,7 @@
         <p class="usa-banner__header-text">
           <%= t :official_form %>
           <%= t :provided_by %>
-          <a href="https://touchpoints.digital.gov" target="_blank" rel="noopener"><%= t 'touchpoints' %></a>
+          <a href="https://touchpoints.digital.gov" target="_blank" rel="noopener" class="usa-link--external"><%= t 'touchpoints' %></a>
           <br>
           <% if form.present? %>
             <% if form.omb_approval_number.present? %>
@@ -23,5 +23,5 @@
         </p>
       </div>
     </div>
-  </header>
+  </footer>
 </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
@@ -4,7 +4,7 @@
   </legend>
   <%= render 'components/question_title', question: question %>
 
-  <div class="question-options" id="<%= question.answer_field.to_sym %>">
+  <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| %>
         <div class="grid-col-6">
@@ -17,15 +17,16 @@
           >
           <% @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 %><%= option.text %><% end %>
-          <% if ["OTHER", "OTRO"].include?(option.text.upcase) %>
-            <%= label_tag(nil, for: "#{question.answer_field}_other", class: "usa-input__label") do %><%= t 'form.enter_other_text' %><% end %>
-            <input type="text" name="<%= question.answer_field %>_other"
-              id="<%= question.answer_field %>_other"
-              data-option-id="<%= @option_id %>"
-              placeholder="<%= t 'form.enter_other_text' %>"
-              class="usa-input other-option" />
-            <br>
+          <%= label_tag(@option_id, nil, class: "usa-radio__label font-sans-3xl text-center") do %>
+            <% if option.text == "👍" || option.text.downcase == "yes" %>
+              <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" %>
+              <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>
+            <% end %>
           <% end %>
           </div>
         </div>

diff --git a/app/views/components/widget/_widget.css.erb b/app/views/components/widget/_widget.css.erb
@@ -49,7 +49,7 @@
   font-size: 100%
 }
 
-.fba-modal-close {
+.fba-modal-dialog .fba-modal-close {
   position: absolute;
   top: 0;
   right: 0;
@@ -1469,34 +1469,38 @@
 }
 
 .fba-modal-dialog .usa-link--external::after{
-  background:url(<%= asset_path "external-link.svg" %>) no-repeat 0 0;
+  background-image:url(<%= asset_path "usa-icons-bg/launch--blue-60v.svg" %>);
+  background-repeat:no-repeat;
   background-size:100%;
-  content:'';
-  display:inline-block;
-  height:0.65em;
-  margin-bottom:-1px;
-  margin-left:0.25rem;
-  width:0.65em;
+  content:"";
+  height:1.75ex;
+  margin-left:2px;
+  background-position:center;
+  display:inline;
+  padding-left:1.75ex;
+  vertical-align:middle;
 }
 
 .fba-modal-dialog .usa-link--external:hover::after{
-  background-image:url(<%= asset_path "external-link-hover.svg" %>), linear-gradient(transparent, transparent);
+  background-image:url(<%= asset_path "usa-icons-bg/launch--blue-70v.svg" %>), linear-gradient(transparent, transparent);
   background-repeat:no-repeat;
 }
 
-.fba-modal-dialog .usa-link--external.fba-modal-dialog .usa-link--alt::after{
-  background-image:url(<%= asset_path "external-link-alt.svg" %>);
-  background-position:50% 60%;
+.fba-modal-dialog .usa-link--external.usa-link--alt::after{
+  background-image:url(<%= asset_path "usa-icons-bg/launch--gray-5.svg" %>);
   background-repeat:no-repeat;
   background-size:100%;
   content:"";
+  height:1.75ex;
+  margin-left:2px;
+  background-position:center;
   display:inline;
-  margin-left:0.25rem;
-  padding-left:0.65em;
+  padding-left:1.75ex;
+  vertical-align:middle;
 }
 
-.fba-modal-dialog .usa-link--external.fba-modal-dialog .usa-link--alt:hover::after{
-  background-image:url(<%= asset_path "external-link-alt-hover.svg" %>), linear-gradient(transparent, transparent);
+.fba-modal-dialog .usa-link--external.usa-link--alt:hover::after{
+  background-image:url(<%= asset_path "usa-icons-bg/launch--white.svg" %>), linear-gradient(transparent, transparent);
   background-repeat:no-repeat;
 }
 
@@ -4054,6 +4058,10 @@
   text-indent: 0;
 }
 
+.fba-modal-dialog abbr[title=required]{
+  text-decoration:none;
+}
+
 /* Override */
 .fba-modal-dialog .usa-form {
   max-width: inherit;
@@ -4067,3 +4075,7 @@
 .usa-banner__header.touchpoints-footer-banner {
   min-height: 0;
 }
+
+.fba-modal-dialog .question-options.big-thumbs .usa-radio__label::before {
+  display: none;
+}