feat: replace HTML with YFMWrapper

gravity-ui · Oct 2, 2024 · 440a56f · 440a56f
1 parent aba9dc8
commit 440a56f
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -60,7 +60,7 @@
     "playwright": "playwright test --config=playwright/playwright.config.ts",
     "playwright:update": "npm run playwright -- -u",
     "playwright:clear-cache": "rm -rf ./playwright/.cache",
-    "playwright:docker": "./scripts/playwright-docker.sh 'npm run playwright'",
+    "playwright:docker": "./scripts/playwright-docker.sh 'npm run playwright --grep BlogPage'",
     "playwright:docker:update": "./scripts/playwright-docker.sh 'npm run playwright:update'",
     "playwright:docker:clear-cache": "./scripts/playwright-docker.sh clear-cache",
     "playwright:install": "playwright install --with-deps"

diff --git a/src/blocks/YFM/YFM.tsx b/src/blocks/YFM/YFM.tsx
@@ -28,7 +28,7 @@ export const YFM = (props: YFMProps) => {
                     blog: true,
                     resetPaddings: true,
                 }}
-                className={b({'no-list-reset': true})}
+                contentClassName={b({'no-list-reset': true})}
             />
         </Wrapper>
     );

diff --git a/src/components/PostCard/PostCard.scss b/src/components/PostCard/PostCard.scss
@@ -36,14 +36,18 @@ $block: '.#{$namespace}post-card';
     }
 
     &__title {
-        margin-bottom: $indentXXXS;
-
         &_size_s {
-            @include heading4();
+            @include add-specificity(&) {
+                @include heading4();
+                margin-bottom: $indentXXXS;
+            }
         }
 
         &_size_m {
-            @include heading2();
+            @include add-specificity(&) {
+                @include heading2();
+                margin-bottom: $indentXXXS;
+            }
         }
     }
 

diff --git a/src/components/PostCard/PostCard.tsx b/src/components/PostCard/PostCard.tsx
@@ -1,5 +1,5 @@
 import React, {useContext, useMemo} from 'react';
-import {AnalyticsEventsProp, CardBase, HTML, YFMWrapper} from '@gravity-ui/page-constructor';
+import {AnalyticsEventsProp, CardBase, YFMWrapper} from '@gravity-ui/page-constructor';
 import {useUniqId} from '@gravity-ui/uikit';
 
 import {LikesContext} from '../../contexts/LikesContext';
@@ -91,17 +91,31 @@ export const PostCard = ({
                         {tags[0].name}
                     </div>
                 )}
-                {title &&
-                    React.createElement(
-                        titleHeadingLevel,
-                        {className: b('title', {size})},
-                        <span>
-                            <HTML id={titleId}>{title}</HTML>
-                        </span>,
-                    )}
+                {
+                    title && (
+                        <YFMWrapper
+                            contentClassName={b('title', {size})}
+                            content={title}
+                            // modifiers={{
+                            //     // blog: size === 'm',
+                            //     blog: true,
+                            //     blogCard: true,
+                            // }}
+                            id={titleId}
+                            variant={titleHeadingLevel}
+                        />
+                    )
+                    // React.createElement(
+                    //     titleHeadingLevel,
+                    //     {className: b('title', {size})},
+                    //     <span>
+                    //         <HTML id={titleId}>{title} 123</HTML>
+                    //     </span>,
+                    // )}
+                }
                 {description && (
                     <YFMWrapper
-                        className={b('description')}
+                        contentClassName={b('description')}
                         content={description}
                         modifiers={{
                             blog: size === 'm',

diff --git a/src/containers/BlogPage/__tests__/BlogPage.visual.test.tsx b/src/containers/BlogPage/__tests__/BlogPage.visual.test.tsx
@@ -1,3 +1,4 @@
+import {writeFileSync} from 'fs';
 import React from 'react';
 
 import {test} from '../../../../playwright/core/index';
@@ -7,8 +8,12 @@ import {Default, WithNavigation} from './helpers';
 const BLOG_POST_DALAY = 10 * 1000;
 
 test.describe('BlogPage', () => {
-    test('render stories <Default>', async ({mount, expectScreenshot, delay}) => {
+    test('render stories <Default>', async ({mount, expectScreenshot, delay, page}) => {
         await mount(<Default />);
+        const docData = await page.evaluate(
+            () => document.getElementsByTagName('html')[0].innerHTML,
+        );
+        writeFileSync('blog-page.html', docData, 'utf-8');
         await delay(BLOG_POST_DALAY);
         await expectScreenshot({skipTheme: 'dark'});
     });