@gravity-ui/page-constructor 4.5.1 → 4.5.3

package/build/cjs/blocks/Icons/Icons.js

@@ -15,7 +15,8 @@ const Icons = ({ title, size = 's', items }) => {
         title && react_1.default.createElement(components_1.Title, { className: b('header'), title: title, colSizes: { all: 12 } }),
         items.map((item) => {
             const itemContent = getItemContent(item);
-            return item.url ? (react_1.default.createElement("a", Object.assign({ className: b('item'), key: item.url, href: item.url }, (0, utils_1.getLinkProps)(item.url, hostname)), itemContent)) : (react_1.default.createElement("div", { className: b('item'), key: item.url }, itemContent));
+            const { url, text } = item;
+            return url ? (react_1.default.createElement("a", Object.assign({ className: b('item'), key: url, href: url, "aria-label": text, title: text }, (0, utils_1.getLinkProps)(url, hostname)), itemContent)) : (react_1.default.createElement("div", { className: b('item'), key: url }, itemContent));
         })));
 };
 exports.default = Icons;

package/build/cjs/components/VideoBlock/VideoBlock.js

@@ -95,7 +95,7 @@ const VideoBlock = (props) => {
     }
     return (react_1.default.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && !fullscreen && (react_1.default.createElement("div", { className: b('preview'), onClick: onPreviewClick },
         react_1.default.createElement(Image_1.default, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper') }),
-        playButton || (react_1.default.createElement("button", { className: b('button') },
+        playButton || (react_1.default.createElement("button", { title: "Play", className: b('button') },
             react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayVideo, size: 24 })))))));
 };
 exports.default = VideoBlock;

package/build/cjs/editor/components/AddBlock/AddBlock.css

@@ -23,7 +23,7 @@ unpredictable css rules order in build */
   transition: transform 0.2s;
   width: 76px;
   height: 40px;
-  color: var(--g-color-text-primary);
+  color: var(--pc-editor-control-icon-color);
   background-color: var(--pc-editor-base-color);
   border-radius: 8px;
 }

package/build/cjs/editor/components/EditBlock/EditBlock.css

@@ -45,6 +45,7 @@ unpredictable css rules order in build */
   width: 48px;
   height: 32px;
   border-radius: 8px;
