@gravity-ui/page-constructor 1.8.0-alfa.0 → 1.8.0

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

@@ -0,0 +1,20 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-social-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  margin-right: 8px;
+  color: var(--yc-color-base-background);
+  border-radius: 50%;
+  background-color: var(--yc-color-base-generic);
+}
+.pc-social-icon:hover {
+  background-color: var(--yc-color-base-generic-hover);
+}
+.pc-social-icon__icon {
+  width: 16px;
+  height: 16px;
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { NavigationSocialItem } from '../../../../models';
+import './SocialIcon.css';
+export interface NavigationSocialItemProps extends NavigationSocialItem {
+    className?: string;
+}
+declare const SocialIcon: React.FC<NavigationSocialItemProps>;
+export default SocialIcon;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { block } from '../../../../utils';
+import { Image } from '../../../index';
+import { getMediaImage } from '../../../Media/Image/utils';
+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) },
+        React.createElement(Image, Object.assign({ className: b('icon') }, iconData))));
+};
+export default SocialIcon;

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

@@ -0,0 +1,7 @@
+export { default as Header } from './Header/Header';
+export { default as NavigationItem } from './NavigationItem/NavigationItem';
+export { default as Logo } from './Logo/Logo';
+export { default as MobileNavigation } from './MobileNavigation/MobileNavigation';
+export { default as Navigation } from './Navigation/Navigation';
+export { default as NavigationPopup } from './NavigationPopup/NavigationPopup';
+export { default as SocialIcon } from './SocialIcon/SocialIcon';

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

@@ -0,0 +1,7 @@
+export { default as Header } from './Header/Header';
+export { default as NavigationItem } from './NavigationItem/NavigationItem';
+export { default as Logo } from './Logo/Logo';
+export { default as MobileNavigation } from './MobileNavigation/MobileNavigation';
+export { default as Navigation } from './Navigation/Navigation';
+export { default as NavigationPopup } from './NavigationPopup/NavigationPopup';
+export { default as SocialIcon } from './SocialIcon/SocialIcon';

package/build/esm/components/navigation/containers/Layout/Layout.css

@@ -0,0 +1,10 @@
+.layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+.layout__content {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+}

package/build/esm/components/navigation/containers/Layout/Layout.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { NavigationData } from '../../../../models';
+import './Layout.css';
+export interface LayoutProps {
+    navigation?: NavigationData;
+    children?: React.ReactNode;
+}
+declare const Layout: React.FC<LayoutProps>;
+export default Layout;

package/build/esm/components/navigation/containers/Layout/Layout.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { block } from '../../../../utils';
+import Header from '../../components/Header/Header';
+import './Layout.css';
+const b = block('layout');
+const Layout = ({ children, navigation }) => (React.createElement("div", { className: b() },
+    navigation && React.createElement(Header, { data: navigation.header, logo: navigation.logo }),
+    React.createElement("main", { className: b('content') }, children)));
+export default Layout;

package/build/esm/containers/PageConstructor/PageConstructor.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { ShouldRenderBlock, CustomConfig, PageContent, CustomItems } from '../../models';
-import { blockMap, subBlockMap } from '../../constructor-items';
 import '@doc-tools/transform/dist/js/yfm';
+import { ShouldRenderBlock, CustomConfig, PageContent, CustomItems, NavigationData } from '../../models';
+import { blockMap, subBlockMap } from '../../constructor-items';
 import './PageConstructor.css';
 export declare type ItemMap = typeof blockMap & typeof subBlockMap & CustomItems;
 export interface PageConstructorProps {
@@ -9,6 +9,7 @@ export interface PageConstructorProps {
     shouldRenderBlock?: ShouldRenderBlock;
     custom?: CustomConfig;
     renderMenu?: () => React.ReactNode;
+    navigation?: NavigationData;
 }
 export declare const Constructor: (props: PageConstructorProps) => JSX.Element;
 export declare const PageConstructor: (props: PageConstructorProps) => JSX.Element;

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

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
 import React, { useContext, useMemo } from 'react';
+import '@doc-tools/transform/dist/js/yfm';
 import { HeaderBlockTypes, BlockTypes, } from '../../models';
 import { blockMap, subBlockMap } from '../../constructor-items';
 import { Grid } from '../../grid';
@@ -12,7 +13,7 @@ import { ConstructorRow } from './components/ConstructorRow';
 import { ConstructorFootnotes } from './components/ConstructorFootnotes';
 import { ConstructorHeader } from './components/ConstructorItem';
 import { ConstructorBlocks } from './components/ConstructorBlocks';
-import '@doc-tools/transform/dist/js/yfm';
+import Layout from '../../components/navigation/containers/Layout/Layout';
 import './PageConstructor.css';
 const b = cnBlock('page-constructor');
 export const Constructor = (props) => {
@@ -28,7 +29,7 @@ export const Constructor = (props) => {
         });
     }, [props.custom]);
     const { themeValue: theme } = useContext(ThemeValueContext);
