@gravity-ui/page-constructor 1.0.0

package/build/esm/sub-blocks/BackgroundCard/BackgroundCard.d.ts

@@ -0,0 +1,4 @@
+import { BackgroundCardProps } from '../../models';
+import './BackgroundCard.css';
+declare const BackgroundCard: (props: BackgroundCardProps) => JSX.Element;
+export default BackgroundCard;

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

@@ -0,0 +1,19 @@
+import React, { useContext } from 'react';
+import { block, getThemedValue } from '../../utils';
+import { CardBase, BackgroundImage } from '../../components/';
+import Content from '../Content/Content';
+import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import './BackgroundCard.css';
+const b = block('background-card');
+const BackgroundCard = (props) => {
+    const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, } = props;
+    const { themeValue: theme } = useContext(ThemeValueContext);
+    const hasBackgroundColor = backgroundColor || cardTheme !== 'default';
+    const link = hasBackgroundColor || border === 'line' ? undefined : url;
+    const borderType = hasBackgroundColor ? 'none' : border;
+    return (React.createElement(CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), url: link, border: borderType },
+        React.createElement(CardBase.Content, null,
+            React.createElement(BackgroundImage, Object.assign({ className: b('image') }, getThemedValue(background, theme), { style: { backgroundColor } })),
+            React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, size: "s", theme: cardTheme, links: links, buttons: buttons, colSizes: { all: 12, md: 12 } }))));
+};
+export default BackgroundCard;

package/build/esm/sub-blocks/BackgroundCard/schema.d.ts

@@ -0,0 +1,104 @@
+export declare const BackgroundCard: {
+    'background-card': {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            url: {
+                type: string;
+            };
+            background: {
+                oneOf: ({
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        src: {
+                            type: string;
+                            pattern: string;
+                        };
+                        alt: {
+                            type: string;
+                        };
+                        disableCompress: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    additionalProperties: boolean;
+                    required: import("../..").Theme[];
+                    properties: {};
+                })[];
+            };
+            backgroundColor: {
+                type: string;
+            };
+            paddingBottom: {
+                type: string;
+                enum: 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;
+            };
+            theme: {
+                type: string;
+                enum: string[];
+            };
+            additionalInfo: {
+                type: string;
+            };
+            links: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            buttons: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            border: {
+                type: string;
+                enum: string[];
+            };
+            type: {};
+            when: {};
+        };
+    };
+};

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

@@ -0,0 +1,19 @@
+import { BaseProps, ImageObjectProps, withTheme } from '../../schema/validators/common';
+import { CardBase } from '../../components/CardBase/schema';
+import { ContentBase } from '../Content/schema';
+import _ from 'lodash';
+const BackgroundCardContentProps = _.omit(ContentBase, ['size']);
+export const BackgroundCard = {
+    'background-card': {
+        additionalProperties: false,
+        required: ['title', 'text'],
+        properties: Object.assign(Object.assign(Object.assign(Object.assign({}, BaseProps), CardBase), BackgroundCardContentProps), { url: {
+                type: 'string',
+            }, background: withTheme(ImageObjectProps), backgroundColor: {
+                type: 'string',
+            }, paddingBottom: {
+                type: 'string',
+                enum: ['s', 'm', 'l', 'xl'],
+            } }),
+    },
+};

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

