@gravity-ui/page-constructor 1.0.0

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

@@ -0,0 +1,223 @@
+export declare const PromoFeaturesItem: {
+    additionalProperties: boolean;
+    required: string[];
+    properties: {
+        title: {
+            type: string;
+        };
+        text: {
+            type: string;
+        };
+        theme: {
+            enum: string[];
+        };
+        media: {
+            type: string;
+            additionalProperties: boolean;
+            required: never[];
+            properties: {
+                color: {
+                    type: string;
+                };
+                image: {
+                    anyOf: ({
+                        oneOf: ({
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        } | {
+                            type: string;
+                            pattern: string;
+                        })[];
+                    } | {
+                        type: string;
+                        items: {
+                            oneOf: ({
+                                type: string;
+                                properties: {
+                                    when: {
+                                        type: string;
+                                    };
+                                };
+                            } | {
+                                type: string;
+                                pattern: string;
+                            })[];
+                        };
+                    })[];
+                };
+                video: {
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        src: {
+                            type: string;
+                            items: {
+                                type: string;
+                            };
+                        };
+                        loop: {
+                            anyOf: ({
+                                type: string;
+                                additionalProperties: boolean;
+                                required: string[];
+                                properties: {
+                                    start: {
+                                        type: string;
+                                    };
+                                    end: {
+                                        type: string;
+                                    };
+                                };
+                            } | {
+                                type: string;
+                            })[];
+                        };
+                        type: {
+                            type: string;
+                            enum: string[];
+                        };
+                        muted: {
+                            type: string;
+                        };
+                        playing: {
+                            type: string;
+                        };
+                        elapsedTime: {
+                            type: string;
+                        };
+                        playIcon: {
+                            type: string;
+                            additionalProperties: boolean;
+                            properties: {
+                                type: {
+                                    type: string;
+                                    enum: string[];
+                                };
+                                theme: {
+                                    type: string;
+                                    enum: string[];
+                                };
+                                text: {
+                                    type: string;
+                                };
+                            };
+                        };
+                        controls: {
+                            type: string;
+                            enum: string[];
+                        };
+                    };
+                };
+                youtube: {
+                    type: string;
+                };
+                parallax: {
+                    type: string;
+                };
+                height: {
+                    type: string;
+                };
+                previewImg: {
+                    type: string;
+                };
+                dataLens: {
+                    oneOf: ({
+                        type: string;
+                        additionalProperties: boolean;
+                        required: string[];
+                        properties: {
+                            id: {
+                                type: string;
+                            };
+                            theme: {
+                                type: string;
+                                enum: string[];
+                            };
+                        };
+                    } | {
+                        type: string;
+                    })[];
+                };
+            };
+        };
+    };
+};
+export declare const PromoFeaturesBlock: {
+    'promo-features-block': {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            title: {
+                oneOf: ({
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        text: {
+                            type: string;
+                        };
+                        textSize: {
+                            type: string;
+                            enum: string[];
+                        };
+                        url: {
+                            type: string;
+                        };
+                        resetMargin: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                })[];
+            };
+            description: {
+                type: string;
+            };
+            theme: {
+                enum: string[];
+            };
+            items: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            animated: {
+                type: string;
+            };
+            anchor: {
+                type: string;
+                additionalProperties: boolean;
+                required: string[];
+                properties: {
+                    text: {
+                        type: string;
+                    };
+                    url: {
+                        type: string;
+                    };
+                };
+            };
+            visible: {
+                type: string;
+                enum: string[];
+            };
+            resetPaddings: {
+                type: string;
+            };
+            type: {};
+            when: {};
+        };
+    };
+};

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PromoFeaturesBlock = exports.PromoFeaturesItem = void 0;
+const common_1 = require("../../schema/validators/common");
+const utils_1 = require("../../schema/validators/utils");
+const schema_1 = require("../Media/schema");
+exports.PromoFeaturesItem = {
+    additionalProperties: false,
+    required: ['title', 'text'],
+    properties: {
+        title: {
+            type: 'string',
+        },
+        text: {
+            type: 'string',
+        },
+        theme: {
+            enum: ['accent', 'accent-light', 'primary'],
+        },
+        media: schema_1.Media,
+    },
+};
+exports.PromoFeaturesBlock = {
+    'promo-features-block': {
+        additionalProperties: false,
+        required: ['items'],
+        properties: Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), common_1.AnimatableProps), { title: {
+                oneOf: [{ type: 'string' }, common_1.TitleProps],
+            }, description: {
+                type: 'string',
+            }, theme: {
+                enum: ['grey', 'default'],
+            }, items: (0, utils_1.filteredArray)(exports.PromoFeaturesItem) }),
+    },
+};

package/build/cjs/blocks/Questions/Questions.css

