Add SimpleForm USWDS-styled radio_buttons default (#5933)

* Add SimpleForm USWDS-styled radio_buttons default **Why**: So that a developer can easily display a collection of radio button input options with consistent styles. * Hide hint on account edit language page * Patch hint text to normal style * Add usa-label styles to USWDS legend **Why**: We're gonna need it once the label global styles aren't around anymore
18F · Feb 17, 2022 · cb7b226 · cb7b226
1 parent 8445948
commit cb7b226
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 105 deletions.
diff --git a/app/assets/stylesheets/components/all.scss b/app/assets/stylesheets/components/all.scss
@@ -30,7 +30,12 @@
   padding-top: 0;
 }
 
-// Upsteram: https://github.com/18F/identity-style-guide/pull/290
+// Upstream: https://github.com/18F/identity-style-guide/pull/290
 .usa-process-list__item:last-child {
   padding-bottom: 0;
 }
+
+// Upstream: https://github.com/18F/identity-style-guide/pull/294
+.usa-hint {
+  @include u-text('no-italic');
+}
diff --git a/app/views/shared/_email_languages.html.erb b/app/views/shared/_email_languages.html.erb
@@ -2,34 +2,29 @@
 locals:
 * f: from validated_form_for
 * selection: the current language selection
+* hint: optional hint override
 %>
-<div class="grid-row margin-bottom-2">
-  <div class="grid-col-fill">
-    <ul class="usa-input-list display-inline-block minw-full">
-      <% I18n.available_locales.each do |locale| %>
-        <% item_id = "email-locale-#{locale}" %>
-        <li class="text-no-wrap width-full">
-          <%= f.input_field(
-                :email_language,
-                type: :radio,
-                value: locale,
-                checked: selection ?
-                  selection.to_s == locale.to_s :
-                  (I18n.locale.to_s == locale.to_s),
-                class: 'usa-radio__input usa-radio__input--bordered',
-                id: item_id,
-              ) %>
-          <%= f.label(
-                :email_language,
-                locale == I18n.locale ?
-                  t('account.email_language.default', language: t("i18n.locale.#{locale}")) :
-                  t("i18n.locale.#{locale}"),
-                for: item_id,
-                class: 'usa-radio__label width-full text-no-wrap',
-              ) %>
-        </li>
-      <% end %>
-    </ul>
-  </div>
-  <div class="grid-col-4 tablet:grid-col-6"></div>
-</div>
+<%= f.input(
+      :email_language,
+      as: :radio_buttons,
+      label: t('forms.registration.labels.email_language'),
+      hint: local_assigns.fetch(
+        :hint,
+        t(
+          'account.email_language.languages_list',
+          app_name: APP_NAME,
+          list: I18n.available_locales.
+            map { |locale| t("account.email_language.name.#{locale}") }.
+            to_sentence(last_word_connector: " #{t('account.email_language.sentence_connector')} "),
+        ),
+      ),
+      collection: I18n.available_locales.map do |locale|
+        [
+          locale == I18n.locale ?
+            t('account.email_language.default', language: t("i18n.locale.#{locale}")) :
+            t("i18n.locale.#{locale}"),
+          locale,
+          checked: selection ? selection.to_s == locale.to_s : I18n.locale.to_s == locale.to_s,
+        ]
+      end,
+    ) %>
diff --git a/app/views/sign_up/registrations/new.html.erb b/app/views/sign_up/registrations/new.html.erb
@@ -18,24 +18,8 @@
         input_html: { autocorrect: 'off' },
       ) %>
 