+  color: var(--pc-editor-control-icon-color);
   background-color: var(--pc-editor-control-color);
 }
 .pc-edit-block__control:hover {

package/build/cjs/editor/components/Layout/Layout.css

@@ -4,7 +4,8 @@ body {
   --pc-editor-header-height: 48px;
   --pc-editor-divider-width: 12px;
   --pc-editor-base-color: var(--g-color-base-brand);
-  --pc-editor-control-color: var(--g-color-private-yellow-400-solid);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
   --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
 }
 

package/build/cjs/editor/containers/Form/Form.css

@@ -1,46 +1,26 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-editor-form {
-  --top-level-font-size: var(--g-text-display-2-font-size);
-  --top-level-line-height: var(--g-text-display-2-line-height);
-  --block-level-complex-propery-font-size: var(--g-text-body-3-font-size);
-  --block-level-complex-property-line-height: var(--g-text-body-3-line-height);
-  --complex-property-font-size: var(--g-text-body-2-font-size);
-  --complex-property-line-height: var(--g-text-body-2-line-height);
-  --property-font-size: var(--g-text-body-1-font-size);
-  --property-line-height: var(--g-text-body-1-line-height);
+  --block-name-font-size: var(--g-text-display-1-font-size);
+  --block-name-line-height: var(--g-text-display-1-line-height);
+  --property-name-font-size: var(--g-text-body-1-font-size);
+  --property-name-line-height: var(--g-text-body-1-line-height);
   --input-min-width: 150px;
   --property-title-width: 96px;
   --button-height: 48px;
-  --icon-size: 32px;
-  --icon-margin: 42px;
+  --icon-size: 28px;
+  --icon-margin: 8px;
   --property-font-weight: 500;
-  --header-text-size: var(--top-level-font-size);
-  --header-line-height: var(--top-level-line-height);
-  --text-size: var(--top-level-font-size);
-  --line-height: var(--top-level-line-height);
+  --header-text-size: var(--block-name-font-size);
+  --header-line-height: var(--block-name-line-height);
 }
 .pc-editor-form .df-use-search .df-use-search {
-  --button-height: 32px;
-  --icon-size: 20px;
-  --icon-margin: 30px;
-  --header-text-size: var(--block-level-complex-propery-font-size);
-  --header-line-height: var(--block-level-complex-property-line-height);
-  --text-size: var(--property-font-size);
-  --line-height: var(--property-line-height);
-  --property-font-weight: 400;
-}
-.pc-editor-form .df-use-search .df-use-search .df-use-search {
   --button-height: 28px;
   --icon-size: 16px;
-  --icon-margin: 25px;
+  --icon-margin: 0px;
+  --header-text-size: var(--property-name-font-size);
+  --header-line-height: var(--property-name-line-height);
   --property-font-weight: 400;
-  --header-text-size: var(--complex-property-font-size);
-  --header-line-height: var(--complex-property-line-height);
-  --text-size: var(--property-font-size);
-  --line-height: var(--property-line-height);
-  --oneof-text-size: var(--complex-propery-font-size);
-  --oneof-line-height: var(--complex-property-line-height);
 }
 .pc-editor-form .df-row {
   width: inherit;
@@ -49,8 +29,6 @@ unpredictable css rules order in build */
   width: var(--property-title-width);
 }
 .pc-editor-form .df-row__title {
-  font-size: var(--text-size);
-  line-height: var(--line-height);
   font-weight: var(--property-font-weight);
   white-space: nowrap;
 }
@@ -58,12 +36,13 @@ unpredictable css rules order in build */
   min-width: var(--input-min-width);
   min-height: var(--input-min-width);
 }
-.pc-editor-form .df-simple-vertical-accordeon__header .yc-button {
+.pc-editor-form .df-simple-vertical-accordeon__header .yc-button,
+.pc-editor-form .df-simple-vertical-accordeon__title {
   font-size: var(--header-text-size);
   line-height: var(--header-line-height);
 }
 .pc-editor-form .df-simple-vertical-accordeon__header .yc-button {
-  --g-button-height: var(--button-height);
+  --yc-button-height: var(--button-height);
   display: flex;
   justify-content: center;
   align-items: center;

package/build/cjs/editor/styles/root.css

@@ -2,6 +2,7 @@ body {
   --pc-editor-header-height: 48px;
   --pc-editor-divider-width: 12px;
   --pc-editor-base-color: var(--g-color-base-brand);
-  --pc-editor-control-color: var(--g-color-private-yellow-400-solid);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
   --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
 }

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

@@ -24,7 +24,7 @@ const NavigationLink = (props) => {
     }
     else {
         return (react_1.default.createElement(components_1.RouterLink, { href: url, passHref: true },
-            react_1.default.createElement("a", Object.assign({}, rest, { className: classes }), content)));
+            react_1.default.createElement("a", Object.assign({ title: text }, rest, { className: classes }), content)));
     }
 };
 exports.NavigationLink = NavigationLink;

package/build/cjs/navigation/components/SocialIcon/SocialIcon.js

