@gravity-ui/blog-constructor 5.0.2 → 5.1.0

package/build/cjs/blocks/Author/Author.js

@@ -11,7 +11,7 @@ const cn_1 = require("../../utils/cn");
 const b = (0, cn_1.block)('author');
 const Author = (props) => {
     var _a;
-    const { image, paddingTop, paddingBottom, authorId } = props;
+    const { image, paddingTop, paddingBottom, authorId, qa } = props;
     const { post } = (0, react_1.useContext)(PostPageContext_1.PostPageContext);
     const author = (_a = post === null || post === void 0 ? void 0 : post.authors) === null || _a === void 0 ? void 0 : _a.find(({ id }) => id === authorId);
     const authorItem = (0, react_1.useMemo)(() => {
@@ -31,7 +31,7 @@ const Author = (props) => {
     return (react_1.default.createElement(Wrapper_1.Wrapper, { paddings: {
             [paddings_1.PaddingsDirections.top]: paddingTop,
             [paddings_1.PaddingsDirections.bottom]: paddingBottom,
-        }, className: b('content') },
+        }, className: b('content'), qa: qa },
         react_1.default.createElement("div", { className: b('layout'), "data-qa": "blog-author-layout" },
             react_1.default.createElement(page_constructor_1.Author, { type: page_constructor_1.AuthorType.Column, author: authorItem, authorContainerClassName: b('container') }))));
 };

package/build/cjs/blocks/Banner/Banner.js

@@ -10,10 +10,12 @@ const paddings_1 = require("../../models/paddings");
 const cn_1 = require("../../utils/cn");
 const common_1 = require("../../utils/common");
 const b = (0, cn_1.block)('banner');
+const BANNER_CUSTOM_QA_ATTRIBUTES = ['image-container'];
 const Banner = (_a) => {
     var _b;
-    var { color, imageSize = 's', image, paddingTop, paddingBottom } = _a, content = tslib_1.__rest(_a, ["color", "imageSize", "image", "paddingTop", "paddingBottom"]);
+    var { color, imageSize = 's', image, paddingTop, paddingBottom, qa } = _a, content = tslib_1.__rest(_a, ["color", "imageSize", "image", "paddingTop", "paddingBottom", "qa"]);
     const contentStyle = {};
+    const qaAttributes = (0, common_1.getQaAttributes)(qa, BANNER_CUSTOM_QA_ATTRIBUTES);
     if (color) {
         contentStyle.backgroundColor = color;
     }
@@ -32,11 +34,11 @@ const Banner = (_a) => {
     return (react_1.default.createElement(Wrapper_1.Wrapper, { paddings: {
             [paddings_1.PaddingsDirections.top]: paddingTop,
             [paddings_1.PaddingsDirections.bottom]: paddingBottom,
-        }, className: b('container') },
-        react_1.default.createElement("div", { className: b('content'), style: contentStyle, "data-qa": "blog-banner-content" },
+        }, qa: qaAttributes.wrapper, className: b('container') },
+        react_1.default.createElement("div", { className: b('content'), style: contentStyle, "data-qa": qaAttributes.content },
             react_1.default.createElement("div", { className: b('info') },
-                react_1.default.createElement(page_constructor_1.Content, Object.assign({}, contentData))),
-            image && (react_1.default.createElement("div", { className: b('image-container', { ['image-size']: imageSize }) },
+                react_1.default.createElement(page_constructor_1.Content, Object.assign({}, contentData, { qa: qaAttributes.content }))),
+            image && (react_1.default.createElement("div", { className: b('image-container', { ['image-size']: imageSize }), "data-qa": qaAttributes.imageContainer },
                 react_1.default.createElement(page_constructor_1.Image, { className: b('image'), src: image }))))));
 };
 exports.Banner = Banner;

package/build/cjs/blocks/ColoredText/ColoredText.js

@@ -10,15 +10,16 @@ const cn_1 = require("../../utils/cn");
 const common_1 = require("../../utils/common");
 const b = (0, cn_1.block)('colored-text');
 const ColoredText = (_a) => {
-    var { background, paddingTop, paddingBottom } = _a, content = tslib_1.__rest(_a, ["background", "paddingTop", "paddingBottom"]);
+    var { background, paddingTop, paddingBottom, qa } = _a, content = tslib_1.__rest(_a, ["background", "paddingTop", "paddingBottom", "qa"]);
     const contentData = (0, common_1.updateContentSizes)(content);
+    const qaAttributes = (0, common_1.getQaAttributes)(qa);
     return (react_1.default.createElement(Wrapper_1.Wrapper, { paddings: {
             [paddings_1.PaddingsDirections.top]: paddingTop,
             [paddings_1.PaddingsDirections.bottom]: paddingBottom,
-        } },
-        react_1.default.createElement("div", { className: b('container'), style: { backgroundColor: (background === null || background === void 0 ? void 0 : background.color) || 'none' }, "data-qa": "blog-colored-text-content" },
+        }, qa: qaAttributes.wrapper },
+        react_1.default.createElement("div", { className: b('container'), style: { backgroundColor: (background === null || background === void 0 ? void 0 : background.color) || 'none' }, "data-qa": qaAttributes.container },
             react_1.default.createElement("div", { className: b('picture-container') }, (background === null || background === void 0 ? void 0 : background.image) && (react_1.default.createElement(page_constructor_1.BackgroundImage, { className: b('picture'), alt: background === null || background === void 0 ? void 0 : background.altText, src: background === null || background === void 0 ? void 0 : background.image }))),
             react_1.default.createElement("div", { className: b('text-content') },
-                react_1.default.createElement(page_constructor_1.Content, Object.assign({}, contentData))))));
+                react_1.default.createElement(page_constructor_1.Content, Object.assign({}, contentData, { qa: qaAttributes.content }))))));
 };
 exports.ColoredText = ColoredText;

