feat(typography): add rest props (#682)

core-ds · Jun 4, 2021 · 51e1cf8 · 51e1cf8
1 parent cbecef5
commit 51e1cf8
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/packages/typography/src/text/component.tsx b/packages/typography/src/text/component.tsx
@@ -1,11 +1,14 @@
+import React, { HTMLAttributes, FC } from 'react';
 import cn from 'classnames';
-import React from 'react';
+
 import { Color } from '../colors';
 
 import styles from './index.module.css';
 import colors from '../colors.module.css';
 
-export type TextProps = {
+type NativeProps = HTMLAttributes<HTMLSpanElement>;
+
+export type TextProps = Omit<NativeProps, 'color'> & {
     /**
      * [Вариант начертания](https://alfa-laboratory.github.io/core-components/master/?path=/docs/гайдлайны-типографика--page)
      */
@@ -35,7 +38,7 @@ export type TextProps = {
     tag?: 'p' | 'span' | 'div';
 
     /**
-     * Css-класс для стилизации
+     * Css-класс для стилизации (native prop)
      */
     className?: string;
 
@@ -45,20 +48,21 @@ export type TextProps = {
     dataTestId?: string;
 
     /**
-     * Контент
+     * Контент (native prop)
      */
     children?: React.ReactNode;
 };
 
-export const Text: React.FC<TextProps> = ({
+export const Text: FC<TextProps> = ({
     view = 'primary-medium',
     tag: Component = 'span',
     weight = 'regular',
     color,
     className,
     dataTestId,
     children,
-}: TextProps): React.ReactElement => (
+    ...restProps
+}) => (
     <Component
         className={cn(
             { [styles.paragraph]: Component === 'p' },
@@ -68,6 +72,7 @@ export const Text: React.FC<TextProps> = ({
             styles[weight],
         )}
         data-test-id={dataTestId}
+        {...restProps}
     >
         {children}
     </Component>

diff --git a/packages/typography/src/title/component.tsx b/packages/typography/src/title/component.tsx
@@ -1,10 +1,13 @@
+import React, { HTMLAttributes } from 'react';
 import cn from 'classnames';
-import React from 'react';
+
 import { Color } from '../colors';
 
 import colors from '../colors.module.css';
 
-export type TitleProps = {
+type NativeProps = HTMLAttributes<HTMLHeadingElement>;
+
+export type TitleProps = Omit<NativeProps, 'color'> & {
     /**
      * HTML тег
      */
@@ -36,7 +39,7 @@ export type TitleProps = {
     defaultMargins?: boolean;
 
     /**
-     * Css-класс для стилизации
+     * Css-класс для стилизации (native prop)
      */
     className?: string;
 
@@ -46,7 +49,7 @@ export type TitleProps = {
     dataTestId?: string;
 
     /**
-     * Контент
+     * Контент (native prop)
      */
     children?: React.ReactNode;
 };
@@ -68,6 +71,7 @@ export const Title: React.FC<TitleProps & Styles> = ({
     dataTestId,
     children,
     styles,
+    ...restProps
 }) => (
     <Component
         className={cn(
@@ -79,6 +83,7 @@ export const Title: React.FC<TitleProps & Styles> = ({
             color && colors[color],
         )}
         data-test-id={dataTestId}
+        {...restProps}
     >
         {children}
     </Component>