@gravity-ui/page-constructor 1.2.3 → 1.2.5-alpha.0

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

@@ -81,17 +81,21 @@ interface LoopProps {
     start: number;
     end?: number;
 }
-export interface ImageObjectProps {
-    src: string;
+export interface ImageInfoProps {
     alt?: string;
     disableCompress?: boolean;
 }
-export declare type ImageProps = string | ImageObjectProps;
+export interface ImageObjectProps extends ImageInfoProps {
+    src: string;
+}
+export interface ImageDeviceProps extends ImageInfoProps {
+    desktop: string;
+    mobile: string;
+    tablet?: string;
+}
+export declare type ImageProps = string | ImageObjectProps | ImageDeviceProps;
 export declare type ThemedImage = ThemeSupporting<ImageProps>;
-export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement> {
-    src?: string;
-    alt?: string;
-    disableCompress?: boolean;
+export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, Partial<ImageDeviceProps>, Partial<ImageObjectProps> {
     style?: CSSProperties;
     imageClassName?: string;
     hide?: boolean;

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

@@ -1,5 +1,4 @@
-import { Block, ConstructorItem, HeaderBlockBackground } from './';
-import { MediaProps, MetrikaGoal, NewMetrikaGoal } from './index';
+import { Block, ConstructorItem } from './';
+import { MetrikaGoal, NewMetrikaGoal } from './index';
 export declare function isBlock(block: ConstructorItem): block is Block;
 export declare function isNewMetrikaFormat(metrika: MetrikaGoal): metrika is NewMetrikaGoal[];
-export declare function headerHasMediaBackground(background: HeaderBlockBackground): background is MediaProps;

package/build/esm/models/guards.js

@@ -5,6 +5,3 @@ export function isBlock(block) {
 export function isNewMetrikaFormat(metrika) {
     return Boolean(Array.isArray(metrika) && metrika.length && typeof metrika[0] === 'object');
 }
-export function headerHasMediaBackground(background) {
-    return 'image' in background || 'video' in background || 'youtube' in background;
-}

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

@@ -19,7 +19,6 @@ export declare const sizeNumber: {
     minimum: number;
 };
 export declare const contentThemes: string[];
-export declare const urlPattern = "^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$";
 export declare const BaseProps: {
     type: {};
     when: {};
@@ -159,36 +158,6 @@ export declare const JustifyProps: {
     type: string;
     enum: string[];
 };
-export declare const ImageObjectProps: {
-    type: string;
-    additionalProperties: boolean;
-    required: string[];
-    properties: {
-        src: {
-            type: string;
-            pattern: string;
-        };
-        alt: {
-            type: string;
-        };
-        disableCompress: {
-            type: string;
-        };
-    };
-};
-export declare const ImageProps: {
-    oneOf: ({
-        type: string;
-        properties: {
-            when: {
-                type: string;
-            };
-        };
-    } | {
-        type: string;
-        pattern: string;
-    })[];
-};
 export declare const DataLensObjectProps: {
     type: string;
     additionalProperties: boolean;

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

@@ -1,6 +1,6 @@
-import { filteredItem } from './utils';
 import { pixelEvents } from './pixel';
 import { Theme } from '../../models';
+import { ImageProps, urlPattern } from '../../components/Image/schema';
 export const mediaDirection = ['media-content', 'content-media'];
 export const textSize = ['s', 'm', 'l'];
 export const containerSizesArray = ['sm', 'md', 'lg', 'xl', 'all'];
@@ -15,7 +15,6 @@ export const fileLinkTypes = ['vertical', 'horizontal'];
 export const dividerEnum = { enum: [0, 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'] };
 export const sizeNumber = { type: 'number', maximum: 12, minimum: 1 };
 export const contentThemes = ['default', 'dark', 'light'];
-export const urlPattern = '^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$';
 export const BaseProps = {
     type: {},
     when: {},
@@ -127,32 +126,6 @@ export const JustifyProps = {
     type: 'string',
     enum: ['start', 'center', 'end'],
 };
-export const ImageObjectProps = {
-    type: 'object',
-    additionalProperties: false,
-    required: ['src'],
-    properties: {
-        src: {
-            type: 'string',
-            pattern: urlPattern,
-        },
-        alt: {
-            type: 'string',
-        },
-        disableCompress: {
-            type: 'boolean',
-        },
-    },
-};
-export const ImageProps = {
-    oneOf: [
-        {
-            type: 'string',
-            pattern: urlPattern,
-        },
-        filteredItem(Object.assign({}, ImageObjectProps)),
-    ],
-};
 export const DataLensObjectProps = {
     type: 'object',
     additionalProperties: false,

package/build/esm/sub-blocks/BackgroundCard/schema.js

@@ -1,6 +1,7 @@
-import { BaseProps, ImageObjectProps, withTheme } from '../../schema/validators/common';
+import { BaseProps, withTheme } from '../../schema/validators/common';
 import { CardBase } from '../../components/CardBase/schema';
 import { ContentBase } from '../Content/schema';
+import { ImageObjectProps } from '../../components/Image/schema';
 import _ from 'lodash';
 const BackgroundCardContentProps = _.omit(ContentBase, ['size']);
 export const BackgroundCard = {

package/build/esm/sub-blocks/BasicCard/BasicCard.js

@@ -11,7 +11,7 @@ const BasicCard = (props) => {
     const iconProps = icon && getMediaImage(icon);
     return (React.createElement(CardBase, { className: b(), url: url, border: border },
         React.createElement(CardBase.Content, null,
-            iconProps && (React.createElement(Image, { src: iconProps.src, alt: iconProps.alt, className: b('icon'), disableCompress: iconProps.disableCompress })),
+            iconProps && React.createElement(Image, Object.assign({}, iconProps, { className: b('icon') })),
             React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 }, size: "s" }))));
 };
 export default BasicCard;

package/build/esm/sub-blocks/BasicCard/schema.js

@@ -1,7 +1,8 @@
 import _ from 'lodash';
-import { BaseProps, ImageProps } from '../../schema/validators/common';
+import { BaseProps } from '../../schema/validators/common';
 import { CardBase } from '../../components/CardBase/schema';
 import { ContentBase } from '../Content/schema';
+import { ImageProps } from '../../components/Image/schema';
 const BasicCardContentProps = _.omit(ContentBase, ['size', 'theme']);
 export const BasicCard = {
     'basic-card': {

package/build/esm/sub-blocks/Content/Content.css

@@ -22,10 +22,11 @@ unpredictable css rules order in build */
   color: var(--yc-color-text-primary);
 }
 
-.pc-content__button {
+.pc-content__button.pc-content__button {
   margin-top: 0;
   margin-right: 12px;
 }
+
 .pc-content__links {
   display: flex;
   flex-direction: column;

package/build/esm/sub-blocks/Partner/Partner.js

@@ -7,7 +7,7 @@ const Partner = ({ text, logo, url, border }) => {
     const logoData = typeof logo === 'string' ? { src: logo } : logo;
     return (React.createElement(CardBase, { url: url, target: "_blank", className: b(), border: border },
         React.createElement(CardBase.Content, null,
-            React.createElement(Image, { className: b('logo'), src: logoData.src, alt: logoData.alt }),
+            React.createElement(Image, Object.assign({ className: b('logo') }, logoData)),
             React.createElement(HTML, null, text))));
 };
 export default Partner;

package/build/esm/sub-blocks/Partner/schema.js

@@ -1,4 +1,5 @@
-import { BaseProps, ImageProps } from '../../schema/validators/common';
+import { BaseProps } from '../../schema/validators/common';
+import { ImageProps } from '../../components/Image/schema';
 export const PartnerBlock = {
     partner: {
         additionalProperties: false,

package/build/esm/sub-blocks/Quote/Quote.js

@@ -4,13 +4,14 @@ import { block, getThemedValue } from '../../utils';
 import { AuthorType } from '../../models';
 import { Author, Image, HTML } from '../../components';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { getMediaImage } from '../../components/Media/Image/utils';
 import './Quote.css';
 const b = block('quote');
 const Quote = (props) => {
     const { theme: textTheme = 'light', color, image, border = 'shadow', text, logo, author, url, buttonText, } = props;
     const { themeValue: theme } = useContext(ThemeValueContext);
     const imageThemed = getThemedValue(image, theme);
-    const imageData = typeof imageThemed === 'string' ? { src: imageThemed } : imageThemed;
+    const imageData = getMediaImage(imageThemed);
     const renderFooter = Boolean(author || url) && (React.createElement("div", { className: b('author-wrapper') },
         author && (React.createElement(Author, { className: b('author', { theme: textTheme }), author: author, type: AuthorType.Line })),
         url && buttonText && (React.createElement(Button, { view: "outlined", size: "xl", href: url, className: b('link-button', { theme: textTheme }) }, buttonText))));
@@ -23,6 +24,6 @@ const Quote = (props) => {
                         React.createElement(HTML, null, text)))),
             renderFooter),
         React.createElement("div", { className: b('image-wrapper') },
-            React.createElement(Image, { src: imageData.src, alt: imageData.alt, className: b('image') }))));
+            React.createElement(Image, Object.assign({}, imageData, { className: b('image') })))));
 };
 export default Quote;

package/build/esm/sub-blocks/Quote/schema.js

@@ -1,4 +1,5 @@
-import { authorItem, BaseProps, ImageProps, ThemeProps, withTheme, urlPattern, } from '../../schema/validators/common';
+import { authorItem, BaseProps, ThemeProps, withTheme } from '../../schema/validators/common';
+import { ImageProps, urlPattern } from '../../components/Image/schema';
 export const Quote = {
     quote: {
         additionalProperties: false,

package/build/esm/sub-blocks/TutorialCard/TutorialCard.js

@@ -6,8 +6,8 @@ import { getMediaImage } from '../../components/Media/Image/utils';
 import './TutorialCard.css';
 const b = block('tutorial-card');
 function iconElement(icon, title) {
-    const { src, alt = title, disableCompress } = getMediaImage(icon !== null && icon !== void 0 ? icon : {});
-    return React.createElement(Image, { src: src, alt: alt, className: b('icon'), disableCompress: disableCompress });
+    const image = getMediaImage(icon !== null && icon !== void 0 ? icon : {});
+    return React.createElement(Image, Object.assign({}, image, { alt: title, className: b('icon') }));
 }
 const TutorialCard = (props) => {
     const { url, title, text, border, icon } = props;

package/build/esm/sub-blocks/TutorialCard/schema.js

@@ -1,4 +1,5 @@
-import { BaseProps, ImageProps } from '../../schema/validators/common';
+import { BaseProps } from '../../schema/validators/common';
+import { ImageProps } from '../../components/Image/schema';
 export const TutorialCard = {
     'tutorial-card': {
         additionalProperties: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "1.2.3",
+  "version": "1.2.5-alpha.0",
   "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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, Justify, LinkProps, LinkTheme, MediaDirection, MediaProps, PreviewItemProps, PreviewRatioMediaContent, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleProps, LegendTableMarkerType, AnchorProps, TitleBaseProps, Animatable, BlockHeaderProps } from './common';
+import { BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, Justify, LinkProps, LinkTheme, MediaDirection, MediaProps, PreviewItemProps, PreviewRatioMediaContent, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleProps, LegendTableMarkerType, AnchorProps, TitleBaseProps, Animatable, BlockHeaderProps, ImageDeviceProps } from './common';
 import { ThemeSupporting } from '../../utils';
 import { GridColumnSize, GridColumnSizesType } from '../../grid/types';
 import { BannerCardProps, SubBlock } from './sub-blocks';
@@ -78,8 +78,9 @@ export interface HeaderSliderBlockProps extends Omit<SliderProps, 'title' | 'des
     items: HeaderBlockProps[];
 }
 interface HeaderBackgroundProps {
-    color?: string;
+    /** @deprecated replaced by Media Props image */
     url?: string;
+    /** @deprecated replaced by Media Props image */
     disableCompress?: boolean;
 }
 export interface HeaderBlockBackground extends Partial<HeaderBackgroundProps>, Partial<MediaProps> {
@@ -151,12 +152,7 @@ export interface BannerBlockProps extends BannerCardProps, Animatable {
 }
 export interface CompaniesBlockProps extends Animatable {
     title: string;
-    images: ThemeSupporting<{
-        desktop: string;
-        tablet: string;
-        mobile: string;
-        alt?: string;
-    }>;
+    images: ThemeSupporting<ImageDeviceProps>;
 }
 export interface MediaContentProps {
     title: string;

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

@@ -81,17 +81,21 @@ interface LoopProps {
     start: number;
     end?: number;
 }
-export interface ImageObjectProps {
-    src: string;
+export interface ImageInfoProps {
     alt?: string;
     disableCompress?: boolean;
 }
-export declare type ImageProps = string | ImageObjectProps;
+export interface ImageObjectProps extends ImageInfoProps {
+    src: string;
+}
+export interface ImageDeviceProps extends ImageInfoProps {
+    desktop: string;
+    mobile: string;
+    tablet?: string;
+}
+export declare type ImageProps = string | ImageObjectProps | ImageDeviceProps;
 export declare type ThemedImage = ThemeSupporting<ImageProps>;
-export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement> {
-    src?: string;
-    alt?: string;
-    disableCompress?: boolean;
+export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, Partial<ImageDeviceProps>, Partial<ImageObjectProps> {
     style?: CSSProperties;
     imageClassName?: string;
     hide?: boolean;

package/server/models/guards.d.ts

@@ -1,5 +1,4 @@
-import { Block, ConstructorItem, HeaderBlockBackground } from './';
-import { MediaProps, MetrikaGoal, NewMetrikaGoal } from './index';
+import { Block, ConstructorItem } from './';
+import { MetrikaGoal, NewMetrikaGoal } from './index';
 export declare function isBlock(block: ConstructorItem): block is Block;
 export declare function isNewMetrikaFormat(metrika: MetrikaGoal): metrika is NewMetrikaGoal[];
-export declare function headerHasMediaBackground(background: HeaderBlockBackground): background is MediaProps;

package/server/models/guards.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.headerHasMediaBackground = exports.isNewMetrikaFormat = exports.isBlock = void 0;
+exports.isNewMetrikaFormat = exports.isBlock = void 0;
 const _1 = require("./");
 function isBlock(block) {
     return block.type in _1.BlockTypes;
@@ -10,7 +10,3 @@ function isNewMetrikaFormat(metrika) {
     return Boolean(Array.isArray(metrika) && metrika.length && typeof metrika[0] === 'object');
 }
 exports.isNewMetrikaFormat = isNewMetrikaFormat;
-function headerHasMediaBackground(background) {
-    return 'image' in background || 'video' in background || 'youtube' in background;
-}
-exports.headerHasMediaBackground = headerHasMediaBackground;