-  <fieldset class="usa-fieldset">
-    <legend class="margin-bottom-1">
-      <%= t('forms.registration.labels.email_language') %>
-    </legend>
-
-    <p class="margin-bottom-2">
-      <%= t(
-            'account.email_language.languages_list',
-            app_name: APP_NAME,
-            list: I18n.available_locales.
-              map { |locale| t("account.email_language.name.#{locale}") }.
-              to_sentence(last_word_connector: " #{t('account.email_language.sentence_connector')} "),
-          ) %>
-    </p>
-
-    <%= render partial: 'shared/email_languages',
-               locals: { f: f, selection: @register_user_email_form.email_language } %>
-  </fieldset>
+  <%= render partial: 'shared/email_languages',
+             locals: { f: f, selection: @register_user_email_form.email_language } %>
 
   <%= render ValidatedFieldComponent.new(
         form: f,

diff --git a/app/views/test/piv_cac_authentication_test_subject/new.html.erb b/app/views/test/piv_cac_authentication_test_subject/new.html.erb
@@ -3,49 +3,29 @@
 <%= render PageHeadingComponent.new.with_content('Enter PIV/CAC Test Information') %>
 
 <p>
-  Either enter a subject for a certificate or select an error to simulate a piv/cac response.
+  Either enter a subject for a certificate or select an error to simulate a PIV/CAC response.
 </p>
 
-<div class="sm-col-9">
-  <%= form_tag do %>
-    <%= hidden_field_tag(:redirect_uri, @referrer) %>
-    <div class="clearfix margin-x-neg-1">
-      <div class="col col-12 padding-x-1">
-        <legend class="margin-bottom-1">
-          Certificate Subject
-        </legend>
-        <%= text_field_tag(:subject, '', class: 'display-block col-12 field font-family-mono') %>
-      </div>
-      <div class="margin-bottom-4">
-        <fieldset class="margin-0 padding-0 border-0">
-          <legend class="margin-bottom-1">
-            Error Conditions
-          </legend>
-          <%= radio_button_tag(:error, '', false, class: 'usa-radio__input usa-radio__input--bordered') %>
-          <%= label_tag(:error_, 'No error', class: 'usa-radio__label') %>
-          <%= radio_button_tag(:error, 'certificate.none', false, class: 'usa-radio__input usa-radio__input--bordered') %>
-          <%= label_tag(:'error_certificate.none', 'No certificate', class: 'usa-radio__label') %>
-          <%= radio_button_tag(:error, 'certificate.bad', false, class: 'usa-radio__input usa-radio__input--bordered') %>
-          <%= label_tag(:'error_certificate.bad', 'Bad certificate', class: 'usa-radio__label') %>
-          <%= radio_button_tag(:error, 'certificate.expired', false, class: 'usa-radio__input usa-radio__input--bordered') %>
-          <%= label_tag(:'error_certificate.expired', 'Expired certificate', class: 'usa-radio__label') %>
-          <%= radio_button_tag(:error, 'certificate.revoked', false, class: 'usa-radio__input usa-radio__input--bordered') %>
-          <%= label_tag(:'error_certificate.revoked', 'Revoked certificate', class: 'usa-radio__label') %>
-          <%= radio_button_tag(:error, 'certificate.invalid', false, class: 'usa-radio__input usa-radio__input--bordered') %>
-          <%= label_tag(:'error_certificate.invalid', 'Invalid certificate', class: 'usa-radio__label') %>
-          <%= radio_button_tag(:error, 'certificate.unverified', false, class: 'usa-radio__input usa-radio__input--bordered') %>
-          <%= label_tag(:'error_certificate.unverified', 'Unverified certificate', class: 'usa-radio__label') %>
-          <%= radio_button_tag(:error, 'token.missing', false, class: 'usa-radio__input usa-radio__input--bordered') %>
-          <%= label_tag(:'error_token.missing', 'Missing token', class: 'usa-radio__label') %>
-          <%= radio_button_tag(:error, 'token.invalid', false, class: 'usa-radio__input usa-radio__input--bordered') %>
-          <%= label_tag(:'error_token.invalid', 'Invalid token', class: 'usa-radio__label') %>
-        </fieldset>
-      </div>
-      <div class="col col-6 sm-col-5 padding-x-1">
-        <%= button_tag(class: 'usa-button usa-button--big usa-button--full-width') { 'Proceed' } %>
-      </div>
-    </div>
-  <% end %>
-</div>
+<%= simple_form_for('') do |f| %>
+  <%= hidden_field_tag(:redirect_uri, @referrer) %>
+  <%= f.input(:subject, label: 'Certificate Subject') %>
+  <%= f.input(
+        :error,
+        as: :radio_buttons,
+        label: 'Error Conditions',
+        collection: [
+          ['No error', ''],
+          ['No certificate', 'certificate.none'],
+          ['Bad certificate', 'certificate.bad'],
+          ['Expired certificate', 'certificate.expired'],
+          ['Revoked certificate', 'certificate.revoked'],
+          ['Invalid certificate', 'certificate.invalid'],
+          ['Unverified certificate', 'certificate.unverified'],
+          ['Missing token', 'token.missing'],
+          ['Invalid token', 'token.invalid'],
+        ],
+      ) %>
+  <%= f.submit('Proceed', class: 'display-block margin-y-5 usa-button usa-button--big usa-button--wide') %>
+<% end %>
 
 <%= render 'shared/cancel', link: @referrer %>
diff --git a/app/views/users/email_language/show.html.erb b/app/views/users/email_language/show.html.erb
@@ -13,15 +13,7 @@
 </p>
 
 <%= validated_form_for(current_user, url: account_email_language_path, method: 'PATCH') do |f| %>
-  <fieldset class="usa-fieldset">
-    <legend class="margin-bottom-1">
-      <%= t('account.email_language.please_select') %>
-    </legend>
-    <%= render partial: 'shared/email_languages',
-               locals: {
-                 selection: current_user.email_language,
-                 f: f,
-               } %>
-  </fieldset>
+  <%= render partial: 'shared/email_languages',
+             locals: { f: f, hint: false, selection: current_user.email_language } %>
   <%= f.button :submit, t('forms.buttons.submit.default'), class: 'usa-button--big usa-button--wide grid-col-8 mobile-lg:grid-col-6' %>
 <% end %>
diff --git a/config/initializers/simple_form.rb b/config/initializers/simple_form.rb
@@ -6,7 +6,10 @@
   config.boolean_label_class = nil
   config.boolean_style = :inline
   config.default_form_class = 'margin-top-4'
-  config.wrapper_mappings = { boolean: :uswds_checkbox }
+  config.wrapper_mappings = {
+    boolean: :uswds_checkbox,
+    radio_buttons: :uswds_radio_buttons,
+  }
 
   config.wrappers :base do |b|
     b.use :html5
@@ -36,6 +39,27 @@
     b.use :error, wrap_with: { tag: 'div', class: 'usa-error-message' }
   end
 
+  config.wrappers :uswds_radio_buttons,
+                  tag: 'fieldset',
+                  wrapper_class: 'usa-fieldset margin-bottom-4',
+                  item_wrapper_tag: nil,
+                  item_label_class: 'usa-radio__label width-full text-no-wrap' do |b|
+    b.use :html5
+    b.wrapper :legend, tag: 'legend', class: 'usa-label' do |ba|
+      ba.use :label_text
+    end
+    b.use :hint, wrap_with: { tag: 'div', class: 'usa-hint margin-bottom-05' }
+    b.wrapper :grid_row, tag: :div, class: 'grid-row margin-bottom-neg-1' do |gr|
+      gr.wrapper :grid_column_radios, tag: :div, class: 'grid-col-fill' do |gc|
+        gc.wrapper :column_wrapper, tag: :div, class: 'display-inline-block minw-full' do |cr|
+          cr.use :input, class: 'usa-radio__input usa-radio__input--bordered'
+        end
+      end
+      gr.wrapper(:grid_column_gap, tag: :div, class: 'grid-col-4 tablet:grid-col-6') {}
+    end
+    b.use :error, wrap_with: { tag: 'div', class: 'usa-error-message' }
+  end
+
   config.default_wrapper = :vertical_form
 end
 # rubocop:enable Metrics/BlockLength
diff --git a/config/locales/account/en.yml b/config/locales/account/en.yml
@@ -14,7 +14,6 @@ en:
         en: English
         es: Spanish
         fr: French
-      please_select: Please select your language preference below.
       sentence_connector: or
       updated: Your email language preference has been updated.
     forget_all_browsers:

diff --git a/config/locales/account/es.yml b/config/locales/account/es.yml
@@ -15,7 +15,6 @@ es:
         en: Inglés
         es: Español
         fr: Francés
-      please_select: Seleccione su preferencia de idioma a continuación.
       sentence_connector: o
       updated: Se actualizó su preferencia de idioma de correo electrónico.
     forget_all_browsers:

diff --git a/config/locales/account/fr.yml b/config/locales/account/fr.yml
@@ -15,7 +15,6 @@ fr:
         en: Anglais
         es: l’Espagnol
         fr: langue française
-      please_select: Veuillez sélectionner votre préférence de langue ci-dessous.
       sentence_connector: ou
       updated: Votre préférence de langue pour les e-mails a été mise à jour.
     forget_all_browsers: