LG-12103 Embed Styles into Login Button Lookbook Component

app/components/login_button_component.html.erb

@@ -3,5 +3,5 @@
       **tag_options,
       class: css_class,
     ) do %> 
-  Sign in with <%= content_tag(:span, APP_NAME, class: 'login-button__logo') %>
-<% end %>
+  Sign in with <%= inject_svg %>
+<% end %>

app/components/login_button_component.rb

@@ -3,18 +3,40 @@
 class LoginButtonComponent < BaseComponent
   VALID_COLORS = ['primary', 'primary-darker', 'primary-lighter'].freeze
 
-  attr_reader :color, :big, :tag_options
+  attr_reader :color, :big, :width, :height, :tag_options
 
   def initialize(color: 'primary', big: false, **tag_options)
     if !VALID_COLORS.include?(color)
       raise ArgumentError, "`color` #{color}} is invalid, expected one of #{VALID_COLORS}"
     end
-
     @big = big
+    @width = big ? '11.1rem' : '7.4rem'
+    @height = big ? '1.5rem' : '1rem'
     @color = color
     @tag_options = tag_options
   end
 
+  def svg
+    Rails.root.join(
+      'app', 'assets', 'images',
+      (color == 'primary-darker' ? 'logo-white.svg' : 'logo.svg')
+    ).read
+  end
+
+  def inject_svg
+    # rubocop:disable Rails/OutputSafety
+    Nokogiri::HTML5.fragment(svg).tap do |doc|
+      doc.at_css('svg').tap do |svg|
+        svg[:role] = 'img'
+        svg[:class] = 'login-button__logo'
+        svg[:width] = width
+        svg[:height] = height
+        svg << "<title>#{APP_NAME}</title>"
+      end
+    end.to_s.html_safe
+    # rubocop:enable Rails/OutputSafety
+  end
+
   def css_class
     classes = ['usa-button', *tag_options[:class]]
     classes << 'usa-button--big' if big

app/components/login_button_component.scss

@@ -1,20 +1,7 @@
 @use 'uswds-core' as *;
 
-.login-button.usa-button--big > .login-button__logo {
-  font-size: 1.8rem;
-  margin-top: -2px;
-}
-
 .login-button__logo {
-  margin-left: 2px;
-  font-size: 1.45rem;
-  vertical-align: middle;
-  color: transparent;
-  background: no-repeat 100% url('logo.svg');
-
-  .login-button--primary-darker & {
-    background-image: url('logo-white.svg');
-  }
+  margin-left: 3px;
 }
 
 .login-button.login-button--primary-lighter {

spec/components/login_button_component_spec.rb

@@ -11,7 +11,9 @@
   end
 
   it 'renders button text' do
-    expect(rendered).to have_text('Sign in with Login.gov')
+    rendered
+    element = page.find_css('.login-button').first
+    expect(element.text.squish).to have_text('Sign in with Login.gov')
   end
 
   it 'renders with design system classes and default color' do

spec/components/previews/login_button_component_preview.rb

@@ -1,10 +1,12 @@
 class LoginButtonComponentPreview < ButtonComponentPreview
   # @!group Preview
+  # @after_render :inject_style
   def default
     render(LoginButtonComponent.new)
   end
-
   # @!endgroup
+
+  # @after_render :inject_style
   # @param big toggle "Change button size"
   # @param color select [primary,primary-darker,primary-lighter] "Select button color"
   def workbench(
@@ -18,4 +20,24 @@ def workbench(
       ),
     )
   end
+
+  private
+
+  def css_file_path
+    Rails.root.join(
+      'app',
+      'assets',
+      'builds',
+      'login_button_component.css',
+    )
+  end
+
+  def inject_style(html)
+    <<~HTML
+      <style>
+        #{css_file_path.read}
+      </style>
+      #{html}
+    HTML
+  end
 end