@gravity-ui/page-constructor 1.7.0-alpha.0 → 1.7.0-alpha.2

package/build/cjs/components/index.d.ts

@@ -33,4 +33,5 @@ export { default as OverflowScroller } from './OverflowScroller/OverflowScroller
 export { default as Author } from './Author/Author';
 export { default as RouterLink } from './RouterLink/RouterLink';
 export { default as HTML } from './HTML/HTML';
+export { default as Header } from './navigation/components/Header/Header';
 export type { RouterLinkProps } from './RouterLink/RouterLink';

package/build/cjs/components/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HTML = exports.RouterLink = exports.Author = exports.OverflowScroller = exports.Control = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.ReactPlayer = exports.OutsideClick = exports.Media = exports.Links = exports.Link = exports.Image = exports.HeightCalculator = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Button = exports.BlockHeader = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
+exports.Header = exports.HTML = exports.RouterLink = exports.Author = exports.OverflowScroller = exports.Control = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.ReactPlayer = exports.OutsideClick = exports.Media = exports.Links = exports.Link = exports.Image = exports.HeightCalculator = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Button = exports.BlockHeader = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
 var Anchor_1 = require("./Anchor/Anchor");
 Object.defineProperty(exports, "Anchor", { enumerable: true, get: function () { return __importDefault(Anchor_1).default; } });
 var AnimateBlock_1 = require("./AnimateBlock/AnimateBlock");
@@ -74,3 +74,5 @@ var RouterLink_1 = require("./RouterLink/RouterLink");
 Object.defineProperty(exports, "RouterLink", { enumerable: true, get: function () { return __importDefault(RouterLink_1).default; } });
 var HTML_1 = require("./HTML/HTML");
 Object.defineProperty(exports, "HTML", { enumerable: true, get: function () { return __importDefault(HTML_1).default; } });
+var Header_1 = require("./navigation/components/Header/Header");
+Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return __importDefault(Header_1).default; } });

package/build/cjs/components/navigation/components/Logo/Logo.css

@@ -1,14 +1,20 @@
+.logo {
+  margin: 0;
+}
+
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .logo {
   display: flex;
   align-items: center;
-  font-weight: 500;
-  font-size: var(--yc-text-header-2-font-size);
-  line-height: var(--yc-text-header-2-line-height);
+  font-weight: var(--yc-text-accent-font-weight);
+  font-size: var(--yc-text-header-1-font-size);
+  line-height: var(--yc-text-header-1-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--yc-text-accent-font-weight);
 }
 .logo__icon {
-  width: 178px;
+  display: flex;
   height: 36px;
   margin-right: 8px;
   object-fit: contain;

package/build/cjs/components/navigation/components/Logo/Logo.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavigationLogo } from '../../../../models/navigation';
+import { NavigationLogo } from '../../../../models';
 export interface LogoProps extends NavigationLogo {
     className?: string;
 }

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

@@ -3,11 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importDefault)(require("react"));
 const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
-const index_1 = require("../../../index");
 const RouterLink_1 = (0, tslib_1.__importDefault)(require("../../../RouterLink/RouterLink"));
+const utils_1 = require("../../../Media/Image/utils");
+const index_1 = require("../../../index");
 const b = (0, bem_cn_lite_1.default)('logo');
-const Logo = ({ icon, text, className }) => (react_1.default.createElement(RouterLink_1.default, { href: "/", passHref: true },
-    react_1.default.createElement("div", { className: b(null, className) },
-        icon && react_1.default.createElement(index_1.Image, { className: b('icon'), src: icon }),
-        react_1.default.createElement("span", { className: b('text') }, text))));
+const Logo = ({ icon, text, className }) => {
+    const imageData = (0, utils_1.getMediaImage)(icon);
+    return (react_1.default.createElement(RouterLink_1.default, { href: "/", passHref: true },
+        react_1.default.createElement("div", { className: b(null, className) },
+            imageData && react_1.default.createElement(index_1.Image, Object.assign({}, imageData)),
+            react_1.default.createElement("span", { className: b('text') }, text))));
+};
 exports.default = Logo;

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

@@ -9,22 +9,25 @@ const locationContext_1 = require("../../../../context/locationContext");
 const navigation_1 = require("../../../../models/navigation");
 const icons_1 = require("../../../../icons");
 const SocialIcon_1 = (0, tslib_1.__importDefault)(require("../SocialIcon/SocialIcon"));
