@gravity-ui/blog-constructor 5.0.1 → 5.1.0

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 }))))));
 };

package/build/esm/blocks/ColoredText/ColoredText.js

@@ -4,18 +4,19 @@ import { BackgroundImage, Content } from '@gravity-ui/page-constructor';
 import { Wrapper } from '../../components/Wrapper/Wrapper';
 import { PaddingsDirections } from '../../models/paddings';
 import { block } from '../../utils/cn';
-import { updateContentSizes } from '../../utils/common';
+import { getQaAttributes, updateContentSizes } from '../../utils/common';
 import './ColoredText.css';
 const b = block('colored-text');
 export const ColoredText = (_a) => {
-    var { background, paddingTop, paddingBottom } = _a, content = __rest(_a, ["background", "paddingTop", "paddingBottom"]);
+    var { background, paddingTop, paddingBottom, qa } = _a, content = __rest(_a, ["background", "paddingTop", "paddingBottom", "qa"]);
     const contentData = updateContentSizes(content);
+    const qaAttributes = getQaAttributes(qa);
     return (React.createElement(Wrapper, { paddings: {
             [PaddingsDirections.top]: paddingTop,
             [PaddingsDirections.bottom]: paddingBottom,
-        } },
-        React.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.createElement("div", { className: b('container'), style: { backgroundColor: (background === null || background === void 0 ? void 0 : background.color) || 'none' }, "data-qa": qaAttributes.container },
             React.createElement("div", { className: b('picture-container') }, (background === null || background === void 0 ? void 0 : background.image) && (React.createElement(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.createElement("div", { className: b('text-content') },
-                React.createElement(Content, Object.assign({}, contentData))))));
+                React.createElement(Content, Object.assign({}, contentData, { qa: qaAttributes.content }))))));
 };

package/build/esm/blocks/YFM/YFM.js

@@ -1,15 +1,17 @@
 import React from 'react';
 import { YFMWrapper } from '@gravity-ui/page-constructor';
-import block from 'bem-cn-lite';
 import { Wrapper } from '../../components/Wrapper/Wrapper';
 import { PaddingsDirections } from '../../models/paddings';
