fix: html semantic, block tag should be in block tag (#442)

VitaliiDC8 · web-flow · commit 3b46ff436605 · 2023-07-12T17:30:50.000+02:00
* fix: html semantic, block tag should be in block tag

* fix: moved check children on block or inline tag in HTML component

* fix: path to hasBlockTag
diff --git a/src/blocks/Header/Header.tsx b/src/blocks/Header/Header.tsx
@@ -121,21 +121,21 @@ export const HeaderBlock = (props: WithChildren<HeaderBlockFullProps>) => {
                             >
                                 <Col sizes={titleSizes} className={b('content-inner')}>
                                     {overtitle && (
-                                        <p className={b('overtitle')}>
+                                        <div className={b('overtitle')}>
                                             <HTML>{overtitle}</HTML>
-                                        </p>
+                                        </div>
                                     )}
                                     <h1 className={b('title')}>
                                         {status}
                                         <HTML>{title}</HTML>
                                     </h1>
                                     {description && (
-                                        <p className={b('description')}>
+                                        <div className={b('description')}>
                                             <YFMWrapper
                                                 content={description}
                                                 modifiers={{constructor: true}}
                                             />
-                                        </p>
+                                        </div>
                                     )}
                                     {buttons && (
                                         <div className={b('buttons')} data-qa="header-buttons">
diff --git a/src/components/HTML/HTML.tsx b/src/components/HTML/HTML.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {WithChildren} from '../../models';
+import {hasBlockTag} from '../../utils';
 
 export interface HTMLProps {
     children?: string;
@@ -14,7 +15,7 @@ const HTML = ({children, block = false, className, itemProp}: WithChildren<HTMLP
         return null;
     }
 
-    return React.createElement(block ? 'div' : 'span', {
+    return React.createElement(block || hasBlockTag(children) ? 'div' : 'span', {
         dangerouslySetInnerHTML: {__html: children},
         className,
         itemProp,
