@gravity-ui/blog-constructor 6.4.4-alpha.0 → 7.0.0-alpha.0
Sign up to get free protection for your applications and to get access to all the features.
- package/build/cjs/blocks/Suggest/Suggest.js +1 -1
- package/build/cjs/blocks/YFM/YFM.js +1 -1
- package/build/cjs/components/FeedHeader/components/Controls/Controls.js +21 -22
- package/build/cjs/components/FeedHeader/components/Controls/customRenders.d.ts +2 -1
- package/build/cjs/components/FeedHeader/components/Controls/customRenders.js +8 -2
- package/build/cjs/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.d.ts +8 -2
- package/build/cjs/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.js +2 -2
- package/build/cjs/components/PostCard/PostCard.css +8 -7
- package/build/cjs/components/PostCard/PostCard.js +5 -4
- package/build/esm/blocks/Suggest/Suggest.js +1 -1
- package/build/esm/blocks/YFM/YFM.js +1 -1
- package/build/esm/components/FeedHeader/components/Controls/Controls.js +22 -23
- package/build/esm/components/FeedHeader/components/Controls/customRenders.d.ts +2 -1
- package/build/esm/components/FeedHeader/components/Controls/customRenders.js +9 -2
- package/build/esm/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.d.ts +8 -2
- package/build/esm/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.js +2 -2
- package/build/esm/components/PostCard/PostCard.css +8 -7
- package/build/esm/components/PostCard/PostCard.js +6 -5
- package/package.json +5 -5
- package/server/data/transformPost.js +1 -2
@@ -34,6 +34,6 @@ const Suggest = ({ paddingTop = 'l', paddingBottom = 'l' }) => {
|
|
34
34
|
[paddings_1.PaddingsDirections.top]: paddingTop,
|
35
35
|
[paddings_1.PaddingsDirections.bottom]: paddingBottom,
|
36
36
|
} },
|
37
|
-
react_1.default.createElement(page_constructor_1.SliderBlock, { slidesToShow: { xl: 3, lg: 2, sm: 1 }, title: { text: (0, i18n_1.i18n)(i18n_1.Keyset.TitleSuggest) }
|
37
|
+
react_1.default.createElement(page_constructor_1.SliderBlock, { slidesToShow: { xl: 3, lg: 2, sm: 1 }, title: { text: (0, i18n_1.i18n)(i18n_1.Keyset.TitleSuggest) } }, suggestedPosts.map((post) => (react_1.default.createElement(PostCard_1.PostCard, { key: post.id, analyticsEvents: suggestGoals, post: post }))))));
|
38
38
|
};
|
39
39
|
exports.Suggest = Suggest;
|
@@ -19,6 +19,6 @@ const YFM = (props) => {
|
|
19
19
|
react_1.default.createElement(page_constructor_1.YFMWrapper, { content: text, modifiers: {
|
20
20
|
blog: true,
|
21
21
|
resetPaddings: true,
|
22
|
-
},
|
22
|
+
}, contentClassName: b({ 'no-list-reset': true }) })));
|
23
23
|
};
|
24
24
|
exports.YFM = YFM;
|
@@ -89,27 +89,26 @@ const Controls = ({ handleLoadData, tags = [], services = [], queryParams, }) =>
|
|
89
89
|
};
|
90
90
|
const tagsItems = (0, react_1.useMemo)(() => [{ value: 'empty', content: (0, i18n_1.i18n)(i18n_1.Keyset.AllTags) }, ...tags], [tags]);
|
91
91
|
const servicesItems = (0, react_1.useMemo)(() => (servicesInitial ? [...servicesInitial.split(',')] : []), [servicesInitial]);
|
92
|
-
return (react_1.default.createElement(
|
93
|
-
react_1.default.createElement("
|
94
|
-
|
95
|
-
react_1.default.createElement("div", { className: b('
|
96
|
-
react_1.default.createElement(
|
97
|
-
|
98
|
-
react_1.default.createElement(
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
react_1.default.createElement(uikit_1.
|
112
|
-
|
113
|
-
(0, i18n_1.i18n)(i18n_1.Keyset.ActionSavedOnly)))) : null))));
|
92
|
+
return (react_1.default.createElement("div", { className: b('header') },
|
93
|
+
react_1.default.createElement("h1", { className: b('header-item', { title: true }) }, (0, i18n_1.i18n)(i18n_1.Keyset.Title)),
|
94
|
+
react_1.default.createElement("div", { className: b('header-item', { filters: true }) },
|
95
|
+
react_1.default.createElement("div", { className: b('filter-item') },
|
96
|
+
react_1.default.createElement(Search_1.Search, { className: b('search'), placeholder: (0, i18n_1.i18n)(i18n_1.Keyset.Search), initialValue: search && typeof search === 'string' ? search : '', onSubmit: handleSearch })),
|
97
|
+
react_1.default.createElement("div", { className: b('filter-item') },
|
98
|
+
react_1.default.createElement(uikit_1.Select, { className: b('select'), size: "xl", options: tagsItems, defaultValue: [tagInitial], onUpdate: handleTagSelect, placeholder: (0, i18n_1.i18n)(i18n_1.Keyset.AllTags), popupClassName: b('popup', { isMobile }), renderControl: (0, customRenders_1.renderSwitcher)({
|
99
|
+
initial: [tagInitial],
|
100
|
+
list: tagsItems,
|
101
|
+
defaultLabel: (0, i18n_1.i18n)(i18n_1.Keyset.AllTags),
|
102
|
+
}), disablePortal: true, virtualizationThreshold: VIRTUALIZATION_THRESHOLD, renderOption: customRenders_1.renderOption })),
|
103
|
+
services.length > 0 ? (react_1.default.createElement("div", { className: b('filter-item') },
|
104
|
+
react_1.default.createElement(uikit_1.Select, { className: b('select'), size: "xl", multiple: true, filterable: true, hasClear: true, disablePortal: true, options: services, defaultValue: servicesItems, popupClassName: b('popup', { isMobile }), onUpdate: handleServicesSelect, placeholder: (0, i18n_1.i18n)(i18n_1.Keyset.AllServices), renderControl: (0, customRenders_1.renderSwitcher)({
|
105
|
+
initial: servicesItems,
|
106
|
+
list: services,
|
107
|
+
defaultLabel: (0, i18n_1.i18n)(i18n_1.Keyset.AllServices),
|
108
|
+
}), virtualizationThreshold: VIRTUALIZATION_THRESHOLD, renderOption: customRenders_1.renderOption, renderFilter: customRenders_1.renderFilter }))) : null,
|
109
|
+
hasLikes ? (react_1.default.createElement("div", { className: b('filter-item', { 'width-auto': true }) },
|
110
|
+
react_1.default.createElement(uikit_1.Button, { view: 'outlined', className: b('saved-only-button', { savedOnly }), size: "xl", onClick: handleSavedOnly, selected: savedOnly },
|
111
|
+
react_1.default.createElement(uikit_1.Icon, { data: Save_1.Save, size: ICON_SIZE, className: b('icon', { savedOnly }) }),
|
112
|
+
(0, i18n_1.i18n)(i18n_1.Keyset.ActionSavedOnly)))) : null)));
|
114
113
|
};
|
115
114
|
exports.Controls = Controls;
|
@@ -6,7 +6,8 @@ type RenderSwitcherType = ({ initial, list, defaultLabel, }: {
|
|
6
6
|
list: CustomSwitcherProps['list'];
|
7
7
|
defaultLabel: string;
|
8
8
|
}) => SelectProps['renderControl'];
|
9
|
+
type RenderFilterType = SelectProps['renderFilter'];
|
9
10
|
export declare const renderSwitcher: RenderSwitcherType;
|
10
|
-
export declare const renderFilter:
|
11
|
+
export declare const renderFilter: RenderFilterType;
|
11
12
|
export declare const renderOption: (option: SelectOption) => React.JSX.Element;
|
12
13
|
export {};
|
@@ -11,9 +11,15 @@ const CustomSwitcher_1 = require("../CustomSwitcher/CustomSwitcher");
|
|
11
11
|
const b = (0, cn_1.block)('feed-controls');
|
12
12
|
const renderSwitcher = ({ initial, list, defaultLabel }) =>
|
13
13
|
// eslint-disable-next-line react/display-name
|
14
|
-
(
|
14
|
+
(_a) => {
|
15
|
+
var { ref, renderClear } = _a, _b = _a.triggerProps, { id, disabled, type, onClick, onKeyDown } = _b, a11yProps = tslib_1.__rest(_b, ["id", "disabled", "type", "onClick", "onKeyDown"]);
|
16
|
+
return (react_1.default.createElement(CustomSwitcher_1.CustomSwitcher, { id: id, disabled: disabled, type: type, initial: initial, defaultLabel: defaultLabel, list: list, controlRef: ref, onClick: onClick, onKeyDown: onKeyDown, renderClear: renderClear, a11yProps: a11yProps }));
|
17
|
+
};
|
15
18
|
exports.renderSwitcher = renderSwitcher;
|
16
|
-
const renderFilter = (
|
19
|
+
const renderFilter = (_a) => {
|
20
|
+
var { ref, onChange } = _a, _b = _a.inputProps, { value, onKeyDown, onChange: _, size: __, placeholder: ___ } = _b, a11yProps = tslib_1.__rest(_b, ["value", "onKeyDown", "onChange", "size", "placeholder"]);
|
21
|
+
return (react_1.default.createElement(uikit_1.TextInput, { value: value, view: "clear", placeholder: (0, i18n_1.i18n)(i18n_1.Keyset.Search), onUpdate: onChange, onKeyDown: onKeyDown, className: b('popup-filter'), controlRef: ref, controlProps: Object.assign({ size: 1 }, a11yProps) }));
|
22
|
+
};
|
17
23
|
exports.renderFilter = renderFilter;
|
18
24
|
const renderOption = (option) => (react_1.default.createElement(CustomSelectOption_1.CustomSelectOption, { data: option }));
|
19
25
|
exports.renderOption = renderOption;
|
@@ -2,11 +2,17 @@ import React from 'react';
|
|
2
2
|
import { SelectProps } from '@gravity-ui/uikit';
|
3
3
|
import { SelectItem } from '../Controls/Controls';
|
4
4
|
type RenderControlParameters = Partial<Parameters<Required<SelectProps>['renderControl']>[0]>;
|
5
|
+
type TriggerProps = Required<RenderControlParameters>['triggerProps'];
|
6
|
+
type A11yKeys = {
|
7
|
+
[K in keyof TriggerProps]-?: K extends `aria-${string}` | 'role' ? K : never;
|
8
|
+
}[keyof TriggerProps];
|
9
|
+
type RenderControlA11yProps = Pick<TriggerProps, A11yKeys>;
|
5
10
|
export type CustomSwitcherProps = {
|
6
11
|
initial: (string | number | null)[];
|
7
12
|
defaultLabel: string;
|
8
13
|
list: SelectItem[];
|
9
14
|
controlRef: RenderControlParameters['ref'];
|
10
|
-
|
11
|
-
|
15
|
+
a11yProps: RenderControlA11yProps;
|
16
|
+
} & Omit<RenderControlParameters, 'ref'> & Pick<TriggerProps, 'id' | 'disabled' | 'type'>;
|
17
|
+
export declare const CustomSwitcher: ({ id, disabled, type, initial, defaultLabel, list, onClick, controlRef, onKeyDown, renderClear, a11yProps, }: CustomSwitcherProps) => React.JSX.Element;
|
12
18
|
export {};
|
@@ -10,7 +10,7 @@ const cn_1 = require("../../../../utils/cn");
|
|
10
10
|
const b = (0, cn_1.block)('feed-custom-switcher');
|
11
11
|
const ICON_SIZE = 12;
|
12
12
|
const CLEAR_ICON_SIZE = 11;
|
13
|
-
const CustomSwitcher = ({ initial, defaultLabel, list, onClick, controlRef, onKeyDown,
|
13
|
+
const CustomSwitcher = ({ id, disabled, type, initial, defaultLabel, list, onClick, controlRef, onKeyDown, renderClear, a11yProps, }) => {
|
14
14
|
const itemsNames = (0, react_1.useMemo)(() => {
|
15
15
|
const items = list
|
16
16
|
.filter((item) => initial.includes(item.value))
|
@@ -20,7 +20,7 @@ const CustomSwitcher = ({ initial, defaultLabel, list, onClick, controlRef, onKe
|
|
20
20
|
const hasCounter = itemsNames.length > 1;
|
21
21
|
const contentElementId = (0, uikit_1.useUniqId)();
|
22
22
|
return (react_1.default.createElement("div", { className: b('custom-switcher'), ref: controlRef },
|
23
|
-
react_1.default.createElement("button", { onClick: onClick, className: b('custom-switcher-element', { overlay: true }), onKeyDown: onKeyDown,
|
23
|
+
react_1.default.createElement("button", Object.assign({ id: id, disabled: disabled, type: type, onClick: onClick, className: b('custom-switcher-element', { overlay: true }), onKeyDown: onKeyDown }, a11yProps, { "aria-labelledby": contentElementId })),
|
24
24
|
react_1.default.createElement("div", { id: contentElementId, className: b('custom-switcher-element', { content: true }), "aria-hidden": true }, itemsNames === null || itemsNames === void 0 ? void 0 : itemsNames.join(', ')),
|
25
25
|
renderClear &&
|
26
26
|
renderClear({
|
@@ -1,4 +1,4 @@
|
|
1
|
-
.bc-post-card__title_size_m, .bc-post-card__title_size_s {
|
1
|
+
.bc-post-card__title_size_m.bc-post-card__title_size_m, .bc-post-card__title_size_s.bc-post-card__title_size_s {
|
2
2
|
margin: 0;
|
3
3
|
}
|
4
4
|
|
@@ -27,27 +27,28 @@ unpredictable css rules order in build */
|
|
27
27
|
min-height: 480px;
|
28
28
|
}
|
29
29
|
}
|
30
|
-
.bc-post-
|
31
|
-
margin-bottom: 8px;
|
32
|
-
}
|
33
|
-
.bc-post-card__title_size_s {
|
30
|
+
.bc-post-card__title_size_s.bc-post-card__title_size_s {
|
34
31
|
font-size: var(--g-text-header-1-font-size);
|
35
32
|
line-height: var(--g-text-header-1-line-height);
|
36
33
|
color: var(--pc-text-header-color);
|
37
34
|
font-weight: var(--g-text-accent-font-weight);
|
35
|
+
margin-bottom: 8px;
|
38
36
|
}
|
39
|
-
|
37
|
+
|
38
|
+
.bc-post-card__title_size_m.bc-post-card__title_size_m {
|
40
39
|
font-size: var(--g-text-display-2-font-size);
|
41
40
|
line-height: var(--g-text-display-2-line-height);
|
42
41
|
color: var(--pc-text-header-color);
|
43
42
|
font-weight: var(--g-text-accent-font-weight);
|
43
|
+
margin-bottom: 8px;
|
44
44
|
}
|
45
45
|
@media (max-width: 576px) {
|
46
|
-
.bc-post-card__title_size_m {
|
46
|
+
.bc-post-card__title_size_m.bc-post-card__title_size_m {
|
47
47
|
font-size: var(--g-text-display-1-font-size);
|
48
48
|
line-height: var(--g-text-display-1-line-height);
|
49
49
|
}
|
50
50
|
}
|
51
|
+
|
51
52
|
.bc-post-card__image-container {
|
52
53
|
height: 156px;
|
53
54
|
}
|
@@ -42,10 +42,11 @@ const PostCard = ({ post, fullWidth = false, size = common_1.PostCardSize.SMALL,
|
|
42
42
|
react_1.default.createElement("div", { className: b('image-container'), "data-qa": "blog-suggest-header" })),
|
43
43
|
react_1.default.createElement(page_constructor_1.CardBase.Content, null,
|
44
44
|
isTagVisible && (react_1.default.createElement("div", { id: tagId, className: b('tag', { size }) }, tags[0].name)),
|
45
|
-
title &&
|
46
|
-
|
47
|
-
|
48
|
-
|
45
|
+
title && (react_1.default.createElement(page_constructor_1.YFMWrapper, { contentClassName: b('title', { size }), content: title, modifiers: {
|
46
|
+
blog: true,
|
47
|
+
blogCard: true,
|
48
|
+
}, id: titleId, tagName: titleHeadingLevel })),
|
49
|
+
description && (react_1.default.createElement(page_constructor_1.YFMWrapper, { contentClassName: b('description'), content: description, modifiers: {
|
49
50
|
blog: size === 'm',
|
50
51
|
blogCard: true,
|
51
52
|
}, id: descriptionId }))),
|
@@ -30,5 +30,5 @@ export const Suggest = ({ paddingTop = 'l', paddingBottom = 'l' }) => {
|
|
30
30
|
[PaddingsDirections.top]: paddingTop,
|
31
31
|
[PaddingsDirections.bottom]: paddingBottom,
|
32
32
|
} },
|
33
|
-
React.createElement(SliderBlock, { slidesToShow: { xl: 3, lg: 2, sm: 1 }, title: { text: i18n(Keyset.TitleSuggest) }
|
33
|
+
React.createElement(SliderBlock, { slidesToShow: { xl: 3, lg: 2, sm: 1 }, title: { text: i18n(Keyset.TitleSuggest) } }, suggestedPosts.map((post) => (React.createElement(PostCard, { key: post.id, analyticsEvents: suggestGoals, post: post }))))));
|
34
34
|
};
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React, { useContext, useMemo, useState } from 'react';
|
2
2
|
import { useAnalytics } from '@gravity-ui/page-constructor';
|
3
|
-
import { Button, Icon,
|
3
|
+
import { Button, Icon, Select } from '@gravity-ui/uikit';
|
4
4
|
import { DefaultGoalIds } from '../../../../constants';
|
5
5
|
import { LikesContext } from '../../../../contexts/LikesContext';
|
6
6
|
import { MobileContext } from '../../../../contexts/MobileContext';
|
@@ -86,26 +86,25 @@ export const Controls = ({ handleLoadData, tags = [], services = [], queryParams
|
|
86
86
|
};
|
87
87
|
const tagsItems = useMemo(() => [{ value: 'empty', content: i18n(Keyset.AllTags) }, ...tags], [tags]);
|
88
88
|
const servicesItems = useMemo(() => (servicesInitial ? [...servicesInitial.split(',')] : []), [servicesInitial]);
|
89
|
-
return (React.createElement(
|
90
|
-
React.createElement("
|
91
|
-
|
92
|
-
React.createElement("div", { className: b('
|
93
|
-
React.createElement(
|
94
|
-
|
95
|
-
React.createElement(
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
React.createElement(
|
109
|
-
|
110
|
-
i18n(Keyset.ActionSavedOnly)))) : null))));
|
89
|
+
return (React.createElement("div", { className: b('header') },
|
90
|
+
React.createElement("h1", { className: b('header-item', { title: true }) }, i18n(Keyset.Title)),
|
91
|
+
React.createElement("div", { className: b('header-item', { filters: true }) },
|
92
|
+
React.createElement("div", { className: b('filter-item') },
|
93
|
+
React.createElement(Search, { className: b('search'), placeholder: i18n(Keyset.Search), initialValue: search && typeof search === 'string' ? search : '', onSubmit: handleSearch })),
|
94
|
+
React.createElement("div", { className: b('filter-item') },
|
95
|
+
React.createElement(Select, { className: b('select'), size: "xl", options: tagsItems, defaultValue: [tagInitial], onUpdate: handleTagSelect, placeholder: i18n(Keyset.AllTags), popupClassName: b('popup', { isMobile }), renderControl: renderSwitcher({
|
96
|
+
initial: [tagInitial],
|
97
|
+
list: tagsItems,
|
98
|
+
defaultLabel: i18n(Keyset.AllTags),
|
99
|
+
}), disablePortal: true, virtualizationThreshold: VIRTUALIZATION_THRESHOLD, renderOption: renderOption })),
|
100
|
+
services.length > 0 ? (React.createElement("div", { className: b('filter-item') },
|
101
|
+
React.createElement(Select, { className: b('select'), size: "xl", multiple: true, filterable: true, hasClear: true, disablePortal: true, options: services, defaultValue: servicesItems, popupClassName: b('popup', { isMobile }), onUpdate: handleServicesSelect, placeholder: i18n(Keyset.AllServices), renderControl: renderSwitcher({
|
102
|
+
initial: servicesItems,
|
103
|
+
list: services,
|
104
|
+
defaultLabel: i18n(Keyset.AllServices),
|
105
|
+
}), virtualizationThreshold: VIRTUALIZATION_THRESHOLD, renderOption: renderOption, renderFilter: renderFilter }))) : null,
|
106
|
+
hasLikes ? (React.createElement("div", { className: b('filter-item', { 'width-auto': true }) },
|
107
|
+
React.createElement(Button, { view: 'outlined', className: b('saved-only-button', { savedOnly }), size: "xl", onClick: handleSavedOnly, selected: savedOnly },
|
108
|
+
React.createElement(Icon, { data: Save, size: ICON_SIZE, className: b('icon', { savedOnly }) }),
|
109
|
+
i18n(Keyset.ActionSavedOnly)))) : null)));
|
111
110
|
};
|
@@ -7,7 +7,8 @@ type RenderSwitcherType = ({ initial, list, defaultLabel, }: {
|
|
7
7
|
list: CustomSwitcherProps['list'];
|
8
8
|
defaultLabel: string;
|
9
9
|
}) => SelectProps['renderControl'];
|
10
|
+
type RenderFilterType = SelectProps['renderFilter'];
|
10
11
|
export declare const renderSwitcher: RenderSwitcherType;
|
11
|
-
export declare const renderFilter:
|
12
|
+
export declare const renderFilter: RenderFilterType;
|
12
13
|
export declare const renderOption: (option: SelectOption) => React.JSX.Element;
|
13
14
|
export {};
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import { __rest } from "tslib";
|
1
2
|
import React from 'react';
|
2
3
|
import { TextInput } from '@gravity-ui/uikit';
|
3
4
|
import { Keyset, i18n } from '../../../../i18n';
|
@@ -8,6 +9,12 @@ import './Controls.css';
|
|
8
9
|
const b = block('feed-controls');
|
9
10
|
export const renderSwitcher = ({ initial, list, defaultLabel }) =>
|
10
11
|
// eslint-disable-next-line react/display-name
|
11
|
-
(
|
12
|
-
|
12
|
+
(_a) => {
|
13
|
+
var { ref, renderClear } = _a, _b = _a.triggerProps, { id, disabled, type, onClick, onKeyDown } = _b, a11yProps = __rest(_b, ["id", "disabled", "type", "onClick", "onKeyDown"]);
|
14
|
+
return (React.createElement(CustomSwitcher, { id: id, disabled: disabled, type: type, initial: initial, defaultLabel: defaultLabel, list: list, controlRef: ref, onClick: onClick, onKeyDown: onKeyDown, renderClear: renderClear, a11yProps: a11yProps }));
|
15
|
+
};
|
16
|
+
export const renderFilter = (_a) => {
|
17
|
+
var { ref, onChange } = _a, _b = _a.inputProps, { value, onKeyDown, onChange: _, size: __, placeholder: ___ } = _b, a11yProps = __rest(_b, ["value", "onKeyDown", "onChange", "size", "placeholder"]);
|
18
|
+
return (React.createElement(TextInput, { value: value, view: "clear", placeholder: i18n(Keyset.Search), onUpdate: onChange, onKeyDown: onKeyDown, className: b('popup-filter'), controlRef: ref, controlProps: Object.assign({ size: 1 }, a11yProps) }));
|
19
|
+
};
|
13
20
|
export const renderOption = (option) => (React.createElement(CustomSelectOption, { data: option }));
|
@@ -3,11 +3,17 @@ import { SelectProps } from '@gravity-ui/uikit';
|
|
3
3
|
import { SelectItem } from '../Controls/Controls';
|
4
4
|
import './CustomSwitcher.css';
|
5
5
|
type RenderControlParameters = Partial<Parameters<Required<SelectProps>['renderControl']>[0]>;
|
6
|
+
type TriggerProps = Required<RenderControlParameters>['triggerProps'];
|
7
|
+
type A11yKeys = {
|
8
|
+
[K in keyof TriggerProps]-?: K extends `aria-${string}` | 'role' ? K : never;
|
9
|
+
}[keyof TriggerProps];
|
10
|
+
type RenderControlA11yProps = Pick<TriggerProps, A11yKeys>;
|
6
11
|
export type CustomSwitcherProps = {
|
7
12
|
initial: (string | number | null)[];
|
8
13
|
defaultLabel: string;
|
9
14
|
list: SelectItem[];
|
10
15
|
controlRef: RenderControlParameters['ref'];
|
11
|
-
|
12
|
-
|
16
|
+
a11yProps: RenderControlA11yProps;
|
17
|
+
} & Omit<RenderControlParameters, 'ref'> & Pick<TriggerProps, 'id' | 'disabled' | 'type'>;
|
18
|
+
export declare const CustomSwitcher: ({ id, disabled, type, initial, defaultLabel, list, onClick, controlRef, onKeyDown, renderClear, a11yProps, }: CustomSwitcherProps) => React.JSX.Element;
|
13
19
|
export {};
|
@@ -7,7 +7,7 @@ import './CustomSwitcher.css';
|
|
7
7
|
const b = block('feed-custom-switcher');
|
8
8
|
const ICON_SIZE = 12;
|
9
9
|
const CLEAR_ICON_SIZE = 11;
|
10
|
-
export const CustomSwitcher = ({ initial, defaultLabel, list, onClick, controlRef, onKeyDown,
|
10
|
+
export const CustomSwitcher = ({ id, disabled, type, initial, defaultLabel, list, onClick, controlRef, onKeyDown, renderClear, a11yProps, }) => {
|
11
11
|
const itemsNames = useMemo(() => {
|
12
12
|
const items = list
|
13
13
|
.filter((item) => initial.includes(item.value))
|
@@ -17,7 +17,7 @@ export const CustomSwitcher = ({ initial, defaultLabel, list, onClick, controlRe
|
|
17
17
|
const hasCounter = itemsNames.length > 1;
|
18
18
|
const contentElementId = useUniqId();
|
19
19
|
return (React.createElement("div", { className: b('custom-switcher'), ref: controlRef },
|
20
|
-
React.createElement("button", { onClick: onClick, className: b('custom-switcher-element', { overlay: true }), onKeyDown: onKeyDown,
|
20
|
+
React.createElement("button", Object.assign({ id: id, disabled: disabled, type: type, onClick: onClick, className: b('custom-switcher-element', { overlay: true }), onKeyDown: onKeyDown }, a11yProps, { "aria-labelledby": contentElementId })),
|
21
21
|
React.createElement("div", { id: contentElementId, className: b('custom-switcher-element', { content: true }), "aria-hidden": true }, itemsNames === null || itemsNames === void 0 ? void 0 : itemsNames.join(', ')),
|
22
22
|
renderClear &&
|
23
23
|
renderClear({
|
@@ -1,4 +1,4 @@
|
|
1
|
-
.bc-post-card__title_size_m, .bc-post-card__title_size_s {
|
1
|
+
.bc-post-card__title_size_m.bc-post-card__title_size_m, .bc-post-card__title_size_s.bc-post-card__title_size_s {
|
2
2
|
margin: 0;
|
3
3
|
}
|
4
4
|
|
@@ -27,27 +27,28 @@ unpredictable css rules order in build */
|
|
27
27
|
min-height: 480px;
|
28
28
|
}
|
29
29
|
}
|
30
|
-
.bc-post-
|
31
|
-
margin-bottom: 8px;
|
32
|
-
}
|
33
|
-
.bc-post-card__title_size_s {
|
30
|
+
.bc-post-card__title_size_s.bc-post-card__title_size_s {
|
34
31
|
font-size: var(--g-text-header-1-font-size);
|
35
32
|
line-height: var(--g-text-header-1-line-height);
|
36
33
|
color: var(--pc-text-header-color);
|
37
34
|
font-weight: var(--g-text-accent-font-weight);
|
35
|
+
margin-bottom: 8px;
|
38
36
|
}
|
39
|
-
|
37
|
+
|
38
|
+
.bc-post-card__title_size_m.bc-post-card__title_size_m {
|
40
39
|
font-size: var(--g-text-display-2-font-size);
|
41
40
|
line-height: var(--g-text-display-2-line-height);
|
42
41
|
color: var(--pc-text-header-color);
|
43
42
|
font-weight: var(--g-text-accent-font-weight);
|
43
|
+
margin-bottom: 8px;
|
44
44
|
}
|
45
45
|
@media (max-width: 576px) {
|
46
|
-
.bc-post-card__title_size_m {
|
46
|
+
.bc-post-card__title_size_m.bc-post-card__title_size_m {
|
47
47
|
font-size: var(--g-text-display-1-font-size);
|
48
48
|
line-height: var(--g-text-display-1-line-height);
|
49
49
|
}
|
50
50
|
}
|
51
|
+
|
51
52
|
.bc-post-card__image-container {
|
52
53
|
height: 156px;
|
53
54
|
}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React, { useContext, useMemo } from 'react';
|
2
|
-
import { CardBase,
|
2
|
+
import { CardBase, YFMWrapper } from '@gravity-ui/page-constructor';
|
3
3
|
import { useUniqId } from '@gravity-ui/uikit';
|
4
4
|
import { LikesContext } from '../../contexts/LikesContext';
|
5
5
|
import { PostCardSize, PostCardTitleHeadingLevel } from '../../models/common';
|
@@ -39,10 +39,11 @@ export const PostCard = ({ post, fullWidth = false, size = PostCardSize.SMALL, s
|
|
39
39
|
React.createElement("div", { className: b('image-container'), "data-qa": "blog-suggest-header" })),
|
40
40
|
React.createElement(CardBase.Content, null,
|
41
41
|
isTagVisible && (React.createElement("div", { id: tagId, className: b('tag', { size }) }, tags[0].name)),
|
42
|
-
title &&
|
43
|
-
|
44
|
-
|
45
|
-
|
42
|
+
title && (React.createElement(YFMWrapper, { contentClassName: b('title', { size }), content: title, modifiers: {
|
43
|
+
blog: true,
|
44
|
+
blogCard: true,
|
45
|
+
}, id: titleId, tagName: titleHeadingLevel })),
|
46
|
+
description && (React.createElement(YFMWrapper, { contentClassName: b('description'), content: description, modifiers: {
|
46
47
|
blog: size === 'm',
|
47
48
|
blogCard: true,
|
48
49
|
}, id: descriptionId }))),
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@gravity-ui/blog-constructor",
|
3
|
-
"version": "
|
3
|
+
"version": "7.0.0-alpha.0",
|
4
4
|
"description": "Gravity UI Blog Constructor",
|
5
5
|
"license": "MIT",
|
6
6
|
"repository": {
|
@@ -78,8 +78,8 @@
|
|
78
78
|
},
|
79
79
|
"peerDependencies": {
|
80
80
|
"@diplodoc/transform": "^4.10.7",
|
81
|
-
"@gravity-ui/page-constructor": "^
|
82
|
-
"@gravity-ui/uikit": "^6.
|
81
|
+
"@gravity-ui/page-constructor": "^6.0.0-alpha.2",
|
82
|
+
"@gravity-ui/uikit": "^6.26.0",
|
83
83
|
"react": "^16.0.0 || ^17.0.0 || ^18.0.0"
|
84
84
|
},
|
85
85
|
"devDependencies": {
|
@@ -89,11 +89,11 @@
|
|
89
89
|
"@commitlint/config-conventional": "^17.4.3",
|
90
90
|
"@diplodoc/transform": "^4.10.8",
|
91
91
|
"@gravity-ui/eslint-config": "^3.1.1",
|
92
|
-
"@gravity-ui/page-constructor": "^
|
92
|
+
"@gravity-ui/page-constructor": "^6.0.0-alpha.2",
|
93
93
|
"@gravity-ui/prettier-config": "^1.1.0",
|
94
94
|
"@gravity-ui/stylelint-config": "^4.0.1",
|
95
95
|
"@gravity-ui/tsconfig": "^1.0.0",
|
96
|
-
"@gravity-ui/uikit": "^6.
|
96
|
+
"@gravity-ui/uikit": "^6.26.0",
|
97
97
|
"@jest/environment": "^29.7.0",
|
98
98
|
"@playwright/experimental-ct-react": "^1.45.3",
|
99
99
|
"@playwright/test": "^1.45.3",
|
@@ -19,7 +19,6 @@ const transformPost = ({ postData, lang, options: { plugins } = {} }) => {
|
|
19
19
|
return {};
|
20
20
|
}
|
21
21
|
const { tags, title, metaTitle, description } = postData, post = tslib_1.__rest(postData, ["tags", "title", "metaTitle", "description"]);
|
22
|
-
return Object.assign(Object.assign({}, post), { title,
|
23
|
-
tags, textTitle: (0, server_1.typografToText)(title, lang), htmlTitle: (0, server_1.typografToHTML)(title, lang), metaTitle: metaTitle || title, description: (0, server_1.yfmTransformer)(lang, description, { plugins }) });
|
22
|
+
return Object.assign(Object.assign({}, post), { title: (0, server_1.yfmTransformer)(lang, title, { plugins }), tags, textTitle: (0, server_1.typografToText)(title, lang), htmlTitle: (0, server_1.typografToHTML)(title, lang), metaTitle: metaTitle || title, description: (0, server_1.yfmTransformer)(lang, description, { plugins }) });
|
24
23
|
};
|
25
24
|
exports.transformPost = transformPost;
|