show required fields on a form

* use radio button tile styles for dropdown options to improve draggability * update stimulus npm package * add id for 0 star value * remove top margin from question option inputs * add short_description and year_designated to Service * update footer url
GSA · Sep 26, 2023 · ec20259 · ec20259
1 parent c455367
commit ec20259
Show file tree

Hide file tree

Showing 21 changed files with 97 additions and 34 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -96,10 +96,10 @@ GEM
     aes_key_wrap (1.1.0)
     ast (2.4.2)
     aws-eventstream (1.2.0)
-    aws-partitions (1.824.0)
+    aws-partitions (1.828.0)
     aws-record (2.11.0)
       aws-sdk-dynamodb (~> 1, >= 1.85.0)
-    aws-sdk-core (3.181.1)
+    aws-sdk-core (3.183.1)
       aws-eventstream (~> 1, >= 1.0.2)
       aws-partitions (~> 1, >= 1.651.0)
       aws-sigv4 (~> 1.5)
@@ -156,13 +156,12 @@ GEM
       nokogiri (~> 1.6)
       rubyzip (~> 1.1)
       tilt (>= 1.4)
-    carrierwave (2.2.3)
-      activemodel (>= 5.0.0)
-      activesupport (>= 5.0.0)
+    carrierwave (3.0.3)
+      activemodel (>= 6.0.0)
+      activesupport (>= 6.0.0)
       addressable (~> 2.6)
       image_processing (~> 1.1)
       marcel (~> 1.0.0)
-      mini_mime (>= 0.1.3)
       ssrf_filter (~> 1.0)
     case_transform (0.2)
       activesupport
@@ -200,7 +199,7 @@ GEM
       railties (>= 5.0.0)
     faraday (0.17.6)
       multipart-post (>= 1.2, < 3)
-    ffi (1.15.5)
+    ffi (1.16.2)
     fog-aws (3.19.0)
       fog-core (~> 2.1)
       fog-json (~> 1.1)
@@ -295,7 +294,7 @@ GEM
       timeout
     net-smtp (0.3.3)
       net-protocol
-    newrelic_rpm (9.4.2)
+    newrelic_rpm (9.5.0)
     nio4r (2.5.9)
     nokogiri (1.15.4)
       mini_portile2 (~> 2.8.2)
@@ -320,9 +319,9 @@ GEM
       oauth2 (>= 1.4, < 3)
       omniauth (~> 2.0)
     orm_adapter (0.5.0)
-    paper_trail (12.3.0)
-      activerecord (>= 5.2)
-      request_store (~> 1.1)
+    paper_trail (15.0.0)
+      activerecord (>= 6.1)
+      request_store (~> 1.4)
     parallel (1.23.0)
     parser (3.2.2.3)
       ast (~> 2.4.1)
@@ -332,7 +331,7 @@ GEM
       coderay (~> 1.1)
       method_source (~> 1.0)
     public_suffix (5.0.3)
-    puma (5.6.5)
+    puma (5.6.7)
       nio4r (~> 2.0)
     racc (1.7.1)
     rack (2.2.8)
@@ -428,7 +427,7 @@ GEM
       unicode-display_width (>= 2.4.0, < 3.0)
     rubocop-ast (1.29.0)
       parser (>= 3.2.1.0)
-    rubocop-capybara (2.18.0)
+    rubocop-capybara (2.19.0)
       rubocop (~> 1.41)
     rubocop-factory_bot (2.24.0)
       rubocop (~> 1.33)
@@ -506,15 +505,15 @@ GEM
       nokogiri (~> 1.6)
       rubyzip (>= 1.3.0)
       selenium-webdriver (~> 4.0, < 4.11)
-    websocket (1.2.9)
+    websocket (1.2.10)
     websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
     whenever (1.0.0)
       chronic (>= 0.6.3)
     xpath (3.2.0)
       nokogiri (~> 1.8)
-    zeitwerk (2.6.11)
+    zeitwerk (2.6.12)
 
 PLATFORMS
   ruby

diff --git a/app/controllers/admin/services_controller.rb b/app/controllers/admin/services_controller.rb
@@ -255,6 +255,8 @@ def service_params
         :bureau,
         :department,
         :description,
+        :short_description,
+        :year_designated,
         :digital_service,
         :estimated_annual_volume_of_customers,
         :hisp,

diff --git a/app/serializers/service_serializer.rb b/app/serializers/service_serializer.rb
@@ -10,7 +10,9 @@ class ServiceSerializer < ActiveModel::Serializer
              :service_provider_id,
              :service_provider_name,
              :service_provider_slug,