@@ -0,0 +1,90 @@
+.pc-banner-card__subtitle p, .pc-banner-card__subtitle, .pc-banner-card__title {
+  margin: 0;
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-banner-card_theme_dark.pc-banner-card_theme_dark .pc-banner-card__title,
+.pc-banner-card_theme_dark.pc-banner-card_theme_dark .pc-banner-card__subtitle {
+  color: var(--yc-color-text-light-primary);
+}
+.pc-banner-card_theme_dark.pc-banner-card_theme_dark .pc-banner-card__title p,
+.pc-banner-card_theme_dark.pc-banner-card_theme_dark .pc-banner-card__subtitle p {
+  color: var(--yc-color-text-light-primary);
+}
+
+.pc-banner-card__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-banner-card__title {
+    font-size: var(--yc-text-display-1-font-size);
+    line-height: var(--yc-text-display-1-line-height);
+  }
+}
+.pc-banner-card__title a {
+  outline: none;
+  color: var(--yc-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+.utilityfocus .pc-banner-card__title a:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-banner-card__title a:hover, .pc-banner-card__title a:active {
+  --pc-text-header-color: var(--yc-color-text-link-hover);
+  color: var(--yc-color-text-link-hover);
+}
+.pc-banner-card__content {
+  width: 100%;
+  border-radius: var(--pc-border-radius);
+  display: flex;
+  min-height: 320px;
+}
+.pc-banner-card__info, .pc-banner-card__image {
+  flex: 1;
+}
+.pc-banner-card__info {
+  padding: 32px;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: baseline;
+}
+.pc-banner-card__subtitle {
+  display: inline-block;
+  margin-top: 8px;
+  font-size: var(--yc-text-body-3-font-size);
+  line-height: var(--yc-text-body-3-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: normal;
+}
+.pc-banner-card__subtitle p {
+  font-size: var(--yc-text-body-3-font-size);
+  line-height: var(--yc-text-body-3-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: normal;
+}
+.pc-banner-card__button {
+  margin-top: 28px;
+}
+.pc-banner-card__image {
+  border-top-right-radius: var(--pc-border-radius);
+  border-bottom-right-radius: var(--pc-border-radius);
+  margin: var(--pc-image-padding);
+  border-radius: calc(var(--pc-border-radius) - var(--pc-image-padding));
+}
+.pc-banner-card__image img {
+  object-fit: cover;
+  object-position: left;
+}
+@media (max-width: 576px) {
+  .pc-banner-card__image {
+    display: none;
+  }
+}

package/build/esm/sub-blocks/BannerCard/BannerCard.d.ts

@@ -0,0 +1,4 @@
+import { BannerCardProps } from '../../models';
+import './BannerCard.css';
+export declare const BannerCard: (props: BannerCardProps) => JSX.Element;
+export default BannerCard;

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

@@ -0,0 +1,24 @@
+import React, { useContext } from 'react';
+import { block, getThemedValue } from '../../utils';
+import { Button, YFMWrapper, BackgroundImage, HTML } from '../../components';
+import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import './BannerCard.css';
+const b = block('banner-card');
+export const BannerCard = (props) => {
+    const { title, subtitle, button: { url, text, target }, color, theme: textTheme = 'light', image, disableCompress, } = props;
+    const { themeValue: theme } = useContext(ThemeValueContext);
+    const contentStyle = {};
+    if (color) {
+        contentStyle.backgroundColor = getThemedValue(color, theme);
+    }
+    return (React.createElement("div", { className: b({ theme: textTheme }) },
+        React.createElement("div", { className: b('content'), style: contentStyle },
+            React.createElement("div", { className: b('info') },
+                React.createElement("div", { className: b('text') },
+                    React.createElement("h2", { className: b('title') },
+                        React.createElement(HTML, null, title)),
+                    subtitle && (React.createElement(YFMWrapper, { className: b('subtitle'), content: subtitle, modifiers: { constructor: true } }))),
+                React.createElement(Button, { className: b('button'), theme: "raised", size: "xl", text: text, url: url, target: target })),
+            React.createElement(BackgroundImage, { className: b('image'), src: getThemedValue(image, theme), disableCompress: disableCompress }))));
+};
+export default BannerCard;

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

@@ -0,0 +1,13 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-basic-card.pc-basic-card {
+  min-height: auto;
+}
+
+.pc-basic-card__icon {
+  max-width: 100%;
+  margin-bottom: 12px;
+  height: 32px;
+  object-fit: contain;
+  display: block;
+}

package/build/esm/sub-blocks/BasicCard/BasicCard.d.ts

@@ -0,0 +1,4 @@
+import { BasicCardProps } from '../../models';
+import './BasicCard.css';
+declare const BasicCard: (props: BasicCardProps) => JSX.Element;
+export default BasicCard;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { block } from '../../utils';
+import CardBase from '../../components/CardBase/CardBase';
+import Image from '../../components/Image/Image';
+import { Content } from '../';
+import { getMediaImage } from '../../components/Media/Image/utils';
+import './BasicCard.css';
+const b = block('basic-card');
+const BasicCard = (props) => {
+    const { url, title, text, border, icon, additionalInfo, links, buttons } = 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 })),
+            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.d.ts

@@ -0,0 +1,82 @@
+export declare const BasicCard: {
+    'basic-card': {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            url: {
+                type: string;
+            };
+            icon: {
+                oneOf: ({
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    pattern: 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;
+                        };
+                    };
+                };
+            };
+            border: {
+                type: string;
+                enum: string[];
+            };
+            type: {};
+            when: {};
+        };
+    };
+};

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

@@ -0,0 +1,14 @@
+import _ from 'lodash';
+import { BaseProps, ImageProps } from '../../schema/validators/common';
+import { CardBase } from '../../components/CardBase/schema';
+import { ContentBase } from '../Content/schema';
+const BasicCardContentProps = _.omit(ContentBase, ['size', 'theme']);
+export const BasicCard = {
+    'basic-card': {
+        additionalProperties: false,
+        required: ['url'],
+        properties: Object.assign(Object.assign(Object.assign(Object.assign({}, BaseProps), CardBase), BasicCardContentProps), { url: {
+                type: 'string',
+            }, icon: ImageProps }),
+    },
+};

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

