@gravity-ui/page-constructor 1.0.0

package/build/esm/blocks/ExtendedFeatures/ExtendedFeatures.css

@@ -0,0 +1,125 @@
+.pc-ExtendedFeaturesBlock__item-title {
+  margin: 0;
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-ExtendedFeaturesBlock__items {
+  margin-top: -32px;
+}
+.pc-ExtendedFeaturesBlock__header + .pc-ExtendedFeaturesBlock__items {
+  margin-top: 0;
+}
+.pc-ExtendedFeaturesBlock__item {
+  margin-top: 32px;
+  padding-right: 32px;
+}
+.pc-ExtendedFeaturesBlock__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);
+  display: flex;
+  position: relative;
+  margin-bottom: 8px;
+}
+.pc-ExtendedFeaturesBlock__item-title a {
+  outline: none;
+  color: var(--yc-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+.utilityfocus .pc-ExtendedFeaturesBlock__item-title a:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-ExtendedFeaturesBlock__item-title a:hover, .pc-ExtendedFeaturesBlock__item-title a:active {
+  --pc-text-header-color: var(--yc-color-text-link-hover);
+  color: var(--yc-color-text-link-hover);
+}
+.pc-ExtendedFeaturesBlock__item-label {
+  font-size: var(--yc-text-caption-2-font-size);
+  line-height: var(--yc-text-caption-2-line-height);
+  position: relative;
+  top: 5px;
+  height: 16px;
+  margin-left: 8px;
+  padding: 0 5px;
+  color: var(--yc-color-base-background);
+  background-color: var(--yc-my-color-brand-normal);
+  border-radius: 3px;
+}
+.pc-ExtendedFeaturesBlock__item-text, .pc-ExtendedFeaturesBlock__item-link {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+}
+.pc-ExtendedFeaturesBlock__item-text a {
+  outline: none;
+  color: var(--yc-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+.utilityfocus .pc-ExtendedFeaturesBlock__item-text a:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-ExtendedFeaturesBlock__item-text a:hover, .pc-ExtendedFeaturesBlock__item-text a:active {
+  --pc-text-header-color: var(--yc-color-text-link-hover);
+  color: var(--yc-color-text-link-hover);
+}
+.pc-ExtendedFeaturesBlock__item-link {
+  margin-top: 8px;
+  color: var(--yc-color-text-link);
+}
+.pc-ExtendedFeaturesBlock__icon {
+  width: 32px;
+  height: 32px;
+  background-size: cover;
+  display: block;
+  margin-bottom: 8px;
+}
+@media (max-width: 577px) {
+  .pc-ExtendedFeaturesBlock__item {
+    margin-top: 32px;
+  }
+}
+@media (min-width: 769px) {
+  .pc-ExtendedFeaturesBlock.pc-AnimateBlock .pc-ExtendedFeaturesBlock__item, .pc-AnimateBlock .pc-ExtendedFeaturesBlock .pc-ExtendedFeaturesBlock__item {
+    position: relative;
+    top: 100px;
+    opacity: 0;
+  }
+  .pc-ExtendedFeaturesBlock.pc-AnimateBlock.animate .pc-ExtendedFeaturesBlock__item, .pc-AnimateBlock .pc-ExtendedFeaturesBlock.animate .pc-ExtendedFeaturesBlock__item {
+    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-ExtendedFeaturesBlock.pc-AnimateBlock.animate .pc-ExtendedFeaturesBlock__item:nth-child(0), .pc-AnimateBlock .pc-ExtendedFeaturesBlock.animate .pc-ExtendedFeaturesBlock__item:nth-child(0) {
+    transition-delay: 0s;
+  }
+  .pc-ExtendedFeaturesBlock.pc-AnimateBlock.animate .pc-ExtendedFeaturesBlock__item:nth-child(1), .pc-AnimateBlock .pc-ExtendedFeaturesBlock.animate .pc-ExtendedFeaturesBlock__item:nth-child(1) {
+    transition-delay: 0.1s;
+  }
+  .pc-ExtendedFeaturesBlock.pc-AnimateBlock.animate .pc-ExtendedFeaturesBlock__item:nth-child(2), .pc-AnimateBlock .pc-ExtendedFeaturesBlock.animate .pc-ExtendedFeaturesBlock__item:nth-child(2) {
+    transition-delay: 0.2s;
+  }
+  .pc-ExtendedFeaturesBlock.pc-AnimateBlock.animate .pc-ExtendedFeaturesBlock__item:nth-child(3), .pc-AnimateBlock .pc-ExtendedFeaturesBlock.animate .pc-ExtendedFeaturesBlock__item:nth-child(3) {
+    transition-delay: 0.3s;
+  }
+  .pc-ExtendedFeaturesBlock.pc-AnimateBlock.animate .pc-ExtendedFeaturesBlock__item:nth-child(4), .pc-AnimateBlock .pc-ExtendedFeaturesBlock.animate .pc-ExtendedFeaturesBlock__item:nth-child(4) {
+    transition-delay: 0.4s;
+  }
+  .pc-ExtendedFeaturesBlock.pc-AnimateBlock.animate .pc-ExtendedFeaturesBlock__item:nth-child(5), .pc-AnimateBlock .pc-ExtendedFeaturesBlock.animate .pc-ExtendedFeaturesBlock__item:nth-child(5) {
+    transition-delay: 0.5s;
+  }
+  .pc-ExtendedFeaturesBlock.pc-AnimateBlock.animate .pc-ExtendedFeaturesBlock__item:nth-child(6), .pc-AnimateBlock .pc-ExtendedFeaturesBlock.animate .pc-ExtendedFeaturesBlock__item:nth-child(6) {
+    transition-delay: 0.6s;
+  }
+  .pc-ExtendedFeaturesBlock.pc-AnimateBlock.animate .pc-ExtendedFeaturesBlock__item:nth-child(7), .pc-AnimateBlock .pc-ExtendedFeaturesBlock.animate .pc-ExtendedFeaturesBlock__item:nth-child(7) {
+    transition-delay: 0.7s;
+  }
+  .pc-ExtendedFeaturesBlock.pc-AnimateBlock.animate .pc-ExtendedFeaturesBlock__item:nth-child(8), .pc-AnimateBlock .pc-ExtendedFeaturesBlock.animate .pc-ExtendedFeaturesBlock__item:nth-child(8) {
+    transition-delay: 0.8s;
+  }
+  .pc-ExtendedFeaturesBlock.pc-AnimateBlock.animate .pc-ExtendedFeaturesBlock__item:nth-child(9), .pc-AnimateBlock .pc-ExtendedFeaturesBlock.animate .pc-ExtendedFeaturesBlock__item:nth-child(9) {
+    transition-delay: 0.9s;
+  }
+}

package/build/esm/blocks/ExtendedFeatures/ExtendedFeatures.d.ts

@@ -0,0 +1,4 @@
+import { ExtendedFeaturesProps } from '../../models';
+import './ExtendedFeatures.css';
+export declare const ExtendedFeaturesBlock: ({ title, description, items, colSizes, animated, }: ExtendedFeaturesProps) => JSX.Element;
+export default ExtendedFeaturesBlock;

package/build/esm/blocks/ExtendedFeatures/ExtendedFeatures.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { block } from '../../utils';
+import { Row, Col } from '../../grid';
+import { Link, HTML, AnimateBlock, BlockHeader } from '../../components/';
+import './ExtendedFeatures.css';
+const b = block('ExtendedFeaturesBlock');
+const DEFAULT_SIZES = {
+    all: 12,
+    sm: 6,
+    md: 4,
+};
+export const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DEFAULT_SIZES, animated, }) => (React.createElement(AnimateBlock, { className: b(), animate: animated },
+    React.createElement(BlockHeader, { title: title, description: description, className: b('header') }),
+    React.createElement("div", { className: b('items') },
+        React.createElement(Row, null, items.map(({ title: itemTitle, text, link, label, icon }) => (React.createElement(Col, { className: b('item'), key: text || itemTitle, sizes: colSizes },
+            icon && React.createElement("img", { src: icon, className: b('icon') }),
+            itemTitle && (React.createElement("h5", { className: b('item-title', { 'has-label': Boolean(label) }) },
+                React.createElement(HTML, null, itemTitle),
+                label && React.createElement("div", { className: b('item-label') }, label))),
+            text && (React.createElement("div", { className: b('item-text') },
+                React.createElement(HTML, null, text))),
+            link && React.createElement(Link, Object.assign({ className: b('item-link') }, link)))))))));
+export default ExtendedFeaturesBlock;

package/build/esm/blocks/ExtendedFeatures/schema.d.ts

@@ -0,0 +1,125 @@
+export declare const ExtendedFeaturesItem: {
+    additionalProperties: boolean;
+    required: never[];
+    properties: {
+        title: {
+            type: string;
+        };
+        text: {
+            type: string;
+        };
+        label: {
+            type: string;
+            enum: string[];
+        };
+        link: {
+            type: string;
+            additionalProperties: boolean;
+            required: string[];
+            properties: {
+                text: {
+                    type: string;
+                };
+                url: {
+                    type: string;
+                };
+                arrow: {
+                    type: string;
+                };
+                theme: {
+                    type: string;
+                    enum: string[];
+                };
+                textSize: {
+                    type: string;
+                    enum: string[];
+                };
+                target: {
+                    type: string;
+                    enum: string[];
+                };
+                type: {};
+                when: {};
+            };
+        };
+        icon: {
+            type: string;
+        };
+    };
+};
+export declare const ExtendedFeaturesBlock: {
+    'extended-features-block': {
+        additionalProperties: boolean;
+        required: never[];
+        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;
+            };
+            items: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            colSizes: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {};
+            };
+            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/esm/blocks/ExtendedFeatures/schema.js

@@ -0,0 +1,33 @@
+import { AnimatableProps, containerSizesObject, LinkProps, BlockBaseProps, TitleProps, } from '../../schema/validators/common';
+import { filteredArray } from '../../schema/validators/utils';
+export const ExtendedFeaturesItem = {
+    additionalProperties: false,
+    required: [],
+    properties: {
+        title: {
+            type: 'string',
+        },
+        text: {
+            type: 'string',
+        },
+        label: {
+            type: 'string',
+            enum: ['New', 'Preview'],
+        },
+        link: LinkProps,
+        icon: {
+            type: 'string',
+        },
+    },
+};
+export const ExtendedFeaturesBlock = {
+    'extended-features-block': {
+        additionalProperties: false,
+        required: [],
+        properties: Object.assign(Object.assign(Object.assign({}, BlockBaseProps), AnimatableProps), { title: {
+                oneOf: [{ type: 'string' }, TitleProps],
+            }, description: {
+                type: 'string',
+            }, items: filteredArray(ExtendedFeaturesItem), colSizes: containerSizesObject }),
+    },
+};

package/build/esm/blocks/Header/Header.css

@@ -0,0 +1,202 @@
+.pc-header-block__title {
+  margin: 0;
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-header-block {
+  position: relative;
+  margin: 16px 0;
+}
+.pc-header-block_full-width {
+  padding: 16px 0;
+  margin: 0 0 16px;
+}
+.pc-header-block__content-wrapper {
+  margin: 0 8px;
+  height: 100%;
+}
+.pc-header-block__content {
+  position: relative;
+  height: 100%;
+}
+.pc-header-block__content_theme_dark .pc-header-block__title,
+.pc-header-block__content_theme_dark .pc-header-block__description .yfm,
+.pc-header-block__content_theme_dark .pc-header-block__description .yfm > * {
+  color: var(--yc-color-text-light-primary);
+}
+.pc-header-block__content_vertical-offset {
+  margin: 16px 0;
+}
+.pc-header-block__content_vertical-offset_s {
+  padding: 48px 0;
+}
+.pc-header-block__content_vertical-offset_m {
+  padding: calc(96px - 16px) 0;
+}
+.pc-header-block__content_vertical-offset_l {
+  padding: calc(128px - 16px) 0;
+}
+.pc-header-block__content_vertical-offset_xl {
+  padding: calc(160px - 16px) 0;
+}
+.pc-header-block__content_offset_large {
+  padding: calc(128px - 16px) 0 16px;
+}
+.pc-header-block__content-outer, .pc-header-block__content-inner {
+  position: relative;
+  z-index: 10;
+}
+.pc-header-block__title {
+  font-size: var(--yc-text-display-4-font-size);
+  line-height: var(--yc-text-display-4-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--yc-text-accent-font-weight);
+  position: relative;
+}
+@media (max-width: 577px) {
+  .pc-header-block__title {
+    font-size: var(--yc-text-display-2-font-size);
+    line-height: var(--yc-text-display-2-line-height);
+  }
+}
+.pc-header-block__title a {
+  outline: none;
+  color: var(--yc-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+.utilityfocus .pc-header-block__title a:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-header-block__title a:hover, .pc-header-block__title a:active {
+  --pc-text-header-color: var(--yc-color-text-link-hover);
+  color: var(--yc-color-text-link-hover);
+}
+.pc-header-block__description {
+  margin-top: 16px;
+  font-weight: normal;
+}
+.pc-header-block__description .yfm,
+.pc-header-block__description .yfm * {
+  font-size: var(--yc-text-body-3-font-size);
+  line-height: var(--yc-text-body-3-line-height);
+  color: var(--yc-color-text-primary);
+}
+.pc-header-block__buttons {
+  margin-top: 16px;
+}
+.pc-header-block__button {
+  margin-top: 16px;
+  margin-right: 16px;
+}
+.pc-header-block__media {
+  position: absolute;
+  display: none;
+  top: 0;
+  right: 0;
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+  object-fit: cover;
+  border-radius: var(--pc-border-radius);
+}
+.pc-header-block__media_s {
+  width: 32%;
+}
+.pc-header-block__video {
+  height: 100%;
+}
+.pc-header-block__video > video {
+  border-radius: var(--pc-border-radius);
+  width: 100%;
+  height: auto;
+}
+.pc-header-block__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: var(--pc-border-radius);
+}
+.pc-header-block__breadcrumbs {
+  position: absolute;
+  top: 16px;
+  z-index: 11;
+}
+.pc-header-block__background, .pc-header-block__background.pc-header-block__background_media {
+  position: absolute;
+  top: 0;
+  overflow: hidden;
+  z-index: 5;
+  width: 1440px;
+  max-width: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  height: 100%;
+  border-radius: var(--pc-border-radius);
+}
+.pc-header-block__background.pc-header-block__background_full-width-media, .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_full-width-media {
+  width: 100%;
+}
+.pc-header-block__background.pc-header-block__background_full-width-media > div, .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_full-width-media > div {
+  max-width: none;
+}
+.pc-header-block__background_full-width-media {
+  --pc-border-radius: 0;
+}
+.pc-header-block__background_full-width {
+  --pc-border-radius: 0;
+  left: 0;
+  transform: none;
+  max-width: none;
+  width: 100%;
+  background-color: var(--yc-color-base-background);
+}
+.pc-header-block__overtitle {
+  font-size: var(--yc-text-body-3-font-size);
+  line-height: var(--yc-text-body-3-line-height);
+  margin-bottom: 8px;
+  font-weight: 400;
+}
+.pc-header-block__overtitle a {
+  outline: none;
+  color: var(--yc-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+.utilityfocus .pc-header-block__overtitle a:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-header-block__overtitle a:hover, .pc-header-block__overtitle a:active {
+  --pc-text-header-color: var(--yc-color-text-link-hover);
+  color: var(--yc-color-text-link-hover);
+}
+@media (max-width: 1440px) {
+  .pc-header-block__background, .pc-header-block__background.pc-header-block__background_media {
+    left: 0;
+    transform: none;
+  }
+}
+@media (max-width: 769px) {
+  .pc-header-block_has-media .pc-header-block__content {
+    padding-top: 48px;
+  }
+  .pc-header-block_has-background .pc-header-block__background-img {
+    display: none;
+  }
+  .pc-header-block .pc-header-block__content_vertical-offset_s, .pc-header-block .pc-header-block__content_vertical-offset_m, .pc-header-block .pc-header-block__content_vertical-offset_l, .pc-header-block .pc-header-block__content_vertical-offset_xl {
+    padding: calc(96px - 16px) 0;
+  }
+  .pc-header-block .pc-header-block__content_offset_large {
+    padding: calc(96px - 16px) 0 16px;
+    margin-bottom: -32px;
+  }
+}
+@media (min-width: 769px) {
+  .pc-header-block__media {
+    display: block;
+  }
+  .pc-header-block_has-media .pc-header-block__content-inner {
+    padding-right: 48px;
+  }
+}

package/build/esm/blocks/Header/Header.d.ts

@@ -0,0 +1,5 @@
+import { ClassNameProps, HeaderBlockProps, WithChildren } from '../../models';
+import './Header.css';
+declare type HeaderBlockFullProps = HeaderBlockProps & ClassNameProps;
+export declare const HeaderBlock: (props: WithChildren<HeaderBlockFullProps>) => JSX.Element;
+export default HeaderBlock;

package/build/esm/blocks/Header/Header.js

@@ -0,0 +1,64 @@
+import React, { useContext } from 'react';
+import { block, getThemedValue } from '../../utils';
+import { headerHasMediaBackground } from '../../models/guards';
+import { Button, Media, BackgroundMedia, BackgroundImage, RouterLink, HTML } from '../../components';
+import { Grid, Row, Col } from '../../grid';
+import { getImageSize, getTitleSizes, titleWithImageSizes } from './utils';
+import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
+import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs/HeaderBreadcrumbs';
+import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import './Header.css';
+const b = block('header-block');
+const Background = ({ background }) => {
+    const { url, color, disableCompress, fullWidth, fullWidthMedia } = background;
+    return headerHasMediaBackground(background) ? (React.createElement(BackgroundMedia, Object.assign({}, background, { className: b('background', { media: true, 'full-width-media': fullWidthMedia }) }))) : (React.createElement(BackgroundImage, { src: url, className: b('background', { 'full-width-media': fullWidthMedia }), imageClassName: b('background-img'), style: { backgroundColor: fullWidth ? 'none' : color }, disableCompress: disableCompress }));
+};
+const FullWidthBackground = ({ background }) => (React.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
+export const HeaderBlock = (props) => {
+    const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, children, } = props;
+    const { themeValue: theme } = useContext(ThemeValueContext);
+    const hasMedia = Boolean(image || video);
+    const curImageSize = imageSize || getImageSize(width);
+    const titleSizes = hasMedia ? titleWithImageSizes(curImageSize) : getTitleSizes(width);
+    let curVerticalOffset = verticalOffset;
+    if (hasMedia && !verticalOffset) {
+        curVerticalOffset = 'm';
+    }
+    const backgroundThemed = background && getThemedValue(background, theme);
+    const imageThemed = image && getThemedValue(image, theme);
+    const videoThemed = video && getThemedValue(video, theme);
+    const fullWidth = Boolean(backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth);
+    return (React.createElement("header", { className: b({
+            ['has-media']: hasMedia,
+            ['has-background']: Boolean(background),
+            ['full-width']: fullWidth,
+        }, className) },
+        backgroundThemed && fullWidth && React.createElement(FullWidthBackground, { background: backgroundThemed }),
+        backgroundThemed && React.createElement(Background, { background: backgroundThemed }),
+        React.createElement(Grid, { containerClass: b('container-fluid') },
+            breadcrumbs && (React.createElement(Row, { className: b('breadcrumbs') },
+                React.createElement(Col, null,
+                    React.createElement(HeaderBreadcrumbs, Object.assign({}, breadcrumbs, { theme: textTheme }))))),
+            React.createElement(Row, null,
+                React.createElement(Col, { reset: true, className: b('content-wrapper') },
+                    React.createElement(Row, null,
+                        React.createElement(Col, { className: b('content', {
+                                offset,
+                                theme: textTheme,
+                                'vertical-offset': curVerticalOffset,
+                            }) },
+                            React.createElement(Col, { sizes: titleSizes, className: b('content-inner') },
+                                overtitle && (React.createElement("h4", { className: b('overtitle') },
+                                    React.createElement(HTML, null, overtitle))),
+                                React.createElement("h1", { className: b('title') },
+                                    status,
+                                    React.createElement(HTML, null, title)),
+                                description && (React.createElement("h5", { className: b('description') },
+                                    React.createElement(YFMWrapper, { content: description, modifiers: { constructor: true } }))),
+                                buttons && (React.createElement("div", { className: b('buttons'), "data-qa": "header-buttons" }, buttons &&
+                                    buttons.map((button, index) => (React.createElement(RouterLink, { href: button.url, key: index },
+                                        React.createElement(Button, Object.assign({ key: index, className: b('button'), size: "xl" }, button))))))),
+                                children))),
+                    hasMedia && (React.createElement(Media, { className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image'), video: videoThemed, image: imageThemed })))))));
+};
+export default HeaderBlock;