feat(Text): review fixes

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

src/components/ColorText/ColorText.tsx

@@ -6,7 +6,6 @@ const b = block('color-text');
 
 export interface ColorTextBase {
     color?:
-        | 'inherit'
         | 'primary'
         | 'complementary'
         | 'secondary'

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

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}