Use as prop for polymorphism in Text

15 files changed, 75 insertions, 110 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonText.tsx
index de117fccb2..a1a3c02b3a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonText.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonText.tsx
@@ -1,13 +1,14 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import { Colors } from '../../../foundations';
 import { BodySmallSemiBold, BodySmallSemiBoldProps } from '../../typography';
 import { useButtonContext } from '../ButtonContext';
 
-export type ButtonTextProps = Omit<BodySmallSemiBoldProps, 'color'>;
+export type ButtonTextProps<T extends React.ElementType = 'span'> = BodySmallSemiBoldProps<T>;
 export const StyledText = styled(BodySmallSemiBold)``;
 
-export const ButtonText = (props: ButtonTextProps) => {
+export const ButtonText = <T extends React.ElementType = 'span'>(props: ButtonTextProps<T>) => {
   const { disabled } = useButtonContext();
   return <StyledText color={disabled ? Colors.white40 : Colors.white} {...props} />;
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipText.tsx
index b79446de1f..67e3952825 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipText.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipText.tsx
@@ -4,11 +4,13 @@ import { Colors } from '../../../foundations';
 import { BodySmallSemiBoldProps, LabelTiny } from '../../typography';
 import { useFilterChipContext } from '../FilterChipContext';
 
-export type FilterChipTextProps = Omit<BodySmallSemiBoldProps, 'color'>;
+export type FilterChipTextProps<T extends React.ElementType = 'span'> = BodySmallSemiBoldProps<T>;
 
 export const StyledText = styled(LabelTiny)``;
 
-export const FilterChipText = (props: FilterChipTextProps) => {
+export const FilterChipText = <T extends React.ElementType = 'span'>(
+  props: FilterChipTextProps<T>,
+) => {
   const { disabled } = useFilterChipContext();
   return <StyledText color={disabled ? Colors.white40 : Colors.white} {...props} />;
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/components/NavigationHeaderTitle.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/components/NavigationHeaderTitle.tsx
index 7d50dacfb4..7559416c16 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/components/NavigationHeaderTitle.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/components/NavigationHeaderTitle.tsx
@@ -15,10 +15,10 @@ export const StyledText = styled(TitleMedium)<{ $visible?: boolean }>(({ $visibl
   textOverflow: 'ellipsis',
 }));
 
-export const NavigationHeaderTitle = ({ children }: NavigationHeaderTitleProps) => {
+export const NavigationHeaderTitle = ({ children, ...props }: NavigationHeaderTitleProps) => {
   const { titleVisible } = useNavigationHeader();
   return (
-    <StyledText tag="h1" $visible={titleVisible}>
+    <StyledText forwardedAs="h1" $visible={titleVisible} {...props}>
       {children}
     </StyledText>
   );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressPercent.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressPercent.tsx
index b6ea92cf28..73fb6e16d5 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressPercent.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressPercent.tsx
@@ -4,13 +4,15 @@ import { Colors } from '../../../foundations';
 import { LabelTiny, LabelTinyProps } from '../../typography';
 import { useProgress } from '../ProgressContext';
 
-export type ProgressPercentProps = Omit<LabelTinyProps, 'children'>;
+export type ProgressPercentProps<T extends React.ElementType = 'span'> = LabelTinyProps<T>;
 
 const StyledText = styled(LabelTiny)`
   min-width: 26px;
 `;
 
-export const ProgressPercent = (props: ProgressPercentProps) => {
+export const ProgressPercent = <T extends React.ElementType = 'span'>(
+  props: ProgressPercentProps<T>,
+) => {
   const { percent, disabled } = useProgress();
   return (
     <StyledText color={disabled ? Colors.white40 : Colors.white} {...props}>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressText.tsx
index 36ad555eec..b5663bd4c7 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressText.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressText.tsx
@@ -2,13 +2,9 @@ import { Colors } from '../../../foundations';
 import { LabelTiny, LabelTinyProps } from '../../typography';
 import { useProgress } from '../ProgressContext';
 
-export type ProgressTextProps = LabelTinyProps;
+export type ProgressTextProps<T extends React.ElementType = 'span'> = LabelTinyProps<T>;
 
-export const ProgressText = ({ children, ...props }: ProgressTextProps) => {
+export const ProgressText = <T extends React.ElementType = 'span'>(props: ProgressTextProps<T>) => {
   const { disabled } = useProgress();
-  return (
-    <LabelTiny color={disabled ? Colors.white40 : Colors.white60} {...props}>
-      {children}
-    </LabelTiny>
-  );
+  return <LabelTiny color={disabled ? Colors.white40 : Colors.white60} {...props} />;
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmall.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmall.tsx
index 18ab10e202..b68da08c18 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmall.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmall.tsx
@@ -1,9 +1,7 @@
 import { Text, TextProps } from './Text';
 
-export type BodySmallProps = Omit<TextProps, 'variant'>;
+export type BodySmallProps<E extends React.ElementType = 'span'> = TextProps<E>;
 
-export const BodySmall = ({ children, ...props }: BodySmallProps) => (
-  <Text variant="bodySmall" {...props}>
-    {children}
-  </Text>
+export const BodySmall = <T extends React.ElementType = 'span'>(props: BodySmallProps<T>) => (
+  <Text variant="bodySmall" {...props} />
 );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmallSemiBold.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmallSemiBold.tsx
index f70a2c7b11..402153fa6c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmallSemiBold.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmallSemiBold.tsx
@@ -1,9 +1,7 @@
 import { Text, TextProps } from './Text';
 
-export type BodySmallSemiBoldProps = Omit<TextProps, 'variant'>;
+export type BodySmallSemiBoldProps<E extends React.ElementType = 'span'> = TextProps<E>;
 
-export const BodySmallSemiBold = ({ children, ...props }: BodySmallSemiBoldProps) => (
-  <Text variant="bodySmallSemibold" {...props}>
-    {children}
-  </Text>
-);
+export const BodySmallSemiBold = <T extends React.ElementType = 'span'>(
+  props: BodySmallSemiBoldProps<T>,
+) => <Text variant="bodySmallSemibold" {...props} />;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/FootnoteMini.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/FootnoteMini.tsx
index 77d563e03c..75a6ac3d39 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/FootnoteMini.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/FootnoteMini.tsx
@@ -1,9 +1,7 @@
 import { Text, TextProps } from './Text';
 
-export type FoonoteMiniProps = Omit<TextProps, 'variant'>;
+export type FootnoteMiniProps<E extends React.ElementType = 'span'> = TextProps<E>;
 
-export const FootnoteMini = ({ children, ...props }: FoonoteMiniProps) => (
-  <Text variant="footnoteMini" {...props}>
-    {children}
-  </Text>
+export const FootnoteMini = <T extends React.ElementType = 'span'>(props: FootnoteMiniProps<T>) => (
+  <Text variant="footnoteMini" {...props} />
 );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Label.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Label.tsx
index d3ae088dff..9bb7dc7b03 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Label.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Label.tsx
@@ -1,12 +1,8 @@
 import { Text } from './Text';
 import { TextProps } from './Text';
 
-export type LabelProps = TextProps & React.LabelHTMLAttributes<HTMLLabelElement>;
+export type LabelProps<T extends React.ElementType = 'label'> = TextProps<T>;
 
-export const Label = ({ children, ...props }: LabelProps) => {
-  return (
-    <Text as={'label'} {...props}>
-      {children}
-    </Text>
-  );
+export const Label = <T extends React.ElementType = 'label'>(props: LabelProps<T>) => {
+  return <Text as="label" {...props} />;
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTiny.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTiny.tsx
index f7a952e67e..c8dc9865cc 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTiny.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTiny.tsx
@@ -1,8 +1,7 @@
 import { Text, TextProps } from './Text';
-export type LabelTinyProps = Omit<TextProps, 'variant'>;
 
-export const LabelTiny = ({ children, ...props }: LabelTinyProps) => (
-  <Text variant="labelTiny" {...props}>
-    {children}
-  </Text>
+export type LabelTinyProps<E extends React.ElementType = 'span'> = TextProps<E>;
+
+export const LabelTiny = <T extends React.ElementType = 'span'>(props: LabelTinyProps<T>) => (
+  <Text variant="labelTiny" {...props} />
 );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Link.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Link.tsx
index e3c8673a54..a504e8b956 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Link.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Link.tsx
@@ -7,8 +7,9 @@ import { RoutePath } from '../../routes';
 import { buttonReset } from '../../styles';
 import { Text, TextProps } from './Text';
 
-export interface LinkProps extends TextProps, Omit<React.HtmlHTMLAttributes<'button'>, 'color'> {
+export interface LinkProps extends Omit<TextProps<'button'>, 'color'> {
   to: RoutePath;
+  color?: Colors;
 }
 
 const StyledText = styled(Text)<{
@@ -41,7 +42,7 @@ const getHoverColor = (color: Colors | undefined) => {
 export const Link = ({ to, children, color, onClick, ...props }: LinkProps) => {
   const history = useHistory();
   const navigate = useCallback(
-    (e: React.MouseEvent<'button'>) => {
+    (e: React.MouseEvent<HTMLButtonElement>) => {
       if (onClick) {
         onClick(e);
       }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx
index 15a964065d..cf42893f1f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx
@@ -1,60 +1,37 @@
-import { createElement, forwardRef } from 'react';
-import styled, { WebTarget } from 'styled-components';
+import React from 'react';
+import styled from 'styled-components';
 
-import { Colors, Typography, typography, TypographyProperties } from '../../foundations';
-import { TransientProps } from '../../types';
+import { Colors, Typography, typography } from '../../foundations';
+import { PolymorphicProps, TransientProps } from '../../types';
 
-export type TextProps = React.PropsWithChildren<{
+type TextBaseProps = {
   variant?: Typography;
   color?: Colors;
-  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
-  as?: WebTarget;
-  style?: React.CSSProperties;
-}>;
+};
 
-const StyledText = styled(
-  ({ tag = 'span', ...props }: { tag: TextProps['tag'] } & TransientProps<TypographyProperties>) =>
-    createElement(tag, props),
-)((props) => ({
-  color: 'var(--color)',
-  fontFamily: props.$fontFamily,
-  fontWeight: props.$fontWeight,
-  fontSize: props.$fontSize,
-  lineHeight: props.$lineHeight,
-}));
+export type TextProps<T extends React.ElementType = 'span'> = PolymorphicProps<T, TextBaseProps>;
 
-export const Text = forwardRef(
-  (
-    {
-      tag = 'span',
-      variant = 'bodySmall',
-      color = Colors.white,
-      children,
-      style,
-      ...props
-    }: TextProps,
-    ref,
-  ) => {
-    const { fontFamily, fontSize, fontWeight, lineHeight } = typography[variant];
-    return (
-      <StyledText
-        ref={ref}
-        tag={tag}
-        style={
-          {
-            '--color': color,
-            ...style,
-          } as React.CSSProperties
-        }
-        $fontFamily={fontFamily}
-        $fontWeight={fontWeight}
-        $fontSize={fontSize}
-        $lineHeight={lineHeight}
-        {...props}>
-        {children}
-      </StyledText>
-    );
+const StyledText = styled.span<TransientProps<TextBaseProps>>(
+  ({ $variant = 'bodySmall', $color = Colors.white }) => {
+    const { fontFamily, fontSize, fontWeight, lineHeight } = typography[$variant];
+    return `
+      --color: ${$color};
+      
+      color: var(--color);
+      font-family: ${fontFamily};
+      font-size: ${fontSize};
+      font-weight: ${fontWeight};
+      line-height: ${lineHeight};
+    `;
   },
 );
 
+export const Text = <T extends React.ElementType = 'span'>({
+  variant,
+  color,
+  ...props
+}: TextProps<T>) => {
+  return <StyledText $variant={variant} $color={color} {...props} />;
+};
+
 Text.displayName = 'Text';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleBig.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleBig.tsx
index 4b3b1d84ef..8060af731e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleBig.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleBig.tsx
@@ -1,8 +1,7 @@
 import { Text, TextProps } from './Text';
-export type TitleBigProps = Omit<TextProps, 'variant'>;
 
-export const TitleBig = ({ children, ...props }: TitleBigProps) => (
-  <Text variant="titleBig" {...props}>
-    {children}
-  </Text>
+export type TitleBigProps<E extends React.ElementType = 'span'> = TextProps<E>;
+
+export const TitleBig = <T extends React.ElementType = 'span'>(props: TitleBigProps<T>) => (
+  <Text variant="titleBig" {...props} />
 );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleLarge.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleLarge.tsx
index c80814362e..d133bf3083 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleLarge.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleLarge.tsx
@@ -1,8 +1,7 @@
 import { Text, TextProps } from './Text';
-export type TitleLargeProps = Omit<TextProps, 'variant'>;
 
-export const TitleLarge = ({ children, ...props }: TitleLargeProps) => (
-  <Text variant="titleLarge" {...props}>
-    {children}
-  </Text>
+export type TitleLargeProps<E extends React.ElementType = 'span'> = TextProps<E>;
+
+export const TitleLarge = <T extends React.ElementType = 'span'>(props: TitleLargeProps<T>) => (
+  <Text variant="titleLarge" {...props} />
 );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleMedium.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleMedium.tsx
index 5e188698a4..5c4c2852e6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleMedium.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleMedium.tsx
@@ -1,8 +1,7 @@
 import { Text, TextProps } from './Text';
-export type TitleMediumProps = Omit<TextProps, 'variant'>;
 
-export const TitleMedium = ({ children, ...props }: TitleMediumProps) => (
-  <Text variant="titleMedium" {...props}>
-    {children}
-  </Text>
+export type TitleMediumProps<E extends React.ElementType = 'span'> = TextProps<E>;
+
+export const TitleMedium = <T extends React.ElementType = 'span'>(props: TitleMediumProps<T>) => (
+  <Text variant="titleMedium" {...props} />
 );