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 @@ + + + diff --git a/app/components/link_component.html.erb b/app/components/link_component.html.erb new file mode 100644 index 0000000..ccab270 --- /dev/null +++ b/app/components/link_component.html.erb @@ -0,0 +1,6 @@ + +<% 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" %> + diff --git a/app/components/link_component.rb b/app/components/link_component.rb new file mode 100644 index 0000000..6119c60 --- /dev/null +++ b/app/components/link_component.rb @@ -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 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( + # %(Hello, components!), + # 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