@@ -8,7 +8,8 @@ const utils_2 = require("../../../utils");
 const b = (0, utils_2.block)('social-icon');
 const SocialIcon = ({ icon, url, className }) => {
     const iconData = (0, utils_1.getMediaImage)(icon);
-    return (react_1.default.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
+    const { alt } = iconData;
+    return (react_1.default.createElement("a", { href: url, "aria-label": alt, title: alt, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
         react_1.default.createElement(components_1.Image, Object.assign({ className: b('icon') }, iconData))));
 };
 exports.default = SocialIcon;

package/build/esm/blocks/Icons/Icons.js

@@ -13,7 +13,8 @@ const Icons = ({ title, size = 's', items }) => {
         title && React.createElement(Title, { className: b('header'), title: title, colSizes: { all: 12 } }),
         items.map((item) => {
             const itemContent = getItemContent(item);
-            return item.url ? (React.createElement("a", Object.assign({ className: b('item'), key: item.url, href: item.url }, getLinkProps(item.url, hostname)), itemContent)) : (React.createElement("div", { className: b('item'), key: item.url }, itemContent));
+            const { url, text } = item;
+            return url ? (React.createElement("a", Object.assign({ className: b('item'), key: url, href: url, "aria-label": text, title: text }, getLinkProps(url, hostname)), itemContent)) : (React.createElement("div", { className: b('item'), key: url }, itemContent));
         })));
 };
 export default Icons;

package/build/esm/components/VideoBlock/VideoBlock.js

@@ -91,7 +91,7 @@ const VideoBlock = (props) => {
     }
     return (React.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && !fullscreen && (React.createElement("div", { className: b('preview'), onClick: onPreviewClick },
         React.createElement(Image, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper') }),
-        playButton || (React.createElement("button", { className: b('button') },
+        playButton || (React.createElement("button", { title: "Play", className: b('button') },
             React.createElement(Icon, { className: b('icon'), data: PlayVideo, size: 24 })))))));
 };
 export default VideoBlock;

package/build/esm/editor/components/AddBlock/AddBlock.css

@@ -23,7 +23,7 @@ unpredictable css rules order in build */
   transition: transform 0.2s;
   width: 76px;
   height: 40px;
-  color: var(--g-color-text-primary);
+  color: var(--pc-editor-control-icon-color);
   background-color: var(--pc-editor-base-color);
   border-radius: 8px;
 }

package/build/esm/editor/components/EditBlock/EditBlock.css

@@ -45,6 +45,7 @@ unpredictable css rules order in build */
   width: 48px;
   height: 32px;
   border-radius: 8px;
+  color: var(--pc-editor-control-icon-color);
   background-color: var(--pc-editor-control-color);
 }
 .pc-edit-block__control:hover {

package/build/esm/editor/components/Layout/Layout.css

@@ -4,7 +4,8 @@ body {
   --pc-editor-header-height: 48px;
   --pc-editor-divider-width: 12px;
   --pc-editor-base-color: var(--g-color-base-brand);
-  --pc-editor-control-color: var(--g-color-private-yellow-400-solid);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
   --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
 }
 

package/build/esm/editor/containers/Form/Form.css

@@ -1,46 +1,26 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-editor-form {
-  --top-level-font-size: var(--g-text-display-2-font-size);
-  --top-level-line-height: var(--g-text-display-2-line-height);
-  --block-level-complex-propery-font-size: var(--g-text-body-3-font-size);
-  --block-level-complex-property-line-height: var(--g-text-body-3-line-height);
-  --complex-property-font-size: var(--g-text-body-2-font-size);
-  --complex-property-line-height: var(--g-text-body-2-line-height);
-  --property-font-size: var(--g-text-body-1-font-size);
-  --property-line-height: var(--g-text-body-1-line-height);
+  --block-name-font-size: var(--g-text-display-1-font-size);
+  --block-name-line-height: var(--g-text-display-1-line-height);
+  --property-name-font-size: var(--g-text-body-1-font-size);
+  --property-name-line-height: var(--g-text-body-1-line-height);
   --input-min-width: 150px;
   --property-title-width: 96px;
   --button-height: 48px;
-  --icon-size: 32px;
-  --icon-margin: 42px;
+  --icon-size: 28px;
+  --icon-margin: 8px;
   --property-font-weight: 500;
-  --header-text-size: var(--top-level-font-size);
-  --header-line-height: var(--top-level-line-height);
-  --text-size: var(--top-level-font-size);
-  --line-height: var(--top-level-line-height);
+  --header-text-size: var(--block-name-font-size);
+  --header-line-height: var(--block-name-line-height);
 }
 .pc-editor-form .df-use-search .df-use-search {
-  --button-height: 32px;
-  --icon-size: 20px;
-  --icon-margin: 30px;
-  --header-text-size: var(--block-level-complex-propery-font-size);
-  --header-line-height: var(--block-level-complex-property-line-height);
-  --text-size: var(--property-font-size);
-  --line-height: var(--property-line-height);
-  --property-font-weight: 400;
-}
-.pc-editor-form .df-use-search .df-use-search .df-use-search {
   --button-height: 28px;
   --icon-size: 16px;
-  --icon-margin: 25px;
+  --icon-margin: 0px;
+  --header-text-size: var(--property-name-font-size);
+  --header-line-height: var(--property-name-line-height);
   --property-font-weight: 400;
-  --header-text-size: var(--complex-property-font-size);
-  --header-line-height: var(--complex-property-line-height);
-  --text-size: var(--property-font-size);
-  --line-height: var(--property-line-height);
-  --oneof-text-size: var(--complex-propery-font-size);
-  --oneof-line-height: var(--complex-property-line-height);
 }
 .pc-editor-form .df-row {
   width: inherit;
@@ -49,8 +29,6 @@ unpredictable css rules order in build */
   width: var(--property-title-width);
 }
 .pc-editor-form .df-row__title {
-  font-size: var(--text-size);
-  line-height: var(--line-height);
   font-weight: var(--property-font-weight);
   white-space: nowrap;
 }
@@ -58,12 +36,13 @@ unpredictable css rules order in build */
   min-width: var(--input-min-width);
   min-height: var(--input-min-width);
 }
