From 2390740142061ac322877b8892034a5283600e93 Mon Sep 17 00:00:00 2001
From: Nikolay Tverdokhlebov <nn.tverd@gmail.com>
Date: Fri, 20 Dec 2024 18:03:13 +0500
Subject: [PATCH] fix: review replies

---
 src/blocks/ExtendedFeatures/ExtendedFeatures.tsx |  2 +-
 src/blocks/Header/Header.tsx                     |  4 ++--
 src/components/HTML/HTML.tsx                     | 14 +++++++-------
 src/components/Table/Table.tsx                   |  2 +-
 src/models/common.ts                             |  2 ++
 src/sub-blocks/BannerCard/BannerCard.tsx         |  2 +-
 src/sub-blocks/Quote/Quote.tsx                   |  2 +-
 src/utils/blocks.ts                              | 10 +++++-----
 8 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx b/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx
index e39d85611..a3c894118 100644
--- a/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx
+++ b/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx
@@ -65,7 +65,7 @@ export const ExtendedFeaturesBlock = ({
                                     <div className={b('container')}>
                                         {itemTitle && (
                                             <YFMWrapper
-                                                variant={itemTitleHeadingTag}
+                                                tagName={itemTitleHeadingTag}
                                                 content={itemTitle}
                                                 className={b('item-title-container')}
                                                 contentClassName={b('item-title')}
diff --git a/src/blocks/Header/Header.tsx b/src/blocks/Header/Header.tsx
index 033248223..022ee7fb7 100644
--- a/src/blocks/Header/Header.tsx
+++ b/src/blocks/Header/Header.tsx
@@ -135,7 +135,7 @@ export const HeaderBlock = (props: React.PropsWithChildren<HeaderBlockFullProps>
                                 <Col sizes={titleSizes} className={b('content-inner')}>
                                     {overtitle && (
                                         <YFMWrapper
-                                            variant="div"
+                                            tagName="div"
                                             className={b('overtitle')}
                                             content={overtitle}
                                             modifiers={{
@@ -151,7 +151,7 @@ export const HeaderBlock = (props: React.PropsWithChildren<HeaderBlockFullProps>
                                             constructor: true,
                                             constructorTheme: textTheme,
                                         }}
-                                        variant="h1"
+                                        tagName="h1"
                                         contentPosition="end"
                                     >
                                         {status}
diff --git a/src/components/HTML/HTML.tsx b/src/components/HTML/HTML.tsx
index 078e20b5e..b27fb5b22 100644
--- a/src/components/HTML/HTML.tsx
+++ b/src/components/HTML/HTML.tsx
@@ -1,10 +1,10 @@
 import React, {PropsWithChildren, useMemo} from 'react';
 
-import {ClassNameProps, QAProps} from '../../models/common';
-import {selectVariant} from '../../utils';
+import {ClassNameProps, QAProps, TagName} from '../../models/common';
+import {selectTagName} from '../../utils';
 
 export interface HTMLExtraProps {
-    variant?: 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'section' | 'p';
+    tagName?: TagName;
     contentPosition?: 'start' | 'end';
     contentClassName?: string;
     onlyContent?: boolean;
@@ -24,20 +24,20 @@ const HTML = ({
     contentClassName,
     qa,
     contentPosition = 'start',
-    variant = 'span',
+    tagName = 'span',
     onlyContent = false,
     ...rest
 }: HTMLProps) => {
     const renderedContent = useMemo(() => {
         return content
-            ? React.createElement(selectVariant({content, block, variant, children}), {
+            ? React.createElement(selectTagName({content, block, tagName, children}), {
                   dangerouslySetInnerHTML: {__html: content},
                   className: contentClassName,
                   'data-qa': qa,
                   ...rest,
               })
             : null;
-    }, [block, children, content, contentClassName, qa, rest, variant]);
+    }, [block, children, content, contentClassName, qa, rest, tagName]);
 
     if (onlyContent) {
         return renderedContent;
@@ -45,7 +45,7 @@ const HTML = ({
 
     if (children) {
         return React.createElement(
-            variant,
+            tagName,
             {
                 className,
             },
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 304aab3d7..0262f1421 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -48,7 +48,7 @@ export default class Table extends React.Component<TableProps & ClassNameProps>
                                     this.renderMarker(marker, cell)
                                 ) : (
                                     <YFMWrapper
-                                        variant="span"
+                                        tagName="span"
                                         content={cell}
                                         modifiers={{
                                             constructor: true,
diff --git a/src/models/common.ts b/src/models/common.ts
index 32a312157..638142dc9 100644
--- a/src/models/common.ts
+++ b/src/models/common.ts
@@ -62,3 +62,5 @@ export type AnalyticsEventsProp = AnalyticsEvent | AnalyticsEvent[];
 export interface AnalyticsEventsBase {
     analyticsEvents?: AnalyticsEventsProp;
 }
+
+export type TagName = 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'section' | 'p';
diff --git a/src/sub-blocks/BannerCard/BannerCard.tsx b/src/sub-blocks/BannerCard/BannerCard.tsx
index 81e870b29..c802830fb 100644
--- a/src/sub-blocks/BannerCard/BannerCard.tsx
+++ b/src/sub-blocks/BannerCard/BannerCard.tsx
@@ -33,7 +33,7 @@ export const BannerCard = (props: BannerCardProps) => {
                 <div className={b('info')}>
                     <div className={b('text')}>
                         <YFMWrapper
-                            variant="h2"
+                            tagName="h2"
                             contentClassName={b('title')}
                             content={title}
                             modifiers={{
diff --git a/src/sub-blocks/Quote/Quote.tsx b/src/sub-blocks/Quote/Quote.tsx
index 606c90156..ac163ae43 100644
--- a/src/sub-blocks/Quote/Quote.tsx
+++ b/src/sub-blocks/Quote/Quote.tsx
@@ -81,7 +81,7 @@ const Quote = (props: QuoteProps) => {
                     <div className={b('content', {'quote-type': quoteType})}>
                         {textLocal && (
                             <YFMWrapper
-                                variant="span"
+                                tagName="span"
                                 contentClassName={b('text')}
                                 content={textLocal}
                                 modifiers={{constructor: true}}
diff --git a/src/utils/blocks.ts b/src/utils/blocks.ts
index 50cf47dca..a46cd9978 100644
--- a/src/utils/blocks.ts
+++ b/src/utils/blocks.ts
@@ -3,7 +3,7 @@ import {ReactNode} from 'react';
 import camelCase from 'lodash/camelCase';
 import flatten from 'lodash/flatten';
 
-import {ConstructorBlock, CustomConfig, PCShareSocialNetwork, TextSize} from '../models';
+import {ConstructorBlock, CustomConfig, PCShareSocialNetwork, TagName, TextSize} from '../models';
 
 const BLOCK_ELEMENTS = [
     'div',
@@ -64,12 +64,12 @@ type SelectVariantArgs = {
     block?: boolean;
     content?: string;
     children?: ReactNode;
-    variant?: string;
+    tagName?: TagName;
 };
 
-export function selectVariant({content, children, variant}: SelectVariantArgs): string {
-    if (!children && variant) {
-        return variant;
+export function selectTagName({content, children, tagName}: SelectVariantArgs): string {
+    if (!children && tagName) {
+        return tagName;
     }
 
     if (!content) {