@gravity-ui/page-constructor 1.6.1 → 1.7.0-alpha.1

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

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

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

@@ -12,6 +12,7 @@ import { ConstructorRow } from './components/ConstructorRow';
 import { ConstructorFootnotes } from './components/ConstructorFootnotes';
 import { ConstructorHeader } from './components/ConstructorItem';
 import { ConstructorBlocks } from './components/ConstructorBlocks';
+import Header from '../../components/navigation/components/Header/Header';
 import '@doc-tools/transform/dist/js/yfm';
 import './PageConstructor.css';
 const b = cnBlock('page-constructor');
@@ -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, navigationData, } = 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,7 +38,8 @@ 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') })),
+                themedBackground && (React.createElement(BackgroundMedia, Object.assign({}, themedBackground, { className: b('background') }))),
+                (navigationData === null || navigationData === void 0 ? void 0 : navigationData.header) && (React.createElement(Header, { logo: navigationData === null || navigationData === void 0 ? void 0 : navigationData.logo, data: navigationData === null || navigationData === void 0 ? void 0 : navigationData.header })),
                 renderMenu && renderMenu(),
                 header && React.createElement(ConstructorHeader, { data: header }),
                 React.createElement(Grid, null,

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

@@ -118,8 +118,10 @@ export interface ExtendedFeaturesItem {
     title?: string;
     text?: string;
     label?: string;
-    icon?: string;
+    icon?: ThemedImage;
+    /** @deprecated **/
     link?: LinkProps;
+    links?: LinkProps[];
 }
 export interface ExtendedFeaturesProps extends Animatable {
     items: ExtendedFeaturesItem[];

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

@@ -0,0 +1,59 @@
+import { ButtonProps } from '../components/Button/Button';
+export declare enum NavigationItemType {
+    Link = "link",
+    Dropdown = "dropdown",
+    Button = "button",
+    Social = "social"
+}
+export interface NavigationItemBase {
+    text: string;
+    icon?: string;
+    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: string;
+    url: string;
+}
+export declare type NavigationItem = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
+export interface NavigationLogo extends Omit<NavigationItemBase, 'text'> {
+    icon: string;
+    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/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/text-transform/blocks.js

@@ -149,7 +149,12 @@ const config = {
         {
             fields: ['items'],
             transformer: typografTransformer,
-            parser: parseFeatures,
+            parser: createItemsParser(['title']),
+        },
+        {
+            fields: ['items'],
+            transformer: yfmTransformer,
+            parser: createItemsParser(['text', 'additionalInfo']),
         },
     ],
     [BlockType.PromoFeaturesBlock]: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "1.6.1",
+  "version": "1.7.0-alpha.1",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -121,5 +121,8 @@
     "*.{json,yaml,yml,md}": [
       "prettier --write"
     ]
+  },
+  "publishConfig": {
+    "tag": "alpha"
   }
 }

package/server/models/constructor-items/blocks.d.ts

@@ -118,8 +118,10 @@ export interface ExtendedFeaturesItem {
     title?: string;
     text?: string;
     label?: string;
-    icon?: string;
+    icon?: ThemedImage;
+    /** @deprecated **/
     link?: LinkProps;
+    links?: LinkProps[];
 }
 export interface ExtendedFeaturesProps extends Animatable {
     items: ExtendedFeaturesItem[];

package/server/text-transform/blocks.js

@@ -168,7 +168,12 @@ const config = {
         {
             fields: ['items'],
             transformer: typografTransformer,
-            parser: parseFeatures,
+            parser: (0, exports.createItemsParser)(['title']),
+        },
+        {
+            fields: ['items'],
+            transformer: yfmTransformer,
+            parser: (0, exports.createItemsParser)(['text', 'additionalInfo']),
         },
     ],
     [models_1.BlockType.PromoFeaturesBlock]: {

package/styles/mixins.scss

@@ -442,3 +442,41 @@ unpredictable css rules order in build */
 @mixin font-feature-settings {
     font-feature-settings: 'liga', 'kern', 'pnum' on, 'lnum' on, 'ss03' on;
 }
+
+@mixin navigation-popup {
+    z-index: 101;
+
+    display: flex;
+    flex-direction: column;
+
+    min-width: 220px;
+    padding: $indentXS;
+
+    border: 1px solid var(--yc-color-line-generic);
+    border-top-width: 0;
+    border-radius: calc(#{$borderRadius} / 2);
+    background: var(--yc-color-base-float);
+    box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
+}
+
+@mixin navigation-item {
+    color: var(--yc-color-text-primary);
+    @include reset-link-style();
+    @include islands-focus();
+
+    &:hover,
+    &_active {
+        color: var(--yc-color-text-link);
+    }
+}
+
+@mixin navigation-link() {
+    cursor: pointer;
+    @include islands-focus();
+    @include reset-link-style();
+
+    &:hover,
+    &:active {
+        color: var(--yc-color-text-link);
+    }
+}