@gravity-ui/page-constructor 1.18.0 → 1.19.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [1.19.0](https://github.com/gravity-ui/page-constructor/compare/v1.18.1...v1.19.0) (2023-02-28)
+
+
+### Features
+
+* add Map-block ([13874f7](https://github.com/gravity-ui/page-constructor/commit/13874f70edddc297c711a6e4eae7753ae04fd746))
+
+## [1.18.1](https://github.com/gravity-ui/page-constructor/compare/v1.18.0...v1.18.1) (2023-02-28)
+
+
+### Bug Fixes
+
+* add mixin for navigation item and refactor ([#179](https://github.com/gravity-ui/page-constructor/issues/179)) ([3709fcd](https://github.com/gravity-ui/page-constructor/commit/3709fcdcaa2149ed287fb9ef0250dfca1181c842))
+
 ## [1.18.0](https://github.com/gravity-ui/page-constructor/compare/v1.17.0...v1.18.0) (2023-02-28)
 
 

package/README.md

@@ -46,6 +46,7 @@ interface PageConstructorProviderProps {
   metrika?: Metrika; //Functions for sending analytics
   ssrConfig?: SSR; //A flag indicating that the code is run on the server size.
   theme?: 'light' | 'dark'; //Theme to render the page with.
+  mapsContext?: MapsContextType; //Params for map: apikey, type, scriptSrc, nonce
 }
 
 export interface PageContent extends Animatable {
@@ -211,6 +212,13 @@ import {configure, Lang} from '@gravity-ui/page-constructor';
 configure({lang: Lang.En});
 ```
 
+### Maps
+
+To use maps, put the map type, scriptSrc and apiKey in field `mapContext` in `PageConstructorProvider`.
+
+You can define environment variables for dev-mode in .env.development file within project root.
+`STORYBOOK_GMAP_API_KEY` - apiKey for google maps
+
 ## Development
 
 ```bash

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

@@ -0,0 +1,3 @@
+import { MapBlockProps } from '../../models';
+export declare const MapBlock: ({ map, ...props }: MapBlockProps) => JSX.Element;
+export default MapBlock;

package/build/cjs/blocks/Map/Map.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MapBlock = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Map_1 = tslib_1.__importDefault(require("../../components/Map/Map"));
+const MediaBase_1 = tslib_1.__importDefault(require("../../components/MediaBase/MediaBase"));
+const MapBlock = (_a) => {
+    var { map } = _a, props = tslib_1.__rest(_a, ["map"]);
+    return (react_1.default.createElement(MediaBase_1.default, Object.assign({}, props),
+        react_1.default.createElement(MediaBase_1.default.Card, null,
+            react_1.default.createElement(Map_1.default, Object.assign({}, map)))));
+};
+exports.MapBlock = MapBlock;
+exports.default = exports.MapBlock;

package/build/cjs/blocks/Map/schema.d.ts

@@ -0,0 +1,370 @@
+export declare const Map: {
+    type: string;
+    additionalProperties: boolean;
+    required: never[];
+    properties: {
+        zoom: {
+            type: string;
+        };
+        center: {
+            type: string;
+            items: {
+                type: string;
+            };
+        };
+        address: {
+            type: string;
+        };
+        id: {
+            type: string;
+        };
+        markers: {
+            type: string;
+            items: {
+                type: {
+                    required: never[];
+                    coordinate: {
+                        type: string;
+                        items: {
+                            type: string;
+                        };
+                    };
+                    address: {
+                        type: string;
+                    };
+                    label: {
+                        required: never[];
+                        iconCaption: {
+                            type: string;
+                        };
+                        iconContent: {
+                            type: string;
+                        };
+                        iconColor: {
+                            type: string;
+                        };
+                        preset: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+        };
+    };
+};
+export declare const MapBlock: {
+    'map-block': {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            map: {
+                type: string;
+                additionalProperties: boolean;
+                required: never[];
+                properties: {
+                    zoom: {
+                        type: string;
+                    };
+                    center: {
+                        type: string;
+                        items: {
+                            type: string;
+                        };
+                    };
+                    address: {
+                        type: string;
+                    };
+                    id: {
+                        type: string;
+                    };
+                    markers: {
+                        type: string;
+                        items: {
+                            type: {
+                                required: never[];
+                                coordinate: {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                    };
+                                };
+                                address: {
+                                    type: string;
+                                };
+                                label: {
+                                    required: never[];
+                                    iconCaption: {
+                                        type: string;
+                                    };
+                                    iconContent: {
+                                        type: string;
+                                    };
+                                    iconColor: {
+                                        type: string;
+                                    };
+                                    preset: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                        };
+                    };
+                };
+            };
+            description: {
+                type: string;
+                contentType: string;
+            };
+            direction: {
+                type: string;
+                enum: string[];
+            };
+            mobileDirection: {
+                type: string;
+                enum: string[];
+            };
+            largeMedia: {
+                type: string;
+            };
+            mediaOnly: {
+                type: string;
+            };
+            disableShadow: {
+                type: string;
+            };
+            button: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    text: {
+                        type: string;
+                        contentType: string;
+                    };
+                    url: {
+                        type: string;
+                    };
+                    primary: {
+                        type: string;
+                    };
+                    size: {
+                        type: string;
+                        enum: string[];
+                    };
+                    theme: {
+                        type: string;
+                        enum: string[];
+                    };
+                    img: {
+                        anyOf: ({
+                            type: string;
+                            additionalProperties?: undefined;
+                            required?: undefined;
+                            properties?: undefined;
+                        } | {
+                            type: string;
+                            additionalProperties: boolean;
+                            required: string[];
+                            properties: {
+                                data: {
+                                    type: string;
+                                };
+                                position: {
+                                    type: string;
+                                    enum: string[];
+                                };
+                                alt: {
+                                    type: string;
+                                    contentType: string;
+                                };
+                            };
+                        })[];
+                    };
+                    metrikaGoals: {
+                        anyOf: ({
+                            type: string;
+                            items?: undefined;
+                        } | {
+                            type: string;
+                            items: {
+                                type: string;
+                                additionalProperties?: undefined;
+                                required?: undefined;
+                                properties?: undefined;
+                            };
+                        } | {
+                            type: string;
+                            items: {
+                                type: string;
+                                additionalProperties: boolean;
+                                required: string[];
+                                properties: {
+                                    name: {
+                                        type: string;
+                                    };
+                                    isCrossSite: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                        })[];
+                    };
+                    pixelEvents: {
+                        type: string;
+                        items: {
+                            type: string;
+                            required: string[];
+                            additionalProperties: boolean;
+                            properties: {
+                                name: {
+                                    type: string;
+                                    enum: import("../..").PixelEventType[];
+                                };
+                                data: {};
+                            };
+                            select: {
+                                $data: string;
+                            };
+                            selectCases: {
+                                SubmitApplication: {
+                                    additionalProperties: boolean;
+                                    properties: {
+                                        name: {};
+                                    };
+                                };
+                                Contact: {
+                                    additionalProperties: boolean;
+                                    properties: {
+                                        name: {};
+                                    };
+                                };
+                                Lead: {
+                                    additionalProperties: boolean;
+                                    properties: {
+                                        name: {};
+                                        data: {
+                                            type: string;
+                                            additionalProperties: boolean;
+                                            properties: {
+                                                content_category: {
+                                                    type: string;
+                                                };
+                                                content_name: {
+                                                    type: string;
+                                                };
+                                                currency: {
+                                                    type: string;
+                                                };
+                                                value: {
+                                                    type: string;
+                                                };
+                                            };
+                                        };
+                                    };
+                                };
+                            };
+                        };
+                    };
+                    target: {
+                        type: string;
+                        enum: string[];
+                    };
+                };
+                if: {
+                    properties: {
+                        theme: {
+                            enum: string[];
+                        };
+                    };
+                };
+                then: {
+                    required: string[];
+                };
+                else: {
+                    required: string[];
+                };
+            };
+            title: {
+                oneOf: ({
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        text: {
+                            type: string;
+                            contentType: string;
+                        };
+                        textSize: {
+                            type: string;
+                            enum: string[];
+                        };
+                        url: {
+                            type: string;
+                        };
+                        resetMargin: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    contentType: string;
+                })[];
+            };
+            size: {
+                type: string;
+                enum: string[];
+            };
+            additionalInfo: {
+                type: string;
+                contentType: string;
+            };
+            links: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            buttons: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            animated: {
+                type: string;
+            };
+            anchor: {
+                type: string;
+                additionalProperties: boolean;
+                required: string[];
+                properties: {
+                    text: {
+                        type: string;
+                        contentType: string;
+                    };
+                    url: {
+                        type: string;
+                    };
+                };
+            };
+            visible: {
+                type: string;
+                enum: string[];
+            };
+            resetPaddings: {
+                type: string;
+            };
+            type: {};
+            when: {};
+        };
+    };
+};

package/build/cjs/blocks/Map/schema.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MapBlock = exports.Map = void 0;
+const common_1 = require("../../schema/validators/common");
+const schema_1 = require("../Media/schema");
+exports.Map = {
+    type: 'object',
+    additionalProperties: false,
+    required: [],
+    properties: common_1.MapProps,
+};
+exports.MapBlock = {
+    'map-block': {
+        additionalProperties: false,
+        required: ['title', 'map'],
+        properties: Object.assign(Object.assign({}, schema_1.MediaBlockBaseProps), { map: exports.Map }),
+    },
+};

package/build/cjs/blocks/Media/Media.js

@@ -4,39 +4,17 @@ exports.MediaBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../utils");
-const grid_1 = require("../../grid");
 const Media_1 = tslib_1.__importDefault(require("../../components/Media/Media"));
-const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
-const BlockHeader_1 = tslib_1.__importDefault(require("../../components/BlockHeader/BlockHeader"));
-const MediaContent_1 = tslib_1.__importDefault(require("./MediaContent"));
+const MediaBase_1 = tslib_1.__importDefault(require("../../components/MediaBase/MediaBase"));
 const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
-const b = (0, utils_1.block)('media-block');
 const MediaBlock = (props) => {
-    const { media, largeMedia, direction = 'content-media', mobileDirection = 'content-media', animated, mediaOnly, disableShadow = false } = props, mediaContentProps = tslib_1.__rest(props, ["media", "largeMedia", "direction", "mobileDirection", "animated", "mediaOnly", "disableShadow"]);
-    const { title, description } = mediaContentProps;
+    const { media } = props;
     const [play, setPlay] = (0, react_1.useState)(false);
     const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
     const mediaThemed = (0, utils_1.getThemedValue)(media, theme);
-    const mediaSizes = (0, react_1.useMemo)(() => {
-        return mediaOnly
-            ? { [grid_1.GridColumnSize.All]: 12 }
-            : { [grid_1.GridColumnSize.Md]: largeMedia ? 8 : 6, [grid_1.GridColumnSize.All]: 12 };
-    }, [mediaOnly, largeMedia]);
-    const contentSizes = (0, react_1.useMemo)(() => {
-        return { [grid_1.GridColumnSize.Md]: largeMedia ? 4 : 6, [grid_1.GridColumnSize.All]: 12 };
-    }, [largeMedia]);
-    const mediaContent = !mediaOnly && react_1.default.createElement(MediaContent_1.default, Object.assign({}, mediaContentProps));
-    return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), onScroll: () => setPlay(true), animate: animated },
-        mediaOnly && (react_1.default.createElement(BlockHeader_1.default, { className: b('header'), title: title, description: description })),
-        react_1.default.createElement(grid_1.Grid, null,
-            react_1.default.createElement(grid_1.Row, { className: b('row', {
-                    reverse: direction === 'media-content',
-                    'mobile-reverse': mobileDirection === 'media-content',
-                }) },
-                react_1.default.createElement(grid_1.Col, { className: b('content'), sizes: contentSizes }, mediaContent),
-                react_1.default.createElement(grid_1.Col, { sizes: mediaSizes },
-                    react_1.default.createElement("div", { className: b('card', { shadow: !disableShadow }) },
-                        react_1.default.createElement(Media_1.default, Object.assign({}, mediaThemed, { playVideo: play }))))))));
+    return (react_1.default.createElement(MediaBase_1.default, Object.assign({}, props, { onScroll: () => setPlay(true) }),
+        react_1.default.createElement(MediaBase_1.default.Card, null,
+            react_1.default.createElement(Media_1.default, Object.assign({}, mediaThemed, { playVideo: play })))));
 };
 exports.MediaBlock = MediaBlock;
 exports.default = exports.MediaBlock;