package/build/cjs/blocks/YFM/YFM.js

@@ -4,16 +4,18 @@ exports.YFM = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const page_constructor_1 = require("@gravity-ui/page-constructor");
-const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
 const Wrapper_1 = require("../../components/Wrapper/Wrapper");
 const paddings_1 = require("../../models/paddings");
-const b = (0, bem_cn_lite_1.default)('yfm');
+const cn_1 = require("../../utils/cn");
+const common_1 = require("../../utils/common");
+const b = (0, cn_1.cn)('yfm');
 const YFM = (props) => {
-    const { text, paddingTop, paddingBottom } = props;
+    const { text, paddingTop, paddingBottom, qa } = props;
+    const qaAttributes = (0, common_1.getQaAttributes)(qa);
     return (react_1.default.createElement(Wrapper_1.Wrapper, { paddings: {
             [paddings_1.PaddingsDirections.top]: paddingTop,
             [paddings_1.PaddingsDirections.bottom]: paddingBottom,
-        } },
+        }, qa: qaAttributes.wrapper },
         react_1.default.createElement(page_constructor_1.YFMWrapper, { content: text, modifiers: {
                 blog: true,
                 resetPaddings: true,

package/build/cjs/components/FeedHeader/components/Controls/Controls.css

@@ -23,9 +23,6 @@ unpredictable css rules order in build */
   width: 100%;
   max-width: 100%;
 }
-.bc-feed-controls__search .yc-text-input_view_normal .yc-text-input__control {
-  border-color: var(--g-color-base-background);
-}
 .bc-feed-controls__select {
   width: 100%;
 }
@@ -33,9 +30,6 @@ unpredictable css rules order in build */
   max-height: 500px;
   border-radius: 12px;
 }
-.bc-feed-controls__popup.bc-feed-controls__popup .g-select-filter + .g-select-list {
-  margin-top: 0;
-}
 .bc-feed-controls__popup.bc-feed-controls__popup .g-select-list {
   overflow: scroll;
 }
@@ -49,27 +43,15 @@ unpredictable css rules order in build */
   margin: 4px;
   border-radius: 8px;
 }
-.bc-feed-controls__popup.bc-feed-controls__popup .yc-text-input__content {
-  padding: 4px;
-  border: none;
-  border-bottom: 1px solid var(--yc-color-line-generic);
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.bc-feed-controls__popup.bc-feed-controls__popup .yc-text-input__content .yc-text-input__control.yc-text-input__control_type_input {
-  border: none;
-}
-.bc-feed-controls__popup.bc-feed-controls__popup .g-select-list_size_xl .g-select-list__option {
-  padding: 0 16px;
-}
 
-.bc-feed-controls__popup-filter .yc-text-input__control {
+.bc-feed-controls__popup-filter {
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
+  padding: 4px 12px;
   border: none;
-}
-.bc-feed-controls__popup-filter .yc-text-input__control:hover, .bc-feed-controls__popup-filter .yc-text-input__control:focus {
-  border: none;
+  border-bottom: 1px solid var(--yc-color-line-generic);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
 }
 .bc-feed-controls__select:hover {
   width: 100%;

package/build/cjs/components/FeedHeader/components/Controls/Controls.js

@@ -104,7 +104,7 @@ const Controls = ({ handleLoadData, tags = [], services = [], queryParams, }) =>
                         defaultLabel: (0, i18n_1.i18)(i18n_1.Keyset.AllTags),
                     }), disablePortal: true, virtualizationThreshold: VIRTUALIZATION_THRESHOLD, renderOption: customRenders_1.renderOption })),
             services.length > 0 ? (react_1.default.createElement("div", { className: b('filter-item') },
-                react_1.default.createElement(uikit_1.Select, { className: b('select'), size: "xl", multiple: true, filterable: true, disablePortal: true, options: services, defaultValue: servicesItems, popupClassName: b('popup'), onUpdate: handleServicesSelect, placeholder: (0, i18n_1.i18)(i18n_1.Keyset.AllServices), renderControl: (0, customRenders_1.renderSwitcher)({
+                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'), onUpdate: handleServicesSelect, placeholder: (0, i18n_1.i18)(i18n_1.Keyset.AllServices), renderControl: (0, customRenders_1.renderSwitcher)({
                         initial: servicesItems,
                         list: services,
                         defaultLabel: (0, i18n_1.i18)(i18n_1.Keyset.AllServices),

package/build/cjs/components/FeedHeader/components/Controls/customRenders.js

@@ -13,8 +13,7 @@ const renderSwitcher = ({ initial, list, defaultLabel }) =>
 // eslint-disable-next-line react/display-name
 ({ onClick, ref }) => (react_1.default.createElement(CustomSwitcher_1.CustomSwitcher, { initial: initial, defaultLabel: defaultLabel, list: list, controlRef: ref, onClick: onClick }));
 exports.renderSwitcher = renderSwitcher;
-const renderFilter = ({ value, ref, onChange, onKeyDown }) => (react_1.default.createElement("div", { className: b('popup-filter') },
-    react_1.default.createElement(uikit_1.TextInput, { controlRef: ref, controlProps: { size: 1 }, value: value, placeholder: (0, i18n_1.i18)(i18n_1.Keyset.Search), onUpdate: onChange, onKeyDown: onKeyDown })));
+const renderFilter = ({ value, ref, onChange, onKeyDown }) => (react_1.default.createElement(uikit_1.TextInput, { controlRef: ref, controlProps: { size: 1 }, value: value, view: "clear", placeholder: (0, i18n_1.i18)(i18n_1.Keyset.Search), onUpdate: onChange, onKeyDown: onKeyDown, className: b('popup-filter') }));
 exports.renderFilter = renderFilter;
 const renderOption = (option) => (react_1.default.createElement(CustomSelectOption_1.CustomSelectOption, { data: option }));
 exports.renderOption = renderOption;

package/build/cjs/components/Paginator/types.d.ts

@@ -1,10 +1,10 @@
-import { ReactNode } from 'react';
-import { Modifications } from 'bem-cn-lite';
-import { ClassNameProps } from '../../models/common';
+import type { ReactNode } from 'react';
+import type { NoStrictEntityMods } from '@bem-react/classname';
+import type { ClassNameProps } from '../../models/common';
 export interface PaginatorItemProps {
     key: string | ArrowType;
     dataKey: string | ArrowType;
-    mods: Modifications;
+    mods: NoStrictEntityMods;
     content: ReactNode;
     onClick?: (key: number | ArrowType) => void;
     loading?: boolean;

package/build/cjs/components/PostCard/PostCard.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import { MetrikaGoal } from '@gravity-ui/page-constructor';
-import { PostData } from '../../models/common';
+import { PostCardSize, PostCardTitleHeadingLevel, PostData } from '../../models/common';
 type PostCardProps = {
     post: PostData;
     fullWidth?: boolean;
     showTag?: boolean;
-    size?: 's' | 'm';
+    size?: PostCardSize;
+    titleHeadingLevel?: PostCardTitleHeadingLevel;
     /**
      * @deprecated Metrika will be deleted after launch of analyticsEvents
      */

package/build/cjs/components/PostCard/PostCard.js

@@ -5,10 +5,11 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const page_constructor_1 = require("@gravity-ui/page-constructor");
 const LikesContext_1 = require("../../contexts/LikesContext");
+const common_1 = require("../../models/common");
 const cn_1 = require("../../utils/cn");
 const SuggestPostInfo_1 = require("../PostInfo/SuggestPostInfo");
 const b = (0, cn_1.block)('post-card');
-const PostCard = ({ post, metrikaGoals, fullWidth = false, size = 's', showTag = false, }) => {
+const PostCard = ({ post, metrikaGoals, fullWidth = false, size = common_1.PostCardSize.SMALL, showTag = false, titleHeadingLevel = common_1.PostCardTitleHeadingLevel.H3, }) => {
     var _a;
     const { title: postTitle, htmlTitle, textTitle, blogPostId, id, date, readingTime, hasUserLike, likes, image, description, tags, url, } = post;
     const title = postTitle || textTitle || htmlTitle;
@@ -25,9 +26,9 @@ const PostCard = ({ post, metrikaGoals, fullWidth = false, size = 's', showTag =
             react_1.default.createElement("div", { className: b('image-container'), "data-qa": "blog-suggest-header" })),
         react_1.default.createElement(page_constructor_1.CardBase.Content, null,
             showTag && ((_a = tags === null || tags === void 0 ? void 0 : tags[0]) === null || _a === void 0 ? void 0 : _a.name) && (react_1.default.createElement("div", { className: b('tag', { size }) }, tags[0].name)),
-            title && (react_1.default.createElement("h4", { className: b('title', { size }) },
-                react_1.default.createElement("span", null,
-                    react_1.default.createElement(page_constructor_1.HTML, null, title)))),
+            title &&
+                react_1.default.createElement(titleHeadingLevel, { className: b('title', { size }) }, react_1.default.createElement("span", null,
+                    react_1.default.createElement(page_constructor_1.HTML, null, title))),
             description && (react_1.default.createElement(page_constructor_1.YFMWrapper, { className: b('description'), content: description, modifiers: {
                     blog: size === 'm',
                     blogCard: true,

package/build/cjs/components/PostInfo/SuggestPostInfo.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { PostData, QAProps, ToggleLikeCallbackType } from '../../models/common';
+import { PostCardSize, PostData, QAProps, ToggleLikeCallbackType } from '../../models/common';
 export interface SuggestPostInfoProps extends Pick<PostData, 'date' | 'readingTime' | 'hasUserLike'>, QAProps {
     postId: PostData['blogPostId'];
-    size?: 's' | 'm';
+    size?: PostCardSize;
     likes?: {
         likesCount?: number;
         hasUserLike?: boolean;

package/build/cjs/components/PostInfo/SuggestPostInfo.js

@@ -4,6 +4,7 @@ exports.SuggestPostInfo = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const useLikes_1 = require("../../hooks/useLikes");
+const common_1 = require("../../models/common");
 const cn_1 = require("../../utils/cn");
 const Date_1 = require("./components/Date");
 const ReadingTime_1 = require("./components/ReadingTime");
@@ -23,7 +24,7 @@ const b = (0, cn_1.block)('post-info');
  *
  * @returns jsx
  */
-const SuggestPostInfo = ({ postId, date, readingTime, likes, size = 's', qa, }) => {
+const SuggestPostInfo = ({ postId, date, readingTime, likes, size = common_1.PostCardSize.SMALL, qa, }) => {
     const { hasUserLike, likesCount, handleLike } = (0, useLikes_1.useLikes)({
         hasLike: likes === null || likes === void 0 ? void 0 : likes.hasUserLike,
         count: likes === null || likes === void 0 ? void 0 : likes.likesCount,

package/build/cjs/components/PostInfo/components/Date.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import { PostCardSize } from '../../../models/common';
 type DateProps = {
     date: string | number;
-    size?: 's' | 'm';
+    size?: PostCardSize;
 };
 export declare const Date: React.FC<DateProps>;
 export {};

package/build/cjs/components/PostInfo/components/Date.js

@@ -4,10 +4,11 @@ exports.Date = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const LocaleContext_1 = require("../../../contexts/LocaleContext");
+const common_1 = require("../../../models/common");
 const cn_1 = require("../../../utils/cn");
 const date_1 = require("../../../utils/date");
 const b = (0, cn_1.block)('post-info');
-const Date = ({ date, size = 's' }) => {
+const Date = ({ date, size = common_1.PostCardSize.SMALL }) => {
     const { locale } = (0, react_1.useContext)(LocaleContext_1.LocaleContext);
     return react_1.default.createElement("div", { className: b('item', { size }) }, (0, date_1.format)(date, 'longDate', locale === null || locale === void 0 ? void 0 : locale.code));
 };

package/build/cjs/components/Posts/Posts.js

@@ -6,6 +6,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const page_constructor_1 = require("@gravity-ui/page-constructor");
 const uikit_1 = require("@gravity-ui/uikit");
 const i18n_1 = require("../../i18n");
+const common_1 = require("../../models/common");
 const cn_1 = require("../../utils/cn");
 const Paginator_1 = require("../Paginator/Paginator");
 const PostCard_1 = require("../PostCard/PostCard");
@@ -15,12 +16,14 @@ const Posts = ({ containerId, pinnedPostOnPage, currentPage, postsOnPage, isShow
     isFetching && react_1.default.createElement("div", { className: b('loaderContainer') }),
     react_1.default.createElement("div", { id: containerId, className: b('cards-container', { isLoading: isFetching }) },
         pinnedPostOnPage && currentPage === 1 && (react_1.default.createElement("div", { className: b('pinned-container') },
-            react_1.default.createElement(PostCard_1.PostCard, { post: pinnedPostOnPage, size: "m", fullWidth: true, showTag: true }))),
+            react_1.default.createElement(PostCard_1.PostCard, { post: pinnedPostOnPage, size: common_1.PostCardSize.MEDIUM, fullWidth: true, showTag: true, titleHeadingLevel: common_1.PostCardTitleHeadingLevel.H2 }))),
         (postsOnPage === null || postsOnPage === void 0 ? void 0 : postsOnPage.length) ? (react_1.default.createElement(page_constructor_1.CardLayoutBlock, { title: '', colSizes: {
                 all: 12,
                 lg: 4,
                 md: 6,
-            } }, postsOnPage === null || postsOnPage === void 0 ? void 0 : postsOnPage.map((post) => (react_1.default.createElement(PostCard_1.PostCard, { key: post.id, post: post, showTag: true }))))) : (react_1.default.createElement(PostsEmpty_1.PostsEmpty, null))),
+            } }, postsOnPage === null || postsOnPage === void 0 ? void 0 : postsOnPage.map((post) => (react_1.default.createElement(PostCard_1.PostCard, { key: post.id, post: post, showTag: true, titleHeadingLevel: pinnedPostOnPage
+                ? common_1.PostCardTitleHeadingLevel.H3
+                : common_1.PostCardTitleHeadingLevel.H2 }))))) : (react_1.default.createElement(PostsEmpty_1.PostsEmpty, null))),
     react_1.default.createElement("div", { className: b('pagination') },
         Boolean(isShowMoreVisible && (postsOnPage === null || postsOnPage === void 0 ? void 0 : postsOnPage.length)) && (react_1.default.createElement(uikit_1.Button, { view: "outlined", size: "xl", className: b('more-button'), onClick: handleShowMore }, (0, i18n_1.i18)(i18n_1.Keyset.ActionLoadMore))),
         errorShowMore && (react_1.default.createElement("div", { className: b('error-show-more') },

package/build/cjs/components/Search/Search.css

@@ -7,30 +7,28 @@ unpredictable css rules order in build */
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  height: 44px;
   transition: width 0.3s;
 }
-.bc-search__close-button, .bc-search__search-button {
-  position: absolute;
-  z-index: 2;
-  right: 10px;
+.bc-search__input-icon {
+  display: flex;
+  padding-right: 7px;
   color: var(--g-color-text-hint);
+  cursor: pointer;
 }
-.bc-search__search-button:hover {
-  color: var(--g-color-text-secondary);
+.bc-search__search-suggest {
+  display: flex;
+  align-items: center;
+  height: 44px;
+  background-color: var(--g-color-base-background);
+  border-radius: var(--bc-text-input-border-radius);
+  border: 1px solid var(--g-color-base-background);
 }
-.bc-search__search-suggest-container {
-  width: 100%;
+.bc-search__search-suggest:hover, .bc-search__search-suggest:focus {
+  border: 1px solid var(--g-color-base-generic-hover);
 }
 .bc-search .bc-search__search-suggest-control {
-  background-color: var(--g-color-base-background);
   padding-left: 12px;
   padding-right: 32px;
-  border-radius: var(--bc-text-input-border-radius);
-  border: 1px solid transparent;
-}
-.bc-search .bc-search__search-suggest-control:hover, .bc-search .bc-search__search-suggest-control:focus {
-  border: 1px solid var(--g-color-base-generic-hover);
 }
 .bc-search_size_s {
   --bc-text-input-border-radius: var(--g-border-radius-l);

package/build/cjs/components/Search/Search.d.ts

@@ -11,5 +11,11 @@ interface SearchProps extends ClassNameProps {
     autoFocus?: boolean;
     className?: string;
 }
-export declare const Search: React.FC<SearchProps>;
+/**
+ * Search component, placed on blog main page,
+ * based on TextInput from uikit
+ *
+ * @returns {JSX|null}
+ */
+export declare const Search: ({ className, initialValue, onSubmit, debounce, placeholder, size, autoFocus, value: externalValue, }: SearchProps) => React.JSX.Element;
 export {};

package/build/cjs/components/Search/Search.js

@@ -10,12 +10,17 @@ const i18n_1 = require("../../i18n");
 const Close_1 = require("../../icons/Close");
 const SearchIcon_1 = require("../../icons/SearchIcon");
 const cn_1 = require("../../utils/cn");
-const ButtonWithIcon_1 = require("../ButtonWithIcon/ButtonWithIcon");
 const b = (0, cn_1.block)('search');
 const SEARCH_ICON_SIZE = 16;
 const CLOSE_ICON_SIZE = 12;
-const Search = (props) => {
-    const { className, initialValue, onSubmit, debounce = 300, placeholder = (0, i18n_1.i18)(i18n_1.Keyset.Search), size = 'm', autoFocus = false, value: externalValue, } = props;
+const AUTOFOCUS_TIMEOUT = 0;
+/**
+ * Search component, placed on blog main page,
+ * based on TextInput from uikit
+ *
+ * @returns {JSX|null}
+ */
+const Search = ({ className, initialValue, onSubmit, debounce = 300, placeholder = (0, i18n_1.i18)(i18n_1.Keyset.Search), size = 'm', autoFocus = false, value: externalValue, }) => {
     const handleChange = (0, lodash_1.debounce)(onSubmit, debounce);
     const [value, setValue] = (0, react_1.useState)(initialValue);
     const inputRef = (0, react_1.useRef)(null);
@@ -27,21 +32,28 @@ const Search = (props) => {
     }, [externalValue]);
     (0, react_1.useEffect)(() => {
         if (autoFocus && !isIPhone) {
-            setTimeout(() => { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); }, 0);
+            setTimeout(() => { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); }, AUTOFOCUS_TIMEOUT);
         }
     }, [autoFocus, inputRef, isIPhone]);
-    return (react_1.default.createElement("div", { className: b({ size }, className) },
-        react_1.default.createElement("div", { className: b('search-suggest-container') },
-            react_1.default.createElement(uikit_1.TextInput, { className: b('search-suggest'), value: value, onUpdate: (query) => {
-                    setValue(query);
-                    handleChange(query);
-                }, placeholder: placeholder, size: size === 'm' ? 'xl' : 'l', controlRef: inputRef, view: "clear", controlProps: {
-                    className: b('search-suggest-control'),
-                } })),
-        value ? (react_1.default.createElement(ButtonWithIcon_1.ButtonWithIcon, { className: b('close-button'), icon: Close_1.Close, iconSize: CLOSE_ICON_SIZE, size: "xs", onClick: () => {
+    const rightContent = (0, react_1.useMemo)(() => {
+        const iconData = value ? Close_1.Close : SearchIcon_1.SearchIcon;
+        const iconSize = value ? CLOSE_ICON_SIZE : SEARCH_ICON_SIZE;
+        const handleClick = () => {
+            if (value) {
                 handleChange.cancel();
                 setValue('');
                 onSubmit('');
-            } })) : (react_1.default.createElement(ButtonWithIcon_1.ButtonWithIcon, { className: b('search-button'), icon: SearchIcon_1.SearchIcon, iconSize: SEARCH_ICON_SIZE, size: "xs", disabled: true }))));
+            }
+        };
+        return (react_1.default.createElement("div", { className: b('input-icon'), onClick: handleClick },
+            react_1.default.createElement(uikit_1.Icon, { size: iconSize, data: iconData })));
+    }, [handleChange, onSubmit, value]);
+    return (react_1.default.createElement("div", { className: b({ size }, className) },
+        react_1.default.createElement(uikit_1.TextInput, { className: b('search-suggest'), value: value, onUpdate: (query) => {
+                setValue(query);
+                handleChange(query);
+            }, placeholder: placeholder, size: size === 'm' ? 'xl' : 'l', controlRef: inputRef, view: "clear", controlProps: {
+                className: b('search-suggest-control'),
+            }, rightContent: rightContent })));
 };
 exports.Search = Search;

package/build/cjs/models/blocks.d.ts

@@ -1,17 +1,17 @@
 import { ReactElement } from 'react';
 import { ContentBlockProps, HeaderBlockProps, MediaProps as PCMediaProps, TextTheme } from '@gravity-ui/page-constructor';
-import { BlockType, ClassNameProps, PostData } from './common';
+import { BlockType, ClassNameProps, PostData, QAProps } from './common';
 import { PaddingsYFMProps } from './paddings';
 export type AuthorProps = ClassNameProps & {
     authorId: number;
     image: string;
-} & PaddingsYFMProps;
-export type BannerProps = ContentBlockProps & {
+} & PaddingsYFMProps & QAProps;
+export type BannerProps = ContentBlockProps & QAProps & {
     color?: string;
     image?: string;
     imageSize?: 's' | 'm';
 } & PaddingsYFMProps;
-export type ColoredTextProps = ContentBlockProps & {
+export type ColoredTextProps = ContentBlockProps & QAProps & {
     background?: {
         color?: string;
         image?: string;
@@ -40,7 +40,7 @@ export type SuggestProps = ClassNameProps & {
 } & PaddingsYFMProps;
 export type YFMProps = {
     text: string;
-} & PaddingsYFMProps;
+} & PaddingsYFMProps & QAProps;
 export type FeedProps = {
     image: string;
 };

package/build/cjs/models/common.d.ts

@@ -168,3 +168,11 @@ export type FetchArgs = {
 export interface QAProps {
     qa?: string;
 }
+export declare enum PostCardSize {
+    SMALL = "s",
+    MEDIUM = "m"
+}
+export declare enum PostCardTitleHeadingLevel {
+    H2 = "h2",
+    H3 = "h3"
+}

package/build/cjs/models/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultEventNames = exports.BlockType = exports.Theme = void 0;
+exports.PostCardTitleHeadingLevel = exports.PostCardSize = exports.DefaultEventNames = exports.BlockType = exports.Theme = void 0;
 var Theme;
 (function (Theme) {
     Theme["Light"] = "light";
@@ -31,4 +31,14 @@ var DefaultEventNames;
     DefaultEventNames["Tag"] = "selector-tag-click";
     DefaultEventNames["Service"] = "selector-service-click";
     DefaultEventNames["SaveOnly"] = "save-only-button-click";
-})(DefaultEventNames = exports.DefaultEventNames || (exports.DefaultEventNames = {}));
+})(DefaultEventNames = exports.DefaultEventNames || (exports.DefaultEventNames = {}));
+var PostCardSize;
+(function (PostCardSize) {
+    PostCardSize["SMALL"] = "s";
+    PostCardSize["MEDIUM"] = "m";
+})(PostCardSize = exports.PostCardSize || (exports.PostCardSize = {}));
+var PostCardTitleHeadingLevel;
+(function (PostCardTitleHeadingLevel) {
+    PostCardTitleHeadingLevel["H2"] = "h2";
+    PostCardTitleHeadingLevel["H3"] = "h3";
+})(PostCardTitleHeadingLevel = exports.PostCardTitleHeadingLevel || (exports.PostCardTitleHeadingLevel = {}));

package/build/cjs/utils/cn.d.ts

@@ -1,4 +1,3 @@
-import blockOrigin from 'bem-cn-lite';
 export declare const NAMESPACE = "bc-";
-export type CnBlock = ReturnType<typeof blockOrigin>;
-export declare function block(name: string): CnBlock;
+export declare const cn: import("@bem-react/classname").ClassNameInitilizer;
+export declare const block: import("@bem-react/classname").ClassNameInitilizer;

package/build/cjs/utils/cn.js

@@ -1,10 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.block = exports.NAMESPACE = void 0;
-const tslib_1 = require("tslib");
-const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
+exports.block = exports.cn = exports.NAMESPACE = void 0;
+const classname_1 = require("@bem-react/classname");
 exports.NAMESPACE = 'bc-';
-function block(name) {
-    return (0, bem_cn_lite_1.default)(`${exports.NAMESPACE}${name}`);
-}
-exports.block = block;
+exports.cn = (0, classname_1.withNaming)({ e: '__', m: '_' });
+exports.block = (0, classname_1.withNaming)({ n: exports.NAMESPACE, e: '__', m: '_' });

package/build/cjs/utils/common.d.ts

@@ -41,4 +41,5 @@ export declare const isMetrikaExist: (goal: NewMetrikaGoal, existGoals: NewMetri
 export declare const getBlogElementMetrika: (blogCustomGoal: NewMetrikaGoal, existingGoals?: MetrikaGoal) => string | string[] | NewMetrikaGoal[];
 export declare const getFeedQueryParams: (queryString: Query, pageNumber?: number) => GetPostsRequest;
 export declare const scrollOnPageChange: (containerId: string) => void;
+export declare const getQaAttributes: (qa?: string, ...customKeys: (string | Array<string>)[]) => Record<string, string>;
 export {};

package/build/cjs/utils/common.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.scrollOnPageChange = exports.getFeedQueryParams = exports.getBlogElementMetrika = exports.isMetrikaExist = exports.getBreadcrumbs = exports.getBlogPath = exports.updateContentSizes = exports.getTagFilterUrl = exports.postLikeStatus = exports.getTags = exports.scrollToHash = exports.getPageSearchParams = exports.getAbsolutePath = void 0;
+exports.getQaAttributes = exports.scrollOnPageChange = exports.getFeedQueryParams = exports.getBlogElementMetrika = exports.isMetrikaExist = exports.getBreadcrumbs = exports.getBlogPath = exports.updateContentSizes = exports.getTagFilterUrl = exports.postLikeStatus = exports.getTags = exports.scrollToHash = exports.getPageSearchParams = exports.getAbsolutePath = void 0;
 const tslib_1 = require("tslib");
 const url_1 = require("url");
 const page_constructor_1 = require("@gravity-ui/page-constructor");
 const lodash_1 = require("lodash");
 const constants_1 = require("../blocks/constants");
 const i18n_1 = require("../i18n");
+const QA_ATTRIBUTES_KEYS = ['container', 'content', 'wrapper', 'image', 'button'];
 function getAbsolutePath(router, url) {
     if (!router || !router.pathname) {
         return url !== null && url !== void 0 ? url : '';
@@ -112,4 +113,16 @@ const scrollOnPageChange = (containerId) => {
         (0, exports.scrollToHash)(containerId);
     }
 };
-exports.scrollOnPageChange = scrollOnPageChange;
+exports.scrollOnPageChange = scrollOnPageChange;
+const getQaAttributes = (qa, ...customKeys) => {
+    const attributes = {};
+    if (qa) {
+        const keys = QA_ATTRIBUTES_KEYS.concat((0, lodash_1.flatten)(customKeys));
+        keys.forEach((key) => {
+            attributes[(0, lodash_1.camelCase)(key)] = `${qa}-${key}`;
+        });
+        attributes.default = qa;
+    }
+    return attributes;
+};
+exports.getQaAttributes = getQaAttributes;

package/build/esm/blocks/Author/Author.js

@@ -8,7 +8,7 @@ import './Author.css';
 const b = block('author');
 export const Author = (props) => {
     var _a;
-    const { image, paddingTop, paddingBottom, authorId } = props;
+    const { image, paddingTop, paddingBottom, authorId, qa } = props;
     const { post } = useContext(PostPageContext);
     const author = (_a = post === null || post === void 0 ? void 0 : post.authors) === null || _a === void 0 ? void 0 : _a.find(({ id }) => id === authorId);
     const authorItem = useMemo(() => {
@@ -28,7 +28,7 @@ export const Author = (props) => {
     return (React.createElement(Wrapper, { paddings: {
             [PaddingsDirections.top]: paddingTop,
             [PaddingsDirections.bottom]: paddingBottom,
-        }, className: b('content') },
+        }, className: b('content'), qa: qa },
         React.createElement("div", { className: b('layout'), "data-qa": "blog-author-layout" },
             React.createElement(PCAuthor, { type: AuthorType.Column, author: authorItem, authorContainerClassName: b('container') }))));
 };

package/build/esm/blocks/Banner/Banner.js

@@ -5,13 +5,15 @@ import { Wrapper } from '../../components/Wrapper/Wrapper';
 import { BlogMetrikaGoalIds } from '../../constants';
 import { PaddingsDirections } from '../../models/paddings';
 import { block } from '../../utils/cn';
-import { getBlogElementMetrika, updateContentSizes } from '../../utils/common';
+import { getBlogElementMetrika, getQaAttributes, updateContentSizes } from '../../utils/common';
 import './Banner.css';
 const b = block('banner');
+const BANNER_CUSTOM_QA_ATTRIBUTES = ['image-container'];
 export const Banner = (_a) => {
     var _b;
-    var { color, imageSize = 's', image, paddingTop, paddingBottom } = _a, content = __rest(_a, ["color", "imageSize", "image", "paddingTop", "paddingBottom"]);
+    var { color, imageSize = 's', image, paddingTop, paddingBottom, qa } = _a, content = __rest(_a, ["color", "imageSize", "image", "paddingTop", "paddingBottom", "qa"]);
     const contentStyle = {};
+    const qaAttributes = getQaAttributes(qa, BANNER_CUSTOM_QA_ATTRIBUTES);
     if (color) {
         contentStyle.backgroundColor = color;
     }
@@ -30,10 +32,10 @@ export const Banner = (_a) => {
     return (React.createElement(Wrapper, { paddings: {
             [PaddingsDirections.top]: paddingTop,
             [PaddingsDirections.bottom]: paddingBottom,
-        }, className: b('container') },
-        React.createElement("div", { className: b('content'), style: contentStyle, "data-qa": "blog-banner-content" },
+        }, qa: qaAttributes.wrapper, className: b('container') },
+        React.createElement("div", { className: b('content'), style: contentStyle, "data-qa": qaAttributes.content },
             React.createElement("div", { className: b('info') },
-                React.createElement(Content, Object.assign({}, contentData))),
-            image && (React.createElement("div", { className: b('image-container', { ['image-size']: imageSize }) },
+                React.createElement(Content, Object.assign({}, contentData, { qa: qaAttributes.content }))),
+            image && (React.createElement("div", { className: b('image-container', { ['image-size']: imageSize }), "data-qa": qaAttributes.imageContainer },
                 React.createElement(Image, { className: b('image'), src: image }))))));
 };