feat(Text): allow pass thml attributes durind Box inheritance

src/components/Alert/__snapshots__/Alert.test.tsx.snap

@@ -49,7 +49,7 @@ exports[`Alert has predicted styles if inline layout rendered 1`] = `
             style="flex-direction: column; flex-grow: 1; column-gap: 4px; row-gap: 4px; justify-content: center;"
           >
             <span
-              class="g-text g-text_variant_subheader-2 g-alert__title"
+              class="g-box g-text g-text_variant_subheader-2 g-alert__title"
             >
               Where will you go, hero?
             </span>

src/components/Text/Text.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import {Box} from '../layout';
+import type {BoxProps} from '../layout';
 import type {QAProps} from '../types';
 
 import {colorText} from './colorText/colorText';
@@ -9,17 +11,9 @@ import type {TextBaseProps} from './text/text';
 
 export interface TextProps<C extends React.ElementType = 'span'>
     extends Omit<TextBaseProps, 'ellipsisLines'>,
+        Omit<BoxProps<C>, 'color'>,
         ColorTextBaseProps,
         QAProps {
-    /**
-     * Ability to override default html tag
-     */
-    as?: C;
-    style?: React.CSSProperties;
-    className?: string;
-    id?: string;
-    children?: React.ReactNode;
-    title?: string;
     ellipsisLines?: number;
 }
 
@@ -56,7 +50,7 @@ type TextPropsWithoutRef<C extends React.ElementType> = TextProps<C> &
  */
 export const Text = React.forwardRef(function Text<C extends React.ElementType = 'span'>(
     {
-        as,
+        as: propsAs,
         children,
         variant,
         className,
@@ -66,12 +60,11 @@ export const Text = React.forwardRef(function Text<C extends React.ElementType =
         wordBreak,
         ellipsisLines,
         style: outerStyle,
-        qa,
         ...rest
     }: TextPropsWithoutRef<C>,
     ref?: TextRef<C>,
 ) {
-    const Tag: React.ElementType = as || 'span';
+    const as: React.ElementType = propsAs || 'span';
 
     const style: React.CSSProperties = {
         ...outerStyle,
@@ -82,7 +75,8 @@ export const Text = React.forwardRef(function Text<C extends React.ElementType =
     }
 
     return (
-        <Tag
+        <Box
+            as={as}
             ref={ref}
             className={text(
                 {
@@ -95,11 +89,10 @@ export const Text = React.forwardRef(function Text<C extends React.ElementType =
                 color ? colorText({color}, className) : className,
             )}
             style={style}
-            data-qa={qa}
             {...rest}
         >
             {children}
-        </Tag>
+        </Box>
     );
 }) as (<C extends React.ElementType = 'span'>({
     ref,

src/components/Text/__tests__/Text.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import {render} from '../../../../test-utils/utils';
+import {Button} from '../../Button';
+import {Text} from '../Text';
+
+describe('Text', () => {
+    test('should return expected jsx if no props passed', () => {
+        const {container} = render(<Text>Hello World!</Text>);
+
+        expect(container).toMatchSnapshot();
+    });
+
+    test('should return expected jsx if qa attr passed and variant changed', () => {
+        const {container} = render(
+            <Text qa="test" variant={'caption-1'}>
+                Hello World!
+            </Text>,
+        );
+
+        expect(container).toMatchSnapshot();
+    });
+
+    test('should return expected jsx if html attributes passed and changed default html tag', () => {
+        const {container} = render(
+            <Text as="label" htmlFor="some-id">
+                Hello World!
+            </Text>,
+        );
+
+        expect(container).toMatchSnapshot();
+    });
+
+    test('should return expected jsx if passed props what converted to classNames and styles', () => {
+        const {container} = render(
+            <Text
+                width={200}
+                ellipsisLines={2}
+                ellipsis={true}
+                whiteSpace="break-spaces"
+                wordBreak="break-word"
+            >
+                Hello World!
+            </Text>,
+        );
+
+        expect(container).toMatchSnapshot();
+    });
+
+    test('should return expected jsx with another component substitution', () => {
+        const {container} = render(
+            <Text as={Button} size={'m'} width={100} spacing={{mr: 2}}>
+                Hello World!
+            </Text>,
+        );
+
+        expect(container).toMatchSnapshot();
+    });
+});

src/components/Text/__tests__/__snapshots__/Text.test.tsx.snap

@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Text should return expected jsx if html attributes passed and changed default html tag 1`] = `
+<div>
+  <label
+    class="g-box g-text g-text_variant_body-1"
+    for="some-id"
+  >
+    Hello World!
+  </label>
+</div>
+`;
+
+exports[`Text should return expected jsx if no props passed 1`] = `
+<div>
+  <span
+    class="g-box g-text g-text_variant_body-1"
+  >
+    Hello World!
+  </span>
+</div>
+`;
+
+exports[`Text should return expected jsx if passed props what converted to classNames and styles 1`] = `
+<div>
+  <span
+    class="g-box g-text g-text_variant_body-1 g-text_ellipsis g-text_ws_break-spaces g-text_wb_break-word g-text_ellipsis-lines"
+    style="width: 200px;"
+  >
+    Hello World!
+  </span>
+</div>
+`;
+
+exports[`Text should return expected jsx if qa attr passed and variant changed 1`] = `
+<div>
+  <span
+    class="g-box g-text g-text_variant_caption-1"
+    data-qa="test"
+  >
+    Hello World!
+  </span>
+</div>
+`;
+
+exports[`Text should return expected jsx with another component substitution 1`] = `
+<div>
+  <button
+    class="g-button g-button_view_normal g-button_size_m g-button_pin_round-round g-box g-s__mr_2 g-text g-text_variant_body-1"
+    style="width: 100px;"
+    type="button"
+  >
+    <span
+      class="g-button__text"
+    >
+      Hello World!
+    </span>
+  </button>
+</div>
+`;