-const b = block('yfm');
+import { cn } from '../../utils/cn';
+import { getQaAttributes } from '../../utils/common';
+const b = cn('yfm');
 export const YFM = (props) => {
-    const { text, paddingTop, paddingBottom } = props;
+    const { text, paddingTop, paddingBottom, qa } = props;
+    const qaAttributes = getQaAttributes(qa);
     return (React.createElement(Wrapper, { paddings: {
             [PaddingsDirections.top]: paddingTop,
             [PaddingsDirections.bottom]: paddingBottom,
-        } },
+        }, qa: qaAttributes.wrapper },
         React.createElement(YFMWrapper, { content: text, modifiers: {
                 blog: true,
                 resetPaddings: true,

package/build/esm/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/esm/components/FeedHeader/components/Controls/Controls.js

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

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

@@ -9,6 +9,5 @@ const b = block('feed-controls');
 export const renderSwitcher = ({ initial, list, defaultLabel }) => 
 // eslint-disable-next-line react/display-name
 ({ onClick, ref }) => (React.createElement(CustomSwitcher, { initial: initial, defaultLabel: defaultLabel, list: list, controlRef: ref, onClick: onClick }));
-export const renderFilter = ({ value, ref, onChange, onKeyDown }) => (React.createElement("div", { className: b('popup-filter') },
-    React.createElement(TextInput, { controlRef: ref, controlProps: { size: 1 }, value: value, placeholder: i18(Keyset.Search), onUpdate: onChange, onKeyDown: onKeyDown })));
+export const renderFilter = ({ value, ref, onChange, onKeyDown }) => (React.createElement(TextInput, { controlRef: ref, controlProps: { size: 1 }, value: value, view: "clear", placeholder: i18(Keyset.Search), onUpdate: onChange, onKeyDown: onKeyDown, className: b('popup-filter') }));
 export const renderOption = (option) => (React.createElement(CustomSelectOption, { data: option }));

package/build/esm/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.css

@@ -9,7 +9,7 @@ unpredictable css rules order in build */
   align-items: center;
   background-color: var(--g-color-base-background);
   border: 1px solid var(--g-color-base-background);
-  border-radius: 10px;
+  border-radius: var(--g-border-radius-xl);
   width: 100%;
   line-height: 42px;
 }

package/build/esm/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/esm/components/PostCard/PostCard.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
 import { MetrikaGoal } from '@gravity-ui/page-constructor';
-import { PostData } from '../../models/common';
+import { PostCardSize, PostCardTitleHeadingLevel, PostData } from '../../models/common';
 import './PostCard.css';
 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/esm/components/PostCard/PostCard.js

@@ -1,11 +1,12 @@
 import React, { useContext, useMemo } from 'react';
 import { CardBase, HTML, YFMWrapper } from '@gravity-ui/page-constructor';
 import { LikesContext } from '../../contexts/LikesContext';
+import { PostCardSize, PostCardTitleHeadingLevel } from '../../models/common';
 import { block } from '../../utils/cn';
 import { SuggestPostInfo } from '../PostInfo/SuggestPostInfo';
 import './PostCard.css';
 const b = block('post-card');
-export const PostCard = ({ post, metrikaGoals, fullWidth = false, size = 's', showTag = false, }) => {
+export const PostCard = ({ post, metrikaGoals, fullWidth = false, size = PostCardSize.SMALL, showTag = false, titleHeadingLevel = 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;
@@ -22,9 +23,9 @@ export const PostCard = ({ post, metrikaGoals, fullWidth = false, size = 's', sh
             React.createElement("div", { className: b('image-container'), "data-qa": "blog-suggest-header" })),
         React.createElement(CardBase.Content, null,
             showTag && ((_a = tags === null || tags === void 0 ? void 0 : tags[0]) === null || _a === void 0 ? void 0 : _a.name) && (React.createElement("div", { className: b('tag', { size }) }, tags[0].name)),
-            title && (React.createElement("h4", { className: b('title', { size }) },
-                React.createElement("span", null,
-                    React.createElement(HTML, null, title)))),
+            title &&
+                React.createElement(titleHeadingLevel, { className: b('title', { size }) }, React.createElement("span", null,
+                    React.createElement(HTML, null, title))),
             description && (React.createElement(YFMWrapper, { className: b('description'), content: description, modifiers: {
                     blog: size === 'm',
                     blogCard: true,

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { PostData, QAProps, ToggleLikeCallbackType } from '../../models/common';
+import { PostCardSize, PostData, QAProps, ToggleLikeCallbackType } from '../../models/common';
 import './PostInfo.css';
 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/esm/components/PostInfo/SuggestPostInfo.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useLikes } from '../../hooks/useLikes';
+import { PostCardSize } from '../../models/common';
 import { block } from '../../utils/cn';
 import { Date } from './components/Date';
 import { ReadingTime } from './components/ReadingTime';
@@ -20,7 +21,7 @@ const b = block('post-info');
  *
  * @returns jsx
  */
-export const SuggestPostInfo = ({ postId, date, readingTime, likes, size = 's', qa, }) => {
+export const SuggestPostInfo = ({ postId, date, readingTime, likes, size = PostCardSize.SMALL, qa, }) => {
     const { hasUserLike, likesCount, handleLike } = useLikes({
         hasLike: likes === null || likes === void 0 ? void 0 : likes.hasUserLike,
         count: likes === null || likes === void 0 ? void 0 : likes.likesCount,

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

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

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

@@ -1,10 +1,11 @@
 import React, { useContext } from 'react';
 import { LocaleContext } from '../../../contexts/LocaleContext';
+import { PostCardSize } from '../../../models/common';
 import { block } from '../../../utils/cn';
 import { format } from '../../../utils/date';
 import '../PostInfo.css';
 const b = block('post-info');
-export const Date = ({ date, size = 's' }) => {
+export const Date = ({ date, size = PostCardSize.SMALL }) => {
     const { locale } = useContext(LocaleContext);
     return React.createElement("div", { className: b('item', { size }) }, format(date, 'longDate', locale === null || locale === void 0 ? void 0 : locale.code));
 };

package/build/esm/components/Posts/Posts.js

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

package/build/esm/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/esm/components/Search/Search.d.ts

@@ -12,5 +12,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/esm/components/Search/Search.js

@@ -1,18 +1,23 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { TextInput } from '@gravity-ui/uikit';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Icon, TextInput } from '@gravity-ui/uikit';
 import { debounce as lodashDebounce } from 'lodash';
 import { useIsIPhone } from '../../hooks/useIsIPhone';
 import { Keyset, i18 } from '../../i18n';
 import { Close } from '../../icons/Close';
 import { SearchIcon } from '../../icons/SearchIcon';
 import { block } from '../../utils/cn';
-import { ButtonWithIcon } from '../ButtonWithIcon/ButtonWithIcon';
 import './Search.css';
 const b = block('search');
 const SEARCH_ICON_SIZE = 16;
 const CLOSE_ICON_SIZE = 12;
-export const Search = (props) => {
-    const { className, initialValue, onSubmit, debounce = 300, placeholder = i18(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}
+ */
+export const Search = ({ className, initialValue, onSubmit, debounce = 300, placeholder = i18(Keyset.Search), size = 'm', autoFocus = false, value: externalValue, }) => {
     const handleChange = lodashDebounce(onSubmit, debounce);
     const [value, setValue] = useState(initialValue);
     const inputRef = useRef(null);
@@ -24,20 +29,27 @@ export const Search = (props) => {
     }, [externalValue]);
     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.createElement("div", { className: b({ size }, className) },
-        React.createElement("div", { className: b('search-suggest-container') },
-            React.createElement(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.createElement(ButtonWithIcon, { className: b('close-button'), icon: Close, iconSize: CLOSE_ICON_SIZE, size: "xs", onClick: () => {
+    const rightContent = useMemo(() => {
+        const iconData = value ? Close : SearchIcon;
+        const iconSize = value ? CLOSE_ICON_SIZE : SEARCH_ICON_SIZE;
+        const handleClick = () => {
+            if (value) {
                 handleChange.cancel();
                 setValue('');
                 onSubmit('');
-            } })) : (React.createElement(ButtonWithIcon, { className: b('search-button'), icon: SearchIcon, iconSize: SEARCH_ICON_SIZE, size: "xs", disabled: true }))));
+            }
+        };
+        return (React.createElement("div", { className: b('input-icon'), onClick: handleClick },
+            React.createElement(Icon, { size: iconSize, data: iconData })));
+    }, [handleChange, onSubmit, value]);
+    return (React.createElement("div", { className: b({ size }, className) },
+        React.createElement(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 })));
 };

package/build/esm/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/esm/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/esm/models/common.js

@@ -28,4 +28,14 @@ export var DefaultEventNames;
     DefaultEventNames["Tag"] = "selector-tag-click";
     DefaultEventNames["Service"] = "selector-service-click";
     DefaultEventNames["SaveOnly"] = "save-only-button-click";
-})(DefaultEventNames || (DefaultEventNames = {}));
+})(DefaultEventNames || (DefaultEventNames = {}));
+export var PostCardSize;
+(function (PostCardSize) {
+    PostCardSize["SMALL"] = "s";
+    PostCardSize["MEDIUM"] = "m";
+})(PostCardSize || (PostCardSize = {}));
+export var PostCardTitleHeadingLevel;
+(function (PostCardTitleHeadingLevel) {
+    PostCardTitleHeadingLevel["H2"] = "h2";
+    PostCardTitleHeadingLevel["H3"] = "h3";
+})(PostCardTitleHeadingLevel || (PostCardTitleHeadingLevel = {}));

package/build/esm/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/esm/utils/cn.js

@@ -1,5 +1,4 @@
-import blockOrigin from 'bem-cn-lite';
+import { withNaming } from '@bem-react/classname';
 export const NAMESPACE = 'bc-';
-export function block(name) {
-    return blockOrigin(`${NAMESPACE}${name}`);
-}
+export const cn = withNaming({ e: '__', m: '_' });
+export const block = withNaming({ n: NAMESPACE, e: '__', m: '_' });

package/build/esm/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/esm/utils/common.js

@@ -1,9 +1,10 @@
 import { __rest } from "tslib";
 import { format, parse } from 'url';
 import { isNewMetrikaFormat, } from '@gravity-ui/page-constructor';
-import { debounce, memoize } from 'lodash';
+import { camelCase, debounce, flatten, memoize } from 'lodash';
 import { CONTENT_DEFAULT_COL_SIZES, CONTENT_DEFAULT_SIZE, CONTENT_DEFAULT_THEME, DEFAULT_PAGE, DEFAULT_ROWS_PER_PAGE, } from '../blocks/constants';
 import { Keyset, i18 } from '../i18n';
+const QA_ATTRIBUTES_KEYS = ['container', 'content', 'wrapper', 'image', 'button'];
 export function getAbsolutePath(router, url) {
     if (!router || !router.pathname) {
         return url !== null && url !== void 0 ? url : '';
@@ -98,4 +99,15 @@ export const scrollOnPageChange = (containerId) => {
     if (y < 0) {
         scrollToHash(containerId);
     }
+};
+export const getQaAttributes = (qa, ...customKeys) => {
+    const attributes = {};
+    if (qa) {
+        const keys = QA_ATTRIBUTES_KEYS.concat(flatten(customKeys));
+        keys.forEach((key) => {
+            attributes[camelCase(key)] = `${qa}-${key}`;
+        });
+        attributes.default = qa;
+    }
+    return attributes;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/blog-constructor",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "description": "Gravity UI Blog Constructor",
   "license": "MIT",
   "repository": {
@@ -46,9 +46,9 @@
     "test:watch": "jest --watchAll --maxWorkers=25%"
   },
   "dependencies": {
-    "@gravity-ui/components": "^2.0.0",
+    "@bem-react/classname": "^1.6.0",
+    "@gravity-ui/components": "^2.4.0",
     "@gravity-ui/i18n": "^1.0.0",
-    "bem-cn-lite": "^4.0.0",
     "lodash": "^4.17.21",
     "react-helmet": "^6.1.0",
     "react-player": "^2.9.0",
@@ -76,11 +76,11 @@
     "@commitlint/config-conventional": "^17.4.3",
     "@doc-tools/transform": "^3.3.2",
     "@gravity-ui/eslint-config": "^2.0.0",
-    "@gravity-ui/page-constructor": "^4.0.0",
+    "@gravity-ui/page-constructor": "^4.8.0",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^5.1.0",
+    "@gravity-ui/uikit": "^5.11.0",
     "@storybook/addon-essentials": "^7.0.27",
     "@storybook/cli": "^7.0.27",
     "@storybook/preset-scss": "^1.0.3",
@@ -99,7 +99,6 @@
     "@types/sanitize-html": "^2.6.0",
     "@types/ua-parser-js": "^0.7.36",
     "eslint": "^8.34.0",
-    "eslint-plugin-local": "./eslint-plugin-local",
     "eslint-plugin-no-not-accumulator-reassign": "^0.1.0",
     "eslint-plugin-testing-library": "^5.9.1",
     "gulp": "^4.0.2",

package/server/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;
 };