add new link component with optional icon (#6)

* add new link component with optional icon

* code review, add icon to alt text, change to a span, add new target

---------

Co-authored-by: Kathryn Hansen <[email protected]>

Author: KathrynmHansen

app/assets/images/icons/information.svg

@@ -0,0 +1,6 @@
+<span class='flex'>
+<% if @icon.present? %>
+    <%= image_tag icon_image_path, alt: icon_alt_text, class: "size-[20px]" %> 
+<% end %>
+<%= link_to @label, @url, target: "_blank", rel: "noopener noreferrer" %>
+</span>

app/components/link_component.html.erb

@@ -0,0 +1,30 @@
+# 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
+    descriptor = case @icon
+    when "info"
+      "info"
+    else
+      ""
+    end
+    descriptor + " icon"
+  end
+end

app/components/link_component.rb

@@ -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" ]
 

cfa_ui_components.gemspec

@@ -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

test/components/link_component_test.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