@gravity-ui/page-constructor 4.41.0 → 4.41.1-alpha.0

package/build/cjs/components/Author/Author.css

@@ -5,7 +5,6 @@ unpredictable css rules order in build */
   line-height: var(--g-text-body-3-line-height);
   display: flex;
   flex-direction: column;
-  color: var(--g-color-text-secondary);
 }
 .pc-author__avatar {
   width: 80px;
@@ -25,11 +24,11 @@ unpredictable css rules order in build */
 .pc-author__name {
   font-size: var(--g-text-body-3-font-size);
   line-height: var(--g-text-body-3-line-height);
-  color: var(--g-color-text-primary);
 }
 .pc-author__description {
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
+  color: var(--g-color-text-secondary);
   padding-top: 4px;
 }
 .pc-author__label:not(:first-child) {
@@ -53,4 +52,7 @@ unpredictable css rules order in build */
 }
 .pc-author_type_line .pc-author__label:not(:first-child) {
   margin-left: 16px;
+}
+.pc-author_theme_dark .pc-author__description {
+  color: var(--g-color-text-light-secondary);
 }

package/build/cjs/components/Author/Author.js

@@ -8,7 +8,7 @@ const utils_2 = require("../Media/Image/utils");
 const index_1 = require("../index");
 const b = (0, utils_1.block)('author');
 const Author = (props) => {
-    const { author, className, authorContainerClassName, type = models_1.AuthorType.Column, qa } = props;
+    const { author, className, authorContainerClassName, type = models_1.AuthorType.Column, qa, theme, } = props;
     const { firstName, secondName, description, avatar } = author;
     const name = secondName ? `${firstName} ${secondName}` : firstName;
     const isAvatarJSX = react_1.default.isValidElement(avatar);
@@ -16,7 +16,7 @@ const Author = (props) => {
     if (!isAvatarJSX && avatar) {
         avatarProps = (0, utils_2.getMediaImage)(avatar);
     }
-    return (react_1.default.createElement("div", { className: b({ type }, className), "data-qa": qa },
+    return (react_1.default.createElement("div", { className: b({ type, theme }, className), "data-qa": qa },
         avatar && (react_1.default.createElement("div", { className: b('avatar', authorContainerClassName) }, isAvatarJSX ? avatar : react_1.default.createElement(index_1.Image, Object.assign({}, avatarProps)))),
         react_1.default.createElement("div", { className: b('label') },
             react_1.default.createElement("div", { className: b('name') }, name),

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

@@ -346,6 +346,7 @@ export interface AuthorProps extends QAProps {
     className?: string;
     authorContainerClassName?: string;
     type?: AuthorType;
+    theme?: ContentTheme;
 }
 export interface TitleProps {
     title?: TitleItemProps | string;

package/build/cjs/models/constructor-items/sub-blocks.d.ts

@@ -63,16 +63,27 @@ export interface HubspotFormProps extends HubspotEventHandlers, AnalyticsEventsB
     createDOMElement?: boolean;
 }
 export interface QuoteProps extends Themable, CardBaseProps {
-    text: string;
+    text?: string;
+    yfmText?: string;
     image: ThemedImage;
     logo: ImageProps;
     color?: string;
+    /**
+     * @deprecated use property button instead
+     */
     url?: string;
+    /**
+     * @deprecated use property button instead
+     */
     urlTitle?: string;
     author?: AuthorItem;
+    /**
+     * @deprecated use property button instead
+     */
     buttonText?: string;
     theme?: TextTheme;
     quoteType?: QuoteType;
+    button?: ButtonProps;
 }
 export interface BackgroundCardProps extends CardBaseProps, AnalyticsEventsBase, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
     url?: string;

package/build/cjs/schema/constants.d.ts

@@ -125,6 +125,10 @@ export declare const cardSchemas: {
                 type: string;
                 contentType: string;
             };
+            yfmText: {
+                type: string;
+                contentType: string;
+            };
             image: {
                 oneOf: (({
                     oneOf: ({

package/build/cjs/sub-blocks/Quote/Quote.css

@@ -76,6 +76,17 @@ unpredictable css rules order in build */
 .pc-quote__content_quote-type_english-double .pc-quote__text::after {
   content: "”";
 }
+.pc-quote__content .yfm {
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
+}
+.pc-quote__content .yfm > * {
+  display: inline;
+}
+.pc-quote__content .yfm:after {
+  position: relative;
+  left: -5px;
+}
 .pc-quote__image {
   width: 100%;
   height: 100%;
@@ -87,24 +98,6 @@ unpredictable css rules order in build */
   align-items: flex-end;
   margin-top: 20px;
 }
-.pc-quote__author_theme_dark, .pc-quote_theme_dark {
-  color: var(--g-color-text-light-primary);
-}
-.pc-quote__author_theme_dark h1,
-.pc-quote__author_theme_dark h2,
-.pc-quote__author_theme_dark h3,
-.pc-quote__author_theme_dark h4,
-.pc-quote__author_theme_dark h5,
-.pc-quote__author_theme_dark h6,
-.pc-quote__author_theme_dark .yfm, .pc-quote_theme_dark h1,
-.pc-quote_theme_dark h2,
-.pc-quote_theme_dark h3,
-.pc-quote_theme_dark h4,
-.pc-quote_theme_dark h5,
-.pc-quote_theme_dark h6,
-.pc-quote_theme_dark .yfm {
-  color: var(--g-color-text-light-primary);
-}
 .pc-quote__author {
   max-width: calc(60% - 20px);
   margin-right: 20px;

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components");
 const utils_1 = require("../../components/Media/Image/utils");
 const theme_1 = require("../../context/theme");
@@ -11,23 +10,25 @@ const models_1 = require("../../models");
 const utils_2 = require("../../utils");
 const b = (0, utils_2.block)('quote');
 const Quote = (props) => {
-    const { theme: textTheme = 'light', color, image, border = 'shadow', text, logo, author, url, urlTitle, buttonText, quoteType = models_1.QuoteType.Chevron, } = props;
+    const { theme: textTheme = 'light', color, image, border = 'shadow', text, yfmText, logo, author, url, urlTitle, buttonText, quoteType = models_1.QuoteType.Chevron, button, } = props;
     const theme = (0, theme_1.useTheme)();
     const imageThemed = (0, utils_2.getThemedValue)(image, theme);
     const imageData = (0, utils_1.getMediaImage)(imageThemed);
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.QuoteButton, url);
     const handleButtonClick = (0, react_1.useCallback)(() => handleAnalytics(), [handleAnalytics]);
     const renderFooter = Boolean(author || url) && (react_1.default.createElement("div", { className: b('author-wrapper') },
-        author && (react_1.default.createElement(components_1.Author, { className: b('author', { theme: textTheme }), author: author, type: models_1.AuthorType.Line })),
-        url && buttonText && (react_1.default.createElement(uikit_1.Button, { view: "outlined", size: "xl", href: url, className: b('link-button', { theme: textTheme }), onClick: handleButtonClick, title: urlTitle }, buttonText))));
+        author && (react_1.default.createElement(components_1.Author, { className: b('author', { theme: textTheme }), author: author, type: models_1.AuthorType.Line, theme: textTheme })),
+        url && buttonText && !button && (react_1.default.createElement(components_1.Button, { theme: "outlined", size: "xl", url: url, className: b('link-button', { theme: textTheme }), onClick: handleButtonClick, urlTitle: urlTitle, text: buttonText })),
+        button && react_1.default.createElement(components_1.Button, Object.assign({ size: "xl" }, button))));
     const logoProps = (0, utils_1.getMediaImage)(logo);
     return (react_1.default.createElement("div", { className: b({ theme: textTheme, border }), style: color ? { backgroundColor: color } : {} },
         react_1.default.createElement("div", { key: text, className: b('content-wrapper') },
             react_1.default.createElement("div", null,
                 react_1.default.createElement(components_1.Image, Object.assign({ className: b('logo') }, logoProps)),
                 react_1.default.createElement("div", { className: b('content', { 'quote-type': quoteType }) },
-                    react_1.default.createElement("span", { className: b('text') },
-                        react_1.default.createElement(components_1.HTML, null, text)))),
+                    text && (react_1.default.createElement("span", { className: b('text') },
+                        react_1.default.createElement(components_1.HTML, null, text))),
+                    yfmText && (react_1.default.createElement(components_1.YFMWrapper, { className: b('text'), content: yfmText, modifiers: { constructor: true } })))),
             renderFooter),
         react_1.default.createElement("div", { className: b('image-wrapper') },
             react_1.default.createElement(components_1.Image, Object.assign({}, imageData, { className: b('image') })))));

package/build/cjs/sub-blocks/Quote/schema.d.ts

@@ -7,6 +7,10 @@ export declare const Quote: {
                 type: string;
                 contentType: string;
             };
+            yfmText: {
+                type: string;
+                contentType: string;
+            };
             image: {
                 oneOf: (({
                     oneOf: ({

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

@@ -6,10 +6,13 @@ const common_1 = require("../../schema/validators/common");
 exports.Quote = {
     quote: {
         additionalProperties: false,
-        required: ['text', 'image', 'logo'],
+        required: ['image', 'logo'],
         properties: Object.assign(Object.assign({}, common_1.BaseProps), { text: {
                 type: 'string',
                 contentType: 'text',
+            }, yfmText: {
+                type: 'string',
+                contentType: 'text',
             }, image: (0, common_1.withTheme)(schema_1.ImageProps), logo: schema_1.ImageProps, color: {
                 type: 'string',
             }, url: {

package/build/cjs/text-transform/config.js

@@ -130,10 +130,16 @@ exports.config = {
             transformer: common_1.yfmTransformer,
         },
     ],
-    [models_1.SubBlockType.Quote]: {
-        fields: ['text'],
-        transformer: common_1.typografTransformer,
-    },
+    [models_1.SubBlockType.Quote]: [
+        {
+            fields: ['text'],
+            transformer: common_1.typografTransformer,
+        },
+        {
+            fields: ['yfmText'],
+            transformer: common_1.yfmTransformer,
+        },
+    ],
     [models_1.BlockType.ExtendedFeaturesBlock]: [
         ...exports.blockHeaderTransformer,
         {

package/build/esm/components/Author/Author.css

@@ -5,7 +5,6 @@ unpredictable css rules order in build */
   line-height: var(--g-text-body-3-line-height);
   display: flex;
   flex-direction: column;
-  color: var(--g-color-text-secondary);
 }
 .pc-author__avatar {
   width: 80px;
@@ -25,11 +24,11 @@ unpredictable css rules order in build */
 .pc-author__name {
   font-size: var(--g-text-body-3-font-size);
   line-height: var(--g-text-body-3-line-height);
-  color: var(--g-color-text-primary);
 }
 .pc-author__description {
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
+  color: var(--g-color-text-secondary);
   padding-top: 4px;
 }
 .pc-author__label:not(:first-child) {
@@ -53,4 +52,7 @@ unpredictable css rules order in build */
 }
 .pc-author_type_line .pc-author__label:not(:first-child) {
   margin-left: 16px;
+}
+.pc-author_theme_dark .pc-author__description {
+  color: var(--g-color-text-light-secondary);
 }

package/build/esm/components/Author/Author.js

@@ -6,7 +6,7 @@ import { Image } from '../index';
 import './Author.css';
 const b = block('author');
 const Author = (props) => {
-    const { author, className, authorContainerClassName, type = AuthorType.Column, qa } = props;
+    const { author, className, authorContainerClassName, type = AuthorType.Column, qa, theme, } = props;
     const { firstName, secondName, description, avatar } = author;
     const name = secondName ? `${firstName} ${secondName}` : firstName;
     const isAvatarJSX = React.isValidElement(avatar);
@@ -14,7 +14,7 @@ const Author = (props) => {
     if (!isAvatarJSX && avatar) {
         avatarProps = getMediaImage(avatar);
     }
-    return (React.createElement("div", { className: b({ type }, className), "data-qa": qa },
+    return (React.createElement("div", { className: b({ type, theme }, className), "data-qa": qa },
         avatar && (React.createElement("div", { className: b('avatar', authorContainerClassName) }, isAvatarJSX ? avatar : React.createElement(Image, Object.assign({}, avatarProps)))),
         React.createElement("div", { className: b('label') },
             React.createElement("div", { className: b('name') }, name),

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

@@ -346,6 +346,7 @@ export interface AuthorProps extends QAProps {
     className?: string;
     authorContainerClassName?: string;
     type?: AuthorType;
+    theme?: ContentTheme;
 }
 export interface TitleProps {
     title?: TitleItemProps | string;

package/build/esm/models/constructor-items/sub-blocks.d.ts

@@ -63,16 +63,27 @@ export interface HubspotFormProps extends HubspotEventHandlers, AnalyticsEventsB
     createDOMElement?: boolean;
 }
 export interface QuoteProps extends Themable, CardBaseProps {
-    text: string;
+    text?: string;
+    yfmText?: string;
     image: ThemedImage;
     logo: ImageProps;
     color?: string;
+    /**
+     * @deprecated use property button instead
+     */
     url?: string;
+    /**
+     * @deprecated use property button instead
+     */
     urlTitle?: string;
     author?: AuthorItem;
+    /**
+     * @deprecated use property button instead
+     */
     buttonText?: string;
     theme?: TextTheme;
     quoteType?: QuoteType;
+    button?: ButtonProps;
 }
 export interface BackgroundCardProps extends CardBaseProps, AnalyticsEventsBase, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
     url?: string;

package/build/esm/schema/constants.d.ts

@@ -125,6 +125,10 @@ export declare const cardSchemas: {
                 type: string;
                 contentType: string;
             };
+            yfmText: {
+                type: string;
+                contentType: string;
+            };
             image: {
                 oneOf: (({
                     oneOf: ({

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

@@ -76,6 +76,17 @@ unpredictable css rules order in build */
 .pc-quote__content_quote-type_english-double .pc-quote__text::after {
   content: "”";
 }
+.pc-quote__content .yfm {
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
+}
+.pc-quote__content .yfm > * {
+  display: inline;
+}
+.pc-quote__content .yfm:after {
+  position: relative;
+  left: -5px;
+}
 .pc-quote__image {
   width: 100%;
   height: 100%;
@@ -87,24 +98,6 @@ unpredictable css rules order in build */
   align-items: flex-end;
   margin-top: 20px;
 }
-.pc-quote__author_theme_dark, .pc-quote_theme_dark {
-  color: var(--g-color-text-light-primary);
-}
-.pc-quote__author_theme_dark h1,
-.pc-quote__author_theme_dark h2,
-.pc-quote__author_theme_dark h3,
-.pc-quote__author_theme_dark h4,
-.pc-quote__author_theme_dark h5,
-.pc-quote__author_theme_dark h6,
-.pc-quote__author_theme_dark .yfm, .pc-quote_theme_dark h1,
-.pc-quote_theme_dark h2,
-.pc-quote_theme_dark h3,
-.pc-quote_theme_dark h4,
-.pc-quote_theme_dark h5,
-.pc-quote_theme_dark h6,
-.pc-quote_theme_dark .yfm {
-  color: var(--g-color-text-light-primary);
-}
 .pc-quote__author {
   max-width: calc(60% - 20px);
   margin-right: 20px;

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

@@ -1,6 +1,5 @@
 import React, { useCallback } from 'react';
-import { Button } from '@gravity-ui/uikit';
-import { Author, HTML, Image } from '../../components';
+import { Author, Button, HTML, Image, YFMWrapper } from '../../components';
 import { getMediaImage } from '../../components/Media/Image/utils';
 import { useTheme } from '../../context/theme';
 import { useAnalytics } from '../../hooks';
@@ -9,23 +8,25 @@ import { block, getThemedValue } from '../../utils';
 import './Quote.css';
 const b = block('quote');
 const Quote = (props) => {
-    const { theme: textTheme = 'light', color, image, border = 'shadow', text, logo, author, url, urlTitle, buttonText, quoteType = QuoteType.Chevron, } = props;
+    const { theme: textTheme = 'light', color, image, border = 'shadow', text, yfmText, logo, author, url, urlTitle, buttonText, quoteType = QuoteType.Chevron, button, } = props;
     const theme = useTheme();
     const imageThemed = getThemedValue(image, theme);
     const imageData = getMediaImage(imageThemed);
     const handleAnalytics = useAnalytics(DefaultEventNames.QuoteButton, url);
     const handleButtonClick = useCallback(() => handleAnalytics(), [handleAnalytics]);
     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 }), onClick: handleButtonClick, title: urlTitle }, buttonText))));
+        author && (React.createElement(Author, { className: b('author', { theme: textTheme }), author: author, type: AuthorType.Line, theme: textTheme })),
+        url && buttonText && !button && (React.createElement(Button, { theme: "outlined", size: "xl", url: url, className: b('link-button', { theme: textTheme }), onClick: handleButtonClick, urlTitle: urlTitle, text: buttonText })),
+        button && React.createElement(Button, Object.assign({ size: "xl" }, button))));
     const logoProps = getMediaImage(logo);
     return (React.createElement("div", { className: b({ theme: textTheme, border }), style: color ? { backgroundColor: color } : {} },
         React.createElement("div", { key: text, className: b('content-wrapper') },
             React.createElement("div", null,
                 React.createElement(Image, Object.assign({ className: b('logo') }, logoProps)),
                 React.createElement("div", { className: b('content', { 'quote-type': quoteType }) },
-                    React.createElement("span", { className: b('text') },
-                        React.createElement(HTML, null, text)))),
+                    text && (React.createElement("span", { className: b('text') },
+                        React.createElement(HTML, null, text))),
+                    yfmText && (React.createElement(YFMWrapper, { className: b('text'), content: yfmText, modifiers: { constructor: true } })))),
             renderFooter),
         React.createElement("div", { className: b('image-wrapper') },
             React.createElement(Image, Object.assign({}, imageData, { className: b('image') })))));

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

@@ -7,6 +7,10 @@ export declare const Quote: {
                 type: string;
                 contentType: string;
             };
+            yfmText: {
+                type: string;
+                contentType: string;
+            };
             image: {
                 oneOf: (({
                     oneOf: ({

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

@@ -3,10 +3,13 @@ import { BaseProps, ThemeProps, authorItem, quoteTypes, withTheme, } from '../..
 export const Quote = {
     quote: {
         additionalProperties: false,
-        required: ['text', 'image', 'logo'],
+        required: ['image', 'logo'],
         properties: Object.assign(Object.assign({}, BaseProps), { text: {
                 type: 'string',
                 contentType: 'text',
+            }, yfmText: {
+                type: 'string',
+                contentType: 'text',
             }, image: withTheme(ImageProps), logo: ImageProps, color: {
                 type: 'string',
             }, url: {

package/build/esm/text-transform/config.js

@@ -127,10 +127,16 @@ export const config = {
             transformer: yfmTransformer,
         },
     ],
-    [SubBlockType.Quote]: {
-        fields: ['text'],
-        transformer: typografTransformer,
-    },
+    [SubBlockType.Quote]: [
+        {
+            fields: ['text'],
+            transformer: typografTransformer,
+        },
+        {
+            fields: ['yfmText'],
+            transformer: yfmTransformer,
+        },
+    ],
     [BlockType.ExtendedFeaturesBlock]: [
         ...blockHeaderTransformer,
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.41.0",
+  "version": "4.41.1-alpha.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

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

@@ -346,6 +346,7 @@ export interface AuthorProps extends QAProps {
     className?: string;
     authorContainerClassName?: string;
     type?: AuthorType;
+    theme?: ContentTheme;
 }
 export interface TitleProps {
     title?: TitleItemProps | string;

package/server/models/constructor-items/sub-blocks.d.ts

@@ -63,16 +63,27 @@ export interface HubspotFormProps extends HubspotEventHandlers, AnalyticsEventsB
     createDOMElement?: boolean;
 }
 export interface QuoteProps extends Themable, CardBaseProps {
-    text: string;
+    text?: string;
+    yfmText?: string;
     image: ThemedImage;
     logo: ImageProps;
     color?: string;
+    /**
+     * @deprecated use property button instead
+     */
     url?: string;
+    /**
+     * @deprecated use property button instead
+     */
     urlTitle?: string;
     author?: AuthorItem;
+    /**
+     * @deprecated use property button instead
+     */
     buttonText?: string;
     theme?: TextTheme;
     quoteType?: QuoteType;
+    button?: ButtonProps;
 }
 export interface BackgroundCardProps extends CardBaseProps, AnalyticsEventsBase, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
     url?: string;

package/server/text-transform/config.js

@@ -140,10 +140,16 @@ exports.config = {
             transformer: common_1.yfmTransformer,
         },
     ],
-    [models_1.SubBlockType.Quote]: {
-        fields: ['text'],
-        transformer: common_1.typografTransformer,
-    },
+    [models_1.SubBlockType.Quote]: [
+        {
+            fields: ['text'],
+            transformer: common_1.typografTransformer,
+        },
+        {
+            fields: ['yfmText'],
+            transformer: common_1.yfmTransformer,
+        },
+    ],
     [models_1.BlockType.ExtendedFeaturesBlock]: [
         ...exports.blockHeaderTransformer,
         {

package/styles/variables.scss

@@ -36,6 +36,8 @@ $animationDuration: 300ms;
 
 //colors
 $videoPlayButtonGrey: #eff2f8;
+$secondary: var(--g-color-text-secondary);
+$lightSecondary: var(--g-color-text-light-secondary);
 
 //grid
 $newContentWidth: 1232px;