+             :short_description,
              :justification_text,
+             :year_designated,
              :contact_center,
              :kind,
              :transactional,

diff --git a/app/views/admin/services/_form.html.erb b/app/views/admin/services/_form.html.erb
@@ -26,11 +26,16 @@
       <%= form.label :office, "Office" , class: "usa-label" %>
       <%= form.text_field :office, class: "usa-input" %>
     </div>
+
+    <div class="field">
+      <%= form.label :year_designated, "Year designated", class: "usa-label" %>
+      <%= form.text_field :year_designated, class: "usa-input", placeholder: 2023 %>
+    </div>
     <% end %>
 
     <div class="field">
       <%= form.label :name, "What is the name of this service?", class: "usa-label" %>
-      <span class="usa-hint font-sans-2xs">
+      <span class="usa-hint font-sans-3xs">
         For example, “Applying for a replacement Social Security card”, “Visiting a National Wildlife Refuge”, or “Utilizing
         in-person primary care”
       </span>
@@ -42,6 +47,14 @@
       <%= form.text_area :description, class: "usa-textarea" %>
     </div>
 
+    <div class="field">
+      <%= form.label :short_description, "Provide a short description for this Service", class: "usa-label" %>
+      <span class="usa-hint font-sans-3xs">
+        This text will be displayed on Performance.gov.
+      </span>
+      <%= form.text_area :short_description, class: "usa-textarea" %>
+    </div>
+
     <br>
     <fieldset class="usa-fieldset margin-bottom-3">
       <legend class="usa-sr-only">Contact Center?</legend>

diff --git a/app/views/admin/services/show.html.erb b/app/views/admin/services/show.html.erb
@@ -63,11 +63,21 @@
       <br>
       <%= @service.name %>
     </p>
+    <p>
+      <strong>Year designated</strong>
+      <br>
+      <%= @service.year_designated? ? @service.year_designated : "---" %>
+    </p>
     <p>
       <strong>Description</strong>
       <br>
       <%= @service.description? ? to_markdown(@service.description) : "---" %>
     </p>
+    <p>
+      <strong>Short Description</strong>
+      <br>
+      <%= @service.short_description? ? to_markdown(@service.short_description) : "---" %>
+    </p>
 
     <p>
       <strong>Service type</strong>

diff --git a/app/views/components/_question_title.html.erb b/app/views/components/_question_title.html.erb
@@ -1,6 +1,9 @@
 <div class="usa-label"
   id="question-label-<%= question.id %>">
   <%= question.text %>
+  <% if question.is_required? %>
+  <abbr title="required" class="usa-hint--required">*</abbr>
+  <% end -%>
   <% if question.help_text? %>
   <p id="question-id-#{question.id}-help-text">
     <small>

diff --git a/app/views/components/_question_title_label.html.erb b/app/views/components/_question_title_label.html.erb
@@ -1,12 +1,15 @@
 <label class="usa-label" for="<%= question.answer_field.to_sym %>">
   <%= question.text %>
+  <% if question.is_required? %>
+  <abbr title="required" class="usa-hint--required">*</abbr>
+  <% end -%>
   <% if question.help_text? %>
   <p id="question-id-<%= question.id %>-help-text">
     <small>
       <%= question.help_text %>
     </small>
   </p>
-  <% end %>
+  <% end -%>
   <% if local_assigns[:form_builder] && form_builder %>
   <span class="display-block">
     <span class="usa-tag">
@@ -18,5 +21,5 @@
     </span>
     <% end %>
   </span>
-  <% end %>
+  <% end -%>
 </label>
diff --git a/app/views/components/forms/_custom_layout.html.erb b/app/views/components/forms/_custom_layout.html.erb
@@ -15,6 +15,9 @@
           <%= sanitize(form.instructions) %>
         </p>
       <% end %>
+      <p>
+        A red asterisk (<abbr title="required" class="usa-hint--required">*</abbr>) indicates a required field.
+      </p>
       <%= render 'components/forms/flash', form: form %>
       <%= render partial: "components/forms/custom", locals: { form: form, questions: form.questions } %>
     </div>

diff --git a/app/views/components/forms/_footer_banner.html.erb b/app/views/components/forms/_footer_banner.html.erb
@@ -8,7 +8,7 @@
         <p class="usa-banner__header-text">
           <%= t :official_form %>
           <%= t :provided_by %>
-          <a href="<%= root_url %>" target="_blank" rel="noopener"><%= t 'touchpoints' %></a>
+          <a href="https://touchpoints.digital.gov" target="_blank" rel="noopener"><%= t 'touchpoints' %></a>
           <br>
           <% if form.present? %>
             <% if form.omb_approval_number.present? %>