@@ -0,0 +1,61 @@
+.pc-QuestionsBlock__item-title {
+  margin: 0;
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-QuestionsBlock__title {
+  top: calc(var(--header-height) + 32px);
+  position: sticky;
+  margin-bottom: 32px;
+  margin-right: 64px;
+}
+.pc-QuestionsBlock__item {
+  padding-bottom: 32px;
+  border-bottom: 1px solid var(--yc-color-line-generic);
+}
+.pc-QuestionsBlock__item + .pc-QuestionsBlock__item {
+  padding-top: 32px;
+}
+.pc-QuestionsBlock__item-title {
+  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);
+  position: relative;
+  padding-right: 24px;
+  cursor: pointer;
+}
+.pc-QuestionsBlock__item-title a {
+  outline: none;
+  color: var(--yc-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+.utilityfocus .pc-QuestionsBlock__item-title a:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-QuestionsBlock__item-title a:hover, .pc-QuestionsBlock__item-title a:active {
+  --pc-text-header-color: var(--yc-color-text-link-hover);
+  color: var(--yc-color-text-link-hover);
+}
+.pc-QuestionsBlock__text {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+  margin-top: 12px;
+}
+.pc-QuestionsBlock__arrow {
+  position: absolute;
+  right: 0;
+  top: 0;
+  color: var(--yc-color-text-info);
+}
+.pc-QuestionsBlock__link {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+}
+@media (max-width: 769px) {
+  .pc-QuestionsBlock__title {
+    margin-right: 0;
+  }
+}

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

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

package/build/cjs/blocks/Questions/Questions.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const utils_1 = require("../../utils");
+const Link_1 = (0, tslib_1.__importDefault)(require("../../components/Link/Link"));
+const components_1 = require("../../components");
+const grid_1 = require("../../grid");
+const sub_blocks_1 = require("../../sub-blocks");
+const b = (0, utils_1.block)('QuestionsBlock');
+const QuestionsBlock = (props) => {
+    const { title, text, additionalInfo, links, buttons, items } = props;
+    const [opened, setOpened] = (0, react_1.useState)([0]);
+    const toggleItem = (index) => {
+        let newState;
+        if (opened.includes(index)) {
+            newState = opened.filter((intemIndex) => intemIndex !== index);
+        }
+        else {
+            newState = [...opened, index];
+        }
+        setOpened(newState);
+    };
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement(grid_1.Row, null,
+            react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 4 } },
+                react_1.default.createElement("div", { className: b('title') },
+                    react_1.default.createElement(sub_blocks_1.Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 } }))),
+            react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 8 } }, items.map(({ title: itemTitle, text: itemText, link, listStyle = 'dash' }, index) => {
+                const isOpened = opened.includes(index);
+                return (react_1.default.createElement("div", { key: itemTitle, className: b('item') },
+                    react_1.default.createElement("h4", { className: b('item-title'), onClick: () => toggleItem(index) },
+                        react_1.default.createElement(components_1.HTML, null, itemTitle),
+                        react_1.default.createElement(components_1.ToggleArrow, { open: isOpened, size: 16, type: 'vertical', iconType: "navigation", className: b('arrow') })),
+                    react_1.default.createElement(components_1.Foldable, { isOpened: isOpened },
+                        react_1.default.createElement("div", { className: b('text') },
+                            react_1.default.createElement(components_1.YFMWrapper, { content: itemText, modifiers: {
+                                    constructor: true,
+                                    constructorListStyle: true,
+                                    constructorListStyleDash: listStyle === 'dash',
+                                } }),
+                            link && react_1.default.createElement(Link_1.default, Object.assign({}, link, { className: b('link') }))))));
+            })))));
+};
+exports.default = QuestionsBlock;

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

@@ -0,0 +1,93 @@
+export declare const QuestionsBlock: {
+    'questions-block': {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            items: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            title: {
+                oneOf: ({
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        text: {
+                            type: string;
+                        };
+                        textSize: {
+                            type: string;
+                            enum: string[];
+                        };
+                        url: {
+                            type: string;
+                        };
+                        resetMargin: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                })[];
+            };
+            text: {
+                type: string;
+            };
+            additionalInfo: {
+                type: string;
+            };
+            links: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            buttons: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            anchor: {
+                type: string;
+                additionalProperties: boolean;
+                required: string[];
+                properties: {
+                    text: {
+                        type: string;
+                    };
+                    url: {
+                        type: string;
+                    };
+                };
+            };
+            visible: {
+                type: string;
+                enum: string[];
+            };
+            resetPaddings: {
+                type: string;
+            };
+            type: {};
+            when: {};
+        };
+    };
+};

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuestionsBlock = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
+const common_1 = require("../../schema/validators/common");
+const utils_1 = require("../../schema/validators/utils");
+const schema_1 = require("../../sub-blocks/Content/schema");
+const QuestionsBlockContentProps = lodash_1.default.omit(schema_1.ContentBase, ['size', 'theme']);
+exports.QuestionsBlock = {
+    'questions-block': {
+        additionalProperties: false,
+        required: ['title', 'items'],
+        properties: Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), QuestionsBlockContentProps), { items: (0, utils_1.filteredArray)({
+                type: 'object',
+                required: ['title', 'text'],
+                properties: {
+                    title: {
+                        type: 'string',
+                    },
+                    text: {
+                        type: 'string',
+                    },
+                    link: common_1.LinkProps,
+                    listStyle: {
+                        type: 'string',
+                        enum: ['dash', 'disk'],
+                    },
+                },
+            }) }),
+    },
+};

