From fba23d340a1b2a56b7940c295dda8b5cbc41f145 Mon Sep 17 00:00:00 2001
From: Kathryn Hansen <kathrynhansen@Mac.lan>
Date: Tue, 18 Nov 2025 16:25:39 -0600
Subject: [PATCH 1/2] add new link component with optional icon

---
 app/assets/images/icons/information.svg       |  3 ++
 app/components/link_component.html.erb        |  7 +++++
 app/components/link_component.rb              | 29 +++++++++++++++++++
 cfa_ui_components.gemspec                     |  3 +-
 test/components/link_component_test.rb        | 12 ++++++++
 .../previews/link_component_preview.rb        |  9 ++++++
 6 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/images/icons/information.svg
 create mode 100644 app/components/link_component.html.erb
 create mode 100644 app/components/link_component.rb
 create mode 100644 test/components/link_component_test.rb
 create mode 100644 test/components/previews/link_component_preview.rb

diff --git a/app/assets/images/icons/information.svg b/app/assets/images/icons/information.svg
new file mode 100644
index 0000000..64cba44
--- /dev/null
+++ b/app/assets/images/icons/information.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 7H13V9H11V7ZM11 11H13V17H11V11ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z" fill="black"/>
+</svg>
diff --git a/app/components/link_component.html.erb b/app/components/link_component.html.erb
new file mode 100644
index 0000000..1f8725f
--- /dev/null
+++ b/app/components/link_component.html.erb
@@ -0,0 +1,7 @@
+<div class="flex">
+<% if @icon.present? %>
+    <%= image_tag icon_image_path, alt: icon_alt_text, class: "size-[20px]" %> 
+<% end %>
+<%= link_to @label, @url  %>
+
+</div>
diff --git a/app/components/link_component.rb b/app/components/link_component.rb
new file mode 100644
index 0000000..d530acc
--- /dev/null
+++ b/app/components/link_component.rb
@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class LinkComponent < ViewComponent::Base
+  def initialize(label:, url:, icon: nil)
+    @label = label
+    @url = url
+    @icon = icon
+  end
+
+  private
+
+  def icon_image_path
+    case @icon
+    when "info"
+      "icons/information.svg"
+    else
+      ""
+    end
+  end
+
+  def icon_alt_text
+    case @icon
+    when "info"
+      "info circle"
+    else
+      ""
+    end
+  end
+end
diff --git a/cfa_ui_components.gemspec b/cfa_ui_components.gemspec
index 21db381..8a48d04 100644
--- a/cfa_ui_components.gemspec
+++ b/cfa_ui_components.gemspec
@@ -18,7 +18,8 @@ Gem::Specification.new do |spec|
     "lib/cfa_ui_components/**/*",
     "app/components/**/*",
     "app/assets/stylesheets/cfa_ui_components.tailwind.css",
-    "lib/tasks/cfa_ui_components.rake"
+    "lib/tasks/cfa_ui_components.rake",
+    "app/assets/images/icons/*"
   ]
   spec.require_paths = [ "lib" ]
 
diff --git a/test/components/link_component_test.rb b/test/components/link_component_test.rb
new file mode 100644
index 0000000..f693037
--- /dev/null
+++ b/test/components/link_component_test.rb
@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class LinkComponentTest < ViewComponent::TestCase
+  def test_component_renders_something_useful
+    # assert_equal(
+    #   %(<span>Hello, components!</span>),
+    #   render_inline(LinkComponent.new(message: "Hello, components!")).css("span").to_html
+    # )
+  end
+end
diff --git a/test/components/previews/link_component_preview.rb b/test/components/previews/link_component_preview.rb
new file mode 100644
index 0000000..1794fd7
--- /dev/null
+++ b/test/components/previews/link_component_preview.rb
@@ -0,0 +1,9 @@
+class LinkComponentPreview < ViewComponent::Preview
+  def default
+    render(LinkComponent.new(label: I18n.t("continue"), url: "/continue"))
+  end
+
+  def with_icon
+    render(LinkComponent.new(label: I18n.t("continue"), url: "/continue", icon: "info"))
+  end
+end

From 2ab09f468b3296b587a70e776e98aecf56aa363b Mon Sep 17 00:00:00 2001
From: Kathryn Hansen <kathrynhansen@Mac.lan>
Date: Wed, 19 Nov 2025 15:38:30 -0600
Subject: [PATCH 2/2] code review, add icon to alt text, change to a span, add
 new target

---
 app/components/link_component.html.erb | 7 +++----
 app/components/link_component.rb       | 5 +++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/components/link_component.html.erb b/app/components/link_component.html.erb
index 1f8725f..ccab270 100644
--- a/app/components/link_component.html.erb
+++ b/app/components/link_component.html.erb
@@ -1,7 +1,6 @@
-<div class="flex">
+<span class='flex'>
 <% if @icon.present? %>
     <%= image_tag icon_image_path, alt: icon_alt_text, class: "size-[20px]" %> 
 <% end %>
-<%= link_to @label, @url  %>
-
-</div>
+<%= link_to @label, @url, target: "_blank", rel: "noopener noreferrer" %>
+</span>
diff --git a/app/components/link_component.rb b/app/components/link_component.rb
index d530acc..6119c60 100644
--- a/app/components/link_component.rb
+++ b/app/components/link_component.rb
@@ -19,11 +19,12 @@ def icon_image_path
   end
 
   def icon_alt_text
-    case @icon
+    descriptor = case @icon
     when "info"
-      "info circle"
+      "info"
     else
       ""
     end
+    descriptor + " icon"
   end
 end