feat: added text components instead of spans/divs in dynamic forms (#158)

Authored-by: Aleksei <[email protected]>

Author: LehaRybkoha

src/lib/kit/components/AccordeonCard/AccordeonCard.scss

@@ -63,18 +63,6 @@
             order: -1;
         }
 
-        &-content-title {
-            font-weight: 700;
-
-            &_size_s {
-                font-size: 13px;
-            }
-
-            &_size_m {
-                font-size: 16px;
-            }
-        }
-
         &-content-description {
             margin-top: 12px;
             color: var(--g-color-text-complementary);

src/lib/kit/components/AccordeonCard/AccordeonCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {ChevronDown} from '@gravity-ui/icons';
-import {Button, Icon} from '@gravity-ui/uikit';
+import {Button, Icon, Text} from '@gravity-ui/uikit';
 import _ from 'lodash';
 
 import {block} from '../../utils';
@@ -69,6 +69,18 @@ export const AccordeonCard: React.FC<AccordeonCardProps> = ({
         }
     });
 
+    const currentHeaderVariant = React.useMemo(() => {
+        if (!_.isString(header)) {
+            return 'body-1';
+        }
+
+        if (titleSize === 'm') {
+            return 'subheader-2';
+        }
+
+        return 'subheader-1';
+    }, [titleSize]);
+
     return (
         <div ref={accordeonRef} className={b({empty: Boolean(emptyBody)}, className)}>
             <div
@@ -79,15 +91,7 @@ export const AccordeonCard: React.FC<AccordeonCardProps> = ({
                 onClick={!ignoreHeaderToggle && !alwaysOpen ? handleToggle : undefined}
             >
                 <div className={b('header-content')}>
-                    <span
-                        className={
-                            _.isString(header)
-                                ? b('header-content-title', {size: titleSize})
-                                : undefined
-                        }
-                    >
-                        {header}
-                    </span>
+                    <Text variant={currentHeaderVariant}>{header}</Text>
                     {description ? (
                         <span
                             className={b('header-content-description')}

src/lib/kit/components/Card/Card.scss

@@ -64,12 +64,6 @@
     }
 
     &__title {
-        font-size: var(--g-text-subheader-2-font-size);
-        font-weight: var(--g-text-subheader-font-weight);
-        line-height: var(--g-text-subheader-2-line-height);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
         max-width: 533px;
     }
 

src/lib/kit/components/Card/Card.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
 import {ChevronDown} from '@gravity-ui/icons';
-import {Button, Card as CardBase, Icon, Popover} from '@gravity-ui/uikit';
+import {Button, Card as CardBase, Icon, Popover, Text} from '@gravity-ui/uikit';
 import _ from 'lodash';
 
 import {COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH} from '../../constants/common';
@@ -79,9 +79,14 @@ export const Card: React.FC<CardProps> = ({
                         disabled={titlePopoverDisabled}
                         placement={COMMON_POPOVER_PLACEMENT}
                     >
-                        <div ref={titleRef} className={b('title')}>
+                        <Text
+                            className={b('title')}
+                            ellipsis={true}
+                            ref={titleRef}
+                            variant="subheader-2"
+                        >
                             {propsTitle}
-                        </div>
+                        </Text>
                     </Popover>
                     {description ? (
                         <div className={b('note')}>