Add support for trailing and leading visual icons

Author: HDinger

.changeset/odd-dots-laugh.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': minor
+---
+
+Support leading and trailing icons for Links

app/components/primer/beta/link.html.erb

@@ -0,0 +1,26 @@
+<% link_content = capture do %>
+  <%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+    <% if leading_visual %>
+      <span class="Link-visual Link-leadingVisual">
+        <%= leading_visual %>
+      </span>
+    <% end %>
+
+    <%= content %>
+
+    <% if trailing_visual %>
+      <span class="Link-visual Link-trailingVisual">
+        <%= trailing_visual %>
+      </span>
+    <% end %>
+  <% end %>
+<% end %>
+
+<% if tooltip.present? %>
+  <%= render Primer::BaseComponent.new(tag: :span, position: :relative) do %>
+    <%= link_content %>
+    <%= tooltip %>
+  <% end %>
+<% else %>
+  <%= link_content %>
+<% end %>

app/components/primer/beta/link.rb

@@ -30,6 +30,32 @@ class Link < Primer::Component
         Primer::Alpha::Tooltip.new(**system_arguments)
       }
 
+      # Leading visuals appear to the left of the link text.
+      #
+      # Use:
+      #
+      # - `leading_visual_icon` which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Octicon) %>.
+      #
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
+      renders_one :leading_visual, types: {
+        icon: lambda { |**system_arguments|
+          Primer::Beta::Octicon.new(**system_arguments)
+        }
+      }
+
+      # Trailing visuals appear to the right of the link text.
+      #
+      # Use:
+      #
+      # - `trailing_visual_icon` which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Octicon) %>.
+      #
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
+      renders_one :trailing_visual, types: {
+        icon: lambda { |**system_arguments|
+          Primer::Beta::Octicon.new(**system_arguments)
+        }
+      }
+
       # @param href [String] URL to be used for the Link. Required. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered.
       # @param scheme [Symbol] <%= one_of(Primer::Beta::Link::SCHEME_MAPPINGS.keys) %>
       # @param muted [Boolean] Uses light gray for Link color, and blue on hover.
@@ -54,20 +80,6 @@ def initialize(href: nil, scheme: DEFAULT_SCHEME, muted: false, underline: false
       def before_render
         raise ArgumentError, "href is required" if @system_arguments[:href].nil? && !Rails.env.production?
       end
-
-      def call
-        if tooltip.present?
-          render Primer::BaseComponent.new(tag: :span, position: :relative) do
-            render(Primer::BaseComponent.new(**@system_arguments)) do
-              content
-            end.to_s + tooltip.to_s
-          end
-        else
-          render(Primer::BaseComponent.new(**@system_arguments)) do
-            content
-          end
-        end
-      end
     end
   end
 end

previews/primer/beta/link_preview.rb

@@ -9,8 +9,14 @@ class LinkPreview < ViewComponent::Preview
       # @param underline [Boolean]
       # @param muted [Boolean]
       # @param scheme [Symbol] select [default, primary, secondary]
-      def playground(scheme: :default, muted: false, underline: true)
-        render(Primer::Beta::Link.new(href: "#", scheme: scheme, muted: muted, underline: underline)) { "This is a link!" }
+      # @param leading_visual_icon [Symbol] octicon
+      # @param trailing_visual_icon [Symbol] octicon
+      def playground(scheme: :default, muted: false, underline: true, leading_visual_icon: nil, trailing_visual_icon: nil)
+        render(Primer::Beta::Link.new(href: "#", scheme: scheme, muted: muted, underline: underline)) do |link|
+          link.with_leading_visual_icon(icon: leading_visual_icon) if leading_visual_icon && leading_visual_icon != :none
+          link.with_trailing_visual_icon(icon: trailing_visual_icon) if trailing_visual_icon && trailing_visual_icon != :none
+          "This is a link!"
+        end
       end
 
       # @label Default Options
@@ -66,6 +72,22 @@ def color_scheme_secondary_muted
         render(Primer::Beta::Link.new(href: "#", scheme: :secondary, muted: true)) { "This is a muted secondary link color." }
       end
       # @!endgroup
+
+      # @label With leading icon
+      def with_leading_icon
+        render(Primer::Beta::Link.new(href: "#")) do |component|
+          component.with_leading_visual_icon(icon: :"mark-github")
+          "Link with leading icon"
+        end
+      end
+
+      # @label With trailing icon
+      def with_trailing_icon
+        render(Primer::Beta::Link.new(href: "#")) do |component|
+          component.with_trailing_visual_icon(icon: :"link-external")
+          "Link with trailing icon"
+        end
+      end
     end
   end
 end

test/components/beta/link_test.rb

@@ -92,4 +92,24 @@ def test_renders_with_tooltip_sibling
 
     assert_selector("a[href='http://google.com'] + tool-tip", text: "Tooltip text", visible: false)
   end
+
+  def test_renders_leading_visual_icon
+    render_inline(Primer::Beta::Link.new(href: "http://google.com")) do |component|
+      component.with_leading_visual_icon(icon: "plus")
+      "content"
+    end
+
+    assert_selector("a[href='http://google.com']")
+    assert_selector(".Link-visual.Link-leadingVisual .octicon-plus")
+  end
+
+  def test_renders_trailing_visual_icon
+    render_inline(Primer::Beta::Link.new(href: "http://google.com")) do |component|
+      component.with_trailing_visual_icon(icon: "plus")
+      "content"
+    end
+
+    assert_selector("a[href='http://google.com']")
+    assert_selector(".Link-visual.Link-trailingVisual .octicon-plus")
+  end
 end