Revert "LG-15484: Update design of Sign In/Create Account tabs (#11872)"

This reverts commit 4ab0dcb.
18F · Feb 18, 2025 · 5846d9a · 5846d9a
1 parent e2605fb
commit 5846d9a
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 89 deletions.
diff --git a/app/components/tab_navigation_component.html.erb b/app/components/tab_navigation_component.html.erb
@@ -1,14 +1,29 @@
 <%= content_tag(:nav, aria: { label: }, **tag_options, class: [*tag_options[:class], 'tab-navigation']) do %>
-  <ul class="usa-button-group">
+  <ul class="usa-button-group usa-button-group--segmented">
     <% routes.each do |route| %>
-      <%= nav_list_item(route) do %>
-        <%= render ButtonComponent.new(
-              url: route[:path],
-              big: true,
-              outline: current_path?(route[:path]),
-              unstyled: !current_path?(route[:path]),
-              aria: { current: current_path?(route[:path]) ? 'page' : nil },
-            ).with_content(route[:text]) %>
+      <% if current_path?(route[:path]) %>
+        <%= render ClickObserverComponent.new(
+              event_name: 'tab_navigation_current_page_clicked',
+              payload: { path: route[:path] },
+              role: 'listitem',
+              class: 'usa-button-group__item display-list-item',
+            ) do %>
+          <%= render ButtonComponent.new(
+                url: route[:path],
+                big: true,
+                outline: !current_path?(route[:path]),
+                aria: { current: current_path?(route[:path]) ? 'page' : nil },
+              ).with_content(route[:text]) %>
+        <% end %>
+      <% else %>
+        <li class="usa-button-group__item">
+          <%= render ButtonComponent.new(
+                url: route[:path],
+                big: true,
+                outline: !current_path?(route[:path]),
+                aria: { current: current_path?(route[:path]) ? 'page' : nil },
+              ).with_content(route[:text]) %>
+        </li>
       <% end %>
     <% end %>
   </ul>

diff --git a/app/components/tab_navigation_component.rb b/app/components/tab_navigation_component.rb
@@ -10,35 +10,10 @@ def initialize(label:, routes:, **tag_options)
   end
 
   def current_path?(path)
-    @current_path ||= {}
-    if !@current_path.key?(path)
-      @current_path[path] = begin
-        recognized_path = Rails.application.routes.recognize_path(path, method: request.method)
-        request.params[:controller] == recognized_path[:controller] &&
-          request.params[:action] == recognized_path[:action]
-      rescue ActionController::RoutingError
-        false
-      end
-    end
-
-    @current_path[path]
-  end
-
-  private
-
-  def nav_list_item(route, &block)
-    if current_path?(route[:path])
-      render(
-        ClickObserverComponent.new(
-          event_name: 'tab_navigation_current_page_clicked',
-          payload: { path: route[:path] },
-          role: 'listitem',
-          class: 'usa-button-group__item display-list-item',
-        ),
-        &block
-      )
-    else
-      tag.li(class: 'usa-button-group__item', &block)
-    end
+    recognized_path = Rails.application.routes.recognize_path(path, method: request.method)
+    request.params[:controller] == recognized_path[:controller] &&
+      request.params[:action] == recognized_path[:action]
+  rescue ActionController::RoutingError
+    false
   end
 end
diff --git a/app/components/tab_navigation_component.scss b/app/components/tab_navigation_component.scss
@@ -2,27 +2,16 @@
 
 @forward 'usa-button-group/src/styles';
 