-    const { content: { blocks = [], background = {}, footnotes = [] } = {}, renderMenu, shouldRenderBlock, } = props;
+    const { content: { blocks = [], background = {}, footnotes = [] } = {}, renderMenu, shouldRenderBlock, navigation, } = props;
     const hasFootnotes = footnotes.length > 0;
     const isHeaderBlock = (block) => headerBlockTypes.includes(block.type);
     const header = blocks === null || blocks === void 0 ? void 0 : blocks.find(isHeaderBlock);
@@ -37,14 +38,15 @@ export const Constructor = (props) => {
     return (React.createElement(InnerContext.Provider, { value: context },
         React.createElement("div", { className: b() },
             React.createElement("div", { className: b('wrapper') },
-                React.createElement(BackgroundMedia, Object.assign({}, themedBackground, { className: b('background') })),
-                renderMenu && renderMenu(),
-                header && React.createElement(ConstructorHeader, { data: header }),
-                React.createElement(Grid, null,
-                    restBlocks && (React.createElement(ConstructorRow, null,
-                        React.createElement(ConstructorBlocks, { items: restBlocks, shouldRenderBlock: shouldRenderBlock }))),
-                    hasFootnotes && (React.createElement(ConstructorRow, null,
-                        React.createElement(ConstructorFootnotes, { items: footnotes }))))))));
+                themedBackground && (React.createElement(BackgroundMedia, Object.assign({}, themedBackground, { className: b('background') }))),
+                React.createElement(Layout, { navigation: navigation },
+                    renderMenu && renderMenu(),
+                    header && React.createElement(ConstructorHeader, { data: header }),
+                    React.createElement(Grid, null,
+                        restBlocks && (React.createElement(ConstructorRow, null,
+                            React.createElement(ConstructorBlocks, { items: restBlocks, shouldRenderBlock: shouldRenderBlock }))),
+                        hasFootnotes && (React.createElement(ConstructorRow, null,
+                            React.createElement(ConstructorFootnotes, { items: footnotes })))))))));
 };
 export const PageConstructor = (props) => {
     const { content: { animated = true } = {} } = props, rest = __rest(props, ["content"]);

package/build/esm/context/locationContext/locationContext.d.ts

@@ -16,5 +16,6 @@ export declare type LocationContextProps = {
     pathname?: string;
     hostname?: string;
     Link?: RouterLink;
+    asPath?: string;
 };
 export declare const LocationContext: React.Context<LocationContextProps>;

package/build/esm/icons/NavigationArrow.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const NavigationArrow: React.FC<React.SVGProps<SVGSVGElement>>;

package/build/esm/icons/NavigationArrow.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { a11yHiddenSvgProps } from '../utils/svg';
+export const NavigationArrow = (props) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "9", height: "9", fill: "none", viewBox: "0 0 9 9" }, a11yHiddenSvgProps, props),
+    React.createElement("path", { d: "M3 1H8M8 1V6M8 1L1 8", stroke: "currentColor", strokeOpacity: "0.7", strokeWidth: "1.2", strokeLinecap: "square" })));

package/build/esm/icons/NavigationClose.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const NavigationClose: React.FC<React.SVGProps<SVGSVGElement>>;

package/build/esm/icons/NavigationClose.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { a11yHiddenSvgProps } from '../utils/svg';
+export const NavigationClose = (props) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "36", height: "36", fill: "none" }, a11yHiddenSvgProps, props),
+    React.createElement("path", { d: "M26 10 10 26m16 0L10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })));

package/build/esm/icons/NavigationOpen.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const NavigationOpen: React.FC<React.SVGProps<SVGSVGElement>>;

package/build/esm/icons/NavigationOpen.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { a11yHiddenSvgProps } from '../utils/svg';
+export const NavigationOpen = (props) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "36", height: "36", fill: "none" }, a11yHiddenSvgProps, props),
+    React.createElement("rect", { x: "8", y: "10", width: "20", height: "2", rx: "1", fill: "currentColor" }),
+    React.createElement("rect", { x: "8", y: "17", width: "20", height: "2", rx: "1", fill: "currentColor" }),
+    React.createElement("rect", { x: "8", y: "24", width: "20", height: "2", rx: "1", fill: "currentColor" })));

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

@@ -6,3 +6,6 @@ export * from './Github';
 export * from './NavigationChevron';
 export * from './PlayVideo';
 export * from './PreviewClose';