-.pc-editor-form .df-simple-vertical-accordeon__header .yc-button {
+.pc-editor-form .df-simple-vertical-accordeon__header .yc-button,
+.pc-editor-form .df-simple-vertical-accordeon__title {
   font-size: var(--header-text-size);
   line-height: var(--header-line-height);
 }
 .pc-editor-form .df-simple-vertical-accordeon__header .yc-button {
-  --g-button-height: var(--button-height);
+  --yc-button-height: var(--button-height);
   display: flex;
   justify-content: center;
   align-items: center;

package/build/esm/editor/styles/root.css

@@ -2,6 +2,7 @@ body {
   --pc-editor-header-height: 48px;
   --pc-editor-divider-width: 12px;
   --pc-editor-base-color: var(--g-color-base-brand);
-  --pc-editor-control-color: var(--g-color-private-yellow-400-solid);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
   --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
 }

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

@@ -22,6 +22,6 @@ export const NavigationLink = (props) => {
     }
     else {
         return (React.createElement(RouterLink, { href: url, passHref: true },
-            React.createElement("a", Object.assign({}, rest, { className: classes }), content)));
+            React.createElement("a", Object.assign({ title: text }, rest, { className: classes }), content)));
     }
 };

package/build/esm/navigation/components/SocialIcon/SocialIcon.js

@@ -6,7 +6,8 @@ import './SocialIcon.css';
 const b = block('social-icon');
 const SocialIcon = ({ icon, url, className }) => {
     const iconData = getMediaImage(icon);
-    return (React.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
+    const { alt } = iconData;
+    return (React.createElement("a", { href: url, "aria-label": alt, title: alt, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
         React.createElement(Image, Object.assign({ className: b('icon') }, iconData))));
 };
 export default SocialIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.5.1",
+  "version": "4.5.3",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -81,7 +81,7 @@
   },
   "dependencies": {
     "@gravity-ui/components": "^2.0.0",
-    "@gravity-ui/dynamic-forms": "^2.0.0",
+    "@gravity-ui/dynamic-forms": "^2.3.0",
     "@gravity-ui/i18n": "^1.0.0",
     "ajv": "^8.12.0",
     "bem-cn-lite": "^4.0.0",