-.tab-navigation .usa-button-group {
-  @include u-bg('base-lightest');
-  border-radius: 1.625rem;
-  flex-flow: nowrap;
-
+.tab-navigation .usa-button-group--segmented {
   .usa-button-group__item {
     flex-basis: 50%;
   }
 
+  .usa-button-group__item:last-child > .usa-button,
   .usa-button {
-    @include u-flex('align-center', 'justify-center');
-    @include u-padding(1.5);
-    border-radius: 1.375rem;
     width: 100%;
   }
 
-  .usa-button--unstyled {
-    @include u-text('bold');
-    text-decoration: none;
-  }
-
   .usa-button--big {
     @include at-media-max('tablet') {
       font-size: units(2);

diff --git a/app/javascript/packages/analytics/README.md b/app/javascript/packages/analytics/README.md
@@ -40,8 +40,3 @@ The custom element will implement the analytics logging behavior, but all markup
   <button type="button">Click me!</button>
 </lg-click-observer>
 ```
-
-The element supports the following attributes to customize its behavior:
-
-- `event-name`: The name of the analytics event that should be logged when clicked
-- `payload`: (Optional) JSON payload of additional data that should be included in the logged event
diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb
@@ -48,9 +48,9 @@
           form: f,
           action: SignInRecaptchaForm::RECAPTCHA_ACTION,
           button_options: { full_width: true },
-        ).with_content(t('forms.buttons.submit.default')) %>
+        ).with_content(t('links.sign_in')) %>
   <% else %>
-    <%= f.submit t('forms.buttons.submit.default'), full_width: true, wide: false %>
+    <%= f.submit t('links.sign_in'), full_width: true, wide: false %>
   <% end %>
 <% end %>
 <% if desktop_device? %>

diff --git a/app/views/sign_up/registrations/new.html.erb b/app/views/sign_up/registrations/new.html.erb
@@ -42,12 +42,7 @@
         required: true,
       ) %>
 
-  <%= f.submit(
-        t('forms.buttons.submit.default'),
-        full_width: true,
-        wide: false,
-        class: 'display-block margin-y-5',
-      ) %>
+  <%= f.submit t('forms.buttons.submit.default'), class: 'display-block margin-y-5' %>
 <% end %>
 
 <%= render 'shared/cancel', link: decorated_sp_session.cancel_link_url %>
@@ -72,4 +67,4 @@
           step: :enter_email,
         ),
       ) %>
-</p>
+</p>
diff --git a/spec/components/tab_navigation_component_spec.rb b/spec/components/tab_navigation_component_spec.rb
@@ -11,7 +11,6 @@
 
   it 'renders labelled navigation' do
     expect(rendered).to have_css('.tab-navigation[aria-label="Navigation"]')
-    expect(rendered).to have_css('li', count: 2)
     expect(rendered).to have_link('First') { |link| !is_current_link?(link) }
     expect(rendered).to have_link('Second') { |link| !is_current_link?(link) }
   end
@@ -42,20 +41,10 @@
     end
 
     it 'renders current link as highlighted' do
-      expect(rendered).to have_css('li,[role=listitem]', count: 2)
       expect(rendered).to have_link('First') { |link| is_current_link?(link) }
       expect(rendered).to have_link('Second') { |link| !is_current_link?(link) }
     end
 
-    it 'wraps link in click observer' do
-      expect(rendered).to have_link('First') do |link|
-        expect(link).to have_ancestor('lg-click-observer')
-      end
-      expect(rendered).to have_link('Second') do |link|
-        expect(link).not_to have_ancestor('lg-click-observer')
-      end
-    end
-
     context 'with routes defining full URL' do
       let(:routes) do
         [
@@ -123,6 +112,6 @@
   end
 
   def is_current_link?(link)
-    link.matches_css?('[aria-current="page"].usa-button--outline')
+    link.matches_css?('[aria-current="page"]:not(.usa-button--outline)')
   end
 end
diff --git a/spec/features/saml/saml_spec.rb b/spec/features/saml/saml_spec.rb
@@ -284,7 +284,7 @@
           expect(page).to have_content(
             t('headings.create_account_with_sp.sp_text', app_name: APP_NAME),
           )
-          expect(page).to have_button(t('forms.buttons.submit.default'))
+          expect(page).to have_button('Sign in')
           # visit from SP with force_authn: true
           expect(page).to have_content(
             strip_tags(
@@ -334,7 +334,7 @@
               ),
             ),
           )
-          expect(page).to have_button(t('forms.buttons.submit.default'))
+          expect(page).to have_button('Sign in')
           # Log in with Test SP as the SP session
           fill_in_credentials_and_submit(user.email, user.password)
           fill_in_code_with_last_phone_otp
@@ -363,7 +363,7 @@
               ),
             ),
           )
-          expect(page).to have_button(t('forms.buttons.submit.default'))
+          expect(page).to have_button('Sign in')
 
           # log in for second time
           fill_in_credentials_and_submit(user.email, user.password)
@@ -404,7 +404,7 @@
         expect(page).to have_content(
           t('headings.create_account_with_sp.sp_text', app_name: APP_NAME),
         )
-        expect(page).to have_button(t('forms.buttons.submit.default'))
+        expect(page).to have_button('Sign in')
         expect(page).to have_content(
           strip_tags(
             t(
@@ -439,7 +439,7 @@
         expect(page).to have_content(
           t('headings.create_account_with_sp.sp_text', app_name: APP_NAME),
         )
-        expect(page).to have_button(t('forms.buttons.submit.default'))
+        expect(page).to have_button('Sign in')
         expect(page).to have_content(
           strip_tags(
             t(
@@ -454,7 +454,7 @@
         expect(page).to have_content(
           t('headings.create_account_with_sp.sp_text', app_name: APP_NAME),
         )
-        expect(page).to have_button(t('forms.buttons.submit.default'))
+        expect(page).to have_button('Sign in')
         expect(page).to_not have_content(
           strip_tags(
             t(

diff --git a/spec/features/visitors/password_recovery_spec.rb b/spec/features/visitors/password_recovery_spec.rb
@@ -192,7 +192,7 @@
 
         fill_in t('account.index.email'), with: @user.email
         fill_in t('components.password_toggle.label'), with: 'NewVal!dPassw0rd'
-        click_button t('forms.buttons.submit.default')
+        click_button t('links.sign_in')
         fill_in_code_with_last_phone_otp
         click_submit_default
         click_agree_and_continue

diff --git a/spec/support/features/session_helper.rb b/spec/support/features/session_helper.rb
@@ -98,7 +98,7 @@ def fill_in_bad_piv_cac_credentials_and_submit
     def fill_in_credentials_and_submit(email, password)
       fill_in t('account.index.email'), with: email
       fill_in t('account.index.password'), with: password
-      click_button t('forms.buttons.submit.default')
+      click_button t('links.sign_in')
     end
 
     def fill_in_totp_name(nickname = 'App')

diff --git a/spec/views/devise/sessions/new.html.erb_spec.rb b/spec/views/devise/sessions/new.html.erb_spec.rb
@@ -218,7 +218,7 @@
       let(:sign_in_recaptcha_enabled) { false }
 
       it 'renders default sign-in submit button' do
-        expect(rendered).to have_button(t('forms.buttons.submit.default'))
+        expect(rendered).to have_button(t('links.sign_in'))
         expect(rendered).not_to have_css('lg-captcha-submit-button')
       end
 
@@ -243,7 +243,7 @@
         let(:recaptcha_mock_validator) { true }
 
         it 'renders captcha sign-in submit button' do
-          expect(rendered).to have_button(t('forms.buttons.submit.default'))
+          expect(rendered).to have_button(t('links.sign_in'))
           expect(rendered).to have_css('lg-captcha-submit-button')
         end
       end
@@ -253,7 +253,7 @@
       let(:sign_in_recaptcha_enabled) { true }
 
       it 'renders captcha sign-in submit button' do
-        expect(rendered).to have_button(t('forms.buttons.submit.default'))
+        expect(rendered).to have_button(t('links.sign_in'))
         expect(rendered).to have_css('lg-captcha-submit-button')
       end