+export * from './NavigationClose';
+export * from './NavigationOpen';
+export * from './NavigationArrow';

package/build/esm/icons/index.js

@@ -6,3 +6,6 @@ export * from './Github';
 export * from './NavigationChevron';
 export * from './PlayVideo';
 export * from './PreviewClose';
+export * from './NavigationClose';
+export * from './NavigationOpen';
+export * from './NavigationArrow';

package/build/esm/models/constructor-items/blocks.d.ts

@@ -114,14 +114,12 @@ export interface SimpleBlockProps extends Animatable, Childable {
     title: TitleBaseProps;
     description: string;
 }
-export interface ExtendedFeaturesItem {
-    title?: string;
-    text?: string;
+export interface ExtendedFeaturesItem extends Omit<ContentBlockProps, 'theme' | 'centered' | 'colSizes' | 'size' | 'title'> {
+    title: string;
     label?: string;
     icon?: ThemedImage;
     /** @deprecated **/
     link?: LinkProps;
-    links?: LinkProps[];
 }
 export interface ExtendedFeaturesProps extends Animatable {
     items: ExtendedFeaturesItem[];

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

@@ -0,0 +1,62 @@
+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 declare type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
+export declare type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
+export interface NavigationLogo {
+    icon: ImageProps;
+    text?: string;
+    url?: 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/build/esm/models/navigation.js

@@ -0,0 +1,7 @@
+export var NavigationItemType;
+(function (NavigationItemType) {
+    NavigationItemType["Link"] = "link";
+    NavigationItemType["Dropdown"] = "dropdown";
+    NavigationItemType["Button"] = "button";
+    NavigationItemType["Social"] = "social";
+})(NavigationItemType || (NavigationItemType = {}));

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

@@ -43,7 +43,6 @@ export declare function generateDefaultSchema(config?: SchemaCustomConfig): {
             properties: {
                 title: {
                     type: string;
-                    content: string;
                 };
             };
         };
@@ -122,7 +121,6 @@ export declare function generateDefaultSchema(config?: SchemaCustomConfig): {
                                     };
                                     text: {
                                         type: string;
-                                        content: string;
                                     };
                                 };
                             };

package/build/esm/schema/validators/common.d.ts

@@ -83,7 +83,6 @@ export declare const PlayIconProps: {
         };
         text: {
             type: string;
-            content: string;
         };
     };
 };
@@ -142,7 +141,6 @@ export declare const VideoProps: {
                 };
                 text: {
                     type: string;
-                    content: string;
                 };
             };
         };
@@ -266,7 +264,6 @@ export declare const BackgroundProps: {
                         };
                         text: {
                             type: string;
-                            content: string;
                         };
                     };
                 };
