From 10ed9ece3b8d801f33844ea647c8fc401137a9e4 Mon Sep 17 00:00:00 2001
From: "manuel.carrera" <manuel.carrera@workday.com>
Date: Tue, 14 Jan 2025 13:06:27 -0400
Subject: [PATCH] chore: Refactor External Hyperlink to use new styling
 utilities

---
 .../react/button/lib/ExternalHyperlink.tsx    | 61 ++++++++++---------
 modules/react/button/lib/Hyperlink.tsx        |  2 +-
 2 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/modules/react/button/lib/ExternalHyperlink.tsx b/modules/react/button/lib/ExternalHyperlink.tsx
index eb5ebd3bdc..1ccbfb64c7 100644
--- a/modules/react/button/lib/ExternalHyperlink.tsx
+++ b/modules/react/button/lib/ExternalHyperlink.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
-import {styled, createComponent, StyledType} from '@workday/canvas-kit-react/common';
+import {createComponent} from '@workday/canvas-kit-react/common';
 import {extLinkIcon} from '@workday/canvas-system-icons-web';
-import {SystemIcon, systemIconStyles} from '@workday/canvas-kit-react/icon';
-import {Hyperlink, HyperlinkProps} from './Hyperlink';
+import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {HyperlinkProps, hyperlinkStencil} from './Hyperlink';
+import {calc, createStencil, px2rem, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface ExternalHyperlinkProps extends HyperlinkProps {
   /**
@@ -13,25 +15,19 @@ export interface ExternalHyperlinkProps extends HyperlinkProps {
   iconLabel?: string;
 }
 
-const iconStyles = {
-  ...systemIconStyles({fill: 'currentColor', fillHover: 'currentColor'}),
-};
-
-const Anchor = styled(Hyperlink)<ExternalHyperlinkProps & StyledType>({
-  ...iconStyles,
-  display: 'inline-flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-});
-
-const iconSize = '1em';
-const minIconSize = '16px';
-
-const StyledSystemIcon = styled(SystemIcon)<StyledType>({
-  ...iconStyles,
-  width: `calc(${iconSize} - 1px)`,
-  minWidth: `calc(${minIconSize} - 1px)`,
-  marginLeft: '2px',
+export const externalHyperlinkStencil = createStencil({
+  extends: hyperlinkStencil,
+  base: {
+    display: 'inline-flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    '& [data-part="external-hyperlink-icon"]': {
+      [systemIconStencil.vars.color]: 'currentColor',
+      width: calc.subtract(system.space.x4, px2rem(1)),
+      minWidth: calc.subtract(system.space.x4, px2rem(1)),
+      marginInlineStart: calc.subtract(system.space.x1, px2rem(2)),
+    },
+  },
 });
 
 /**
@@ -42,17 +38,24 @@ export const ExternalHyperlink = createComponent('a')({
   displayName: 'ExternalHyperlink',
   Component: (
     {children, iconLabel = 'Opens link in new window', ...elemProps}: ExternalHyperlinkProps,
-    ref
+    ref,
+    Element
   ) => (
-    <Anchor ref={ref} target="_blank" rel="noreferrer" {...elemProps}>
-      <span>{children}</span>
-      <StyledSystemIcon
+    <Element
+      ref={ref}
+      target="_blank"
+      rel="noreferrer"
+      {...handleCsProp(elemProps, externalHyperlinkStencil())}
+    >
+      <span data-part="external-hyperlink-children">{children}</span>
+      <SystemIcon
         icon={extLinkIcon}
         role="img"
         aria-label={iconLabel}
-        size={iconSize}
-        cs={{'& svg': {minWidth: minIconSize, minHeight: minIconSize}}}
+        data-part="external-hyperlink-icon"
+        size={system.space.x4}
+        // cs={{'& svg': {minWidth: minIconSize, minHeight: minIconSize}}}
       />
-    </Anchor>
+    </Element>
   ),
 });
diff --git a/modules/react/button/lib/Hyperlink.tsx b/modules/react/button/lib/Hyperlink.tsx
index e3e9233bbc..4fac0fd8ba 100644
--- a/modules/react/button/lib/Hyperlink.tsx
+++ b/modules/react/button/lib/Hyperlink.tsx
@@ -16,7 +16,7 @@ export interface HyperlinkProps extends CSProps {
   children?: React.ReactNode;
 }
 
-const hyperlinkStencil = createStencil({
+export const hyperlinkStencil = createStencil({
   base: {
     fontFamily: system.fontFamily.default,
     textDecoration: 'underline',