fix(link): add missing icon for help link variant (#1943)

* fix(link): added missing icon for help variant

* docs(link): add missing help link examples

* style(link): hello linter my old friend

docs/app/views/examples/components/link/_preview.html.erb

@@ -115,3 +115,22 @@ Neutral links live in items with non-white backgrounds, such as Banner and Toast
     }
   }
 } %>
+
+<h3 class="t-sage-heading-6">Help Link</h3>
+
+<div>
+  <%= sage_component SageLink, {
+    url: "https://example.com",
+    label: "External link",
+    help_link: true,
+    show_label: false
+  } %>
+</div>
+<div>
+  <%= sage_component SageLink, {
+    url: "https://example.com",
+    label: "Help link label",
+    help_link: true,
+    show_label: true,
+  } %>
+</div>

docs/lib/sage_rails/app/views/sage_components/_sage_link.html.erb

@@ -52,8 +52,11 @@ html_attributes[:class] = css_classes
   .squish
 %>
 <%= link_to component.url, html_attributes do %>
-  <% if component.icon %>
+  <% if component.icon && !component.help_link %>
     <pds-icon name="<%= component.icon[:name] %>" class="sage-link__icon"></pds-icon>
   <% end %>
+  <% if component.help_link && !component.icon %>
+    <pds-icon name="question-circle" class="sage-link__icon"></pds-icon>
+  <% end %>
   <%= label %>
 <% end %>

packages/sage-assets/lib/stylesheets/components/_link.scss

@@ -167,6 +167,7 @@ $-link-base-styles: (
 .sage-link--help-icon-only {
   position: relative;
   text-decoration: none;
+  color: inherit;
 
   &::before,
   pds-icon {
@@ -178,6 +179,7 @@ $-link-base-styles: (
   &:hover,
   &:active,
   &:focus {
+    color: inherit;
     outline: 0;
 
     pds-icon {