From afd6c03d8255bd3ee812ecae260febf2a81a582d Mon Sep 17 00:00:00 2001
From: IsaevAlexandr <IsaevAlexandr188@gmail.com>
Date: Mon, 2 May 2022 10:57:42 +0300
Subject: [PATCH] feat(Text): review fixes

---
 src/components/ColorText/ColorText.scss |  6 +--
 src/components/ColorText/ColorText.tsx  |  1 -
 src/components/Text/Text.scss           | 50 ++++++++++++-------------
 src/components/Text/Text.tsx            | 12 +++---
 4 files changed, 32 insertions(+), 37 deletions(-)

diff --git a/src/components/ColorText/ColorText.scss b/src/components/ColorText/ColorText.scss
index d871298999..3cf7664fbe 100644
--- a/src/components/ColorText/ColorText.scss
+++ b/src/components/ColorText/ColorText.scss
@@ -1,10 +1,8 @@
-@import '../variables';
-@import '../../../styles/mixins';
+@use '../variables' as variables;
 
-$block: '.#{$ns}color-text';
+$block: '.#{variables.$ns}color-text';
 
 $textColorMap: (
-    'inherit' inherit,
     'primary' var(--yc-color-text-primary),
     'complementary' var(--yc-color-text-complementary),
     'secondary' var(--yc-color-text-secondary),
diff --git a/src/components/ColorText/ColorText.tsx b/src/components/ColorText/ColorText.tsx
index 322a83d8b6..9bc51f8d01 100644
--- a/src/components/ColorText/ColorText.tsx
+++ b/src/components/ColorText/ColorText.tsx
@@ -6,7 +6,6 @@ const b = block('color-text');
 
 export interface ColorTextBase {
     color?:
-        | 'inherit'
         | 'primary'
         | 'complementary'
         | 'secondary'
diff --git a/src/components/Text/Text.scss b/src/components/Text/Text.scss
index a559a23995..3fe3312ada 100644
--- a/src/components/Text/Text.scss
+++ b/src/components/Text/Text.scss
@@ -1,73 +1,73 @@
-@import '../variables';
-@import '../../../styles/mixins';
+@use '../variables' as variables;
+@use '../../../styles/mixins' as mixins;
 
-$block: '.#{$ns}text';
+$block: '.#{variables.$ns}text';
 
 #{$block} {
     &_type_display1 {
-        @include text-display-1();
+        @include mixins.text-display-1();
     }
     &_type_display2 {
-        @include text-display-2();
+        @include mixins.text-display-2();
     }
     &_type_display3 {
-        @include text-display-3();
+        @include mixins.text-display-3();
     }
     &_type_display4 {
-        @include text-display-4();
+        @include mixins.text-display-4();
     }
     &_type_code1 {
-        @include text-code-1();
+        @include mixins.text-code-1();
     }
     &_type_code2 {
-        @include text-code-2();
+        @include mixins.text-code-2();
     }
     &_type_code3 {
-        @include text-code-3();
+        @include mixins.text-code-3();
     }
     &_type_codeInline1 {
-        @include text-code-inline-1();
+        @include mixins.text-code-inline-1();
     }
     &_type_codeInline2 {
-        @include text-code-inline-2();
+        @include mixins.text-code-inline-2();
     }
     &_type_codeInline3 {
-        @include text-code-inline-3();
+        @include mixins.text-code-inline-3();
     }
     &_type_body1 {
-        @include text-body-1();
+        @include mixins.text-body-1();
     }
     &_type_body2 {
-        @include text-body-2();
+        @include mixins.text-body-2();
     }
     &_type_body3 {
-        @include text-body-3();
+        @include mixins.text-body-3();
     }
     &_type_bodyShort {
-        @include text-body-short();
+        @include mixins.text-body-short();
     }
     &_type_caption1 {
-        @include text-caption-1();
+        @include mixins.text-caption-1();
     }
     &_type_caption2 {
-        @include text-caption-2();
+        @include mixins.text-caption-2();
     }
     &_type_header1 {
-        @include text-header-1();
+        @include mixins.text-header-1();
     }
     &_type_header2 {
-        @include text-header-2();
+        @include mixins.text-header-2();
     }
     &_type_subheader1 {
-        @include text-subheader-1();
+        @include mixins.text-subheader-1();
     }
     &_type_subheader2 {
-        @include text-subheader-2();
+        @include mixins.text-subheader-2();
     }
     &_type_subheader3 {
-        @include text-subheader-3();
+        @include mixins.text-subheader-3();
     }
     &_ellipsis {
-        @include overflow-ellipsis();
+        @include mixins.overflow-ellipsis();
     }
 }
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
index 874e6c976e..9dcb987bf1 100644
--- a/src/components/Text/Text.tsx
+++ b/src/components/Text/Text.tsx
@@ -90,7 +90,7 @@ export interface TextProps extends TextBase, ColorTextBase {
      */
     as?: keyof Pick<
         JSX.IntrinsicElements,
-        'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'pre' | 'code'
+        'span' | 'a' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'pre' | 'code'
     >;
     style?: React.CSSProperties;
     className?: string;
@@ -99,7 +99,7 @@ export interface TextProps extends TextBase, ColorTextBase {
     /**
      * Use this for locators in your tests
      */
-    testId?: string;
+    qa?: string;
 }
 
 /**
@@ -129,22 +129,20 @@ export interface TextProps extends TextBase, ColorTextBase {
  * ```
  */
 export const Text: React.FC<TextProps> = ({
-    as = 'span',
+    as: Tag = 'span',
     children,
     content,
     type,
     className,
     ellipsis,
     color,
-    testId,
+    qa,
     ...rest
 }) => {
-    const Tag = ellipsis ? 'div' : as;
-
     return (
         <Tag
             className={text({type, ellipsis}, color ? colorText({color}, className) : className)}
-            data-testid={testId}
+            data-qa={qa}
             {...rest}
         >
             {content || children}