@@ -298,7 +295,6 @@ export declare const LinkProps: {
     properties: {
         text: {
             type: string;
-            content: string;
         };
         url: {
             type: string;
@@ -332,7 +328,6 @@ export declare const FileLinkProps: {
         };
         text: {
             type: string;
-            content: string;
         };
         type: {
             type: string;
@@ -354,11 +349,9 @@ export declare const authorItem: {
     properties: {
         firstName: {
             type: string;
-            content: string;
         };
         secondName: {
             type: string;
-            content: string;
         };
         avatar: {
             type: string;
@@ -366,14 +359,12 @@ export declare const authorItem: {
         };
         description: {
             type: string;
-            content: string;
         };
     };
 };
 export declare const ButtonProps: {
     text: {
         type: string;
-        content: string;
     };
     url: {
         type: string;
@@ -409,7 +400,6 @@ export declare const ButtonProps: {
                 };
                 alt: {
                     type: string;
-                    content: string;
                 };
             };
         })[];
@@ -510,7 +500,6 @@ export declare const MenuProps: {
     properties: {
         title: {
             type: string;
-            content: string;
         };
     };
 };
@@ -529,7 +518,6 @@ export declare const AnchorProps: {
     properties: {
         text: {
             type: string;
-            content: string;
         };
         url: {
             type: string;
@@ -544,7 +532,6 @@ export declare const BlockBaseProps: {
         properties: {
             text: {
                 type: string;
-                content: string;
             };
             url: {
                 type: string;
@@ -568,7 +555,6 @@ export declare const TitleProps: {
     properties: {
         text: {
             type: string;
-            content: string;
         };
         textSize: {
             type: string;
@@ -588,7 +574,6 @@ export declare const ButtonBlock: {
     properties: {
         text: {
             type: string;
-            content: string;
         };
         url: {
             type: string;
@@ -624,7 +609,6 @@ export declare const ButtonBlock: {
                     };
                     alt: {
                         type: string;
-                        content: string;
                     };
                 };
             })[];
@@ -822,7 +806,6 @@ export declare const MediaProps: {
                     };
                     text: {
                         type: string;
-                        content: string;
                     };
                 };
             };

package/build/esm/schema/validators/common.js

@@ -76,7 +76,6 @@ export const PlayIconProps = {
         },
         text: {
             type: 'string',
-            content: 'string',
         },
     },
 };
@@ -160,7 +159,6 @@ export const LinkProps = {
     required: ['text', 'url'],
     properties: Object.assign(Object.assign({}, BaseProps), { text: {
             type: 'string',
-            content: 'string',
         }, url: {
             type: 'string',
         }, arrow: {
@@ -186,7 +184,6 @@ export const FileLinkProps = {
         },
         text: {
             type: 'string',
-            content: 'string',
         },
         type: {
             type: 'string',
@@ -208,11 +205,9 @@ export const authorItem = {
     properties: {
         firstName: {
             type: 'string',
-            content: 'string',
         },
         secondName: {
             type: 'string',
-            content: 'string',
         },
         avatar: {
             type: 'string',
@@ -220,14 +215,12 @@ export const authorItem = {
         },
         description: {
             type: 'string',
-            content: 'yfm',
         },
     },
 };
 export const ButtonProps = {
     text: {
         type: 'string',
-        content: 'string',
     },
     url: {
         type: 'string',
@@ -300,7 +293,6 @@ export const ButtonProps = {
                     },
                     alt: {
                         type: 'string',
-                        content: 'string',
                     },
                 },
             },
@@ -340,7 +332,6 @@ export const MenuProps = {
     properties: {
         title: {
             type: 'string',
-            content: 'string',
         },
     },
 };
@@ -364,7 +355,6 @@ export const AnchorProps = {
     properties: {
         text: {
             type: 'string',
-            content: 'string',
         },
         url: {
             type: 'string',
@@ -384,7 +374,6 @@ export const TitleProps = {
     properties: {
         text: {
             type: 'string',
-            content: 'string',
         },
         textSize: {
             type: 'string',

package/build/esm/sub-blocks/BackgroundCard/schema.d.ts

@@ -18,7 +18,6 @@ export declare const BackgroundCard: {
                         };
                         alt: {
                             type: string;
-                            content: string;
                         };
                         disableCompress: {
                             type: string;
@@ -46,7 +45,6 @@ export declare const BackgroundCard: {
                     properties: {
                         text: {
                             type: string;
-                            content: string;
                         };
                         textSize: {
                             type: string;
@@ -61,12 +59,10 @@ export declare const BackgroundCard: {
                     };
                 } | {
                     type: string;
-                    content: string;
                 })[];
             };
             text: {
                 type: string;
-                content: string;
             };
             theme: {
                 type: string;
@@ -74,7 +70,6 @@ export declare const BackgroundCard: {
             };
             additionalInfo: {
                 type: string;
-                content: string;
             };
             links: {
                 type: string;

package/build/esm/sub-blocks/BasicCard/schema.d.ts

@@ -27,7 +27,6 @@ export declare const BasicCard: {
                     properties: {
                         text: {
                             type: string;
-                            content: string;
                         };
                         textSize: {
                             type: string;
@@ -42,16 +41,13 @@ export declare const BasicCard: {
                     };
                 } | {
                     type: string;
-                    content: string;
                 })[];
             };
             text: {
                 type: string;
-                content: string;
             };
             additionalInfo: {
                 type: string;
-                content: string;
             };
             links: {
                 type: string;

package/build/esm/sub-blocks/CardWithImage/schema.d.ts

@@ -13,7 +13,6 @@ export declare const CardWithImageItem: {
                 properties: {
                     text: {
                         type: string;
-                        content: string;
                     };
                     textSize: {
                         type: string;
@@ -28,16 +27,13 @@ export declare const CardWithImageItem: {
                 };
             } | {
                 type: string;
-                content: string;
             })[];
         };
         description: {
             type: string;
-            content: string;
         };
         additionalInfo: {
             type: string;
-            content: string;
         };
         disableCompress: {
             type: string;
@@ -90,7 +86,6 @@ export declare const CardWithImage: {
                     properties: {
                         text: {
                             type: string;
-                            content: string;
                         };
                         textSize: {
                             type: string;
@@ -105,16 +100,13 @@ export declare const CardWithImage: {
                     };
                 } | {
                     type: string;
-                    content: string;
                 })[];
             };
             description: {
                 type: string;
-                content: string;
             };
             additionalInfo: {
                 type: string;
-                content: string;
             };
             disableCompress: {
                 type: string;