@gravity-ui/page-constructor 4.7.0 → 4.9.0

package/build/cjs/components/MetaInfo/MetaInfo.css

@@ -5,8 +5,6 @@ unpredictable css rules order in build */
   line-height: var(--g-text-body-2-line-height);
   display: flex;
   align-items: center;
-  font-weight: 500;
-  color: var(--pc-media-card-meta-info-color);
 }
 .pc-meta-info__item:not(:first-child) {
   margin-left: 16px;

package/build/cjs/components/MetaInfo/MetaInfo.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
+const index_1 = require("../index");
 const b = (0, utils_1.block)('meta-info');
-const MetaInfo = ({ items, className }) => (react_1.default.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (react_1.default.createElement("span", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
+const MetaInfo = ({ items, className }) => (react_1.default.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (react_1.default.createElement(index_1.YFMWrapper, { content: metaInfoItem, key: metaInfoItem, className: b('item'), modifiers: { constructor: true, constructorMetaInfo: true } })))));
 exports.default = MetaInfo;

package/build/cjs/components/YFMWrapper/YFMWrapper.js

@@ -4,9 +4,9 @@ const tslib_1 = require("tslib");
 /* we won't use 'pc' class prefix here to let you opportunity to define yfm styles
 in your project via global 'yfm' class */
 const react_1 = tslib_1.__importDefault(require("react"));
-const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
 const snakecase_keys_1 = tslib_1.__importDefault(require("snakecase-keys"));
 const components_1 = require("../../components");
-const yfm = (0, bem_cn_lite_1.default)('yfm');
+const utils_1 = require("../../utils");
+const yfm = (0, utils_1.cn)('yfm');
 const YFMWrapper = ({ content, modifiers, className, itemProp, id, qa }) => (react_1.default.createElement(components_1.HTML, { className: yfm(modifiers ? (0, snakecase_keys_1.default)(modifiers) : {}, className), itemProp: itemProp, id: id, qa: qa }, content));
 exports.default = YFMWrapper;

package/build/cjs/containers/Loadable/Loadable.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
-const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
 const ErrorWrapper_1 = tslib_1.__importDefault(require("../../components/ErrorWrapper/ErrorWrapper"));
+const cn_1 = require("../../utils/cn");
 const i18n_1 = tslib_1.__importDefault(require("./i18n"));
-const b = (0, bem_cn_lite_1.default)('loadable-block');
+const b = (0, cn_1.block)('loadable-block');
 const initData = {
     loading: false,
     error: false,

package/build/cjs/containers/PageConstructor/PageConstructor.css

@@ -84,6 +84,10 @@ unpredictable css rules order in build */
 .yfm_constructor.yfm_constructor_notice p {
   color: var(--g-color-text-secondary);
 }
+.yfm_constructor.yfm_constructor_meta_info p {
+  color: var(--pc-media-card-meta-info-color);
+  font-weight: var(--g-text-accent-font-weight);
+}
 .yfm_constructor.yfm_constructor ul,
 .yfm_constructor.yfm_constructor ol,
 .yfm_constructor.yfm_constructor li,

package/build/cjs/containers/PageConstructor/PageConstructor.js

@@ -4,7 +4,6 @@ exports.PageConstructor = exports.Constructor = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 require("@doc-tools/transform/dist/js/yfm");
-const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
 const BackgroundMedia_1 = tslib_1.__importDefault(require("../../components/BackgroundMedia/BackgroundMedia"));
 const constants_1 = require("../../components/constants");
 const constructor_items_1 = require("../../constructor-items");
@@ -19,7 +18,7 @@ const ConstructorBlocks_1 = require("./components/ConstructorBlocks");
 const ConstructorItem_1 = require("./components/ConstructorItem");
 const ConstructorRow_1 = require("./components/ConstructorRow");
 const b = (0, utils_1.block)('page-constructor');
-const ycr = (0, bem_cn_lite_1.default)(constants_1.UIKIT_ROOT_CLASS);
+const ycr = (0, utils_1.cn)(constants_1.UIKIT_ROOT_CLASS);
 const Constructor = (props) => {
     const { content: { blocks = [], background = {} } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
     const { context } = (0, react_1.useMemo)(() => ({

package/build/cjs/sub-blocks/HubspotForm/HubspotForm.css

@@ -268,9 +268,9 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-button.primary {
   margin: 0;
   padding: 0;
-  font-family: var(--g-font-family-sans);
+  font-family: var(--g-text-body-font-family);
   font-size: inherit;
-  font-weight: 400;
+  font-weight: var(--g-text-body-font-weight);
   color: inherit;
   background: none;
   border: none;

package/build/cjs/text-transform/config.js

@@ -125,7 +125,7 @@ exports.config = {
         {
             fields: ['metaInfo'],
             parser: (0, common_1.createItemsParser)([]),
-            transformer: common_1.typografTransformer,
+            transformer: common_1.yfmTransformer,
         },
     ],
     [models_1.SubBlockType.Quote]: {

package/build/cjs/utils/cn.d.ts

@@ -1,4 +1,4 @@
-import blockOrigin from 'bem-cn-lite';
 export declare const NAMESPACE = "pc-";
-export type CnBlock = ReturnType<typeof blockOrigin>;
-export declare function block(name: string): CnBlock;
+export declare const cn: import("@bem-react/classname").ClassNameInitilizer;
+export declare const block: import("@bem-react/classname").ClassNameInitilizer;
+export type CnBlock = ReturnType<typeof cn>;

package/build/cjs/utils/cn.js

@@ -1,10 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.block = exports.NAMESPACE = void 0;
-const tslib_1 = require("tslib");
-const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
+exports.block = exports.cn = exports.NAMESPACE = void 0;
+const classname_1 = require("@bem-react/classname");
 exports.NAMESPACE = 'pc-';
-function block(name) {
-    return (0, bem_cn_lite_1.default)(`${exports.NAMESPACE}${name}`);
-}
-exports.block = block;
+exports.cn = (0, classname_1.withNaming)({ e: '__', m: '_' });
+exports.block = (0, classname_1.withNaming)({ n: exports.NAMESPACE, e: '__', m: '_' });

package/build/esm/components/MetaInfo/MetaInfo.css

@@ -5,8 +5,6 @@ unpredictable css rules order in build */
   line-height: var(--g-text-body-2-line-height);
   display: flex;
   align-items: center;
-  font-weight: 500;
-  color: var(--pc-media-card-meta-info-color);
 }
 .pc-meta-info__item:not(:first-child) {
   margin-left: 16px;

package/build/esm/components/MetaInfo/MetaInfo.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { block } from '../../utils';
+import { YFMWrapper } from '../index';
 import './MetaInfo.css';
 const b = block('meta-info');
-const MetaInfo = ({ items, className }) => (React.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (React.createElement("span", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
+const MetaInfo = ({ items, className }) => (React.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (React.createElement(YFMWrapper, { content: metaInfoItem, key: metaInfoItem, className: b('item'), modifiers: { constructor: true, constructorMetaInfo: true } })))));
 export default MetaInfo;

package/build/esm/components/YFMWrapper/YFMWrapper.js

@@ -1,9 +1,9 @@
 /* we won't use 'pc' class prefix here to let you opportunity to define yfm styles
 in your project via global 'yfm' class */
 import React from 'react';
-import block from 'bem-cn-lite';
 import toSnakeCase from 'snakecase-keys';
 import { HTML } from '../../components';
-const yfm = block('yfm');
+import { cn } from '../../utils';
+const yfm = cn('yfm');
 const YFMWrapper = ({ content, modifiers, className, itemProp, id, qa }) => (React.createElement(HTML, { className: yfm(modifiers ? toSnakeCase(modifiers) : {}, className), itemProp: itemProp, id: id, qa: qa }, content));
 export default YFMWrapper;

package/build/esm/containers/Loadable/Loadable.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Spin } from '@gravity-ui/uikit';
-import blockCn from 'bem-cn-lite';
 import ErrorWrapper from '../../components/ErrorWrapper/ErrorWrapper';
+import { block as blockCn } from '../../utils/cn';
 import i18n from './i18n';
 import './Loadable.css';
 const b = blockCn('loadable-block');

package/build/esm/containers/PageConstructor/PageConstructor.css

@@ -84,6 +84,10 @@ unpredictable css rules order in build */
 .yfm_constructor.yfm_constructor_notice p {
   color: var(--g-color-text-secondary);
 }
+.yfm_constructor.yfm_constructor_meta_info p {
+  color: var(--pc-media-card-meta-info-color);
+  font-weight: var(--g-text-accent-font-weight);
+}
 .yfm_constructor.yfm_constructor ul,
 .yfm_constructor.yfm_constructor ol,
 .yfm_constructor.yfm_constructor li,

package/build/esm/containers/PageConstructor/PageConstructor.js

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import React, { useMemo } from 'react';
 import '@doc-tools/transform/dist/js/yfm';
-import blockOrigin from 'bem-cn-lite';
 import BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';
 import { UIKIT_ROOT_CLASS } from '../../components/constants';
 import { blockMap, navItemMap, subBlockMap } from '../../constructor-items';
@@ -11,7 +10,7 @@ import { useTheme } from '../../context/theme';
 import { Grid } from '../../grid';
 import { BlockType, BlockTypes, HeaderBlockTypes, NavigationItemTypes, SubBlockTypes, } from '../../models';
 import Layout from '../../navigation/containers/Layout/Layout';
-import { block as cnBlock, getCustomItems, getCustomTypes, getHeaderBlock, getOrderedBlocks, getThemedValue, } from '../../utils';
+import { cn as blockOrigin, block as cnBlock, getCustomItems, getCustomTypes, getHeaderBlock, getOrderedBlocks, getThemedValue, } from '../../utils';
 import { ConstructorBlocks } from './components/ConstructorBlocks';
 import { ConstructorHeader } from './components/ConstructorItem';
 import { ConstructorRow } from './components/ConstructorRow';

package/build/esm/sub-blocks/HubspotForm/HubspotForm.css

@@ -268,9 +268,9 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-button.primary {
   margin: 0;
   padding: 0;
-  font-family: var(--g-font-family-sans);
+  font-family: var(--g-text-body-font-family);
   font-size: inherit;
-  font-weight: 400;
+  font-weight: var(--g-text-body-font-weight);
   color: inherit;
   background: none;
   border: none;

package/build/esm/text-transform/config.js

@@ -122,7 +122,7 @@ export const config = {
         {
             fields: ['metaInfo'],
             parser: createItemsParser([]),
-            transformer: typografTransformer,
+            transformer: yfmTransformer,
         },
     ],
     [SubBlockType.Quote]: {

package/build/esm/utils/cn.d.ts

@@ -1,4 +1,4 @@
-import blockOrigin from 'bem-cn-lite';
 export declare const NAMESPACE = "pc-";
-export type CnBlock = ReturnType<typeof blockOrigin>;
-export declare function block(name: string): CnBlock;
+export declare const cn: import("@bem-react/classname").ClassNameInitilizer;
+export declare const block: import("@bem-react/classname").ClassNameInitilizer;
+export type CnBlock = ReturnType<typeof cn>;

package/build/esm/utils/cn.js

@@ -1,5 +1,4 @@
-import blockOrigin from 'bem-cn-lite';
+import { withNaming } from '@bem-react/classname';
 export const NAMESPACE = 'pc-';
-export function block(name) {
-    return blockOrigin(`${NAMESPACE}${name}`);
-}
+export const cn = withNaming({ e: '__', m: '_' });
+export const block = withNaming({ n: NAMESPACE, e: '__', m: '_' });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.7.0",
+  "version": "4.9.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -80,11 +80,11 @@
     "test:watch": "jest --watchAll"
   },
   "dependencies": {
-    "@gravity-ui/components": "^2.0.0",
+    "@bem-react/classname": "^1.6.0",
+    "@gravity-ui/components": "^2.4.0",
     "@gravity-ui/dynamic-forms": "^2.3.0",
     "@gravity-ui/i18n": "^1.0.0",
     "ajv": "^8.12.0",
-    "bem-cn-lite": "^4.0.0",
     "final-form": "^4.20.9",
     "github-buttons": "2.23.0",
     "lodash": "^4.17.21",
@@ -120,7 +120,7 @@
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^5.4.1",
+    "@gravity-ui/uikit": "^5.9.1",
     "@storybook/addon-actions": "^7.1.0",
     "@storybook/addon-essentials": "^7.1.0",
     "@storybook/addon-knobs": "^7.0.2",
@@ -147,7 +147,6 @@
     "css-loader": "^5.2.7",
     "es5-ext": "0.10.53",
     "eslint": "^8.34.0",
-    "eslint-plugin-local": "./eslint-plugin-local",
     "eslint-plugin-no-not-accumulator-reassign": "^0.1.0",
     "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-testing-library": "^5.9.1",

package/server/text-transform/config.js

@@ -135,7 +135,7 @@ exports.config = {
         {
             fields: ['metaInfo'],
             parser: (0, common_1.createItemsParser)([]),
-            transformer: common_1.typografTransformer,
+            transformer: common_1.yfmTransformer,
         },
     ],
     [models_1.SubBlockType.Quote]: {

package/server/utils/cn.d.ts

@@ -1,4 +1,4 @@
-import blockOrigin from 'bem-cn-lite';
 export declare const NAMESPACE = "pc-";
-export type CnBlock = ReturnType<typeof blockOrigin>;
-export declare function block(name: string): CnBlock;
+export declare const cn: import("@bem-react/classname").ClassNameInitilizer;
+export declare const block: import("@bem-react/classname").ClassNameInitilizer;
+export type CnBlock = ReturnType<typeof cn>;

package/server/utils/cn.js

@@ -1,12 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.block = exports.NAMESPACE = void 0;
-const bem_cn_lite_1 = __importDefault(require("bem-cn-lite"));
+exports.block = exports.cn = exports.NAMESPACE = void 0;
+const classname_1 = require("@bem-react/classname");
 exports.NAMESPACE = 'pc-';
-function block(name) {
-    return (0, bem_cn_lite_1.default)(`${exports.NAMESPACE}${name}`);
-}
-exports.block = block;
+exports.cn = (0, classname_1.withNaming)({ e: '__', m: '_' });
+exports.block = (0, classname_1.withNaming)({ n: exports.NAMESPACE, e: '__', m: '_' });

package/styles/styles.css

@@ -30,6 +30,10 @@ unpredictable css rules order in build */
 .yfm_constructor.yfm_constructor_notice p {
   color: var(--g-color-text-secondary);
 }
+.yfm_constructor.yfm_constructor_meta_info p {
+  color: var(--pc-media-card-meta-info-color);
+  font-weight: var(--g-text-accent-font-weight);
+}
 .yfm_constructor.yfm_constructor ul,
 .yfm_constructor.yfm_constructor ol,
 .yfm_constructor.yfm_constructor li,

package/styles/yfm.scss

@@ -34,6 +34,13 @@
             }
         }
 
+        &_meta_info {
+            p {
+                color: var(--pc-media-card-meta-info-color);
+                font-weight: var(--g-text-accent-font-weight);
+            }
+        }
+
         ul,
         ol,
         li,