Use as prop for polymorphism in Text

Author: olmoh

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>
   );

desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmall.tsx

@@ -1,6 +1,8 @@
+import { KnownTarget } from 'styled-components/dist/types';
+
 import { Text, TextProps } from './Text';
 
-export type BodySmallProps = Omit<TextProps, 'variant'>;
+export type BodySmallProps = Omit<TextProps<KnownTarget>, 'variant'>;
 
 export const BodySmall = ({ children, ...props }: BodySmallProps) => (
   <Text variant="bodySmall" {...props}>

desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmallSemiBold.tsx

@@ -1,6 +1,8 @@
+import { KnownTarget } from 'styled-components/dist/types';
+
 import { Text, TextProps } from './Text';
 
-export type BodySmallSemiBoldProps = Omit<TextProps, 'variant'>;
+export type BodySmallSemiBoldProps = Omit<TextProps<KnownTarget>, 'variant'>;
 
 export const BodySmallSemiBold = ({ children, ...props }: BodySmallSemiBoldProps) => (
   <Text variant="bodySmallSemibold" {...props}>

desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/FootnoteMini.tsx

@@ -1,6 +1,8 @@
+import { KnownTarget } from 'styled-components/dist/types';
+
 import { Text, TextProps } from './Text';
 
-export type FoonoteMiniProps = Omit<TextProps, 'variant'>;
+export type FoonoteMiniProps = Omit<TextProps<KnownTarget>, 'variant'>;
 
 export const FootnoteMini = ({ children, ...props }: FoonoteMiniProps) => (
   <Text variant="footnoteMini" {...props}>

desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Label.tsx

@@ -1,7 +1,7 @@
 import { Text } from './Text';
 import { TextProps } from './Text';
 
-export type LabelProps = TextProps & React.LabelHTMLAttributes<HTMLLabelElement>;
+export type LabelProps = TextProps<'label'>;
 
 export const Label = ({ children, ...props }: LabelProps) => {
   return (

desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTiny.tsx

@@ -1,5 +1,7 @@
+import { KnownTarget } from 'styled-components/dist/types';
+
 import { Text, TextProps } from './Text';
-export type LabelTinyProps = Omit<TextProps, 'variant'>;
+export type LabelTinyProps = Omit<TextProps<KnownTarget>, 'variant'>;
 
 export const LabelTiny = ({ children, ...props }: LabelTinyProps) => (
   <Text variant="labelTiny" {...props}>

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);
       }

desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx

@@ -1,60 +1,50 @@
-import { createElement, forwardRef } from 'react';
-import styled, { WebTarget } from 'styled-components';
+import React from 'react';
+import styled, { PolymorphicComponentProps } from 'styled-components';
+import { KnownTarget } from 'styled-components/dist/types';
 
-import { Colors, Typography, typography, TypographyProperties } from '../../foundations';
+import { Colors, Typography, typography } from '../../foundations';
 import { 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;
-}>;
+  children?: React.ReactNode;
+};
 
-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 KnownTarget = 'span'> = PolymorphicComponentProps<
+  'web',
+  TextBaseProps,
+  T,
+  T
+>;
 
-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 KnownTarget = 'span'>({
+  variant,
+  color,
+  children,
+  style,
+  ...props
+}: TextProps<T>) => {
+  return (
+    <StyledText $variant={variant} $color={color} {...props}>
+      {children}
+    </StyledText>
+  );
+};
+
 Text.displayName = 'Text';

desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleBig.tsx

@@ -1,8 +1,8 @@
+import { KnownTarget } from 'styled-components/dist/types';
+
 import { Text, TextProps } from './Text';
-export type TitleBigProps = Omit<TextProps, 'variant'>;
+export type TitleBigProps<T extends KnownTarget> = TextProps<T>;
 
-export const TitleBig = ({ children, ...props }: TitleBigProps) => (
-  <Text variant="titleBig" {...props}>
-    {children}
-  </Text>
+export const TitleBig = <T extends KnownTarget>({ ...props }: TitleBigProps<T>) => (
+  <Text variant="titleBig" {...props} />
 );

desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleLarge.tsx

@@ -1,5 +1,7 @@
+import { KnownTarget } from 'styled-components/dist/types';
+
 import { Text, TextProps } from './Text';
-export type TitleLargeProps = Omit<TextProps, 'variant'>;
+export type TitleLargeProps = Omit<TextProps<KnownTarget>, 'variant'>;
 
 export const TitleLarge = ({ children, ...props }: TitleLargeProps) => (
   <Text variant="titleLarge" {...props}>

desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleMedium.tsx

@@ -1,5 +1,7 @@
+import { KnownTarget } from 'styled-components/dist/types';
+
 import { Text, TextProps } from './Text';
-export type TitleMediumProps = Omit<TextProps, 'variant'>;
+export type TitleMediumProps = Omit<TextProps<KnownTarget>, 'variant'>;
 
 export const TitleMedium = ({ children, ...props }: TitleMediumProps) => (
   <Text variant="titleMedium" {...props}>