@@ -0,0 +1,19 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-card-with-image__content {
+  padding-right: 16px;
+}
+.pc-card-with-image__image {
+  width: 100%;
+  display: block;
+  margin-bottom: 16px;
+  border-radius: var(--pc-border-radius);
+}
+.pc-card-with-image__image_border {
+  border: 1px solid var(--yc-color-line-generic);
+}
+.pc-card-with-image__image-item {
+  width: 100%;
+  display: block;
+  border-radius: var(--pc-border-radius);
+}

package/build/esm/sub-blocks/CardWithImage/CardWithImage.d.ts

@@ -0,0 +1,4 @@
+import { CardWithImageProps } from '../../models';
+import './CardWithImage.css';
+declare const CardWithImage: ({ title, description, image, disableCompress, links, border, fullScreen, className, additionalInfo, buttons, }: CardWithImageProps) => JSX.Element;
+export default CardWithImage;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { block } from '../../utils';
+import { Image, FullscreenImage } from '../../components';
+import { Content } from '../';
+import './CardWithImage.css';
+const b = block('card-with-image');
+const CardWithImage = ({ title, description, image, disableCompress, links, border, fullScreen, className, additionalInfo, buttons, }) => {
+    const unifiedLinks = links === null || links === void 0 ? void 0 : links.map((link) => (Object.assign(Object.assign({ theme: 'normal' }, link), { text: link.title, url: link.link })));
+    return (React.createElement("div", { className: b(null, className) },
+        React.createElement("div", { className: b('image', { border }) }, fullScreen ? (React.createElement(FullscreenImage, { src: image, imageClassName: b('image-item'), disableCompress: disableCompress })) : (React.createElement(Image, { className: b('image-item'), src: image, alt: 'card-image', disableCompress: disableCompress }))),
+        React.createElement("div", { className: b('content') },
+            React.createElement(Content, { title: title, text: description, links: unifiedLinks, additionalInfo: additionalInfo, buttons: buttons, size: "s", colSizes: { all: 12, md: 12 } }))));
+};
+export default CardWithImage;

package/build/esm/sub-blocks/CardWithImage/schema.d.ts

@@ -0,0 +1,146 @@
+export declare const CardWithImageItem: {
+    additionalProperties: boolean;
+    required: string[];
+    properties: {
+        image: {
+            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;
+            })[];
+        };
+        description: {
+            type: string;
+        };
+        additionalInfo: {
+            type: string;
+        };
+        disableCompress: {
+            type: string;
+        };
+        border: {
+            type: string;
+        };
+        fullScreen: {
+            type: string;
+        };
+        links: {
+            type: string;
+            items: {
+                type: string;
+                properties: {
+                    when: {
+                        type: string;
+                    };
+                };
+            };
+        };
+        buttons: {
+            type: string;
+            items: {
+                type: string;
+                properties: {
+                    when: {
+                        type: string;
+                    };
+                };
+            };
+        };
+        type: {};
+        when: {};
+    };
+};
+export declare const CardWithImage: {
+    'card-with-image': {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            image: {
+                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;
+                })[];
+            };
+            description: {
+                type: string;
+            };
+            additionalInfo: {
+                type: string;
+            };
+            disableCompress: {
+                type: string;
+            };
+            border: {
+                type: string;
+            };
+            fullScreen: {
+                type: string;
+            };
+            links: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            buttons: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            type: {};
+            when: {};
+        };
+    };
+};

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

@@ -0,0 +1,42 @@
+import { BaseProps, textSize, ButtonBlock, TitleProps } from '../../schema/validators/common';
+import { filteredArray } from '../../schema/validators/utils';
+const CardWithImageLinks = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['title', 'link'],
+    properties: Object.assign(Object.assign({}, BaseProps), { title: {
+            type: 'string',
+        }, link: {
+            type: 'string',
+        }, arrow: {
+            type: 'boolean',
+        }, theme: {
+            type: 'string',
+            enum: ['back', 'file-link', 'normal'],
+        }, textSize: {
+            type: 'string',
+            enum: textSize,
+        } }),
+};
+export const CardWithImageItem = {
+    additionalProperties: false,
+    required: ['image'],
+    properties: Object.assign(Object.assign({}, BaseProps), { image: {
+            type: 'string',
+        }, title: {
+            oneOf: [{ type: 'string' }, TitleProps],
+        }, description: {
+            type: 'string',
+        }, additionalInfo: {
+            type: 'string',
+        }, disableCompress: {
+            type: 'boolean',
+        }, border: {
+            type: 'boolean',
+        }, fullScreen: {
+            type: 'boolean',
+        }, links: filteredArray(CardWithImageLinks), buttons: filteredArray(ButtonBlock) }),
+};
+export const CardWithImage = {
+    'card-with-image': CardWithImageItem,
+};