Add Link and update typography components

13 files changed, 164 insertions, 55 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
index deac04b26b..643fb5da27 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
@@ -11,7 +11,7 @@ export const HeaderTitle = styled(TitleBig)({
 });
 
 export const HeaderSubTitle = styled(LabelTiny).attrs({
-  $color: Colors.white60,
+  color: Colors.white60,
 })({});
 
 interface SettingsHeaderProps {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
index b2e25c9e63..fea4181624 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
@@ -551,7 +551,7 @@ function MacOsSplitTunnelingAvailability({
           <WideSmallButton onClick={showFullDiskAccessSettings}>
             {messages.pgettext('split-tunneling-view', 'Open System Settings')}
           </WideSmallButton>
-          <FootnoteMini $color={Colors.white60}>
+          <FootnoteMini color={Colors.white60}>
             {messages.pgettext(
               'split-tunneling-view',
               'Enabled "Full disk access" and still having issues?',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
index 2454225638..002aa86433 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
@@ -8,5 +8,5 @@ export const CellFooter = styled.div({
 });
 
 export const CellFooterText = styled(LabelTiny).attrs({
-  $color: Colors.white60,
+  color: Colors.white60,
 })({});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmall.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmall.tsx
index 9cfe1bc9c0..18ab10e202 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmall.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmall.tsx
@@ -1,8 +1,9 @@
-import styled from 'styled-components';
+import { Text, TextProps } from './Text';
 
-import { typography } from '../../../tokens';
-import { Text } from './Text';
+export type BodySmallProps = Omit<TextProps, 'variant'>;
 
-export const BodySmall = styled(Text)({
-  ...typography['bodySmall'],
-});
+export const BodySmall = ({ children, ...props }: BodySmallProps) => (
+  <Text variant="bodySmall" {...props}>
+    {children}
+  </Text>
+);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmallSemiBold.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmallSemiBold.tsx
index 705a939e5d..f70a2c7b11 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmallSemiBold.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmallSemiBold.tsx
@@ -1,8 +1,9 @@
-import styled from 'styled-components';
+import { Text, TextProps } from './Text';
 
-import { typography } from '../../../tokens';
-import { Text } from './Text';
+export type BodySmallSemiBoldProps = Omit<TextProps, 'variant'>;
 
-export const BodySmallSemiBold = styled(Text)({
-  ...typography['bodySmallSemibold'],
-});
+export const BodySmallSemiBold = ({ children, ...props }: BodySmallSemiBoldProps) => (
+  <Text variant="bodySmallSemibold" {...props}>
+    {children}
+  </Text>
+);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/FootnoteMini.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/FootnoteMini.tsx
index adbafb90d1..77d563e03c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/FootnoteMini.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/FootnoteMini.tsx
@@ -1,8 +1,9 @@
-import styled from 'styled-components';
+import { Text, TextProps } from './Text';
 
-import { typography } from '../../../tokens';
-import { Text } from './Text';
+export type FoonoteMiniProps = Omit<TextProps, 'variant'>;
 
-export const FootnoteMini = styled(Text)({
-  ...typography['footnoteMini'],
-});
+export const FootnoteMini = ({ children, ...props }: FoonoteMiniProps) => (
+  <Text variant="footnoteMini" {...props}>
+    {children}
+  </Text>
+);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/LabelTiny.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/LabelTiny.tsx
index 9f6f8a143c..f7a952e67e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/LabelTiny.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/LabelTiny.tsx
@@ -1,8 +1,8 @@
-import styled from 'styled-components';
+import { Text, TextProps } from './Text';
+export type LabelTinyProps = Omit<TextProps, 'variant'>;
 
-import { typography } from '../../../tokens';
-import { Text } from './Text';
-
-export const LabelTiny = styled(Text)({
-  ...typography['labelTiny'],
-});
+export const LabelTiny = ({ children, ...props }: LabelTinyProps) => (
+  <Text variant="labelTiny" {...props}>
+    {children}
+  </Text>
+);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Link.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Link.tsx
new file mode 100644
index 0000000000..f2ea457fe3
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Link.tsx
@@ -0,0 +1,62 @@
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+
+import { useHistory } from '../../../lib/history';
+import { RoutePath } from '../../../lib/routes';
+import { Colors, Radius } from '../../../tokens';
+import { buttonReset } from '../mixins';
+import { Text, TextProps } from './Text';
+
+export interface LinkProps extends TextProps, Omit<React.HtmlHTMLAttributes<'button'>, 'color'> {
+  to: RoutePath;
+}
+
+const StyledText = styled(Text)<{
+  $hoverColor: Colors | undefined;
+}>((props) => ({
+  ...buttonReset,
+  background: 'transparent',
+
+  '&:hover': {
+    textDecorationLine: 'underline',
+    textUnderlineOffset: '2px',
+    color: props.$hoverColor,
+  },
+  '&:focus-visible': {
+    borderRadius: Radius.radius4,
+    outline: `2px solid ${Colors.white}`,
+    outlineOffset: '2px',
+  },
+}));
+
+const getHoverColor = (color: Colors | undefined) => {
+  switch (color) {
+    case Colors.white60:
+      return Colors.white;
+    default:
+      return undefined;
+  }
+};
+
+export const Link = ({ to, children, color, onClick, ...props }: LinkProps) => {
+  const history = useHistory();
+  const navigate = useCallback(
+    (e: React.MouseEvent<'button'>) => {
+      if (onClick) {
+        onClick(e);
+      }
+      return history.push(to);
+    },
+    [history, to, onClick],
+  );
+  return (
+    <StyledText
+      onClick={navigate}
+      as={'button'}
+      color={color}
+      $hoverColor={getHoverColor(color)}
+      {...props}>
+      {children}
+    </StyledText>
+  );
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Text.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Text.tsx
index f4b32d988d..3ea195725a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Text.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Text.tsx
@@ -1,11 +1,53 @@
+import { forwardRef } from 'react';
 import styled from 'styled-components';
 
-import { Colors } from '../../../tokens';
+import { Colors, Typography, typography } from '../../../tokens';
 
-interface TextProps {
-  $color?: Colors;
-}
+export type TextProps = React.PropsWithChildren<{
+  variant?: Typography;
+  color?: Colors;
+  as?: React.ElementType;
+  style?: React.CSSProperties;
+}>;
 
-export const Text = styled.div<TextProps>(({ $color }) => ({
-  color: $color ? $color : Colors.white,
-}));
+export const StyledText = styled.span({
+  color: 'var(--color)',
+  fontFamily: 'var(--fontFamily)',
+  fontWeight: 'var(--fontWeight)',
+  fontSize: 'var(--fontSize)',
+  lineHeight: 'var(--lineHeight)',
+});
+
+export const Text = forwardRef(
+  (
+    {
+      variant = 'bodySmall',
+      color = Colors.white,
+      children,
+      style,
+      ...props
+    }: React.PropsWithChildren<TextProps>,
+    ref,
+  ) => {
+    const { fontFamily, fontSize, fontWeight, lineHeight } = typography[variant];
+    return (
+      <StyledText
+        ref={ref}
+        style={
+          {
+            '--color': color,
+            '--fontFamily': fontFamily,
+            '--fontWeight': fontWeight,
+            '--fontSize': fontSize,
+            '--lineHeight': lineHeight,
+            ...style,
+          } as React.CSSProperties
+        }
+        {...props}>
+        {children}
+      </StyledText>
+    );
+  },
+);
+
+Text.displayName = 'Text';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleBig.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleBig.tsx
index 16d76c04ef..4b3b1d84ef 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleBig.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleBig.tsx
@@ -1,8 +1,8 @@
-import styled from 'styled-components';
+import { Text, TextProps } from './Text';
+export type TitleBigProps = Omit<TextProps, 'variant'>;
 
-import { typography } from '../../../tokens';
-import { Text } from './Text';
-
-export const TitleBig = styled(Text)({
-  ...typography['titleBig'],
-});
+export const TitleBig = ({ children, ...props }: TitleBigProps) => (
+  <Text variant="titleBig" {...props}>
+    {children}
+  </Text>
+);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleLarge.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleLarge.tsx
index e939b099fc..c80814362e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleLarge.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleLarge.tsx
@@ -1,7 +1,8 @@
-import styled from 'styled-components';
+import { Text, TextProps } from './Text';
+export type TitleLargeProps = Omit<TextProps, 'variant'>;
 
-import { typography } from '../../../tokens';
-import { Text } from './Text';
-export const TitleLarge = styled(Text)({
-  ...typography['titleLarge'],
-});
+export const TitleLarge = ({ children, ...props }: TitleLargeProps) => (
+  <Text variant="titleLarge" {...props}>
+    {children}
+  </Text>
+);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleMedium.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleMedium.tsx
index 578d435ef3..5e188698a4 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleMedium.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleMedium.tsx
@@ -1,8 +1,8 @@
-import styled from 'styled-components';
+import { Text, TextProps } from './Text';
+export type TitleMediumProps = Omit<TextProps, 'variant'>;
 
-import { typography } from '../../../tokens';
-import { Text } from './Text';
-
-export const TitleMedium = styled(Text)({
-  ...typography['titleMedium'],
-});
+export const TitleMedium = ({ children, ...props }: TitleMediumProps) => (
+  <Text variant="titleMedium" {...props}>
+    {children}
+  </Text>
+);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/index.ts
index 56db1927fc..542c9d5642 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/index.ts
@@ -6,3 +6,4 @@ export * from './Text';
 export * from './TitleBig';
 export * from './TitleLarge';
 export * from './TitleMedium';
+export * from './Link';