feat(typography): add ref (#834)

Co-authored-by: Кононенко Артем Игоревич <AIKononenko@alfabank.ru>
core-ds · Sep 14, 2021 · 976b16d · 976b16d
1 parent 437ec3c
commit 976b16d
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 51 deletions.
diff --git a/packages/typography/src/text/component.tsx b/packages/typography/src/text/component.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, FC } from 'react';
+import React, { HTMLAttributes, forwardRef } from 'react';
 import cn from 'classnames';
 
 import { Color } from '../colors';
@@ -58,28 +58,36 @@ export type TextProps = Omit<NativeProps, 'color'> & {
     children?: React.ReactNode;
 };
 
-export const Text: FC<TextProps> = ({
-    view = 'primary-medium',
-    tag: Component = 'span',
-    weight = 'regular',
-    monospaceNumbers = false,
-    color,
-    className,
-    dataTestId,
-    children,
-    ...restProps
-}) => (
-    <Component
-        className={cn(
-            { [styles.paragraph]: Component === 'p', [styles.monospace]: monospaceNumbers },
+type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
+
+export const Text = forwardRef<TextElementType, TextProps>(
+    (
+        {
+            view = 'primary-medium',
+            tag: Component = 'span',
+            weight = 'regular',
+            monospaceNumbers = false,
+            color,
             className,
-            color && colors[color],
-            styles[view],
-            styles[weight],
-        )}
-        data-test-id={dataTestId}
-        {...restProps}
-    >
-        {children}
-    </Component>
+            dataTestId,
+            children,
+            ...restProps
+        },
+        ref,
+    ) => (
+        <Component
+            className={cn(
+                { [styles.paragraph]: Component === 'p', [styles.monospace]: monospaceNumbers },
+                className,
+                color && colors[color],
+                styles[view],
+                styles[weight],
+            )}
+            data-test-id={dataTestId}
+            ref={ref as never}
+            {...restProps}
+        >
+            {children}
+        </Component>
+    ),
 );
diff --git a/packages/typography/src/title/component.tsx b/packages/typography/src/title/component.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React, { forwardRef, HTMLAttributes } from 'react';
 import cn from 'classnames';
 
 import { Color } from '../colors';
@@ -60,31 +60,39 @@ type Styles = {
     };
 };
 
-export const Title: React.FC<TitleProps & Styles> = ({
-    tag: Component = 'div',
-    view = 'medium',
-    font = 'styrene',
-    weight = font === 'styrene' ? 'medium' : 'bold',
-    defaultMargins = false,
-    color,
-    className,
-    dataTestId,
-    children,
-    styles,
-    ...restProps
-}) => (
-    <Component
-        className={cn(
-            styles.component,
+type TitleElementType = HTMLHeadingElement | HTMLDivElement;
+
+export const Title = forwardRef<TitleElementType, TitleProps & Styles>(
+    (
+        {
+            tag: Component = 'div',
+            view = 'medium',
+            font = 'styrene',
+            weight = font === 'styrene' ? 'medium' : 'bold',
+            defaultMargins = false,
+            color,
             className,
-            styles[`${font}-${view}`],
-            defaultMargins && styles[`margins-${view}`],
-            styles[weight],
-            color && colors[color],
-        )}
-        data-test-id={dataTestId}
-        {...restProps}
-    >
-        {children}
-    </Component>
+            dataTestId,
+            children,
+            styles,
+            ...restProps
+        },
+        ref,
+    ) => (
+        <Component
+            className={cn(
+                styles.component,
+                className,
+                styles[`${font}-${view}`],
+                defaultMargins && styles[`margins-${view}`],
+                styles[weight],
+                color && colors[color],
+            )}
+            data-test-id={dataTestId}
+            ref={ref}
+            {...restProps}
+        >
+            {children}
+        </Component>
+    ),
 );