feat(link-react): convert icons to pine

Kajabi · May 29, 2024 · 73e0bcf · 73e0bcf
1 parent 944c8ca
commit 73e0bcf
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/packages/sage-assets/lib/stylesheets/components/_link.scss b/packages/sage-assets/lib/stylesheets/components/_link.scss
@@ -168,7 +168,8 @@ $-link-base-styles: (
   position: relative;
   text-decoration: none;
 
-  &::before {
+  &::before,
+  pds-icon {
     @include sage-icon-base(question-circle, lg, pine);
 
     color: sage-color(charcoal, 100);
@@ -179,6 +180,10 @@ $-link-base-styles: (
   &:focus {
     outline: 0;
 
+    pds-icon {
+      color: sage-color(charcoal, 300);
+    }
+
     &::before {
       color: sage-color(charcoal, 300);
     }

diff --git a/packages/sage-react/lib/HelpLink/HelpLink.jsx b/packages/sage-react/lib/HelpLink/HelpLink.jsx
@@ -15,6 +15,7 @@ export const HelpLink = ({
     tag={linkTag}
     {...rest}
   >
+    <pds-icon name="question-circle" size="20px" />
     {!labelIsVisible ? (
       <span className="visually-hidden">
         {children}

diff --git a/packages/sage-react/lib/Link/Link.jsx b/packages/sage-react/lib/Link/Link.jsx
@@ -47,7 +47,7 @@ export const Link = ({
             {...rest}
           >
             {icon && (
-              <pds-icon name={icon} class="sage-link__icon"></pds-icon>
+              <pds-icon name={icon} class="sage-link__icon" />
             )}
             {truncate ? (
               <span className="t-sage--truncate">
@@ -62,7 +62,7 @@ export const Link = ({
           {...rest}
         >
           {icon && (
-            <pds-icon name={icon} class="sage-link__icon"></pds-icon>
+            <pds-icon name={icon} class="sage-link__icon" />
           )}
           {truncate ? (
             <span className="t-sage--truncate">