+const utils_2 = require("../../../Media/Image/utils");
 const b = (0, bem_cn_lite_1.default)('navigation-item');
 const Content = ({ text, icon }) => (react_1.default.createElement(react_1.Fragment, null,
-    icon && react_1.default.createElement("img", { className: b('icon'), src: icon }),
+    icon && react_1.default.createElement("img", Object.assign({ className: b('icon') }, icon)),
     react_1.default.createElement("span", { className: b('text') }, text)));
 const NavigationDropdown = (_a) => {
     var { text, icon, isOpened } = _a, props = (0, tslib_1.__rest)(_a, ["text", "icon", "isOpened"]);
+    const iconData = icon && (0, utils_2.getMediaImage)(icon);
     return (react_1.default.createElement("span", Object.assign({}, props),
-        react_1.default.createElement(Content, { text: text, icon: icon }),
+        react_1.default.createElement(Content, { text: text, icon: iconData }),
         react_1.default.createElement(index_1.ToggleArrow, { className: b('dropdown'), size: 12, type: 'vertical', iconType: "navigation", open: isOpened })));
 };
 const NavigationLink = (props) => {
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const { url, text, icon, arrow, target } = props, rest = (0, tslib_1.__rest)(props, ["url", "text", "icon", "arrow", "target"]);
     const linkExtraProps = (0, utils_1.getLinkProps)(url, hostname, target);
+    const iconData = icon && (0, utils_2.getMediaImage)(icon);
     const content = (react_1.default.createElement(react_1.Fragment, null,
-        react_1.default.createElement(Content, { text: text, icon: icon }),
+        react_1.default.createElement(Content, { text: text, icon: iconData }),
         arrow && react_1.default.createElement(icons_1.NavigationArrow, { className: b('arrow') })));
     return (linkExtraProps === null || linkExtraProps === void 0 ? void 0 : linkExtraProps.target) ? (react_1.default.createElement("a", Object.assign({ href: url, title: text }, rest, linkExtraProps), content)) : (react_1.default.createElement(index_1.RouterLink, { href: url, passHref: true },
         react_1.default.createElement("a", Object.assign({}, rest), content)));

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

@@ -4,7 +4,11 @@ const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importDefault)(require("react"));
 const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
 const index_1 = require("../../../index");
+const utils_1 = require("../../../Media/Image/utils");
 const b = (0, bem_cn_lite_1.default)('social-icon');
-const SocialIcon = ({ icon, url, className }) => (react_1.default.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
-    react_1.default.createElement(index_1.Image, { className: b('icon'), src: 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) },
+        react_1.default.createElement(index_1.Image, Object.assign({ className: b('icon') }, iconData))));
+};
 exports.default = SocialIcon;

package/build/cjs/models/index.d.ts

@@ -4,3 +4,4 @@ export * from './common';
 export * from './components';
 export * from './guards';
 export * from './react';
+export * from './navigation';

package/build/cjs/models/index.js

@@ -7,3 +7,4 @@ const tslib_1 = require("tslib");
 (0, tslib_1.__exportStar)(require("./components"), exports);
 (0, tslib_1.__exportStar)(require("./guards"), exports);
 (0, tslib_1.__exportStar)(require("./react"), exports);
+(0, tslib_1.__exportStar)(require("./navigation"), exports);

