@gravity-ui/blog-constructor 4.4.2 → 5.0.1
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/Author/Author.css +2 -2
- package/build/cjs/blocks/Banner/schema.d.ts +11 -0
- package/build/cjs/blocks/CTA/CTA.css +1 -1
- package/build/cjs/blocks/CTA/CTA.js +1 -1
- package/build/cjs/blocks/CTA/schema.d.ts +11 -0
- package/build/cjs/blocks/ColoredText/schema.d.ts +11 -0
- package/build/cjs/blocks/Header/Header.js +1 -1
- package/build/cjs/blocks/Media/Media.css +1 -1
- package/build/cjs/blocks/Meta/Meta.js +2 -2
- package/build/cjs/components/ButtonWithIcon/ButtonWithIcon.css +6 -6
- package/build/cjs/components/FeedHeader/FeedHeader.css +3 -3
- package/build/cjs/components/FeedHeader/FeedHeader.js +1 -1
- package/build/cjs/components/FeedHeader/components/Controls/Controls.css +11 -9
- package/build/cjs/components/FeedHeader/components/CustomSelectOption/CustomSelectOption.css +2 -2
- package/build/cjs/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.css +9 -9
- package/build/cjs/components/Paginator/Paginator.css +6 -6
- package/build/cjs/components/PostCard/PostCard.css +15 -15
- package/build/cjs/components/PostCard/PostCard.js +1 -1
- package/build/cjs/components/PostInfo/PostInfo.css +20 -20
- package/build/cjs/components/PostInfo/PostInfo.d.ts +3 -4
- package/build/cjs/components/PostInfo/PostInfo.js +3 -3
- package/build/cjs/components/PostInfo/SuggestPostInfo.d.ts +3 -4
- package/build/cjs/components/PostInfo/SuggestPostInfo.js +3 -3
- package/build/cjs/components/PostInfo/components/Save.d.ts +3 -3
- package/build/cjs/components/PostInfo/components/Save.js +3 -3
- package/build/cjs/components/PostInfo/components/Sharing.js +2 -2
- package/build/cjs/components/Posts/Posts.css +1 -1
- package/build/cjs/components/PostsEmpty/PostsEmpty.css +5 -5
- package/build/cjs/components/PostsError/PostError.css +5 -5
- package/build/cjs/components/Prompt/Prompt.css +2 -2
- package/build/cjs/components/Search/Search.css +8 -8
- package/build/cjs/components/Wrapper/Wrapper.d.ts +2 -3
- package/build/cjs/components/Wrapper/Wrapper.js +2 -2
- package/build/cjs/constants.d.ts +2 -0
- package/build/cjs/constants.js +3 -1
- package/build/cjs/containers/BlogPage/BlogPage.css +8 -8
- package/build/cjs/containers/BlogPostPage/BlogPostPage.css +49 -49
- package/build/cjs/containers/BlogPostPage/BlogPostPage.d.ts +1 -1
- package/build/cjs/contexts/PostPageContext.d.ts +1 -1
- package/build/cjs/contexts/theme/ThemeProvider.js +4 -4
- package/build/cjs/models/common.d.ts +3 -0
- package/build/cjs/schema/index.d.ts +33 -0
- package/build/cjs/utils/common.d.ts +1 -0
- package/build/esm/blocks/Author/Author.css +2 -2
- package/build/esm/blocks/Banner/schema.d.ts +11 -0
- package/build/esm/blocks/CTA/CTA.css +1 -1
- package/build/esm/blocks/CTA/CTA.js +1 -1
- package/build/esm/blocks/CTA/schema.d.ts +11 -0
- package/build/esm/blocks/ColoredText/schema.d.ts +11 -0
- package/build/esm/blocks/Header/Header.js +1 -1
- package/build/esm/blocks/Media/Media.css +1 -1
- package/build/esm/blocks/Meta/Meta.js +2 -2
- package/build/esm/components/ButtonWithIcon/ButtonWithIcon.css +6 -6
- package/build/esm/components/FeedHeader/FeedHeader.css +3 -3
- package/build/esm/components/FeedHeader/FeedHeader.js +1 -1
- package/build/esm/components/FeedHeader/components/Controls/Controls.css +11 -9
- package/build/esm/components/FeedHeader/components/CustomSelectOption/CustomSelectOption.css +2 -2
- package/build/esm/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.css +9 -9
- package/build/esm/components/Paginator/Paginator.css +6 -6
- package/build/esm/components/PostCard/PostCard.css +15 -15
- package/build/esm/components/PostCard/PostCard.js +1 -1
- package/build/esm/components/PostInfo/PostInfo.css +20 -20
- package/build/esm/components/PostInfo/PostInfo.d.ts +3 -4
- package/build/esm/components/PostInfo/PostInfo.js +3 -3
- package/build/esm/components/PostInfo/SuggestPostInfo.d.ts +3 -4
- package/build/esm/components/PostInfo/SuggestPostInfo.js +3 -3
- package/build/esm/components/PostInfo/components/Save.d.ts +3 -3
- package/build/esm/components/PostInfo/components/Save.js +3 -3
- package/build/esm/components/PostInfo/components/Sharing.js +2 -2
- package/build/esm/components/Posts/Posts.css +1 -1
- package/build/esm/components/PostsEmpty/PostsEmpty.css +5 -5
- package/build/esm/components/PostsError/PostError.css +5 -5
- package/build/esm/components/Prompt/Prompt.css +2 -2
- package/build/esm/components/Search/Search.css +8 -8
- package/build/esm/components/Wrapper/Wrapper.d.ts +2 -3
- package/build/esm/components/Wrapper/Wrapper.js +2 -2
- package/build/esm/constants.d.ts +2 -0
- package/build/esm/constants.js +2 -0
- package/build/esm/containers/BlogPage/BlogPage.css +8 -8
- package/build/esm/containers/BlogPostPage/BlogPostPage.css +49 -49
- package/build/esm/containers/BlogPostPage/BlogPostPage.d.ts +1 -1
- package/build/esm/contexts/PostPageContext.d.ts +1 -1
- package/build/esm/contexts/theme/ThemeProvider.js +5 -5
- package/build/esm/models/common.d.ts +3 -0
- package/build/esm/schema/index.d.ts +33 -0
- package/build/esm/utils/common.d.ts +1 -0
- package/package.json +8 -7
- package/server/models/common.d.ts +3 -0
- package/styles/root.css +8 -8
- package/styles/root.scss +8 -8
- package/styles/storybook/common.scss +12 -6
- package/styles/storybook/palette.scss +6 -6
- package/styles/storybook/typography.scss +46 -46
- package/styles/yfm.css +26 -26
- package/styles/yfm.scss +14 -14
|
@@ -22,12 +22,12 @@ const b = (0, cn_1.block)('post-info');
|
|
|
22
22
|
* @param postId - post id
|
|
23
23
|
* @param hasUserLike - flag what blog has like from current user
|
|
24
24
|
* @param metrikaGoal - metrika goal name
|
|
25
|
-
* @param
|
|
25
|
+
* @param qa - test-attr
|
|
26
26
|
* @param size - text size
|
|
27
27
|
*
|
|
28
28
|
* @returns jsx
|
|
29
29
|
*/
|
|
30
|
-
const Save = ({ title, postId, hasUserLike, handleUserLike, metrikaGoal, size, theme,
|
|
30
|
+
const Save = ({ title, postId, hasUserLike, handleUserLike, metrikaGoal, size, theme, qa, }) => {
|
|
31
31
|
const { toggleLike, isSignedInUser, requireSignIn } = (0, react_1.useContext)(LikesContext_1.LikesContext);
|
|
32
32
|
const handleAnalytics = (0, page_constructor_1.useAnalytics)(common_1.DefaultEventNames.SaveButton);
|
|
33
33
|
const isLikeable = Boolean(toggleLike);
|
|
@@ -48,7 +48,7 @@ const Save = ({ title, postId, hasUserLike, handleUserLike, metrikaGoal, size, t
|
|
|
48
48
|
handleUserLike();
|
|
49
49
|
metrika_js_1.default.reachGoal(utils_1.MetrikaCounter.CrossSite, metrikaGoal);
|
|
50
50
|
handleAnalytics();
|
|
51
|
-
}, "data-qa": `${
|
|
51
|
+
}, "data-qa": `${qa ? qa + '-' : ''}save` },
|
|
52
52
|
react_1.default.createElement("div", { className: b('content', { cursor: isLikeable, theme }) },
|
|
53
53
|
react_1.default.createElement("span", { className: b('icon') },
|
|
54
54
|
react_1.default.createElement(uikit_1.Icon, { data: hasUserLike ? SaveFilled_1.SaveFilled : Save_1.Save, size: ICON_SIZE, className: b({ filled: Boolean(hasUserLike) }) })),
|
|
@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.Sharing = void 0;
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const react_1 = tslib_1.__importStar(require("react"));
|
|
6
|
+
const components_1 = require("@gravity-ui/components");
|
|
6
7
|
const page_constructor_1 = require("@gravity-ui/page-constructor");
|
|
7
|
-
const uikit_1 = require("@gravity-ui/uikit");
|
|
8
8
|
const MobileContext_1 = require("../../../contexts/MobileContext");
|
|
9
9
|
const PostPageContext_1 = require("../../../contexts/PostPageContext");
|
|
10
10
|
const RouterContext_1 = require("../../../contexts/RouterContext");
|
|
@@ -30,6 +30,6 @@ const Sharing = ({ theme, metrikaGoal }) => {
|
|
|
30
30
|
}, [handleAnalyticsGlobal, handleMetrika]);
|
|
31
31
|
return (react_1.default.createElement("div", { className: b('item') },
|
|
32
32
|
react_1.default.createElement("div", { className: b('icon') },
|
|
33
|
-
react_1.default.createElement(
|
|
33
|
+
react_1.default.createElement(components_1.SharePopover, { url: (0, common_2.getAbsolutePath)(router), className: b('share'), iconClass: b('share-icon'), switcherClassName: b('switcher', { theme }), tooltipClassName: b('popup'), useWebShareApi: isMobile, direction: components_1.ShareLayoutDirection.Column, buttonTitle: (0, i18n_1.i18)(i18n_1.Keyset.ActionShare), customIcon: ShareArrowUp_1.ShareArrowUp, placement: "bottom", openByHover: false, shareOptions: shareOptions, onClick: handleAnalytics }))));
|
|
34
34
|
};
|
|
35
35
|
exports.Sharing = Sharing;
|
|
@@ -26,7 +26,7 @@ unpredictable css rules order in build */
|
|
|
26
26
|
flex-direction: column;
|
|
27
27
|
align-items: center;
|
|
28
28
|
justify-content: center;
|
|
29
|
-
color: var(--
|
|
29
|
+
color: var(--g-color-base-danger-medium);
|
|
30
30
|
padding-bottom: 12px;
|
|
31
31
|
}
|
|
32
32
|
.bc-posts__paginator {
|
|
@@ -14,12 +14,12 @@ unpredictable css rules order in build */
|
|
|
14
14
|
}
|
|
15
15
|
.bc-posts-empty__title {
|
|
16
16
|
margin-top: 24px;
|
|
17
|
-
font-size: var(--
|
|
18
|
-
line-height: var(--
|
|
19
|
-
font-weight: var(--
|
|
17
|
+
font-size: var(--g-text-display-2-font-size);
|
|
18
|
+
line-height: var(--g-text-display-2-line-height);
|
|
19
|
+
font-weight: var(--g-text-accent-font-weight);
|
|
20
20
|
}
|
|
21
21
|
.bc-posts-empty__subtitle {
|
|
22
22
|
margin-top: 16px;
|
|
23
|
-
font-size: var(--
|
|
24
|
-
line-height: var(--
|
|
23
|
+
font-size: var(--g-text-body-3-font-size);
|
|
24
|
+
line-height: var(--g-text-body-3-line-height);
|
|
25
25
|
}
|
|
@@ -16,14 +16,14 @@ unpredictable css rules order in build */
|
|
|
16
16
|
}
|
|
17
17
|
.bc-posts-error__title {
|
|
18
18
|
margin-top: 24px;
|
|
19
|
-
font-size: var(--
|
|
20
|
-
line-height: var(--
|
|
21
|
-
font-weight: var(--
|
|
19
|
+
font-size: var(--g-text-display-2-font-size);
|
|
20
|
+
line-height: var(--g-text-display-2-line-height);
|
|
21
|
+
font-weight: var(--g-text-accent-font-weight);
|
|
22
22
|
}
|
|
23
23
|
.bc-posts-error__subtitle {
|
|
24
24
|
margin-top: 16px;
|
|
25
|
-
font-size: var(--
|
|
26
|
-
line-height: var(--
|
|
25
|
+
font-size: var(--g-text-body-3-font-size);
|
|
26
|
+
line-height: var(--g-text-body-3-line-height);
|
|
27
27
|
}
|
|
28
28
|
.bc-posts-error__button {
|
|
29
29
|
padding: 24px 0 48px;
|
|
@@ -43,8 +43,8 @@ unpredictable css rules order in build */
|
|
|
43
43
|
margin: 24px;
|
|
44
44
|
padding: 16px 20px;
|
|
45
45
|
border-radius: calc(var(--pc-border-radius) / 2);
|
|
46
|
-
background-color: var(--
|
|
47
|
-
font-size: var(--
|
|
46
|
+
background-color: var(--g-color-base-float);
|
|
47
|
+
font-size: var(--g-text-body-2-font-size);
|
|
48
48
|
}
|
|
49
49
|
.bc-prompt_close {
|
|
50
50
|
pointer-events: none;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/* use this for style redefinitions to awoid problems with
|
|
2
2
|
unpredictable css rules order in build */
|
|
3
3
|
.bc-search {
|
|
4
|
-
font-size: var(--
|
|
5
|
-
line-height: var(--
|
|
4
|
+
font-size: var(--g-text-body-1-font-size);
|
|
5
|
+
line-height: var(--g-text-body-1-line-height);
|
|
6
6
|
position: relative;
|
|
7
7
|
display: flex;
|
|
8
8
|
align-items: center;
|
|
@@ -14,30 +14,30 @@ unpredictable css rules order in build */
|
|
|
14
14
|
position: absolute;
|
|
15
15
|
z-index: 2;
|
|
16
16
|
right: 10px;
|
|
17
|
-
color: var(--
|
|
17
|
+
color: var(--g-color-text-hint);
|
|
18
18
|
}
|
|
19
19
|
.bc-search__search-button:hover {
|
|
20
|
-
color: var(--
|
|
20
|
+
color: var(--g-color-text-secondary);
|
|
21
21
|
}
|
|
22
22
|
.bc-search__search-suggest-container {
|
|
23
23
|
width: 100%;
|
|
24
24
|
}
|
|
25
25
|
.bc-search .bc-search__search-suggest-control {
|
|
26
|
-
background-color: var(--
|
|
26
|
+
background-color: var(--g-color-base-background);
|
|
27
27
|
padding-left: 12px;
|
|
28
28
|
padding-right: 32px;
|
|
29
29
|
border-radius: var(--bc-text-input-border-radius);
|
|
30
30
|
border: 1px solid transparent;
|
|
31
31
|
}
|
|
32
32
|
.bc-search .bc-search__search-suggest-control:hover, .bc-search .bc-search__search-suggest-control:focus {
|
|
33
|
-
border: 1px solid var(--
|
|
33
|
+
border: 1px solid var(--g-color-base-generic-hover);
|
|
34
34
|
}
|
|
35
35
|
.bc-search_size_s {
|
|
36
|
-
--bc-text-input-border-radius: var(--
|
|
36
|
+
--bc-text-input-border-radius: var(--g-border-radius-l);
|
|
37
37
|
height: 36px;
|
|
38
38
|
width: 352px;
|
|
39
39
|
max-width: 100%;
|
|
40
40
|
}
|
|
41
41
|
.bc-search_size_m {
|
|
42
|
-
--bc-text-input-border-radius: var(--
|
|
42
|
+
--bc-text-input-border-radius: var(--g-border-radius-xl);
|
|
43
43
|
}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ClassNameProps } from '../../models/common';
|
|
2
|
+
import { ClassNameProps, QAProps } from '../../models/common';
|
|
3
3
|
import { Paddings } from '../../models/paddings';
|
|
4
|
-
type WrapperProps = ClassNameProps & {
|
|
4
|
+
type WrapperProps = ClassNameProps & QAProps & {
|
|
5
5
|
paddings?: Paddings;
|
|
6
|
-
dataQa?: string;
|
|
7
6
|
children?: React.ReactNode;
|
|
8
7
|
};
|
|
9
8
|
export declare const Wrapper: React.FunctionComponent<WrapperProps>;
|
|
@@ -6,10 +6,10 @@ const react_1 = tslib_1.__importDefault(require("react"));
|
|
|
6
6
|
const constants_1 = require("../../constants");
|
|
7
7
|
const cn_1 = require("../../utils/cn");
|
|
8
8
|
const b = (0, cn_1.block)('wrapper');
|
|
9
|
-
const Wrapper = ({ children, paddings = constants_1.DEFAULT_PADDINGS, className,
|
|
9
|
+
const Wrapper = ({ children, paddings = constants_1.DEFAULT_PADDINGS, className, qa, }) => (react_1.default.createElement("section", { className: b({
|
|
10
10
|
['padding-top']: (paddings === null || paddings === void 0 ? void 0 : paddings.top) || 'xs',
|
|
11
11
|
['padding-bottom']: (paddings === null || paddings === void 0 ? void 0 : paddings.bottom) || 'l',
|
|
12
12
|
['padding-left']: (paddings === null || paddings === void 0 ? void 0 : paddings.left) || '',
|
|
13
13
|
['padding-right']: (paddings === null || paddings === void 0 ? void 0 : paddings.right) || '',
|
|
14
|
-
}, className), "data-qa":
|
|
14
|
+
}, className), "data-qa": qa }, children));
|
|
15
15
|
exports.Wrapper = Wrapper;
|
package/build/cjs/constants.d.ts
CHANGED
|
@@ -7,6 +7,8 @@ export declare const BREAKPOINTS: {
|
|
|
7
7
|
xl: number;
|
|
8
8
|
};
|
|
9
9
|
export declare const DEFAULT_THEME = "light";
|
|
10
|
+
export declare const UIKIT_ROOT_CLASS = "g-root";
|
|
11
|
+
export declare const UIKIT_THEME_LIGHT_CLASS: string;
|
|
10
12
|
export declare enum BlogMetrikaGoalIds {
|
|
11
13
|
shareTop = "SITE_BLOG_SHARE-TOP_CLICK",
|
|
12
14
|
shareBottom = "SITE_BLOG_SHARE-BOTTOM_CLICK",
|
package/build/cjs/constants.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.DEFAULT_PADDINGS = exports.BlogMetrikaGoalIds = exports.DEFAULT_THEME = exports.BREAKPOINTS = void 0;
|
|
3
|
+
exports.DEFAULT_PADDINGS = exports.BlogMetrikaGoalIds = exports.UIKIT_THEME_LIGHT_CLASS = exports.UIKIT_ROOT_CLASS = exports.DEFAULT_THEME = exports.BREAKPOINTS = void 0;
|
|
4
4
|
const paddings_1 = require("./models/paddings");
|
|
5
5
|
exports.BREAKPOINTS = {
|
|
6
6
|
xs: 0,
|
|
@@ -10,6 +10,8 @@ exports.BREAKPOINTS = {
|
|
|
10
10
|
xl: 1185,
|
|
11
11
|
};
|
|
12
12
|
exports.DEFAULT_THEME = 'light';
|
|
13
|
+
exports.UIKIT_ROOT_CLASS = 'g-root';
|
|
14
|
+
exports.UIKIT_THEME_LIGHT_CLASS = `${exports.UIKIT_ROOT_CLASS}_theme_${exports.DEFAULT_THEME}`;
|
|
13
15
|
var BlogMetrikaGoalIds;
|
|
14
16
|
(function (BlogMetrikaGoalIds) {
|
|
15
17
|
BlogMetrikaGoalIds["shareTop"] = "SITE_BLOG_SHARE-TOP_CLICK";
|
|
@@ -2,20 +2,20 @@
|
|
|
2
2
|
--header-height: 64px;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
-
.
|
|
6
|
-
--
|
|
5
|
+
.g-root {
|
|
6
|
+
--g-text-accent-font-weight: 500;
|
|
7
7
|
--bc-transparent: rgba(255, 255, 255, 0);
|
|
8
8
|
--bc-image-padding: 4px;
|
|
9
9
|
--bc-border-radius: var(--pc-border-radius, 24px);
|
|
10
|
-
--bc-color-sfx-shadow: var(--
|
|
10
|
+
--bc-color-sfx-shadow: var(--g-color-base-simple-hover);
|
|
11
11
|
--bc-color-line-generic-active-solid: #b3b3b3;
|
|
12
|
-
--bc-color-base-float-hover: var(--
|
|
12
|
+
--bc-color-base-float-hover: var(--g-color-base-float);
|
|
13
13
|
--bc-monochrome-button: #262626;
|
|
14
14
|
--bc-monochrome-button-hover: #393939;
|
|
15
|
-
--bc-text-header-color: var(--
|
|
15
|
+
--bc-text-header-color: var(--g-color-text-primary);
|
|
16
16
|
}
|
|
17
|
-
.
|
|
18
|
-
--bc-color-sfx-shadow: var(--
|
|
17
|
+
.g-root.g-root_theme_dark {
|
|
18
|
+
--bc-color-sfx-shadow: var(--g-color-sfx-shadow);
|
|
19
19
|
--bc-color-line-generic-active-solid: #6c6c70;
|
|
20
|
-
--bc-color-base-float-hover: var(--
|
|
20
|
+
--bc-color-base-float-hover: var(--g-color-base-float-hover);
|
|
21
21
|
}
|
|
@@ -4,30 +4,30 @@
|
|
|
4
4
|
--header-height: 64px;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
.
|
|
8
|
-
--
|
|
7
|
+
.g-root {
|
|
8
|
+
--g-text-accent-font-weight: 500;
|
|
9
9
|
--bc-transparent: rgba(255, 255, 255, 0);
|
|
10
10
|
--bc-image-padding: 4px;
|
|
11
11
|
--bc-border-radius: var(--pc-border-radius, 24px);
|
|
12
|
-
--bc-color-sfx-shadow: var(--
|
|
12
|
+
--bc-color-sfx-shadow: var(--g-color-base-simple-hover);
|
|
13
13
|
--bc-color-line-generic-active-solid: #b3b3b3;
|
|
14
|
-
--bc-color-base-float-hover: var(--
|
|
14
|
+
--bc-color-base-float-hover: var(--g-color-base-float);
|
|
15
15
|
--bc-monochrome-button: #262626;
|
|
16
16
|
--bc-monochrome-button-hover: #393939;
|
|
17
|
-
--bc-text-header-color: var(--
|
|
17
|
+
--bc-text-header-color: var(--g-color-text-primary);
|
|
18
18
|
}
|
|
19
|
-
.
|
|
20
|
-
--bc-color-sfx-shadow: var(--
|
|
19
|
+
.g-root.g-root_theme_dark {
|
|
20
|
+
--bc-color-sfx-shadow: var(--g-color-sfx-shadow);
|
|
21
21
|
--bc-color-line-generic-active-solid: #6c6c70;
|
|
22
|
-
--bc-color-base-float-hover: var(--
|
|
22
|
+
--bc-color-base-float-hover: var(--g-color-base-float-hover);
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
/* use this for style redefinitions to awoid problems with
|
|
26
26
|
unpredictable css rules order in build */
|
|
27
27
|
.yfm_blog {
|
|
28
|
-
font-size: var(--
|
|
29
|
-
line-height: var(--
|
|
30
|
-
color: var(--
|
|
28
|
+
font-size: var(--g-text-body-3-font-size);
|
|
29
|
+
line-height: var(--g-text-body-3-line-height);
|
|
30
|
+
color: var(--g-color-text-primary);
|
|
31
31
|
}
|
|
32
32
|
.yfm_blog h1:first-child,
|
|
33
33
|
.yfm_blog h2:first-child,
|
|
@@ -38,16 +38,16 @@ unpredictable css rules order in build */
|
|
|
38
38
|
padding-top: 0;
|
|
39
39
|
}
|
|
40
40
|
.yfm_blog h2 {
|
|
41
|
-
font-size: var(--
|
|
42
|
-
line-height: var(--
|
|
41
|
+
font-size: var(--g-text-display-2-font-size);
|
|
42
|
+
line-height: var(--g-text-display-2-line-height);
|
|
43
43
|
}
|
|
44
44
|
.yfm_blog h3 {
|
|
45
|
-
font-size: var(--
|
|
46
|
-
line-height: var(--
|
|
45
|
+
font-size: var(--g-text-header-2-font-size);
|
|
46
|
+
line-height: var(--g-text-header-2-line-height);
|
|
47
47
|
}
|
|
48
48
|
.yfm_blog h4 {
|
|
49
|
-
font-size: var(--
|
|
50
|
-
line-height: var(--
|
|
49
|
+
font-size: var(--g-text-header-1-font-size);
|
|
50
|
+
line-height: var(--g-text-header-1-line-height);
|
|
51
51
|
}
|
|
52
52
|
.yfm_blog.yfm_blog h1,
|
|
53
53
|
.yfm_blog.yfm_blog h2,
|
|
@@ -58,7 +58,7 @@ unpredictable css rules order in build */
|
|
|
58
58
|
margin-bottom: 16px;
|
|
59
59
|
margin-top: 32px;
|
|
60
60
|
padding-top: 0;
|
|
61
|
-
font-weight: var(--
|
|
61
|
+
font-weight: var(--g-text-header-font-weight);
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
.yfm_blog blockquote,
|
|
@@ -83,41 +83,41 @@ unpredictable css rules order in build */
|
|
|
83
83
|
padding-left: 1.4em;
|
|
84
84
|
}
|
|
85
85
|
.yfm_blog code {
|
|
86
|
-
color: var(--
|
|
86
|
+
color: var(--g-color-text-misc);
|
|
87
87
|
}
|
|
88
88
|
.yfm_blog pre > code {
|
|
89
|
-
color: var(--
|
|
89
|
+
color: var(--g-color-text-primary);
|
|
90
90
|
}
|
|
91
91
|
.yfm_blog table {
|
|
92
|
-
color: var(--
|
|
93
|
-
border: 1px solid var(--
|
|
94
|
-
background: var(--
|
|
92
|
+
color: var(--g-color-text-primary);
|
|
93
|
+
border: 1px solid var(--g-color-line-generic);
|
|
94
|
+
background: var(--g-color-base-background);
|
|
95
95
|
}
|
|
96
96
|
.yfm_blog thead tr,
|
|
97
97
|
.yfm_blog table tr:nth-child(2n) {
|
|
98
|
-
background-color: var(--
|
|
98
|
+
background-color: var(--g-color-base-generic);
|
|
99
99
|
}
|
|
100
100
|
.yfm_blog_media {
|
|
101
|
-
font-size: var(--
|
|
102
|
-
line-height: var(--
|
|
103
|
-
color: var(--
|
|
101
|
+
font-size: var(--g-text-body-3-font-size);
|
|
102
|
+
line-height: var(--g-text-body-3-line-height);
|
|
103
|
+
color: var(--g-color-text-secondary);
|
|
104
104
|
}
|
|
105
105
|
.yfm_blog_breadcrumbs {
|
|
106
|
-
font-size: var(--
|
|
107
|
-
line-height: var(--
|
|
108
|
-
color: var(--
|
|
106
|
+
font-size: var(--g-text-body-2-font-size);
|
|
107
|
+
line-height: var(--g-text-body-2-line-height);
|
|
108
|
+
color: var(--g-text-color-base);
|
|
109
109
|
}
|
|
110
110
|
.yfm_blog a {
|
|
111
|
-
color: var(--
|
|
111
|
+
color: var(--g-color-text-link);
|
|
112
112
|
}
|
|
113
113
|
.yfm_blog a:hover {
|
|
114
|
-
color: var(--
|
|
114
|
+
color: var(--g-color-text-link-hover);
|
|
115
115
|
}
|
|
116
116
|
.yfm_blog .yfm-tab:hover, .yfm_blog .yfm-tab:active {
|
|
117
|
-
color: var(--
|
|
117
|
+
color: var(--g-color-text-link-hover);
|
|
118
118
|
}
|
|
119
119
|
.yfm_blog .yfm-tab.active {
|
|
120
|
-
border-bottom-color: var(--
|
|
120
|
+
border-bottom-color: var(--g-color-text-link);
|
|
121
121
|
}
|
|
122
122
|
.yfm_blog .yfm-clipboard {
|
|
123
123
|
margin: 32px 0;
|
|
@@ -130,14 +130,14 @@ unpredictable css rules order in build */
|
|
|
130
130
|
/* use this for style redefinitions to awoid problems with
|
|
131
131
|
unpredictable css rules order in build */
|
|
132
132
|
.yfm_constructor {
|
|
133
|
-
font-family: var(--
|
|
134
|
-
color: var(--
|
|
133
|
+
font-family: var(--g-font-family-sans);
|
|
134
|
+
color: var(--g-color-text-primary);
|
|
135
135
|
}
|
|
136
136
|
.yfm_constructor code,
|
|
137
137
|
.yfm_constructor kbd,
|
|
138
138
|
.yfm_constructor pre {
|
|
139
|
-
font-family: var(--
|
|
140
|
-
color: var(--
|
|
139
|
+
font-family: var(--g-font-family-monospace);
|
|
140
|
+
color: var(--g-color-text-primary);
|
|
141
141
|
}
|
|
142
142
|
.yfm_constructor.yfm_constructor h1,
|
|
143
143
|
.yfm_constructor.yfm_constructor h2,
|
|
@@ -148,11 +148,11 @@ unpredictable css rules order in build */
|
|
|
148
148
|
.yfm_constructor.yfm_constructor span,
|
|
149
149
|
.yfm_constructor.yfm_constructor p,
|
|
150
150
|
.yfm_constructor.yfm_constructor li {
|
|
151
|
-
color: var(--
|
|
151
|
+
color: var(--g-color-text-primary);
|
|
152
152
|
}
|
|
153
153
|
.yfm_constructor.yfm_constructor_notice li,
|
|
154
154
|
.yfm_constructor.yfm_constructor_notice p {
|
|
155
|
-
color: var(--
|
|
155
|
+
color: var(--g-color-text-secondary);
|
|
156
156
|
}
|
|
157
157
|
.yfm_constructor.yfm_constructor ul,
|
|
158
158
|
.yfm_constructor.yfm_constructor ol,
|
|
@@ -171,7 +171,7 @@ unpredictable css rules order in build */
|
|
|
171
171
|
}
|
|
172
172
|
|
|
173
173
|
.yfm_constructor_theme_dark p {
|
|
174
|
-
color: var(--
|
|
174
|
+
color: var(--g-color-text-light-primary);
|
|
175
175
|
}
|
|
176
176
|
.yfm_constructor_list_style ul {
|
|
177
177
|
padding-left: 20px;
|
|
@@ -187,7 +187,7 @@ unpredictable css rules order in build */
|
|
|
187
187
|
}
|
|
188
188
|
.yfm_constructor a {
|
|
189
189
|
outline: none;
|
|
190
|
-
color: var(--
|
|
190
|
+
color: var(--g-color-text-link);
|
|
191
191
|
text-decoration: none;
|
|
192
192
|
cursor: pointer;
|
|
193
193
|
}
|
|
@@ -195,17 +195,17 @@ unpredictable css rules order in build */
|
|
|
195
195
|
outline: 2px solid #ffdb4d;
|
|
196
196
|
}
|
|
197
197
|
.yfm_constructor a:hover, .yfm_constructor a:active {
|
|
198
|
-
--pc-text-header-color: var(--
|
|
199
|
-
color: var(--
|
|
198
|
+
--pc-text-header-color: var(--g-color-text-link-hover);
|
|
199
|
+
color: var(--g-color-text-link-hover);
|
|
200
200
|
}
|
|
201
201
|
.yfm_constructor table {
|
|
202
|
-
color: var(--
|
|
203
|
-
border: 1px solid var(--
|
|
204
|
-
background: var(--
|
|
202
|
+
color: var(--g-color-text-primary);
|
|
203
|
+
border: 1px solid var(--g-color-line-generic);
|
|
204
|
+
background: var(--g-color-base-background);
|
|
205
205
|
}
|
|
206
206
|
.yfm_constructor thead,
|
|
207
207
|
.yfm_constructor table tr:nth-child(2n) {
|
|
208
|
-
background-color: var(--
|
|
208
|
+
background-color: var(--g-color-base-generic);
|
|
209
209
|
}
|
|
210
210
|
|
|
211
211
|
.yfm_constructor_table {
|
|
@@ -221,7 +221,7 @@ unpredictable css rules order in build */
|
|
|
221
221
|
background-color: transparent !important;
|
|
222
222
|
}
|
|
223
223
|
.yfm_constructor_table tbody tr {
|
|
224
|
-
border-top: 1px solid var(--
|
|
224
|
+
border-top: 1px solid var(--g-color-line-generic);
|
|
225
225
|
}
|
|
226
226
|
.yfm_constructor_table td,
|
|
227
227
|
.yfm_constructor_table th {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { SyntheticEvent } from 'react';
|
|
2
|
+
import { ShareOptions } from '@gravity-ui/components';
|
|
2
3
|
import { NavigationData, PageConstructorProviderProps, PageContent } from '@gravity-ui/page-constructor';
|
|
3
|
-
import { ShareOptions } from '@gravity-ui/uikit';
|
|
4
4
|
import { MetaProps, PostData, ToggleLikeCallbackType } from '../../models/common';
|
|
5
5
|
export interface BlogPostPageProps {
|
|
6
6
|
suggestedPosts: PostData[];
|
|
@@ -36,11 +36,11 @@ class ThemeProvider extends react_1.default.Component {
|
|
|
36
36
|
}
|
|
37
37
|
updateBodyClassName(theme) {
|
|
38
38
|
const bodyEl = document.body;
|
|
39
|
-
if (!bodyEl.classList.contains(
|
|
40
|
-
bodyEl.classList.add(
|
|
39
|
+
if (!bodyEl.classList.contains(constants_1.UIKIT_ROOT_CLASS)) {
|
|
40
|
+
bodyEl.classList.add(constants_1.UIKIT_ROOT_CLASS);
|
|
41
41
|
}
|
|
42
|
-
bodyEl.classList.toggle(
|
|
43
|
-
bodyEl.classList.toggle(
|
|
42
|
+
bodyEl.classList.toggle(`${constants_1.UIKIT_ROOT_CLASS}_theme_light`, theme === 'light');
|
|
43
|
+
bodyEl.classList.toggle(`${constants_1.UIKIT_ROOT_CLASS}_theme_dark`, theme === 'dark');
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
exports.ThemeProvider = ThemeProvider;
|
|
@@ -629,6 +629,17 @@ export declare const schemasForCustom: {
|
|
|
629
629
|
type: string;
|
|
630
630
|
enum: string[];
|
|
631
631
|
};
|
|
632
|
+
list: {
|
|
633
|
+
type: string;
|
|
634
|
+
items: {
|
|
635
|
+
type: string;
|
|
636
|
+
properties: {
|
|
637
|
+
when: {
|
|
638
|
+
type: string;
|
|
639
|
+
};
|
|
640
|
+
};
|
|
641
|
+
};
|
|
642
|
+
};
|
|
632
643
|
paddingTop: {
|
|
633
644
|
type: string;
|
|
634
645
|
enum: string[];
|
|
@@ -776,6 +787,17 @@ export declare const schemasForCustom: {
|
|
|
776
787
|
type: string;
|
|
777
788
|
enum: string[];
|
|
778
789
|
};
|
|
790
|
+
list: {
|
|
791
|
+
type: string;
|
|
792
|
+
items: {
|
|
793
|
+
type: string;
|
|
794
|
+
properties: {
|
|
795
|
+
when: {
|
|
796
|
+
type: string;
|
|
797
|
+
};
|
|
798
|
+
};
|
|
799
|
+
};
|
|
800
|
+
};
|
|
779
801
|
paddingTop: {
|
|
780
802
|
type: string;
|
|
781
803
|
enum: string[];
|
|
@@ -903,6 +925,17 @@ export declare const schemasForCustom: {
|
|
|
903
925
|
type: string;
|
|
904
926
|
enum: string[];
|
|
905
927
|
};
|
|
928
|
+
list: {
|
|
929
|
+
type: string;
|
|
930
|
+
items: {
|
|
931
|
+
type: string;
|
|
932
|
+
properties: {
|
|
933
|
+
when: {
|
|
934
|
+
type: string;
|
|
935
|
+
};
|
|
936
|
+
};
|
|
937
|
+
};
|
|
938
|
+
};
|
|
906
939
|
};
|
|
907
940
|
};
|
|
908
941
|
};
|
|
@@ -29,6 +29,7 @@ export declare const updateContentSizes: ({ size, colSizes, theme, ...contentDat
|
|
|
29
29
|
links?: import("@gravity-ui/page-constructor").LinkProps[] | undefined;
|
|
30
30
|
buttons?: import("@gravity-ui/page-constructor").ButtonProps[] | undefined;
|
|
31
31
|
centered?: boolean | undefined;
|
|
32
|
+
list?: import("@gravity-ui/page-constructor").ContentItemProps[] | undefined;
|
|
32
33
|
};
|
|
33
34
|
type GetBreadcrumbsProps = {
|
|
34
35
|
tags?: Tag[];
|
|
@@ -17,7 +17,7 @@ unpredictable css rules order in build */
|
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
.bc-author__description {
|
|
20
|
-
color: var(--
|
|
20
|
+
color: var(--g-color-text-primary);
|
|
21
21
|
}
|
|
22
22
|
.bc-author__content {
|
|
23
23
|
display: flex;
|
|
@@ -27,5 +27,5 @@ unpredictable css rules order in build */
|
|
|
27
27
|
position: relative;
|
|
28
28
|
}
|
|
29
29
|
.bc-author__container {
|
|
30
|
-
background-color: var(--
|
|
30
|
+
background-color: var(--pc-color-base-silver);
|
|
31
31
|
}
|
|
@@ -82,6 +82,17 @@ export declare const Banner: {
|
|
|
82
82
|
type: string;
|
|
83
83
|
enum: string[];
|
|
84
84
|
};
|
|
85
|
+
list: {
|
|
86
|
+
type: string;
|
|
87
|
+
items: {
|
|
88
|
+
type: string;
|
|
89
|
+
properties: {
|
|
90
|
+
when: {
|
|
91
|
+
type: string;
|
|
92
|
+
};
|
|
93
|
+
};
|
|
94
|
+
};
|
|
95
|
+
};
|
|
85
96
|
paddingTop: {
|
|
86
97
|
type: string;
|
|
87
98
|
enum: string[];
|
|
@@ -18,7 +18,7 @@ export const CTA = ({ items, paddingTop, paddingBottom }) => {
|
|
|
18
18
|
return (React.createElement(Wrapper, { paddings: {
|
|
19
19
|
[PaddingsDirections.top]: paddingTop,
|
|
20
20
|
[PaddingsDirections.bottom]: paddingBottom,
|
|
21
|
-
}, className: b('content'),
|
|
21
|
+
}, className: b('content'), qa: "blog-cta-content" }, items.map((content, index) => {
|
|
22
22
|
var _a;
|
|
23
23
|
const contentData = updateContentSizes(content);
|
|
24
24
|
(_a = contentData.links) === null || _a === void 0 ? void 0 : _a.forEach((link) => {
|
|
@@ -99,6 +99,17 @@ export declare const ColoredText: {
|
|
|
99
99
|
type: string;
|
|
100
100
|
enum: string[];
|
|
101
101
|
};
|
|
102
|
+
list: {
|
|
103
|
+
type: string;
|
|
104
|
+
items: {
|
|
105
|
+
type: string;
|
|
106
|
+
properties: {
|
|
107
|
+
when: {
|
|
108
|
+
type: string;
|
|
109
|
+
};
|
|
110
|
+
};
|
|
111
|
+
};
|
|
112
|
+
};
|
|
102
113
|
paddingTop: {
|
|
103
114
|
type: string;
|
|
104
115
|
enum: string[];
|