@gravity-ui/page-constructor 4.29.2 → 4.30.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/blocks/Header/Header.js +2 -2
- package/build/cjs/models/constructor-items/blocks.d.ts +2 -1
- package/build/cjs/models/constructor-items/common.d.ts +4 -0
- package/build/cjs/models/constructor-items/common.js +6 -1
- package/build/cjs/models/constructor-items/sub-blocks.d.ts +2 -1
- package/build/cjs/schema/constants.d.ts +4 -0
- package/build/cjs/schema/validators/common.d.ts +2 -1
- package/build/cjs/schema/validators/common.js +2 -1
- package/build/cjs/sub-blocks/Quote/Quote.css +12 -3
- package/build/cjs/sub-blocks/Quote/Quote.js +2 -2
- package/build/cjs/sub-blocks/Quote/schema.d.ts +4 -0
- package/build/cjs/sub-blocks/Quote/schema.js +4 -1
- package/build/esm/blocks/Header/Header.js +2 -2
- package/build/esm/models/constructor-items/blocks.d.ts +2 -1
- package/build/esm/models/constructor-items/common.d.ts +4 -0
- package/build/esm/models/constructor-items/common.js +5 -0
- package/build/esm/models/constructor-items/sub-blocks.d.ts +2 -1
- package/build/esm/schema/constants.d.ts +4 -0
- package/build/esm/schema/validators/common.d.ts +2 -1
- package/build/esm/schema/validators/common.js +2 -1
- package/build/esm/sub-blocks/Quote/Quote.css +12 -3
- package/build/esm/sub-blocks/Quote/Quote.js +3 -3
- package/build/esm/sub-blocks/Quote/schema.d.ts +4 -0
- package/build/esm/sub-blocks/Quote/schema.js +5 -2
- package/package.json +1 -1
- package/server/models/constructor-items/blocks.d.ts +2 -1
- package/server/models/constructor-items/common.d.ts +4 -0
- package/server/models/constructor-items/common.js +6 -1
- package/server/models/constructor-items/sub-blocks.d.ts +2 -1
- package/widget/index.js +1 -1
|
@@ -21,7 +21,7 @@ const Background = ({ background, isMobile }) => {
|
|
|
21
21
|
};
|
|
22
22
|
const FullWidthBackground = ({ background }) => (react_1.default.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
|
|
23
23
|
const HeaderBlock = (props) => {
|
|
24
|
-
const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, children, mediaView = 'full', } = props;
|
|
24
|
+
const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, renderTitle, children, mediaView = 'full', } = props;
|
|
25
25
|
const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
|
|
26
26
|
const theme = (0, theme_1.useTheme)();
|
|
27
27
|
const hasRightSideImage = Boolean(image || video);
|
|
@@ -59,7 +59,7 @@ const HeaderBlock = (props) => {
|
|
|
59
59
|
react_1.default.createElement(components_1.HTML, null, overtitle))),
|
|
60
60
|
react_1.default.createElement("h1", { className: b('title') },
|
|
61
61
|
status,
|
|
62
|
-
react_1.default.createElement(components_1.HTML, null, title)),
|
|
62
|
+
renderTitle ? renderTitle(title) : react_1.default.createElement(components_1.HTML, null, title)),
|
|
63
63
|
description && (react_1.default.createElement("div", { className: b('description') },
|
|
64
64
|
react_1.default.createElement(YFMWrapper_1.default, { content: description, modifiers: {
|
|
65
65
|
constructor: true,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { ButtonSize } from '@gravity-ui/uikit';
|
|
3
3
|
import { GridColumnSize, GridColumnSizesType } from '../../grid/types';
|
|
4
4
|
import { ThemeSupporting } from '../../utils';
|
|
@@ -109,6 +109,7 @@ export interface HeaderBlockProps {
|
|
|
109
109
|
verticalOffset?: 's' | 'm' | 'l' | 'xl';
|
|
110
110
|
breadcrumbs?: HeaderBreadCrumbsProps;
|
|
111
111
|
status?: JSX.Element;
|
|
112
|
+
renderTitle?: (title: string) => React.ReactNode;
|
|
112
113
|
}
|
|
113
114
|
export interface ExtendedFeaturesItem extends Omit<ContentBlockProps, 'theme' | 'centered' | 'colSizes' | 'size' | 'title'> {
|
|
114
115
|
title: string;
|
|
@@ -42,6 +42,10 @@ export declare enum MediaVideoControlsType {
|
|
|
42
42
|
Default = "default",
|
|
43
43
|
Custom = "custom"
|
|
44
44
|
}
|
|
45
|
+
export declare enum QuoteType {
|
|
46
|
+
Chevron = "chevron",
|
|
47
|
+
EnglishDouble = "english-double"
|
|
48
|
+
}
|
|
45
49
|
export type TextTheme = 'light' | 'dark';
|
|
46
50
|
export type TextSize = 'xs' | 's' | 'm' | 'l';
|
|
47
51
|
export type DividerSize = '0' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.MediaVideoControlsType = exports.MediaVideoType = exports.CustomControlsButtonPositioning = exports.CustomControlsType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
|
|
3
|
+
exports.QuoteType = exports.MediaVideoControlsType = exports.MediaVideoType = exports.CustomControlsButtonPositioning = exports.CustomControlsType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
|
|
4
4
|
// enums
|
|
5
5
|
var AuthorType;
|
|
6
6
|
(function (AuthorType) {
|
|
@@ -51,3 +51,8 @@ var MediaVideoControlsType;
|
|
|
51
51
|
MediaVideoControlsType["Default"] = "default";
|
|
52
52
|
MediaVideoControlsType["Custom"] = "custom";
|
|
53
53
|
})(MediaVideoControlsType = exports.MediaVideoControlsType || (exports.MediaVideoControlsType = {}));
|
|
54
|
+
var QuoteType;
|
|
55
|
+
(function (QuoteType) {
|
|
56
|
+
QuoteType["Chevron"] = "chevron";
|
|
57
|
+
QuoteType["EnglishDouble"] = "english-double";
|
|
58
|
+
})(QuoteType = exports.QuoteType || (exports.QuoteType = {}));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ClassNameProps } from '../../models';
|
|
1
|
+
import { ClassNameProps, QuoteType } from '../../models';
|
|
2
2
|
import { ThemeSupporting } from '../../utils';
|
|
3
3
|
import { HubspotEventData, HubspotEventHandlers } from '../../utils/hubspot';
|
|
4
4
|
import { AnalyticsEventsBase, PixelEvent } from '../common';
|
|
@@ -70,6 +70,7 @@ export interface QuoteProps extends Themable, CardBaseProps {
|
|
|
70
70
|
author?: AuthorItem;
|
|
71
71
|
buttonText?: string;
|
|
72
72
|
theme?: TextTheme;
|
|
73
|
+
quoteType?: QuoteType;
|
|
73
74
|
}
|
|
74
75
|
export interface BackgroundCardProps extends CardBaseProps, AnalyticsEventsBase, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
|
|
75
76
|
url?: string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CustomControlsButtonPositioning, CustomControlsType, MediaVideoControlsType, Theme } from '../../models';
|
|
1
|
+
import { CustomControlsButtonPositioning, CustomControlsType, MediaVideoControlsType, QuoteType, Theme } from '../../models';
|
|
2
2
|
export declare const mediaDirection: string[];
|
|
3
3
|
export declare const textSize: string[];
|
|
4
4
|
export declare const containerSizesArray: string[];
|
|
@@ -19,6 +19,7 @@ export declare const sizeNumber: {
|
|
|
19
19
|
minimum: number;
|
|
20
20
|
};
|
|
21
21
|
export declare const contentThemes: string[];
|
|
22
|
+
export declare const quoteTypes: QuoteType[];
|
|
22
23
|
export declare const customControlsType: CustomControlsType[];
|
|
23
24
|
export declare const customControlsButtonPositioning: CustomControlsButtonPositioning[];
|
|
24
25
|
export declare const BaseProps: {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.BlockHeaderProps = exports.CardBase = exports.MapProps = exports.YMapMarker = exports.YMapMarkerLabel = exports.MediaProps = exports.ButtonBlock = exports.TitleProps = exports.BlockBaseProps = exports.AnchorProps = exports.withTheme = exports.MenuProps = exports.ButtonProps = exports.authorItem = exports.FileLinkProps = exports.LinkProps = exports.BackgroundProps = exports.DataLensProps = exports.DataLensObjectProps = exports.JustifyProps = exports.ThemeProps = exports.VideoProps = exports.CustomControlsOptionsProps = exports.PlayButtonProps = exports.LoopProps = exports.ChildrenCardsProps = exports.ChildrenProps = exports.AnimatableProps = exports.sliderSizesObject = exports.containerSizesObject = exports.BaseProps = exports.customControlsButtonPositioning = exports.customControlsType = exports.contentThemes = exports.sizeNumber = exports.dividerEnum = exports.fileLinkTypes = exports.videoControlsTypes = exports.playIconThemes = exports.playIconTypes = exports.videoTypes = exports.contentTextWidth = exports.contentSizes = exports.sliderSizesArray = exports.containerSizesArray = exports.textSize = exports.mediaDirection = void 0;
|
|
3
|
+
exports.BlockHeaderProps = exports.CardBase = exports.MapProps = exports.YMapMarker = exports.YMapMarkerLabel = exports.MediaProps = exports.ButtonBlock = exports.TitleProps = exports.BlockBaseProps = exports.AnchorProps = exports.withTheme = exports.MenuProps = exports.ButtonProps = exports.authorItem = exports.FileLinkProps = exports.LinkProps = exports.BackgroundProps = exports.DataLensProps = exports.DataLensObjectProps = exports.JustifyProps = exports.ThemeProps = exports.VideoProps = exports.CustomControlsOptionsProps = exports.PlayButtonProps = exports.LoopProps = exports.ChildrenCardsProps = exports.ChildrenProps = exports.AnimatableProps = exports.sliderSizesObject = exports.containerSizesObject = exports.BaseProps = exports.customControlsButtonPositioning = exports.customControlsType = exports.quoteTypes = exports.contentThemes = exports.sizeNumber = exports.dividerEnum = exports.fileLinkTypes = exports.videoControlsTypes = exports.playIconThemes = exports.playIconTypes = exports.videoTypes = exports.contentTextWidth = exports.contentSizes = exports.sliderSizesArray = exports.containerSizesArray = exports.textSize = exports.mediaDirection = void 0;
|
|
4
4
|
const schema_1 = require("../../components/Image/schema");
|
|
5
5
|
const models_1 = require("../../models");
|
|
6
6
|
const event_1 = require("./event");
|
|
@@ -19,6 +19,7 @@ exports.fileLinkTypes = ['vertical', 'horizontal'];
|
|
|
19
19
|
exports.dividerEnum = { enum: [0, 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'] };
|
|
20
20
|
exports.sizeNumber = { type: 'number', maximum: 12, minimum: 1 };
|
|
21
21
|
exports.contentThemes = ['default', 'dark', 'light'];
|
|
22
|
+
exports.quoteTypes = Object.values(models_1.QuoteType);
|
|
22
23
|
exports.customControlsType = [
|
|
23
24
|
models_1.CustomControlsType.WithMuteButton,
|
|
24
25
|
models_1.CustomControlsType.WithPlayPauseButton,
|
|
@@ -60,14 +60,23 @@ unpredictable css rules order in build */
|
|
|
60
60
|
font-size: var(--g-text-body-3-font-size);
|
|
61
61
|
line-height: var(--g-text-body-3-line-height);
|
|
62
62
|
}
|
|
63
|
-
.pc-
|
|
63
|
+
.pc-quote__content_quote-type_chevron::before {
|
|
64
64
|
position: absolute;
|
|
65
65
|
top: -1px;
|
|
66
66
|
left: -10px;
|
|
67
67
|
content: "«";
|
|
68
68
|
}
|
|
69
|
-
.pc-quote__text::after {
|
|
70
|
-
content: "
|
|
69
|
+
.pc-quote__content_quote-type_chevron .pc-quote__text::after {
|
|
70
|
+
content: "»";
|
|
71
|
+
}
|
|
72
|
+
.pc-quote__content_quote-type_english-double::before {
|
|
73
|
+
position: absolute;
|
|
74
|
+
top: -1px;
|
|
75
|
+
left: -8px;
|
|
76
|
+
content: "“";
|
|
77
|
+
}
|
|
78
|
+
.pc-quote__content_quote-type_english-double .pc-quote__text::after {
|
|
79
|
+
content: "”";
|
|
71
80
|
}
|
|
72
81
|
.pc-quote__image {
|
|
73
82
|
width: 100%;
|
|
@@ -11,7 +11,7 @@ const models_1 = require("../../models");
|
|
|
11
11
|
const utils_2 = require("../../utils");
|
|
12
12
|
const b = (0, utils_2.block)('quote');
|
|
13
13
|
const Quote = (props) => {
|
|
14
|
-
const { theme: textTheme = 'light', color, image, border = 'shadow', text, logo, author, url, buttonText, } = props;
|
|
14
|
+
const { theme: textTheme = 'light', color, image, border = 'shadow', text, logo, author, url, buttonText, quoteType = models_1.QuoteType.Chevron, } = props;
|
|
15
15
|
const theme = (0, theme_1.useTheme)();
|
|
16
16
|
const imageThemed = (0, utils_2.getThemedValue)(image, theme);
|
|
17
17
|
const imageData = (0, utils_1.getMediaImage)(imageThemed);
|
|
@@ -25,7 +25,7 @@ const Quote = (props) => {
|
|
|
25
25
|
react_1.default.createElement("div", { key: text, className: b('content-wrapper') },
|
|
26
26
|
react_1.default.createElement("div", null,
|
|
27
27
|
react_1.default.createElement(components_1.Image, Object.assign({ className: b('logo') }, logoProps)),
|
|
28
|
-
react_1.default.createElement("div", { className: b('content') },
|
|
28
|
+
react_1.default.createElement("div", { className: b('content', { 'quote-type': quoteType }) },
|
|
29
29
|
react_1.default.createElement("span", { className: b('text') },
|
|
30
30
|
react_1.default.createElement(components_1.HTML, null, text)))),
|
|
31
31
|
renderFooter),
|
|
@@ -16,6 +16,9 @@ exports.Quote = {
|
|
|
16
16
|
type: 'string',
|
|
17
17
|
}, buttonText: {
|
|
18
18
|
type: 'string',
|
|
19
|
-
}, theme: common_1.ThemeProps, author: common_1.authorItem
|
|
19
|
+
}, theme: common_1.ThemeProps, author: common_1.authorItem, quoteType: {
|
|
20
|
+
type: 'string',
|
|
21
|
+
enum: common_1.quoteTypes,
|
|
22
|
+
} }),
|
|
20
23
|
},
|
|
21
24
|
};
|
|
@@ -18,7 +18,7 @@ const Background = ({ background, isMobile }) => {
|
|
|
18
18
|
};
|
|
19
19
|
const FullWidthBackground = ({ background }) => (React.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
|
|
20
20
|
export const HeaderBlock = (props) => {
|
|
21
|
-
const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, children, mediaView = 'full', } = props;
|
|
21
|
+
const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, renderTitle, children, mediaView = 'full', } = props;
|
|
22
22
|
const isMobile = useContext(MobileContext);
|
|
23
23
|
const theme = useTheme();
|
|
24
24
|
const hasRightSideImage = Boolean(image || video);
|
|
@@ -56,7 +56,7 @@ export const HeaderBlock = (props) => {
|
|
|
56
56
|
React.createElement(HTML, null, overtitle))),
|
|
57
57
|
React.createElement("h1", { className: b('title') },
|
|
58
58
|
status,
|
|
59
|
-
React.createElement(HTML, null, title)),
|
|
59
|
+
renderTitle ? renderTitle(title) : React.createElement(HTML, null, title)),
|
|
60
60
|
description && (React.createElement("div", { className: b('description') },
|
|
61
61
|
React.createElement(YFMWrapper, { content: description, modifiers: {
|
|
62
62
|
constructor: true,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { ButtonSize } from '@gravity-ui/uikit';
|
|
3
3
|
import { GridColumnSize, GridColumnSizesType } from '../../grid/types';
|
|
4
4
|
import { ThemeSupporting } from '../../utils';
|
|
@@ -109,6 +109,7 @@ export interface HeaderBlockProps {
|
|
|
109
109
|
verticalOffset?: 's' | 'm' | 'l' | 'xl';
|
|
110
110
|
breadcrumbs?: HeaderBreadCrumbsProps;
|
|
111
111
|
status?: JSX.Element;
|
|
112
|
+
renderTitle?: (title: string) => React.ReactNode;
|
|
112
113
|
}
|
|
113
114
|
export interface ExtendedFeaturesItem extends Omit<ContentBlockProps, 'theme' | 'centered' | 'colSizes' | 'size' | 'title'> {
|
|
114
115
|
title: string;
|
|
@@ -42,6 +42,10 @@ export declare enum MediaVideoControlsType {
|
|
|
42
42
|
Default = "default",
|
|
43
43
|
Custom = "custom"
|
|
44
44
|
}
|
|
45
|
+
export declare enum QuoteType {
|
|
46
|
+
Chevron = "chevron",
|
|
47
|
+
EnglishDouble = "english-double"
|
|
48
|
+
}
|
|
45
49
|
export type TextTheme = 'light' | 'dark';
|
|
46
50
|
export type TextSize = 'xs' | 's' | 'm' | 'l';
|
|
47
51
|
export type DividerSize = '0' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
|
|
@@ -48,3 +48,8 @@ export var MediaVideoControlsType;
|
|
|
48
48
|
MediaVideoControlsType["Default"] = "default";
|
|
49
49
|
MediaVideoControlsType["Custom"] = "custom";
|
|
50
50
|
})(MediaVideoControlsType || (MediaVideoControlsType = {}));
|
|
51
|
+
export var QuoteType;
|
|
52
|
+
(function (QuoteType) {
|
|
53
|
+
QuoteType["Chevron"] = "chevron";
|
|
54
|
+
QuoteType["EnglishDouble"] = "english-double";
|
|
55
|
+
})(QuoteType || (QuoteType = {}));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ClassNameProps } from '../../models';
|
|
1
|
+
import { ClassNameProps, QuoteType } from '../../models';
|
|
2
2
|
import { ThemeSupporting } from '../../utils';
|
|
3
3
|
import { HubspotEventData, HubspotEventHandlers } from '../../utils/hubspot';
|
|
4
4
|
import { AnalyticsEventsBase, PixelEvent } from '../common';
|
|
@@ -70,6 +70,7 @@ export interface QuoteProps extends Themable, CardBaseProps {
|
|
|
70
70
|
author?: AuthorItem;
|
|
71
71
|
buttonText?: string;
|
|
72
72
|
theme?: TextTheme;
|
|
73
|
+
quoteType?: QuoteType;
|
|
73
74
|
}
|
|
74
75
|
export interface BackgroundCardProps extends CardBaseProps, AnalyticsEventsBase, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
|
|
75
76
|
url?: string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CustomControlsButtonPositioning, CustomControlsType, MediaVideoControlsType, Theme } from '../../models';
|
|
1
|
+
import { CustomControlsButtonPositioning, CustomControlsType, MediaVideoControlsType, QuoteType, Theme } from '../../models';
|
|
2
2
|
export declare const mediaDirection: string[];
|
|
3
3
|
export declare const textSize: string[];
|
|
4
4
|
export declare const containerSizesArray: string[];
|
|
@@ -19,6 +19,7 @@ export declare const sizeNumber: {
|
|
|
19
19
|
minimum: number;
|
|
20
20
|
};
|
|
21
21
|
export declare const contentThemes: string[];
|
|
22
|
+
export declare const quoteTypes: QuoteType[];
|
|
22
23
|
export declare const customControlsType: CustomControlsType[];
|
|
23
24
|
export declare const customControlsButtonPositioning: CustomControlsButtonPositioning[];
|
|
24
25
|
export declare const BaseProps: {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ImageProps } from '../../components/Image/schema';
|
|
2
|
-
import { CustomControlsButtonPositioning, CustomControlsType, MediaVideoControlsType, Theme, } from '../../models';
|
|
2
|
+
import { CustomControlsButtonPositioning, CustomControlsType, MediaVideoControlsType, QuoteType, Theme, } from '../../models';
|
|
3
3
|
import { AnalyticsEventSchema } from './event';
|
|
4
4
|
import { pixelEvents } from './pixel';
|
|
5
5
|
export const mediaDirection = ['media-content', 'content-media'];
|
|
@@ -16,6 +16,7 @@ export const fileLinkTypes = ['vertical', 'horizontal'];
|
|
|
16
16
|
export const dividerEnum = { enum: [0, 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'] };
|
|
17
17
|
export const sizeNumber = { type: 'number', maximum: 12, minimum: 1 };
|
|
18
18
|
export const contentThemes = ['default', 'dark', 'light'];
|
|
19
|
+
export const quoteTypes = Object.values(QuoteType);
|
|
19
20
|
export const customControlsType = [
|
|
20
21
|
CustomControlsType.WithMuteButton,
|
|
21
22
|
CustomControlsType.WithPlayPauseButton,
|
|
@@ -60,14 +60,23 @@ unpredictable css rules order in build */
|
|
|
60
60
|
font-size: var(--g-text-body-3-font-size);
|
|
61
61
|
line-height: var(--g-text-body-3-line-height);
|
|
62
62
|
}
|
|
63
|
-
.pc-
|
|
63
|
+
.pc-quote__content_quote-type_chevron::before {
|
|
64
64
|
position: absolute;
|
|
65
65
|
top: -1px;
|
|
66
66
|
left: -10px;
|
|
67
67
|
content: "«";
|
|
68
68
|
}
|
|
69
|
-
.pc-quote__text::after {
|
|
70
|
-
content: "
|
|
69
|
+
.pc-quote__content_quote-type_chevron .pc-quote__text::after {
|
|
70
|
+
content: "»";
|
|
71
|
+
}
|
|
72
|
+
.pc-quote__content_quote-type_english-double::before {
|
|
73
|
+
position: absolute;
|
|
74
|
+
top: -1px;
|
|
75
|
+
left: -8px;
|
|
76
|
+
content: "“";
|
|
77
|
+
}
|
|
78
|
+
.pc-quote__content_quote-type_english-double .pc-quote__text::after {
|
|
79
|
+
content: "”";
|
|
71
80
|
}
|
|
72
81
|
.pc-quote__image {
|
|
73
82
|
width: 100%;
|
|
@@ -4,12 +4,12 @@ import { Author, HTML, Image } from '../../components';
|
|
|
4
4
|
import { getMediaImage } from '../../components/Media/Image/utils';
|
|
5
5
|
import { useTheme } from '../../context/theme';
|
|
6
6
|
import { useAnalytics } from '../../hooks';
|
|
7
|
-
import { AuthorType, DefaultEventNames } from '../../models';
|
|
7
|
+
import { AuthorType, DefaultEventNames, QuoteType } from '../../models';
|
|
8
8
|
import { block, getThemedValue } from '../../utils';
|
|
9
9
|
import './Quote.css';
|
|
10
10
|
const b = block('quote');
|
|
11
11
|
const Quote = (props) => {
|
|
12
|
-
const { theme: textTheme = 'light', color, image, border = 'shadow', text, logo, author, url, buttonText, } = props;
|
|
12
|
+
const { theme: textTheme = 'light', color, image, border = 'shadow', text, logo, author, url, buttonText, quoteType = QuoteType.Chevron, } = props;
|
|
13
13
|
const theme = useTheme();
|
|
14
14
|
const imageThemed = getThemedValue(image, theme);
|
|
15
15
|
const imageData = getMediaImage(imageThemed);
|
|
@@ -23,7 +23,7 @@ const Quote = (props) => {
|
|
|
23
23
|
React.createElement("div", { key: text, className: b('content-wrapper') },
|
|
24
24
|
React.createElement("div", null,
|
|
25
25
|
React.createElement(Image, Object.assign({ className: b('logo') }, logoProps)),
|
|
26
|
-
React.createElement("div", { className: b('content') },
|
|
26
|
+
React.createElement("div", { className: b('content', { 'quote-type': quoteType }) },
|
|
27
27
|
React.createElement("span", { className: b('text') },
|
|
28
28
|
React.createElement(HTML, null, text)))),
|
|
29
29
|
renderFooter),
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ImageProps } from '../../components/Image/schema';
|
|
2
|
-
import { BaseProps, ThemeProps, authorItem, withTheme } from '../../schema/validators/common';
|
|
2
|
+
import { BaseProps, ThemeProps, authorItem, quoteTypes, withTheme, } from '../../schema/validators/common';
|
|
3
3
|
export const Quote = {
|
|
4
4
|
quote: {
|
|
5
5
|
additionalProperties: false,
|
|
@@ -13,6 +13,9 @@ export const Quote = {
|
|
|
13
13
|
type: 'string',
|
|
14
14
|
}, buttonText: {
|
|
15
15
|
type: 'string',
|
|
16
|
-
}, theme: ThemeProps, author: authorItem
|
|
16
|
+
}, theme: ThemeProps, author: authorItem, quoteType: {
|
|
17
|
+
type: 'string',
|
|
18
|
+
enum: quoteTypes,
|
|
19
|
+
} }),
|
|
17
20
|
},
|
|
18
21
|
};
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { ButtonSize } from '@gravity-ui/uikit';
|
|
3
3
|
import { GridColumnSize, GridColumnSizesType } from '../../grid/types';
|
|
4
4
|
import { ThemeSupporting } from '../../utils';
|
|
@@ -109,6 +109,7 @@ export interface HeaderBlockProps {
|
|
|
109
109
|
verticalOffset?: 's' | 'm' | 'l' | 'xl';
|
|
110
110
|
breadcrumbs?: HeaderBreadCrumbsProps;
|
|
111
111
|
status?: JSX.Element;
|
|
112
|
+
renderTitle?: (title: string) => React.ReactNode;
|
|
112
113
|
}
|
|
113
114
|
export interface ExtendedFeaturesItem extends Omit<ContentBlockProps, 'theme' | 'centered' | 'colSizes' | 'size' | 'title'> {
|
|
114
115
|
title: string;
|
|
@@ -42,6 +42,10 @@ export declare enum MediaVideoControlsType {
|
|
|
42
42
|
Default = "default",
|
|
43
43
|
Custom = "custom"
|
|
44
44
|
}
|
|
45
|
+
export declare enum QuoteType {
|
|
46
|
+
Chevron = "chevron",
|
|
47
|
+
EnglishDouble = "english-double"
|
|
48
|
+
}
|
|
45
49
|
export type TextTheme = 'light' | 'dark';
|
|
46
50
|
export type TextSize = 'xs' | 's' | 'm' | 'l';
|
|
47
51
|
export type DividerSize = '0' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.MediaVideoControlsType = exports.MediaVideoType = exports.CustomControlsButtonPositioning = exports.CustomControlsType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
|
|
3
|
+
exports.QuoteType = exports.MediaVideoControlsType = exports.MediaVideoType = exports.CustomControlsButtonPositioning = exports.CustomControlsType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
|
|
4
4
|
// enums
|
|
5
5
|
var AuthorType;
|
|
6
6
|
(function (AuthorType) {
|
|
@@ -51,3 +51,8 @@ var MediaVideoControlsType;
|
|
|
51
51
|
MediaVideoControlsType["Default"] = "default";
|
|
52
52
|
MediaVideoControlsType["Custom"] = "custom";
|
|
53
53
|
})(MediaVideoControlsType = exports.MediaVideoControlsType || (exports.MediaVideoControlsType = {}));
|
|
54
|
+
var QuoteType;
|
|
55
|
+
(function (QuoteType) {
|
|
56
|
+
QuoteType["Chevron"] = "chevron";
|
|
57
|
+
QuoteType["EnglishDouble"] = "english-double";
|
|
58
|
+
})(QuoteType = exports.QuoteType || (exports.QuoteType = {}));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ClassNameProps } from '../../models';
|
|
1
|
+
import { ClassNameProps, QuoteType } from '../../models';
|
|
2
2
|
import { ThemeSupporting } from '../../utils';
|
|
3
3
|
import { HubspotEventData, HubspotEventHandlers } from '../../utils/hubspot';
|
|
4
4
|
import { AnalyticsEventsBase, PixelEvent } from '../common';
|
|
@@ -70,6 +70,7 @@ export interface QuoteProps extends Themable, CardBaseProps {
|
|
|
70
70
|
author?: AuthorItem;
|
|
71
71
|
buttonText?: string;
|
|
72
72
|
theme?: TextTheme;
|
|
73
|
+
quoteType?: QuoteType;
|
|
73
74
|
}
|
|
74
75
|
export interface BackgroundCardProps extends CardBaseProps, AnalyticsEventsBase, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
|
|
75
76
|
url?: string;
|