login button component

app/components/login_button_component.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(
+      :button,
+      **tag_options,
+      class: css_class,
+    ) do %> 
+  Sign in with <%= content_tag(:span, APP_NAME, class: 'login-button__logo') %>
+<% end %>

app/components/login_button_component.rb

@@ -0,0 +1,22 @@
+class LoginButtonComponent < BaseComponent
+  VALID_COLORS = ['primary', 'primary-darker', 'primary-lighter'].freeze
+
+  attr_reader :color, :big, :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
+    @color = color
+    @tag_options = tag_options
+  end
+
+  def css_class
+    classes = ['usa-button', *tag_options[:class]]
+    classes << 'usa-button--big' if big
+    classes << "login-button login-button--#{color}"
+    classes
+  end
+end

app/components/login_button_component.scss

@@ -0,0 +1,52 @@
+@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');
+  }
+}
+
+.login-button.login-button--primary-lighter {
+  @include u-bg('primary-lighter');
+  @include u-text('primary-darker');
+
+  &:hover {
+    @include u-bg('primary-lighter');
+    @include u-text('primary-darker');
+  }
+}
+
+.login-button.login-button--primary {
+  @include u-bg('white');
+  @include u-text('primary-darker');
+  @include u-border(1px);
+  @include u-border('base');
+
+  &:hover {
+    @include u-border(1px);
+    @include u-bg('white');
+    @include u-text('primary-darker');
+    @include u-border('base');
+  }
+}
+
+.login-button.login-button--primary-darker {
+  @include u-bg('primary-darker');
+  @include u-text('white');
+
+  &:hover {
+    @include u-bg('primary-darker');
+    @include u-text('white');
+  }
+}

spec/components/login_button_component_spec.rb

@@ -0,0 +1,62 @@
+require 'rails_helper'
+
+RSpec.describe LoginButtonComponent, type: :component do
+  include ActionView::Context
+  include ActionView::Helpers::TagHelper
+
+  let(:options) { {} }
+
+  subject(:rendered) do
+    render_inline LoginButtonComponent.new(**options)
+  end
+
+  it 'renders button text' do
+    expect(rendered).to have_text('Sign in with Login.gov')
+  end
+
+  it 'renders with design system classes and default color' do
+    expect(rendered).to have_css('button.usa-button.login-button.login-button--primary')
+  end
+
+  context 'as big' do
+    let(:options) { { big: true } }
+
+    it 'renders with design system classes' do
+      expect(rendered).to have_css('button.login-button.usa-button.usa-button--big')
+    end
+  end
+
+  context 'as darker color' do
+    let(:options) { { color: 'primary-darker' } }
+
+    it 'renders with design system classes' do
+      expect(rendered).to have_css('button.usa-button.login-button.login-button--primary-darker')
+    end
+  end
+
+  context 'as lighter color' do
+    let(:options) { { color: 'primary-lighter' } }
+
+    it 'renders with design system classes' do
+      expect(rendered).to have_css('button.usa-button.login-button.login-button--primary-lighter')
+    end
+  end
+
+  it 'raises error for unknown color' do
+    expect do
+      render_inline LoginButtonComponent.new(color: 'foo')
+    end.to raise_error(ArgumentError)
+  end
+
+  context 'with tag options' do
+    it 'renders as attributes' do
+      rendered = render_inline LoginButtonComponent.new(
+        type: :button,
+        class: 'my-custom-class',
+        data: { foo: 'bar' },
+      )
+
+      expect(rendered).to have_css('.usa-button.my-custom-class[type="button"][data-foo="bar"]')
+    end
+  end
+end

spec/components/previews/download_button_component_preview.rb

@@ -7,7 +7,8 @@ def default
 
   # @param file_data text
   # @param file_name text
-  def workbench(file_data: 'File Data', file_name: 'file_name.txt')
-    render(DownloadButtonComponent.new(file_data:, file_name:))
+  # @param big toggle
+  def workbench(file_data: 'File Data', big: false, file_name: 'file_name.txt')
+    render(DownloadButtonComponent.new(file_data:, file_name:, big:))
   end
 end

spec/components/previews/login_button_component_preview.rb

@@ -0,0 +1,22 @@
+class LoginButtonComponentPreview < ButtonComponentPreview
+  # @!group Preview
+  def default
+    render(LoginButtonComponent.new)
+  end
+
+  # @!endgroup
+
+  # @param big toggle
+  # @param color select [~,primary,primary-darker,primary-lighter]
+  def workbench(
+    big: false,
+    color: 'primary'
+  )
+    render(
+      LoginButtonComponent.new(
+        big:,
+        color:,
+      ),
+    )
+  end
+end