diff --git a/app/views/components/forms/edit/question_types/_dropdown.html.erb b/app/views/components/forms/edit/question_types/_dropdown.html.erb
@@ -3,9 +3,7 @@
   <%= select_tag(question.answer_field.to_sym, options_for_select(question.question_options.each_with_index.map { |option, index| [option.text, option.value] }), { prompt: (t 'form.select_one'), class: "usa-select", required: question.is_required  }) %>
   <div class="question-options">
   <% question.question_options.each_with_index do |option, index| %>
-    <p>
-      <%= render "components/forms/edit/question_types/dropdown_option", question: question, option: option, index: index %>
-    </p>
+    <%= render "components/forms/edit/question_types/dropdown_option", question: question, option: option, index: index %>
   <% end %>
   </div>
 </div>

diff --git a/app/views/components/forms/edit/question_types/_dropdown_option.html.erb b/app/views/components/forms/edit/question_types/_dropdown_option.html.erb
@@ -1,5 +1,7 @@
-<div class="question-option" id="<%= dom_id(option) %>" data-id="<%= option.id %>">
-  <%= label_tag(nil, for: "#{question.answer_field}_#{(index + 1).to_s}") do %>
+<div class="usa-radio question-option" id="<%= dom_id(option) %>" data-id="<%= option.id %>">
+  <% @option_id = "#{question.answer_field}_#{(index + 1).to_s}" %>
+  <%= radio_button_tag(@option_id, index + 1, nil, { name: question.answer_field, value: option.value, class: "usa-radio__input usa-radio__input--tile", required: question.is_required  }) %>
+  <%= label_tag(nil, for: @option_id, class: "usa-radio__label") do %>
     <%= render 'components/forms/edit/question_types/update_value_text_fields', { question: question, option: option } %>
   <% end %>
 </div>
diff --git a/app/views/components/forms/edit/question_types/_update_value_text_fields.html.erb b/app/views/components/forms/edit/question_types/_update_value_text_fields.html.erb
@@ -3,8 +3,8 @@
   <% if option.text != option.value %>(<%= option.value %>)<% end %>
 </span>
 <span class="question-option-edit">
-  <input type="text" name="question_option_text" value="<%= option.text %>" class="usa-input display-inline" data-href="<%= admin_form_question_question_option_path(option.question.form, option.question, option) %>" />&nbsp;&nbsp;
-  <input type="text" name="question_option_value" value="<%= option.value %>" class="usa-input display-inline"/>&nbsp;&nbsp;
+  <input type="text" name="question_option_text" value="<%= option.text %>" class="usa-input display-inline margin-top-0" data-href="<%= admin_form_question_question_option_path(option.question.form, option.question, option) %>" />&nbsp;&nbsp;
+  <input type="text" name="question_option_value" value="<%= option.value %>" class="usa-input display-inline margin-top-0" />&nbsp;&nbsp;
   <%= link_to admin_form_question_question_option_path(question.form, question, option), class: "button form-save-question-option"  do %>
     <i class="fa fa-save"></i>
   <% end %>

diff --git a/app/views/components/forms/question_types/_star_radio_buttons.html.erb b/app/views/components/forms/question_types/_star_radio_buttons.html.erb
@@ -10,7 +10,7 @@
     aria-describedby="<%= "question-id-#{question.id}-help-text" %>"
     <% end -%>
   >
-    <input value="0" id="star0" checked type="radio" name="rating" hidden style="display: none;" hidden>
+    <input value="0" id="<%= question.answer_field %>_star0" checked type="radio" name="rating" hidden style="display: none;" hidden>
     <label for="<%= question.answer_field %>_star0"
       style="display: none;">
       <span hidden>0 Stars</span>

diff --git a/app/views/components/widget/_no_modal.html.erb b/app/views/components/widget/_no_modal.html.erb
@@ -20,6 +20,12 @@
       <%= sanitize(form.instructions) %>
     </p>
     <% end %>
+    <p>
+      <small>
+        A red asterisk (<abbr title="required" class="usa-hint--required">*</abbr>) indicates a required field.
+      </small>
+    </p>
+    <hr>
     <%= render 'components/forms/flash', form: form %>
     <%= render partial: "components/forms/custom", locals: { form: form, questions: form.questions } %>
   </div>

diff --git a/app/views/components/widget/_widget.css.erb b/app/views/components/widget/_widget.css.erb
@@ -610,6 +610,11 @@
   margin-top:0;
 }
 
