Use design system icons for icon buttons

CHANGELOG.md

@@ -7,6 +7,7 @@ Unreleased
 ### Improvements/Changes
 - Layout: Improve layout margins and typographical consistency across several content pages. (#5880, #5884, #5887, #5888)
 - Typography: Updated monospace font to Roboto Mono for consistency across login.gov sites. (#5891)
+- Icons: Replaced custom button icons using U.S. Web Design system icons. (#5904)
 
 ### Accessibility
 

app/assets/stylesheets/components/_icon.scss

@@ -1,24 +1,18 @@
-.ico {
-  &::before {
-    background-repeat: no-repeat;
-    background-size: 1rem;
-    content: '';
-    display: inline-block;
-    height: 1rem;
-    margin: -0.125rem 0.5rem -0.125rem 0;
-    width: 1rem;
+// Upstream: https://github.com/uswds/uswds/pull/4493
+.usa-icon {
+  .usa-button > &:first-child {
+    // Note: This diverges from the upstream pull request in a couple ways:
+    // 1. There should not be any margins offsetting to account for line height, since Login.gov
+    //    Design System normalizes button line height to 1.
+    // 2. Float is replaced by `vertical-align`, since otherwise it will have the effect of having
+    //    the icon appear to the far edge of the button, rather than next to the text.
+    vertical-align: bottom;
+    margin-right: 0.25rem;
   }
 
-  &.ico-download::before {
-    background-image: url('ico-download.svg');
-  }
-
-  &.ico-refresh::before {
-    background-image: url('ico-refresh.svg');
-  }
-
-  &.ico-print::before {
-    background-image: url('ico-print.svg');
+  .usa-button:not(.usa-button--unstyled) > &:first-child {
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
   }
 }
 

app/assets/stylesheets/print.scss

@@ -3,8 +3,7 @@
   footer,
   .usa-button,
   .usa-radio__input--bordered,
-  .usa-checkbox__input--bordered,
-  .ico {
+  .usa-checkbox__input--bordered {
     display: none;
   }
 }

app/components/button_component.html.erb

@@ -1 +1,6 @@
-<%= button_tag(content, **tag_options, type: tag_type, class: css_class) %>
+<%= action.call(
+      safe_join([icon_content, content&.strip].compact),
+      **tag_options,
+      type: tag_type,
+      class: css_class,
+    ) %>

app/components/button_component.rb

@@ -1,9 +1,16 @@
 class ButtonComponent < BaseComponent
-  attr_reader :type, :outline, :tag_options
+  attr_reader :action, :icon, :outline, :tag_options
 
   DEFAULT_BUTTON_TYPE = :button
 
-  def initialize(outline: false, **tag_options)
+  def initialize(
+    action: ->(content, **tag_options) { button_tag(content, **tag_options) },
+    icon: nil,
+    outline: false,
+    **tag_options
+  )
+    @action = action
+    @icon = icon
     @outline = outline
     @tag_options = tag_options
   end
@@ -17,4 +24,8 @@ def css_class
   def tag_type
     tag_options.fetch(:type, DEFAULT_BUTTON_TYPE)
   end
+
+  def icon_content
+    render IconComponent.new(icon: icon) if icon
+  end
 end

app/components/clipboard_button_component.rb

@@ -2,22 +2,16 @@ class ClipboardButtonComponent < ButtonComponent
   attr_reader :clipboard_text, :tag_options
 
   def initialize(clipboard_text:, **tag_options)
-    super(**tag_options)
+    super(**tag_options, icon: :content_copy)
 
     @clipboard_text = clipboard_text
-    @tag_options = tag_options
   end
 
   def call
     content_tag(:'lg-clipboard-button', super, data: { clipboard_text: clipboard_text })
   end
 
   def content
-    safe_join(
-      [
-        render(IconComponent.new(icon: :content_copy, class: 'position-absolute')),
-        content_tag(:span, t('links.copy'), class: 'padding-left-3'),
-      ],
-    )
+    t('links.copy')
   end
 end

app/views/idv/otp_verification/show.html.erb

@@ -36,11 +36,14 @@
   </div>
 <% end %>
 
-<%= button_to idv_resend_otp_path,
-              method: :post,
-              class: 'usa-button usa-button--outline ico ico-refresh margin-bottom-4' do %>
-  <%= t('links.two_factor_authentication.get_another_code') %>
-<% end %>
+<%= render ButtonComponent.new(
+      action: ->(content, **tag_options) do
+        button_to(idv_resend_otp_path, method: :post, **tag_options) { content }
+      end,
+      outline: true,
+      icon: :loop,
+      class: 'margin-bottom-4',
+    ).with_content(t('links.two_factor_authentication.get_another_code')) %>
 
 <p>
   <%= t('instructions.mfa.wrong_number') %><br>

app/views/shared/_personal_key.html.erb

@@ -8,21 +8,20 @@
 <div class="full-width-box margin-y-5">
   <%= render 'partials/personal_key/key', code: code %>
 </div>
-<%= link_to(
-      idv_download_personal_key_path,
-      class: 'usa-button usa-button--outline margin-right-2 margin-bottom-2 tablet:margin-bottom-0',
-    ) do %>
-  <%= render IconComponent.new(icon: :file_download, class: 'position-absolute') %>
-  <span class="padding-left-3"><%= t('forms.backup_code.download') %></span>
-<% end %>
-<%= button_tag(
-      type: :button,
-      data: { print: true },
-      class: 'usa-button usa-button--outline margin-right-2 margin-bottom-2 tablet:margin-bottom-0',
-    ) do %>
-  <%= render IconComponent.new(icon: :print, class: 'position-absolute') %>
-  <span class="padding-left-3"><%= t('users.personal_key.print') %></span>
-<% end %>
+<%= render ButtonComponent.new(
+      action: ->(content, **tag_options) do
+        link_to(idv_download_personal_key_path, **tag_options) { content }
+      end,
+      icon: :file_download,
+      outline: true,
+      class: 'margin-right-2 margin-bottom-2 tablet:margin-bottom-0',
+    ).with_content(t('forms.backup_code.download')) %>
+<%= render ButtonComponent.new(
+      icon: :print,
+      outline: true,
+      data: { print: '' },
+      class: 'margin-right-2 margin-bottom-2 tablet:margin-bottom-0',
+    ).with_content(t('users.personal_key.print')) %>
 <%= render ClipboardButtonComponent.new(
       clipboard_text: code,
       outline: true,

app/views/two_factor_authentication/otp_verification/show.html.erb

@@ -36,16 +36,22 @@
       ) %>
   <%= hidden_field_tag 'otp_make_default_number',
                        @presenter.otp_make_default_number %>
-  <%= link_to(
-        t('links.two_factor_authentication.get_another_code'),
-        otp_send_path(
-          otp_delivery_selection_form: {
-            otp_delivery_preference: @presenter.otp_delivery_preference,
-            resend: true,
-          },
-        ),
-        class: 'usa-button usa-button--outline ico ico-refresh margin-bottom-neg-1',
-      ) %>
+  <%= render ButtonComponent.new(
+        action: ->(content, **tag_options) do
+          link_to(
+            otp_send_path(
+              otp_delivery_selection_form: {
+                otp_delivery_preference: @presenter.otp_delivery_preference,
+                resend: true,
+              },
+            ),
+            **tag_options,
+          ) { content }
+        end,
+        outline: true,
+        icon: :loop,
+        class: 'margin-bottom-neg-1',
+      ).with_content(t('links.two_factor_authentication.get_another_code')) %>
 <% end %>
 
 <% if @presenter.unconfirmed_phone? %>

app/views/users/backup_code_setup/create.html.erb

@@ -32,12 +32,20 @@
   </table>
   <div class="margin-top-0">
     <% if desktop_device? %>
-      <%= link_to t('forms.backup_code.download'), backup_code_download_path,
-                  class: 'usa-button usa-button--outline ico ico-download' %>
+      <%= render ButtonComponent.new(
+            action: ->(content, **tag_options) do
+              link_to(backup_code_download_path, **tag_options) { content }
+            end,
+            outline: true,
+            icon: :file_download,
+          ).with_content(t('forms.backup_code.download')) %>
     <% end %>
-    <%= link_to t('forms.backup_code.print'), '#',
-                data: { print: true },
-                class: 'usa-button usa-button--outline margin-top-2 mobile-lg:margin-top-0 mobile-lg:margin-left-2 ico ico-print' -%>
+    <%= render ButtonComponent.new(
+          icon: :print,
+          outline: true,
+          data: { print: '' },
+          class: 'margin-top-2 mobile-lg:margin-top-0 mobile-lg:margin-left-2',
+        ).with_content(t('forms.backup_code.print')) %>
     <%= render ClipboardButtonComponent.new(
           clipboard_text: @codes.join(' '),
           outline: true,

spec/components/button_component_spec.rb

@@ -1,6 +1,9 @@
 require 'rails_helper'
 
 RSpec.describe ButtonComponent, type: :component do
+  include ActionView::Context
+  include ActionView::Helpers::TagHelper
+
   let(:type) { nil }
   let(:outline) { false }
   let(:content) { 'Button' }
@@ -10,7 +13,9 @@
     }.compact
   end
 
-  subject(:rendered) { render_inline ButtonComponent.new(outline: outline, **options) { content } }
+  subject(:rendered) do
+    render_inline ButtonComponent.new(outline: outline, **options).with_content(content)
+  end
 
   it 'renders button content' do
     expect(rendered).to have_content(content)
@@ -39,4 +44,29 @@
       expect(rendered).to have_css('button[type=submit]')
     end
   end
+
+  context 'with icon' do
+    it 'renders an icon' do
+      rendered = render_inline ButtonComponent.new(icon: :print).with_content(content)
+
+      expect(rendered).to have_css('use[href$="#print"]')
+      expect(rendered.first_element_child.xpath('./text()').text).to eq(content)
+    end
+  end
+
+  context 'with custom button action' do
+    it 'calls the action with content and tag_options' do
+      rendered = render_inline ButtonComponent.new(
+        action: ->(content, **tag_options) do
+          content_tag(:'lg-custom-button', **tag_options, data: { extra: '' }) { content }
+        end,
+        class: 'custom-class',
+      ).with_content(content)
+
+      expect(rendered).to have_css(
+        'lg-custom-button[type="button"][data-extra].custom-class',
+        text: content,
+      )
+    end
+  end
 end

spec/components/clipboard_button_component_spec.rb

@@ -13,10 +13,14 @@
   end
 
   context 'with tag options' do
-    let(:tag_options) { { outline: true } }
+    let(:tag_options) { { outline: true, data: { foo: 'bar' } } }
 
     it 'renders button given the tag options' do
-      expect(rendered).to have_css('button.usa-button.usa-button--outline')
+      expect(rendered).to have_css('button.usa-button[data-foo="bar"]')
+    end
+
+    it 'respects keyword arguments of button component' do
+      expect(rendered).to have_css('.usa-button--outline:not([outline])')
     end
   end
 end