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

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

@@ -159,36 +159,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 } 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'];
@@ -127,32 +127,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

@@ -1,6 +1,5 @@
 .pc-content_size_l .pc-content__text .yfm,
-.pc-content_size_l .pc-content__notice .yfm,
-.pc-content_size_l .pc-content__notice .yfm > * {
+.pc-content_size_l .pc-content__notice .yfm {
   margin: 0;
 }
 
@@ -22,15 +21,16 @@ unpredictable css rules order in build */
 .pc-content__notice.pc-content__notice .yfm a:hover {
   color: var(--yc-color-text-primary);
 }
-.pc-content__notice.pc-content__notice ol,
-.pc-content__notice.pc-content__notice ul {
-  padding-left: 25px;
-}
 
 .pc-content__button {
   margin-top: 0;
   margin-right: 12px;
 }
+.pc-content__links {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+}
 .pc-content__link {
   display: block;
   margin-right: 32px;
@@ -40,9 +40,18 @@ unpredictable css rules order in build */
   text-align: center;
 }
 
+.pc-content_centered .pc-content__links {
+  align-items: center;
+}
 .pc-content_centered .pc-content__link a {
   justify-content: center;
 }
+.pc-content_centered .pc-content__notice .yfm ul,
+.pc-content_centered .pc-content__notice .yfm ol,
+.pc-content_centered .pc-content__text .yfm ul,
+.pc-content_centered .pc-content__text .yfm ol {
+  text-align: left;
+}
 .pc-content_size_s .pc-content__text,
 .pc-content_size_s .pc-content__notice {
   margin-top: 8px;
@@ -64,8 +73,7 @@ unpredictable css rules order in build */
   margin-top: 0;
 }
 .pc-content_size_l .pc-content__text .yfm,
-.pc-content_size_l .pc-content__notice .yfm,
-.pc-content_size_l .pc-content__notice .yfm > * {
+.pc-content_size_l .pc-content__notice .yfm {
   font-size: var(--yc-text-body-3-font-size);
   line-height: var(--yc-text-body-3-line-height);
 }

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

@@ -42,9 +42,13 @@ const Content = (props) => {
     return (React.createElement(Col, { className: b({ size, centered, theme }, className), reset: true, sizes: colSizes },
         title && React.createElement(Title, Object.assign({ className: b('title') }, titleProps, { resetMargin: true })),
         text && (React.createElement("div", { className: b('text', { ['without-title']: !hasTitle }) },
-            React.createElement(YFMWrapper, { content: text, modifiers: { constructor: true } }))),
+            React.createElement(YFMWrapper, { content: text, modifiers: { constructor: true, [`constructor-size-${size}`]: true } }))),
         additionalInfo && (React.createElement("div", { className: b('notice') },
-            React.createElement(YFMWrapper, { content: additionalInfo, modifiers: { constructor: true, 'constructor-notice': true } }))),
+            React.createElement(YFMWrapper, { content: additionalInfo, modifiers: {
+                    constructor: true,
+                    'constructor-notice': true,
+                    [`constructor-size-${size}`]: true,
+                } }))),
         links && (React.createElement("div", { className: b('links') }, links.map((link) => (React.createElement(LinkBlock, Object.assign({ className: b('link') }, link, { textSize: getLinkSize(size), key: link.url })))))),
         buttons && (React.createElement("div", { className: b('buttons') }, buttons.map((item) => (React.createElement(Button, Object.assign({ className: b('button') }, item, { key: item.url, size: getButtonSize(size) }))))))));
 };

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, urlPattern, } from '../../schema/validators/common';
+import { ImageProps } 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.1",
+  "version": "1.2.3-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, ImageProps } from './common';
 import { ThemeSupporting } from '../../utils';
 import { GridColumnSize, GridColumnSizesType } from '../../grid/types';
 import { BannerCardProps, SubBlock } from './sub-blocks';
@@ -79,7 +79,8 @@ export interface HeaderSliderBlockProps extends Omit<SliderProps, 'title' | 'des
 }
 interface HeaderBackgroundProps {
     color?: string;
-    url?: string;
+    url?: ImageProps;
+    /** @deprecated put it in url props instead */
     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/styles/styles.css

@@ -226,13 +226,21 @@ unpredictable css rules order in build */
 .yfm_constructor.yfm_constructor_notice p {
   color: var(--yc-color-text-secondary);
 }
-.yfm_constructor.yfm_constructor p,
-.yfm_constructor.yfm_constructor li {
+.yfm_constructor.yfm_constructor ul,
+.yfm_constructor.yfm_constructor ol,
+.yfm_constructor.yfm_constructor li,
+.yfm_constructor.yfm_constructor p {
   margin: 0 0 12px;
 }
 .yfm_constructor.yfm_constructor p strong {
   font-weight: 500;
 }
+.yfm_constructor.yfm_constructor_size_s ul,
+.yfm_constructor.yfm_constructor_size_s ol,
+.yfm_constructor.yfm_constructor_size_s li,
+.yfm_constructor.yfm_constructor_size_s p {
+  margin-bottom: 8px;
+}
 
 .yfm_constructor_theme_dark p {
   color: var(--yc-color-text-light-primary);
@@ -284,13 +292,17 @@ unpredictable css rules order in build */
   background-color: var(--yc-color-base-generic);
 }
 
+.yfm_constructor_table {
+  /* stylelint-enable declaration-no-important */
+}
 .yfm_constructor_table table {
   border: 0;
   table-layout: fixed;
 }
 .yfm_constructor_table thead,
 .yfm_constructor_table tr {
-  background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
+  /* stylelint-disable declaration-no-important */
+  background-color: transparent !important;
 }
 .yfm_constructor_table tbody tr {
   border-top: 1px solid var(--yc-color-line-generic);
@@ -300,7 +312,7 @@ unpredictable css rules order in build */
   min-width: 120px;
   width: 120px;
   box-sizing: content-box;
-  white-space: inherit !important; /* stylelint-disable-line declaration-no-important */
+  white-space: inherit !important;
 }
 .yfm_constructor_table td:first-child,
 .yfm_constructor_table th:first-child {
@@ -308,5 +320,5 @@ unpredictable css rules order in build */
   width: 172px;
 }
 .yfm_constructor_table th {
-  text-align: left !important; /* stylelint-disable-line declaration-no-important */
+  text-align: left !important;
 }

package/styles/yfm.scss

@@ -34,14 +34,25 @@
             }
         }
 
-        p,
-        li {
+        ul,
+        ol,
+        li,
+        p {
             margin: 0 0 $indentXXS;
         }
 
         p strong {
             font-weight: 500;
         }
+
+        &_size_s {
+            ul,
+            ol,
+            li,
+            p {
+                margin-bottom: $indentXXXS;
+            }
+        }
     }
 
     &_theme_dark {
@@ -106,7 +117,8 @@
 
     thead,
     tr {
-        background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
+        /* stylelint-disable declaration-no-important */
+        background-color: transparent !important;
     }
 
     tbody tr {
@@ -118,7 +130,7 @@
         min-width: $columnWidth;
         width: $columnWidth;
         box-sizing: content-box;
-        white-space: inherit !important; /* stylelint-disable-line declaration-no-important */
+        white-space: inherit !important;
 
         &:first-child {
             min-width: $firstColumnWidth;
@@ -127,6 +139,7 @@
     }
 
     th {
-        text-align: left !important; /* stylelint-disable-line declaration-no-important */
+        text-align: left !important;
     }
+    /* stylelint-enable declaration-no-important */
 }