+.fba-modal-dialog .usa-label--required,
+.fba-modal-dialog .usa-hint--required{
+  color:#b50909;
+}
+
 .fba-modal-dialog .usa-error-message{
   padding-bottom:0.25rem;
   padding-top:0.25rem;

diff --git a/db/migrate/20230926183233_add_hisp_service_fields.rb b/db/migrate/20230926183233_add_hisp_service_fields.rb
@@ -0,0 +1,6 @@
+class AddHispServiceFields < ActiveRecord::Migration[7.0]
+  def change
+    add_column :services, :year_designated, :integer
+    add_column :services, :short_description, :text
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.0].define(version: 2023_09_05_201752) do
+ActiveRecord::Schema[7.0].define(version: 2023_09_26_183233) do
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
 
@@ -682,6 +682,8 @@
     t.string "office", comment: "Text description for the office (below a Bureau)"
     t.boolean "designated_for_improvement_a11_280", default: false, comment: "Is this Service designated, per the OMB Circular A-11 Section 280"
     t.boolean "contact_center", default: false, comment: "True or False for whether the service involves a contact center and/or an interaction with a contact center"
+    t.integer "year_designated"
+    t.text "short_description"
     t.index ["organization_id"], name: "index_services_on_organization_id"
   end
 

diff --git a/db/seeds.rb b/db/seeds.rb
@@ -174,8 +174,10 @@ def production_suitable_seeds
   name: 'USPTO Trademarks',
   organization: Organization.first,
   hisp: true,
+  year_designated: 2023,
   notes: 'Headline notes about the service',
   description: 'A blurb describing this service. A few hundred words...',
+  short_description: 'A short description of this service.',
   department: 'Department of Commerce',
   bureau: 'Patents and Trademarks',
   service_abbreviation: 'uspto',
@@ -187,13 +189,16 @@ def production_suitable_seeds
 service_2 = Service.create!({
   organization: service_provider_2.organization,
   service_provider: service_provider_2,
+  year_designated: 2022,
+  short_description: 'A short description of this service.',
   name: 'Example',
   service_owner_id: admin_user.id,
   hisp: true,
 })
 service_3 = Service.create!({
   organization: Organization.first,
   service_provider: service_provider_2,
+  year_designated: 2021,
   service_owner_id: webmaster.id,
   name: 'HUD',
   hisp: true,
@@ -204,7 +209,7 @@ def production_suitable_seeds
   service_owner_id: webmaster.id,
   name: 'IRS',
   hisp: true,
-  })
+})
 service_5 = Service.create!({
   organization: Organization.first,
   service_provider: service_provider_1,

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "@hotwired/stimulus": "^3.2.1"
+    "@hotwired/stimulus": "^3.2.2"
   }
 }
diff --git a/spec/features/admin/services_spec.rb b/spec/features/admin/services_spec.rb
@@ -42,6 +42,8 @@
           select(organization.name, from: 'service[organization_id]')
           fill_in :service_name, with: 'New Service Name'
           fill_in :service_description, with: "Lots of text\n\n#### Heading\n\n* 1\n* 2\n* 3"
+          fill_in :service_year_designated, with: "2040"
+          fill_in :service_short_description, with: "Abbreviated text"
           find("[for=service_contact_center]").click
 
           find("label[for='service_hisp']").click
@@ -52,6 +54,8 @@
         it 'create Service successfully' do
           expect(page).to have_content('Service was successfully created')
           expect(page).to have_content('New Service Name')
+          expect(page).to have_content('2040')
+          expect(page).to have_content('Abbreviated text')
 
           # renders markdown
           expect(page).to have_css('h4', text: 'Heading')

diff --git a/yarn.lock b/yarn.lock
@@ -2,7 +2,7 @@
 # yarn lockfile v1
 
 
-"@hotwired/stimulus@^3.2.1":
-  version "3.2.1"
-  resolved "https://registry.npmjs.org/@hotwired/stimulus/-/stimulus-3.2.1.tgz"
-  integrity sha512-HGlzDcf9vv/EQrMJ5ZG6VWNs8Z/xMN+1o2OhV1gKiSG6CqZt5MCBB1gRg5ILiN3U0jEAxuDTNPRfBcnZBDmupQ==
+"@hotwired/stimulus@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.npmjs.org/@hotwired/stimulus/-/stimulus-3.2.2.tgz"
+  integrity sha512-eGeIqNOQpXoPAIP7tC1+1Yc1yl1xnwYqg+3mzqxyrbE5pg5YFBZcA6YoTiByJB6DKAEsiWtl6tjTJS4IYtbB7A==