package/build/cjs/blocks/Security/Security.css

@@ -0,0 +1,142 @@
+.pc-SecurityBlock__title {
+  margin: 0;
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-SecurityBlock_theme_dark {
+  color: var(--yc-color-text-light-primary);
+}
+.pc-SecurityBlock_theme_dark h1,
+.pc-SecurityBlock_theme_dark h2,
+.pc-SecurityBlock_theme_dark h3,
+.pc-SecurityBlock_theme_dark h4,
+.pc-SecurityBlock_theme_dark h5,
+.pc-SecurityBlock_theme_dark h6,
+.pc-SecurityBlock_theme_dark .yfm {
+  color: var(--yc-color-text-light-primary);
+}
+.pc-SecurityBlock_theme_light .pc-SecurityBlock__background {
+  background-color: var(--yc-color-base-background);
+}
+.pc-SecurityBlock_theme_light .pc-SecurityBlock__content {
+  padding: 0;
+}
+.pc-SecurityBlock_theme_light .pc-SecurityBlock__point-icon,
+.pc-SecurityBlock_theme_light .pc-SecurityBlock__point-text {
+  color: var(--yc-color-text-primary);
+}
+.pc-SecurityBlock__title {
+  font-size: var(--yc-text-display-2-font-size);
+  line-height: var(--yc-text-display-2-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--yc-text-accent-font-weight);
+}
+@media (max-width: 576px) {
+  .pc-SecurityBlock__title {
+    font-size: var(--yc-text-display-1-font-size);
+    line-height: var(--yc-text-display-1-line-height);
+  }
+}
+.pc-SecurityBlock__background {
+  background-color: var(--yc-color-promo-base-asphalt);
+}
+.pc-SecurityBlock__content {
+  padding: 96px 0 128px;
+}
+.pc-SecurityBlock__points {
+  padding-top: 20px;
+}
+.pc-SecurityBlock__point-icon {
+  width: 48px;
+  height: 48px;
+}
+.pc-SecurityBlock__point-text {
+  color: var(--yc-color-text-light-primary);
+}
+.pc-SecurityBlock__point-text a {
+  outline: none;
+  color: var(--yc-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+.utilityfocus .pc-SecurityBlock__point-text a:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-SecurityBlock__point-text a:hover, .pc-SecurityBlock__point-text a:active {
+  --pc-text-header-color: var(--yc-color-text-link-hover);
+  color: var(--yc-color-text-link-hover);
+}
+.pc-SecurityBlock__point-text, .pc-SecurityBlock__point-link {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+  margin-top: 8px;
+}
+.pc-SecurityBlock__media {
+  margin-top: 48px;
+  border-radius: var(--pc-border-radius);
+  overflow: hidden;
+}
+@media (max-width: 577px) {
+  .pc-SecurityBlock__content {
+    padding: 64px 0;
+  }
+  .pc-SecurityBlock__point + .pc-SecurityBlock__point {
+    margin-top: 20px;
+  }
+}
+@media (min-width: 769px) {
+  .pc-SecurityBlock.pc-AnimateBlock .pc-SecurityBlock__point, .pc-AnimateBlock .pc-SecurityBlock .pc-SecurityBlock__point {
+    position: relative;
+    top: 100px;
+    opacity: 0;
+  }
+  .pc-SecurityBlock.pc-AnimateBlock.animate .pc-SecurityBlock__point, .pc-AnimateBlock .pc-SecurityBlock.animate .pc-SecurityBlock__point {
+    top: 0;
+    opacity: 1;
+    transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+  .pc-SecurityBlock.pc-AnimateBlock.animate .pc-SecurityBlock__point:nth-child(0), .pc-AnimateBlock .pc-SecurityBlock.animate .pc-SecurityBlock__point:nth-child(0) {
+    transition-delay: 0s;
+  }
+  .pc-SecurityBlock.pc-AnimateBlock.animate .pc-SecurityBlock__point:nth-child(1), .pc-AnimateBlock .pc-SecurityBlock.animate .pc-SecurityBlock__point:nth-child(1) {
+    transition-delay: 0.1s;
+  }
+  .pc-SecurityBlock.pc-AnimateBlock.animate .pc-SecurityBlock__point:nth-child(2), .pc-AnimateBlock .pc-SecurityBlock.animate .pc-SecurityBlock__point:nth-child(2) {
+    transition-delay: 0.2s;
+  }
+  .pc-SecurityBlock.pc-AnimateBlock.animate .pc-SecurityBlock__point:nth-child(3), .pc-AnimateBlock .pc-SecurityBlock.animate .pc-SecurityBlock__point:nth-child(3) {
+    transition-delay: 0.3s;
+  }
+  .pc-SecurityBlock.pc-AnimateBlock.animate .pc-SecurityBlock__point:nth-child(4), .pc-AnimateBlock .pc-SecurityBlock.animate .pc-SecurityBlock__point:nth-child(4) {
+    transition-delay: 0.4s;
+  }
+  .pc-SecurityBlock.pc-AnimateBlock.animate .pc-SecurityBlock__point:nth-child(5), .pc-AnimateBlock .pc-SecurityBlock.animate .pc-SecurityBlock__point:nth-child(5) {
+    transition-delay: 0.5s;
+  }
+  .pc-SecurityBlock.pc-AnimateBlock.animate .pc-SecurityBlock__point:nth-child(6), .pc-AnimateBlock .pc-SecurityBlock.animate .pc-SecurityBlock__point:nth-child(6) {
+    transition-delay: 0.6s;
+  }
+  .pc-SecurityBlock.pc-AnimateBlock.animate .pc-SecurityBlock__point:nth-child(7), .pc-AnimateBlock .pc-SecurityBlock.animate .pc-SecurityBlock__point:nth-child(7) {
+    transition-delay: 0.7s;
+  }
+  .pc-SecurityBlock.pc-AnimateBlock.animate .pc-SecurityBlock__point:nth-child(8), .pc-AnimateBlock .pc-SecurityBlock.animate .pc-SecurityBlock__point:nth-child(8) {
+    transition-delay: 0.8s;
+  }
+  .pc-SecurityBlock.pc-AnimateBlock.animate .pc-SecurityBlock__point:nth-child(9), .pc-AnimateBlock .pc-SecurityBlock.animate .pc-SecurityBlock__point:nth-child(9) {
+    transition-delay: 0.9s;
+  }
+}
+@media (min-width: 769px) {
+  .pc-SecurityBlock.pc-AnimateBlock .pc-SecurityBlock__media, .pc-AnimateBlock .pc-SecurityBlock .pc-SecurityBlock__media {
+    position: relative;
+    top: 100px;
+    opacity: 0;
+  }
+  .pc-SecurityBlock.pc-AnimateBlock.animate .pc-SecurityBlock__media, .pc-AnimateBlock .pc-SecurityBlock.animate .pc-SecurityBlock__media {
+    top: 0;
+    opacity: 1;
+    transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-delay: 0.5s;
+  }
+}

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

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

package/build/cjs/blocks/Security/Security.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SecurityBlock = void 0;
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const utils_1 = require("../../utils");
+const components_1 = require("../../components");
+const grid_1 = require("../../grid");
+const b = (0, utils_1.block)('SecurityBlock');
+const SecurityBlock = (props) => {
+    const { backgroundColor, theme = 'dark', title, points, media, animated } = props;
+    return (react_1.default.createElement(components_1.AnimateBlock, { className: b({ theme }), offset: 200, animate: animated },
+        react_1.default.createElement("div", { className: b('content') },
+            react_1.default.createElement(components_1.FullWidthBackground, { className: b('background'), style: { backgroundColor } }),
+            react_1.default.createElement(grid_1.Grid, null,
+                react_1.default.createElement(grid_1.Row, null,
+                    react_1.default.createElement(grid_1.Col, null,
+                        react_1.default.createElement("h2", { className: b('title') }, title))),
+                points && (react_1.default.createElement(grid_1.Row, { className: b('points') }, points.map(({ text, link, img }, index) => (react_1.default.createElement(grid_1.Col, { key: index, className: b('point'), sizes: { sm: 4, all: 12 } },
+                    react_1.default.createElement("img", { className: b('point-icon'), src: img }),
+                    react_1.default.createElement(components_1.HTML, { className: b('point-text'), block: true }, text),
+                    link && (react_1.default.createElement(components_1.Link, { className: b('point-link'), text: link.text, url: link.url, theme: 'normal', arrow: true }))))))),
+                media && (react_1.default.createElement(grid_1.Row, { className: b('media') },
+                    react_1.default.createElement(grid_1.Col, null,
+                        react_1.default.createElement(components_1.Media, Object.assign({ className: b('media') }, media)))))))));
+};
+exports.SecurityBlock = SecurityBlock;
+exports.default = exports.SecurityBlock;