Add components: ViewComponents

Gemfile

@@ -49,6 +49,8 @@ gem 'omniauth-rails_csrf_protection', '~> 1.0'
 
 gem 'cancancan', '~> 3.6'
 
+gem 'view_component', '~> 3.13'
+
 # Use Sass to process CSS
 # gem "sassc-rails"
 

app/assets/stylesheets/components/_button_primary.css → app/assets/stylesheets/components/_button_component.css

@@ -1,19 +1,39 @@
-.button-primary {
-    background-color: var(--primary-600);
-    color: var(--primary-50);
+.button {
     border-radius: var(--rounded-lg);
     letter-spacing: var(--spacing-lg);
     font-size: var(--text-sm);
     text-transform: uppercase;
-    border: none;
     font-weight: var(--font-bold);
     padding: var(--padding-xs) var(--padding-md);
     margin-bottom: var(--padding-md);
     display: flex;
     align-items: center;
 }
 
-.button-primary svg {
+.button svg {
     padding-left: var(--padding-sm);
+}
+
+
+
+/* Primary Button */
+.button-primary {
+    background-color: var(--primary-600);
+    color: var(--primary-50);
+    border: none;
+}
+
+.button-primary svg {
     fill: var(--primary-300);
 }
+
+/* Secondary Button */
+.button-secondary {
+    background-color: transparent;
+    color: var(--primary-100);
+    border: 2px solid var(--primary-100);
+}
+
+.button-secondary svg {
+    fill: var(--primary-500);
+}

app/assets/stylesheets/layouts/_header.css

@@ -27,29 +27,4 @@ nav a {
 .logo {
     font-weight: var(--font-bold);
     margin-right: calc(2 * var(--padding-md));
-}
-
-.login_button {
-    background-color: var(--primary-600);
-    color: var(--primary-200);
-    border-radius: var(--rounded-lg);
-    letter-spacing: var(--spacing-lg);
-    font-size: var(--text-sm);
-    text-transform: uppercase;
-    border: none;
-    font-weight: var(--font-bold);
-    padding: var(--padding-xs) var(--padding-md);
-}
-
-.logout_button {
-    background-color: transparent;
-    color: var(--primary-200);
-    border-radius: var(--rounded-lg);
-    letter-spacing: var(--spacing-lg);
-    font-size: var(--text-sm);
-    text-transform: uppercase;
-    border: none;
-    box-shadow: inset 0px 0px 0px 2px var(--primary-200);
-    font-weight: var(--font-bold);
-    padding: var(--padding-xs) var(--padding-md);
-}
+}

app/components/button_component.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+class ButtonComponent < ViewComponent::Base
+  include ApplicationHelper
+
+  erb_template <<-ERB
+    <%= button_to(
+      @path,
+      method: @method,
+      class: button_class,
+      'aria-label': @aria_label,
+      data: @data,
+      form: @form,
+    ) do %>
+      <%= @label %>
+      <% if @action %>
+        <%= svg_icon_tag button_action_icon %>
+      <% end %>
+    <% end %>
+  ERB
+
+  def initialize(
+    label:,
+    path:,
+    method: :get,
+    class_name: '',
+    aria_label: nil,
+    data: { turbo: false },
+    form: {},
+    button_type: :primary,
+    action: nil
+  )
+    @label = label
+    @path = path
+    @method = method
+    @class_name = class_name
+    @aria_label = aria_label || label
+    @data = data
+    @form = form
+    @button_type = button_type
+    @action = action
+  end
+
+  def button_class
+    base_class = 'button'
+    type_class = case @button_type
+                 when :primary
+                   'button-primary'
+                 when :secondary
+                   'button-secondary'
+                 else
+                   ''
+                 end
+    [base_class, type_class, @class_name].compact.join(' ')
+  end
+
+  def button_action_icon
+    case @action
+    when :add
+      'icon_plus'
+    when :edit
+      'icon_edit'
+    when :delete
+      'icon_delete'
+    else
+      ''
+    end
+  end
+end

test/components/button_component_test.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require 'test_helper'
+
+class ButtonComponentTest < ViewComponent::TestCase
+  def test_component_renders_something_useful
+    # assert_equal(
+    #   %(<span>Hello, components!</span>),
+    #   render_inline(ButtonComponent.new(message: "Hello, components!")).css("span").to_html
+    # )
+  end
+end