package/build/cjs/models/navigation.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from '../components/Button/Button';
+import { ImageProps, ButtonProps } from './constructor-items';
 export declare enum NavigationItemType {
     Link = "link",
     Dropdown = "dropdown",
@@ -7,7 +7,7 @@ export declare enum NavigationItemType {
 }
 export interface NavigationItemBase {
     text: string;
-    icon?: string;
+    icon?: ImageProps;
     url?: string;
 }
 export interface NavigationLinkItem extends NavigationItemBase {
@@ -27,12 +27,12 @@ export interface NavigationDropdownItem extends NavigationItemBase {
 }
 export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     type: NavigationItemType.Social;
-    icon: string;
+    icon: ImageProps;
     url: string;
 }
 export declare type NavigationItem = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
 export interface NavigationLogo extends Omit<NavigationItemBase, 'text'> {
-    icon: string;
+    icon: ImageProps;
     text?: string;
 }
 export interface HeaderData {

package/build/esm/components/index.d.ts

@@ -33,4 +33,5 @@ export { default as OverflowScroller } from './OverflowScroller/OverflowScroller
 export { default as Author } from './Author/Author';
 export { default as RouterLink } from './RouterLink/RouterLink';
 export { default as HTML } from './HTML/HTML';
+export { default as Header } from './navigation/components/Header/Header';
 export type { RouterLinkProps } from './RouterLink/RouterLink';

package/build/esm/components/index.js

@@ -33,3 +33,4 @@ export { default as OverflowScroller } from './OverflowScroller/OverflowScroller
 export { default as Author } from './Author/Author';
 export { default as RouterLink } from './RouterLink/RouterLink';
 export { default as HTML } from './HTML/HTML';
+export { default as Header } from './navigation/components/Header/Header';

package/build/esm/components/navigation/components/Logo/Logo.css

@@ -1,14 +1,20 @@
+.logo {
+  margin: 0;
+}
+
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .logo {
   display: flex;
   align-items: center;
-  font-weight: 500;
-  font-size: var(--yc-text-header-2-font-size);
-  line-height: var(--yc-text-header-2-line-height);
+  font-weight: var(--yc-text-accent-font-weight);
+  font-size: var(--yc-text-header-1-font-size);
+  line-height: var(--yc-text-header-1-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--yc-text-accent-font-weight);
 }
 .logo__icon {
-  width: 178px;
+  display: flex;
   height: 36px;
   margin-right: 8px;
   object-fit: contain;

package/build/esm/components/navigation/components/Logo/Logo.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavigationLogo } from '../../../../models/navigation';
+import { NavigationLogo } from '../../../../models';
 import './Logo.css';
 export interface LogoProps extends NavigationLogo {
     className?: string;

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

@@ -1,11 +1,15 @@
 import React from 'react';
 import block from 'bem-cn-lite';
-import { Image } from '../../../index';
 import RouterLink from '../../../RouterLink/RouterLink';
+import { getMediaImage } from '../../../Media/Image/utils';
+import { Image } from '../../../index';
 import './Logo.css';
 const b = block('logo');
-const Logo = ({ icon, text, className }) => (React.createElement(RouterLink, { href: "/", passHref: true },
-    React.createElement("div", { className: b(null, className) },
-        icon && React.createElement(Image, { className: b('icon'), src: icon }),
-        React.createElement("span", { className: b('text') }, text))));
+const Logo = ({ icon, text, className }) => {
+    const imageData = getMediaImage(icon);
+    return (React.createElement(RouterLink, { href: "/", passHref: true },
+        React.createElement("div", { className: b(null, className) },
+            imageData && React.createElement(Image, Object.assign({}, imageData)),
+            React.createElement("span", { className: b('text') }, text))));
+};
 export default Logo;

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

@@ -7,23 +7,26 @@ import { LocationContext } from '../../../../context/locationContext';
 import { NavigationItemType, } from '../../../../models/navigation';
 import { NavigationArrow } from '../../../../icons';
 import SocialIcon from '../SocialIcon/SocialIcon';
+import { getMediaImage } from '../../../Media/Image/utils';
 import './NavigationItem.css';
 const b = block('navigation-item');
 const Content = ({ text, icon }) => (React.createElement(Fragment, null,
-    icon && React.createElement("img", { className: b('icon'), src: icon }),
+    icon && React.createElement("img", Object.assign({ className: b('icon') }, icon)),
     React.createElement("span", { className: b('text') }, text)));
 const NavigationDropdown = (_a) => {
     var { text, icon, isOpened } = _a, props = __rest(_a, ["text", "icon", "isOpened"]);
+    const iconData = icon && getMediaImage(icon);
     return (React.createElement("span", Object.assign({}, props),
-        React.createElement(Content, { text: text, icon: icon }),
+        React.createElement(Content, { text: text, icon: iconData }),
         React.createElement(ToggleArrow, { className: b('dropdown'), size: 12, type: 'vertical', iconType: "navigation", open: isOpened })));
 };
 const NavigationLink = (props) => {
     const { hostname } = useContext(LocationContext);
     const { url, text, icon, arrow, target } = props, rest = __rest(props, ["url", "text", "icon", "arrow", "target"]);
     const linkExtraProps = getLinkProps(url, hostname, target);
+    const iconData = icon && getMediaImage(icon);
     const content = (React.createElement(Fragment, null,
-        React.createElement(Content, { text: text, icon: icon }),
+        React.createElement(Content, { text: text, icon: iconData }),
         arrow && React.createElement(NavigationArrow, { className: b('arrow') })));
     return (linkExtraProps === null || linkExtraProps === void 0 ? void 0 : linkExtraProps.target) ? (React.createElement("a", Object.assign({ href: url, title: text }, rest, linkExtraProps), content)) : (React.createElement(RouterLink, { href: url, passHref: true },
         React.createElement("a", Object.assign({}, rest), content)));

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

@@ -1,8 +1,12 @@
 import React from 'react';
 import block from 'bem-cn-lite';
 import { Image } from '../../../index';
+import { getMediaImage } from '../../../Media/Image/utils';
 import './SocialIcon.css';
 const b = block('social-icon');
-const SocialIcon = ({ icon, url, className }) => (React.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
-    React.createElement(Image, { className: b('icon'), src: 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) },
+        React.createElement(Image, Object.assign({ className: b('icon') }, iconData))));
+};
 export default SocialIcon;

package/build/esm/models/index.d.ts

@@ -4,3 +4,4 @@ export * from './common';
 export * from './components';
 export * from './guards';
 export * from './react';
+export * from './navigation';

package/build/esm/models/index.js

@@ -4,3 +4,4 @@ export * from './common';
 export * from './components';
 export * from './guards';
 export * from './react';
+export * from './navigation';

package/build/esm/models/navigation.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from '../components/Button/Button';
+import { ImageProps, ButtonProps } from './constructor-items';
 export declare enum NavigationItemType {
     Link = "link",
     Dropdown = "dropdown",
@@ -7,7 +7,7 @@ export declare enum NavigationItemType {
 }
 export interface NavigationItemBase {
     text: string;
-    icon?: string;
+    icon?: ImageProps;
     url?: string;
 }
 export interface NavigationLinkItem extends NavigationItemBase {
@@ -27,12 +27,12 @@ export interface NavigationDropdownItem extends NavigationItemBase {
 }
 export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     type: NavigationItemType.Social;
-    icon: string;
+    icon: ImageProps;
     url: string;
 }
 export declare type NavigationItem = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
 export interface NavigationLogo extends Omit<NavigationItemBase, 'text'> {
-    icon: string;
+    icon: ImageProps;
     text?: string;
 }
 export interface HeaderData {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "1.7.0-alpha.0",
+  "version": "1.7.0-alpha.2",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/models/index.d.ts

@@ -4,3 +4,4 @@ export * from './common';
 export * from './components';
 export * from './guards';
 export * from './react';
+export * from './navigation';

package/server/models/index.js

@@ -16,3 +16,4 @@ __exportStar(require("./common"), exports);
 __exportStar(require("./components"), exports);
 __exportStar(require("./guards"), exports);
 __exportStar(require("./react"), exports);
+__exportStar(require("./navigation"), exports);

package/server/models/navigation.d.ts

@@ -0,0 +1,59 @@
+import { ImageProps, ButtonProps } from './constructor-items';
+export declare enum NavigationItemType {
+    Link = "link",
+    Dropdown = "dropdown",
+    Button = "button",
+    Social = "social"
+}
+export interface NavigationItemBase {
+    text: string;
+    icon?: ImageProps;
+    url?: string;
+}
+export interface NavigationLinkItem extends NavigationItemBase {
+    type: NavigationItemType.Link;
+    url: string;
+    arrow?: boolean;
+    target?: string;
+}
+export interface NavigationButtonItem extends ButtonProps {
+    type: NavigationItemType.Button;
+    url: string;
+    target?: string;
+}
+export interface NavigationDropdownItem extends NavigationItemBase {
+    type: NavigationItemType.Dropdown;
+    items: NavigationLinkItem[];
+}
+export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
+    type: NavigationItemType.Social;
+    icon: ImageProps;
+    url: string;
+}
+export declare type NavigationItem = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
+export interface NavigationLogo extends Omit<NavigationItemBase, 'text'> {
+    icon: ImageProps;
+    text?: string;
+}
+export interface HeaderData {
+    leftItems: NavigationItem[];
+    rightItems?: NavigationItem[];
+}
+export interface FooterColumn {
+    title: string;
+    links: NavigationItem[];
+}
+export interface FooterUnderline {
+    links?: NavigationItem[];
+    copyright?: string;
+}
+export interface FooterData {
+    columns: FooterColumn[];
+    social?: NavigationSocialItem[];
+    underline?: FooterUnderline;
+}
+export interface NavigationData {
+    logo: NavigationLogo;
+    header: HeaderData;
+    footer?: FooterData;
+}

package/server/models/navigation.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationItemType = void 0;
+var NavigationItemType;
+(function (NavigationItemType) {
+    NavigationItemType["Link"] = "link";
+    NavigationItemType["Dropdown"] = "dropdown";
+    NavigationItemType["Button"] = "button";
+    NavigationItemType["Social"] = "social";
+})(NavigationItemType = exports.NavigationItemType || (exports.NavigationItemType = {}));