@gravity-ui/page-constructor 3.8.0 → 3.8.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [3.8.1](https://github.com/gravity-ui/page-constructor/compare/v3.8.0...v3.8.1) (2023-06-22)
+
+
+### Bug Fixes
+
+* semantic markup ([#416](https://github.com/gravity-ui/page-constructor/issues/416)) ([1fd532c](https://github.com/gravity-ui/page-constructor/commit/1fd532ca0bcc2e6cd1f030b17be743c27fb2cf73))
+
 ## [3.8.0](https://github.com/gravity-ui/page-constructor/compare/v3.7.0...v3.8.0) (2023-06-22)
 
 

package/build/cjs/blocks/Header/Header.css

@@ -76,6 +76,9 @@ unpredictable css rules order in build */
 .pc-header-block__description {
   margin-top: 16px;
   font-weight: normal;
+  font-size: var(--yc-text-caption-2-font-size);
+  line-height: var(--yc-text-caption-2-line-height);
+  margin-block-end: var(--yc-text-body-1-line-height);
 }
 .pc-header-block__description .yfm,
 .pc-header-block__description .yfm * {
@@ -167,6 +170,7 @@ unpredictable css rules order in build */
 .pc-header-block__overtitle {
   font-size: var(--yc-text-body-3-font-size);
   line-height: var(--yc-text-body-3-line-height);
+  margin-block-start: var(--yc-text-body-3-line-height);
   margin-bottom: 8px;
   font-weight: 400;
 }

package/build/cjs/blocks/Header/Header.js

@@ -51,12 +51,12 @@ const HeaderBlock = (props) => {
                                 'vertical-offset': curVerticalOffset,
                             }) },
                             react_1.default.createElement(grid_1.Col, { sizes: titleSizes, className: b('content-inner') },
-                                overtitle && (react_1.default.createElement("h4", { className: b('overtitle') },
+                                overtitle && (react_1.default.createElement("p", { className: b('overtitle') },
                                     react_1.default.createElement(components_1.HTML, null, overtitle))),
                                 react_1.default.createElement("h1", { className: b('title') },
                                     status,
                                     react_1.default.createElement(components_1.HTML, null, title)),
-                                description && (react_1.default.createElement("h5", { className: b('description') },
+                                description && (react_1.default.createElement("p", { className: b('description') },
                                     react_1.default.createElement(YFMWrapper_1.default, { content: description, modifiers: { constructor: true } }))),
                                 buttons && (react_1.default.createElement("div", { className: b('buttons'), "data-qa": "header-buttons" }, buttons &&
                                     buttons.map((button, index) => (react_1.default.createElement(components_1.RouterLink, { href: button.url, key: index },

package/build/cjs/blocks/Slider/Arrow/Arrow.js

@@ -7,6 +7,6 @@ const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('slider-block-arrow');
 const Arrow = ({ type, handleClick, className, size = 16 }) => (react_1.default.createElement("div", { className: b({ type }, className) },
     react_1.default.createElement("button", { className: b('button'), onClick: () => handleClick && handleClick(type) },
-        react_1.default.createElement("div", { className: b('icon-wrapper') },
+        react_1.default.createElement("span", { className: b('icon-wrapper') },
             react_1.default.createElement(ToggleArrow_1.default, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') })))));
 exports.default = Arrow;

package/build/cjs/blocks/Slider/Slider.css

@@ -133,8 +133,8 @@ unpredictable css rules order in build */
   display: inline-flex;
   justify-content: center;
 }
-.pc-SliderBlock__dots-list div.pc-SliderBlock__bar,
-.pc-SliderBlock__dots-list div.pc-SliderBlock__dot {
+.pc-SliderBlock__dots-list li.pc-SliderBlock__bar,
+.pc-SliderBlock__dots-list li.pc-SliderBlock__dot {
   margin: calc(12px / 2) 8px;
   top: 0;
 }

package/build/cjs/blocks/Slider/Slider.js

@@ -124,13 +124,13 @@ const SliderBlock = (props) => {
     const renderBar = () => {
         const barPosition = (DOT_GAP + DOT_WIDTH) * currentIndex;
         const barWidth = DOT_WIDTH + (DOT_GAP + DOT_WIDTH) * (slidesCountByBreakpoint - 1);
-        return (slidesCountByBreakpoint > 1 && (react_1.default.createElement("div", { className: b('bar'), style: {
+        return (slidesCountByBreakpoint > 1 && (react_1.default.createElement("li", { className: b('bar'), style: {
                 left: barPosition,
                 width: barWidth,
             } })));
     };
     const renderDot = (index) => {
-        return (react_1.default.createElement("div", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index) }));
+        return (react_1.default.createElement("li", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index) }));
     };
     const renderNavigation = () => {
         if (childrenCount <= slidesCountByBreakpoint || !dots || childrenCount === 1) {

package/build/cjs/components/Media/Image/Image.js

@@ -40,7 +40,7 @@ const Image = (props) => {
     };
     const imageBackground = (oneImage) => {
         const imageData = (0, utils_2.getMediaImage)(oneImage);
-        return (react_1.default.createElement(react_spring_1.animated.div, { style: { transform: parallaxInterpolate } },
+        return (react_1.default.createElement(react_spring_1.animated.div, { style: { transform: parallaxInterpolate || 'none' } },
             react_1.default.createElement(BackgroundImage_1.default, Object.assign({}, imageData, { className: imageClass, style: { height } }))));
     };
     const imageOnly = (oneImage) => {

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

@@ -4,5 +4,5 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
 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("div", { 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("span", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
 exports.default = MetaInfo;

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

@@ -7,6 +7,7 @@ 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 blocks_1 = require("../../utils/blocks");
 const yfm = (0, bem_cn_lite_1.default)('yfm');
-const YFMWrapper = ({ content, modifiers, className, itemProp, }) => (react_1.default.createElement(components_1.HTML, { className: yfm(modifiers ? (0, snakecase_keys_1.default)(modifiers) : {}, className), itemProp: itemProp }, content));
+const YFMWrapper = ({ content, modifiers, className, itemProp, }) => (react_1.default.createElement(components_1.HTML, { className: yfm(modifiers ? (0, snakecase_keys_1.default)(modifiers) : {}, className), itemProp: itemProp, block: (0, blocks_1.hasBlockTag)(content) }, content));
 exports.default = YFMWrapper;

package/build/cjs/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.js

@@ -10,7 +10,7 @@ const ContentWrapper_1 = require("../ContentWrapper/ContentWrapper");
 const b = (0, utils_2.block)('navigation-dropdown');
 const TOGGLE_ARROW_SIZE = 12;
 exports.NavigationDropdown = react_1.default.forwardRef((_a, ref) => {
-    var { text, icon, isOpened, className, iconSize } = _a, props = tslib_1.__rest(_a, ["text", "icon", "isOpened", "className", "iconSize"]);
+    var { text, icon, isOpened, className, iconSize, type: _ } = _a, props = tslib_1.__rest(_a, ["text", "icon", "isOpened", "className", "iconSize", "type"]);
     const iconData = icon && (0, utils_1.getMediaImage)(icon);
     return (react_1.default.createElement("span", Object.assign({ ref: ref }, props, { className: b(null, className) }),
         react_1.default.createElement(ContentWrapper_1.ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }),

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

@@ -1,6 +1,7 @@
 import { Block, CustomConfig, PCShareSocialNetwork, TextSize } from '../models';
 import { ConstructorBlock } from '../models/constructor';
 export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4" | "h5";
+export declare function hasBlockTag(content: string): boolean;
 export declare function getBlockKey(block: ConstructorBlock, index: number): string;
 export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];
 export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {

package/build/cjs/utils/blocks.js

@@ -1,7 +1,43 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.getHeaderTag = void 0;
+exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.hasBlockTag = exports.getHeaderTag = void 0;
 const models_1 = require("../models");
+const BLOCK_ELEMENTS = [
+    'div',
+    'p',
+    'h[1-6]',
+    'address',
+    'article',
+    'aside',
+    'blockquote',
+    'canvas',
+    'dd',
+    'dl',
+    'dt',
+    'fieldset',
+    'figcaption',
+    'footer',
+    'header',
+    'hr',
+    'main',
+    'nav',
+    'section',
+    'video',
+    'pre',
+    'figure',
+    'form',
+    'pre',
+    'ol',
+    'ul',
+    'li',
+    'table',
+    'thead',
+    'tbody',
+    'tfoot',
+    'tr',
+    'th',
+    'td',
+];
 function getHeaderTag(size) {
     switch (size) {
         case 'l':
@@ -16,6 +52,12 @@ function getHeaderTag(size) {
     }
 }
 exports.getHeaderTag = getHeaderTag;
+function hasBlockTag(content) {
+    const blockElementRegex = `/<(${BLOCK_ELEMENTS.join('|')})\b[^>]*>/gi`;
+    const blockTags = content.match(blockElementRegex);
+    return Boolean(blockTags);
+}
+exports.hasBlockTag = hasBlockTag;
 function getBlockKey(block, index) {
     return `${block.type}-${index}`;
 }

package/build/esm/blocks/Header/Header.css

@@ -76,6 +76,9 @@ unpredictable css rules order in build */
 .pc-header-block__description {
   margin-top: 16px;
   font-weight: normal;
+  font-size: var(--yc-text-caption-2-font-size);
+  line-height: var(--yc-text-caption-2-line-height);
+  margin-block-end: var(--yc-text-body-1-line-height);
 }
 .pc-header-block__description .yfm,
 .pc-header-block__description .yfm * {
@@ -167,6 +170,7 @@ unpredictable css rules order in build */
 .pc-header-block__overtitle {
   font-size: var(--yc-text-body-3-font-size);
   line-height: var(--yc-text-body-3-line-height);
+  margin-block-start: var(--yc-text-body-3-line-height);
   margin-bottom: 8px;
   font-weight: 400;
 }

package/build/esm/blocks/Header/Header.js

@@ -48,12 +48,12 @@ export const HeaderBlock = (props) => {
                                 'vertical-offset': curVerticalOffset,
                             }) },
                             React.createElement(Col, { sizes: titleSizes, className: b('content-inner') },
-                                overtitle && (React.createElement("h4", { className: b('overtitle') },
+                                overtitle && (React.createElement("p", { className: b('overtitle') },
                                     React.createElement(HTML, null, overtitle))),
                                 React.createElement("h1", { className: b('title') },
                                     status,
                                     React.createElement(HTML, null, title)),
-                                description && (React.createElement("h5", { className: b('description') },
+                                description && (React.createElement("p", { className: b('description') },
                                     React.createElement(YFMWrapper, { content: description, modifiers: { constructor: true } }))),
                                 buttons && (React.createElement("div", { className: b('buttons'), "data-qa": "header-buttons" }, buttons &&
                                     buttons.map((button, index) => (React.createElement(RouterLink, { href: button.url, key: index },

package/build/esm/blocks/Slider/Arrow/Arrow.js

@@ -5,6 +5,6 @@ import './Arrow.css';
 const b = block('slider-block-arrow');
 const Arrow = ({ type, handleClick, className, size = 16 }) => (React.createElement("div", { className: b({ type }, className) },
     React.createElement("button", { className: b('button'), onClick: () => handleClick && handleClick(type) },
-        React.createElement("div", { className: b('icon-wrapper') },
+        React.createElement("span", { className: b('icon-wrapper') },
             React.createElement(ToggleArrow, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') })))));
 export default Arrow;

package/build/esm/blocks/Slider/Slider.css

@@ -133,8 +133,8 @@ unpredictable css rules order in build */
   display: inline-flex;
   justify-content: center;
 }
-.pc-SliderBlock__dots-list div.pc-SliderBlock__bar,
-.pc-SliderBlock__dots-list div.pc-SliderBlock__dot {
+.pc-SliderBlock__dots-list li.pc-SliderBlock__bar,
+.pc-SliderBlock__dots-list li.pc-SliderBlock__dot {
   margin: calc(12px / 2) 8px;
   top: 0;
 }

package/build/esm/blocks/Slider/Slider.js

@@ -121,13 +121,13 @@ export const SliderBlock = (props) => {
     const renderBar = () => {
         const barPosition = (DOT_GAP + DOT_WIDTH) * currentIndex;
         const barWidth = DOT_WIDTH + (DOT_GAP + DOT_WIDTH) * (slidesCountByBreakpoint - 1);
-        return (slidesCountByBreakpoint > 1 && (React.createElement("div", { className: b('bar'), style: {
+        return (slidesCountByBreakpoint > 1 && (React.createElement("li", { className: b('bar'), style: {
                 left: barPosition,
                 width: barWidth,
             } })));
     };
     const renderDot = (index) => {
-        return (React.createElement("div", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index) }));
+        return (React.createElement("li", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index) }));
     };
     const renderNavigation = () => {
         if (childrenCount <= slidesCountByBreakpoint || !dots || childrenCount === 1) {

package/build/esm/components/Media/Image/Image.js

@@ -38,7 +38,7 @@ const Image = (props) => {
     };
     const imageBackground = (oneImage) => {
         const imageData = getMediaImage(oneImage);
-        return (React.createElement(animated.div, { style: { transform: parallaxInterpolate } },
+        return (React.createElement(animated.div, { style: { transform: parallaxInterpolate || 'none' } },
             React.createElement(BackgroundImage, Object.assign({}, imageData, { className: imageClass, style: { height } }))));
     };
     const imageOnly = (oneImage) => {

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

@@ -2,5 +2,5 @@ import React from 'react';
 import { block } from '../../utils';
 import './MetaInfo.css';
 const b = block('meta-info');
-const MetaInfo = ({ items, className }) => (React.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (React.createElement("div", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
+const MetaInfo = ({ items, className }) => (React.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (React.createElement("span", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
 export default MetaInfo;

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

@@ -4,6 +4,7 @@ import React from 'react';
 import block from 'bem-cn-lite';
 import toSnakeCase from 'snakecase-keys';
 import { HTML } from '../../components';
+import { hasBlockTag } from '../../utils/blocks';
 const yfm = block('yfm');
-const YFMWrapper = ({ content, modifiers, className, itemProp, }) => (React.createElement(HTML, { className: yfm(modifiers ? toSnakeCase(modifiers) : {}, className), itemProp: itemProp }, content));
+const YFMWrapper = ({ content, modifiers, className, itemProp, }) => (React.createElement(HTML, { className: yfm(modifiers ? toSnakeCase(modifiers) : {}, className), itemProp: itemProp, block: hasBlockTag(content) }, content));
 export default YFMWrapper;

package/build/esm/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.js

@@ -8,7 +8,7 @@ import './NavigationDropdown.css';
 const b = block('navigation-dropdown');
 const TOGGLE_ARROW_SIZE = 12;
 export const NavigationDropdown = React.forwardRef((_a, ref) => {
-    var { text, icon, isOpened, className, iconSize } = _a, props = __rest(_a, ["text", "icon", "isOpened", "className", "iconSize"]);
+    var { text, icon, isOpened, className, iconSize, type: _ } = _a, props = __rest(_a, ["text", "icon", "isOpened", "className", "iconSize", "type"]);
     const iconData = icon && getMediaImage(icon);
     return (React.createElement("span", Object.assign({ ref: ref }, props, { className: b(null, className) }),
         React.createElement(ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }),

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

@@ -1,6 +1,7 @@
 import { Block, CustomConfig, PCShareSocialNetwork, TextSize } from '../models';
 import { ConstructorBlock } from '../models/constructor';
 export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4" | "h5";
+export declare function hasBlockTag(content: string): boolean;
 export declare function getBlockKey(block: ConstructorBlock, index: number): string;
 export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];
 export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {

package/build/esm/utils/blocks.js

@@ -1,4 +1,40 @@
 import { PCShareSocialNetwork } from '../models';
+const BLOCK_ELEMENTS = [
+    'div',
+    'p',
+    'h[1-6]',
+    'address',
+    'article',
+    'aside',
+    'blockquote',
+    'canvas',
+    'dd',
+    'dl',
+    'dt',
+    'fieldset',
+    'figcaption',
+    'footer',
+    'header',
+    'hr',
+    'main',
+    'nav',
+    'section',
+    'video',
+    'pre',
+    'figure',
+    'form',
+    'pre',
+    'ol',
+    'ul',
+    'li',
+    'table',
+    'thead',
+    'tbody',
+    'tfoot',
+    'tr',
+    'th',
+    'td',
+];
 export function getHeaderTag(size) {
     switch (size) {
         case 'l':
@@ -12,6 +48,11 @@ export function getHeaderTag(size) {
             return 'h2';
     }
 }
+export function hasBlockTag(content) {
+    const blockElementRegex = `/<(${BLOCK_ELEMENTS.join('|')})\b[^>]*>/gi`;
+    const blockTags = content.match(blockElementRegex);
+    return Boolean(blockTags);
+}
 export function getBlockKey(block, index) {
     return `${block.type}-${index}`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "3.8.0",
+  "version": "3.8.1",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/utils/blocks.d.ts

@@ -1,6 +1,7 @@
 import { Block, CustomConfig, PCShareSocialNetwork, TextSize } from '../models';
 import { ConstructorBlock } from '../models/constructor';
 export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4" | "h5";
+export declare function hasBlockTag(content: string): boolean;
 export declare function getBlockKey(block: ConstructorBlock, index: number): string;
 export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];
 export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {

package/server/utils/blocks.js

@@ -1,7 +1,43 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.getHeaderTag = void 0;
+exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.hasBlockTag = exports.getHeaderTag = void 0;
 const models_1 = require("../models");
+const BLOCK_ELEMENTS = [
+    'div',
+    'p',
+    'h[1-6]',
+    'address',
+    'article',
+    'aside',
+    'blockquote',
+    'canvas',
+    'dd',
+    'dl',
+    'dt',
+    'fieldset',
+    'figcaption',
+    'footer',
+    'header',
+    'hr',
+    'main',
+    'nav',
+    'section',
+    'video',
+    'pre',
+    'figure',
+    'form',
+    'pre',
+    'ol',
+    'ul',
+    'li',
+    'table',
+    'thead',
+    'tbody',
+    'tfoot',
+    'tr',
+    'th',
+    'td',
+];
 function getHeaderTag(size) {
     switch (size) {
         case 'l':
@@ -16,6 +52,12 @@ function getHeaderTag(size) {
     }
 }
 exports.getHeaderTag = getHeaderTag;
+function hasBlockTag(content) {
+    const blockElementRegex = `/<(${BLOCK_ELEMENTS.join('|')})\b[^>]*>/gi`;
+    const blockTags = content.match(blockElementRegex);
+    return Boolean(blockTags);
+}
+exports.hasBlockTag = hasBlockTag;
 function getBlockKey(block, index) {
     return `${block.type}-${index}`;
 }