Merge branch 'fix-link-icon-alignment-when-spanning-multiple-lines-des-2170'

12 files changed, 130 insertions, 72 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExternalLink.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExternalLink.tsx
index 0acba13623..4f160ad64d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ExternalLink.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExternalLink.tsx
@@ -1,19 +1,13 @@
 import { useCallback } from 'react';
-import styled from 'styled-components';
 
 import { Url } from '../../shared/constants';
 import { useAppContext } from '../context';
 import { Link, LinkProps } from '../lib/components';
 
-export type ExternalLinkProps = Omit<LinkProps<'a'>, 'href' | 'as'> & {
+export type ExternalLinkProps = Omit<LinkProps, 'href' | 'as'> & {
   to: Url;
 };
 
-const StyledLink = styled(Link)`
-  display: inline-flex;
-  width: fit-content;
-`;
-
 function ExternalLink({ to, onClick, ...props }: ExternalLinkProps) {
   const { openUrl } = useAppContext();
   const navigate = useCallback(
@@ -26,10 +20,11 @@ function ExternalLink({ to, onClick, ...props }: ExternalLinkProps) {
     },
     [onClick, openUrl, to],
   );
-  return <StyledLink href="" onClick={navigate} {...props} />;
+  return <Link href="" onClick={navigate} {...props} />;
 }
 
 const ExternalLinkNamespace = Object.assign(ExternalLink, {
+  Text: Link.Text,
   Icon: Link.Icon,
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/InternalLink.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/InternalLink.tsx
index 70f8b7c496..ba6b32280e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/InternalLink.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/InternalLink.tsx
@@ -4,11 +4,11 @@ import { Link, LinkProps } from '../lib/components';
 import { useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
 
-export type InternalLinkProps = Omit<LinkProps<'a'>, 'href' | 'as'> & {
+export type InternalLinkProps = Omit<LinkProps, 'href' | 'as'> & {
   to: RoutePath;
 };
 
-export function InternalLink({ to, onClick, ...props }: InternalLinkProps) {
+function InternalLink({ to, onClick, ...props }: InternalLinkProps) {
   const history = useHistory();
   const navigate = useCallback(
     (e: React.MouseEvent<HTMLAnchorElement>) => {
@@ -22,3 +22,10 @@ export function InternalLink({ to, onClick, ...props }: InternalLinkProps) {
   );
   return <Link href="" onClick={navigate} {...props} />;
 }
+
+const InternalLinkNamespace = Object.assign(InternalLink, {
+  Text: Link.Text,
+  Icon: Link.Icon,
+});
+
+export { InternalLinkNamespace as InternalLink };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
index 0a43452513..71045a2bfd 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components';
 
 import { InAppNotificationSubtitle } from '../../shared/notifications';
 import { LabelTiny } from '../lib/components';
@@ -11,10 +10,6 @@ export type NotificationSubtitleProps = {
   subtitle?: string | InAppNotificationSubtitle[];
 };
 
-const StyledExternalLink = styled(ExternalLink)`
-  display: flex;
-`;
-
 const formatSubtitle = (subtitle: InAppNotificationSubtitle) => {
   const content = formatHtml(subtitle.content);
   if (subtitle.action) {
@@ -22,15 +17,15 @@ const formatSubtitle = (subtitle: InAppNotificationSubtitle) => {
       case 'navigate-internal':
         return (
           <InternalLink variant="labelTiny" {...subtitle.action.link}>
-            {content}
+            <InternalLink.Text>{content}</InternalLink.Text>
           </InternalLink>
         );
       case 'navigate-external':
         return (
-          <StyledExternalLink variant="labelTiny" {...subtitle.action.link}>
-            {content}
-            <ExternalLink.Icon icon="external" size="small" />
-          </StyledExternalLink>
+          <ExternalLink variant="labelTiny" {...subtitle.action.link}>
+            <ExternalLink.Text>{content}</ExternalLink.Text>
+            <ExternalLink.Icon icon="external" />
+          </ExternalLink>
         );
       default:
         break;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
index 3de932bc86..9e3acf985e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
@@ -758,11 +758,13 @@ function TunnelProtocolSetting() {
             </Cell.CellFooterText>
           </AriaDescription>
           <ExternalLink variant="labelTiny" to={urls.removingOpenVpnBlog}>
-            {sprintf(
-              // TRANSLATORS: Link in tunnel protocol selector footer to blog post
-              // TRANSLATORS: about OpenVPN support ending.
-              messages.pgettext('vpn-settings-view', 'Read more'),
-            )}
+            <ExternalLink.Text>
+              {sprintf(
+                // TRANSLATORS: Link in tunnel protocol selector footer to blog post
+                // TRANSLATORS: about OpenVPN support ending.
+                messages.pgettext('vpn-settings-view', 'Read more'),
+              )}
+            </ExternalLink.Text>
             <ExternalLink.Icon icon="external" size="small" />
           </ExternalLink>
         </Cell.CellFooter>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/Link.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/Link.tsx
index 40a598b666..5e1bef8d5f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/Link.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/Link.tsx
@@ -1,62 +1,66 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-import { Colors, colors, Radius } from '../../foundations';
-import { Text, TextProps } from '../typography';
-import { LinkIcon } from './components';
+import { Colors, colors, Radius, Typography } from '../../foundations';
+import { TransientProps } from '../../types';
+import { LinkIcon, LinkText, StyledIcon as StyledLinkIcon, StyledLinkText } from './components';
+import { useHoverColor } from './hooks';
+import { LinkProvider } from './LinkContext';
 
-export type LinkProps<T extends React.ElementType = 'a'> = TextProps<T> & {
+type LinkBaseProps = {
+  variant?: Typography;
+  color?: Colors;
   onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
 };
 
-const StyledText = styled(Text)<{
-  $hoverColor: Colors | undefined;
-}>((props) => ({
-  background: colors.transparent,
-  cursor: 'default',
-  textDecoration: 'none',
-  display: 'inline',
+export type LinkProps = LinkBaseProps &
+  Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkBaseProps>;
 
-  '&&:hover': {
-    textDecorationLine: 'underline',
-    textUnderlineOffset: '2px',
-    color: props.$hoverColor,
-  },
-  '&&:focus-visible': {
-    borderRadius: Radius.radius4,
-    outline: `2px solid ${colors.whiteAlpha60}`,
-    outlineOffset: '2px',
-  },
-}));
-
-const getHoverColor = (color: Colors | undefined) => {
-  switch (color) {
-    case 'whiteAlpha60':
-      return 'white';
-    default:
-      return undefined;
+const StyledLink = styled.a<
+  TransientProps<LinkProps> & {
+    $hoverColor?: Colors;
   }
-};
+>(({ $hoverColor }) => {
+  return css`
+    cursor: default;
+    text-decoration: none;
+    display: inline;
+    width: fit-content;
+
+    &&:hover > ${StyledLinkText} {
+      text-decoration-line: underline;
+      text-underline-offset: 2px;
+      color: ${$hoverColor};
+    }
+
+    &&:focus-visible > ${StyledLinkText} {
+      border-radius: ${Radius.radius4};
+      outline: 2px solid ${colors.white};
+      outline-offset: 2px;
+    }
+
+    > ${StyledLinkIcon}:first-child:not(:only-child) {
+      margin-right: 2px;
+    }
+    > ${StyledLinkIcon}:last-child:not(:only-child) {
+      margin-left: 2px;
+    }
+  `;
+});
 
-function Link<T extends React.ElementType = 'a'>({
-  as: forwardedAs,
-  color,
-  ...props
-}: LinkProps<T>) {
-  // If `as` is provided we need to pass it as `forwardedAs` for it to
-  // be correctly passed to the `Text` component.
-  const componentProps = forwardedAs ? { ...props, forwardedAs } : props;
+function Link({ color, variant, children, ...props }: LinkProps) {
+  const hoverColor = useHoverColor(color);
   return (
-    <StyledText
-      forwardedAs="a"
-      color={color}
-      $hoverColor={getHoverColor(color)}
-      {...componentProps}
-    />
+    <LinkProvider variant={variant} color={color}>
+      <StyledLink $hoverColor={hoverColor} {...props}>
+        {children}
+      </StyledLink>
+    </LinkProvider>
   );
 }
 
 const LinkNamespace = Object.assign(Link, {
+  Text: LinkText,
   Icon: LinkIcon,
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/LinkContext.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/LinkContext.tsx
new file mode 100644
index 0000000000..128428c081
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/LinkContext.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { LinkProps } from './Link';
+
+interface LinkContextProps {
+  color?: LinkProps['color'];
+  variant?: LinkProps['variant'];
+}
+
+const LinkContext = React.createContext<LinkContextProps | undefined>(undefined);
+
+export const useLinkContext = (): LinkContextProps => {
+  const context = React.useContext(LinkContext);
+  if (!context) {
+    throw new Error('useLinkContext must be used within a LinkProvider');
+  }
+  return context;
+};
+
+interface LinkProviderProps {
+  color?: LinkContextProps['color'];
+  variant?: LinkContextProps['variant'];
+  children: React.ReactNode;
+}
+
+export function LinkProvider({ color, variant, children }: LinkProviderProps) {
+  return <LinkContext.Provider value={{ color, variant }}>{children}</LinkContext.Provider>;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/LinkIcon.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/LinkIcon.tsx
index 7af4b28045..3a82f11a4d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/LinkIcon.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/LinkIcon.tsx
@@ -5,8 +5,9 @@ import { Icon, IconProps } from '../../icon';
 type LinkIconProps = IconProps;
 
 export const StyledIcon = styled(Icon)`
-  vertical-align: middle;
-  display: inline-flex;
+  vertical-align: text-bottom;
+  display: inline-block;
+  flex-shrink: 0;
 `;
 
 export function LinkIcon({ ...props }: LinkIconProps) {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/LinkText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/LinkText.tsx
new file mode 100644
index 0000000000..c8c1ff8baa
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/LinkText.tsx
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+import { Text, TextProps } from '../../typography';
+import { useLinkContext } from '../LinkContext';
+
+export type LinkTextProps = TextProps;
+
+export const StyledLinkText = styled(Text)``;
+
+export function LinkText(props: LinkTextProps) {
+  const { variant, color } = useLinkContext();
+  return <StyledLinkText variant={variant} color={color} {...props}></StyledLinkText>;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/index.ts
index 1718f57d55..efe33915d2 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/index.ts
@@ -1 +1,2 @@
 export * from './LinkIcon';
+export * from './LinkText';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/hooks/index.ts
new file mode 100644
index 0000000000..4f17d940a4
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/hooks/index.ts
@@ -0,0 +1 @@
+export * from './use-hover-color';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/hooks/use-hover-color.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/hooks/use-hover-color.ts
new file mode 100644
index 0000000000..f62f26a6fe
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/hooks/use-hover-color.ts
@@ -0,0 +1,10 @@
+import { Colors } from '../../../foundations';
+
+export const useHoverColor = (color: Colors | undefined) => {
+  switch (color) {
+    case 'whiteAlpha60':
+      return 'white';
+    default:
+      return undefined;
+  }
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/index.ts
new file mode 100644
index 0000000000..3db78f51f0
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/index.ts
@@ -0,0 +1 @@
+export * from './Link';