@gravity-ui/blog-constructor 1.0.0-aplha.0

package/build/esm/components/FeedHeader/components/Controls/customRenders.d.ts

@@ -0,0 +1,12 @@
+import { SelectProps, SelectOption } from '@gravity-ui/uikit';
+import { CustomSwitcherProps } from '../CustomSwitcher/CustomSwitcher';
+import './Controls.css';
+type RenderSwitcherType = ({ initial, list, defaultLabel, }: {
+    initial: CustomSwitcherProps['initial'];
+    list: CustomSwitcherProps['list'];
+    defaultLabel: string;
+}) => SelectProps['renderControl'];
+export declare const renderSwitcher: RenderSwitcherType;
+export declare const renderFilter: SelectProps['renderFilter'];
+export declare const renderOption: (option: SelectOption) => JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextInput } from '@gravity-ui/uikit';
+import { i18, Keyset } from '../../../../i18n';
+import { block } from '../../../../utils/cn';
+import { CustomSwitcher } from '../CustomSwitcher/CustomSwitcher';
+import { CustomSelectOption, } from '../CustomSelectOption/CustomSelectOption';
+import './Controls.css';
+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 renderOption = (option) => (React.createElement(CustomSelectOption, { data: option }));

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

@@ -0,0 +1,14 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.bc-feed-custom-select-option {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+  display: flex;
+}
+.bc-feed-custom-select-option__icon {
+  margin-right: 6px;
+}
+.bc-feed-custom-select-option__icon > svg {
+  width: 20px;
+  height: 20px;
+}

package/build/esm/components/FeedHeader/components/CustomSelectOption/CustomSelectOption.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SelectOption as SelectOptionType } from '@gravity-ui/uikit';
+import './CustomSelectOption.css';
+export type CustomSelectOptionProps = {
+    data: {
+        icon?: React.ReactElement;
+    } & SelectOptionType;
+};
+export declare const CustomSelectOption: ({ data }: CustomSelectOptionProps) => JSX.Element;

package/build/esm/components/FeedHeader/components/CustomSelectOption/CustomSelectOption.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { block } from '../../../../utils/cn';
+import './CustomSelectOption.css';
+const b = block('feed-custom-select-option');
+export const CustomSelectOption = ({ data }) => (React.createElement("div", { className: b() },
+    React.createElement("span", { className: b('icon') }, data.icon),
+    React.createElement("span", null, data.content)));

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

@@ -0,0 +1,53 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.bc-feed-custom-switcher__custom-switcher {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--yc-color-base-background);
+  border: 1px solid var(--yc-color-base-background);
+  border-radius: 10px;
+  width: 100%;
+  line-height: 42px;
+}
+.bc-feed-custom-switcher__custom-switcher + .yc-popup-wrapper.yc-popup-wrapper_open {
+  position: absolute !important;
+  inset: auto !important;
+  transform: translate3d(0, 4px, 0) !important;
+}
+.bc-feed-custom-switcher__custom-switcher:hover {
+  border-color: var(--yc-color-base-generic-hover);
+  cursor: pointer;
+}
+.bc-feed-custom-switcher__custom-switcher-element_content {
+  display: inline-block;
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 12px;
+}
+.bc-feed-custom-switcher__custom-switcher-element_counter {
+  align-items: center;
+  height: 20px;
+  padding: 0 6px;
+  background-color: var(--yc-color-base-selection);
+  border-radius: 4px;
+  transition: backgound-color 0.1s linear;
+  font-size: var(--yc-text-body-1-font-size);
+  line-height: var(--yc-text-body-1-line-height);
+}
+.bc-feed-custom-switcher__custom-switcher-element_arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 30px;
+  height: 100%;
+}
+.bc-feed-custom-switcher__switcher-arrow {
+  width: 16px;
+  height: 16px;
+}

package/build/esm/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.d.ts

@@ -0,0 +1,12 @@
+import { SelectProps } from '@gravity-ui/uikit';
+import { SelectItem } from '../Controls/Controls';
+import './CustomSwitcher.css';
+type RenderControlParameters = Partial<Parameters<Required<SelectProps>['renderControl']>[0]>;
+export type CustomSwitcherProps = {
+    initial: (string | number | null)[];
+    defaultLabel: string;
+    list: SelectItem[];
+    controlRef: RenderControlParameters['ref'];
+} & Omit<RenderControlParameters, 'ref'>;
+export declare const CustomSwitcher: ({ initial, defaultLabel, list, onClick, controlRef, }: CustomSwitcherProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,21 @@
+import React, { useMemo } from 'react';
+import { Icon } from '@gravity-ui/uikit';
+import { DropdownArrow } from '../../../../icons/DropdownArrow';
+import { block } from '../../../../utils/cn';
+import './CustomSwitcher.css';
+const b = block('feed-custom-switcher');
+const ICON_SIZE = 12;
+export const CustomSwitcher = ({ initial, defaultLabel, list, onClick, controlRef, }) => {
+    const itemsNames = useMemo(() => {
+        const items = list
+            .filter((item) => initial.includes(item.value))
+            .map((item) => item.content);
+        return items.length ? items : [defaultLabel];
+    }, [defaultLabel, initial, list]);
+    const hasCounter = itemsNames.length > 1;
+    return (React.createElement("div", { className: b('custom-switcher'), onClick: onClick, ref: controlRef },
+        React.createElement("div", { className: b('custom-switcher-element', { content: true }) }, itemsNames === null || itemsNames === void 0 ? void 0 : itemsNames.join(', ')),
+        hasCounter && (React.createElement("div", { className: b('custom-switcher-element', { counter: true }) }, itemsNames.length)),
+        React.createElement("div", { className: b('custom-switcher-element', { arrow: true }) },
+            React.createElement(Icon, { data: DropdownArrow, size: ICON_SIZE, className: b('switcher-arrow') }))));
+};

package/build/esm/components/MetaWrapper/MetaWrapper.d.ts

@@ -0,0 +1,10 @@
+import { MetaProps } from '../../models/common';
+/**
+ * Wrapper on meta data of page
+ *
+ * @param needHelmetWrapper - component needs helmet wrapper
+ * @param metaComponent - meta data component
+ *
+ * @returns jsx
+ */
+export declare const MetaWrapper: ({ needHelmetWrapper, metaComponent }: MetaProps) => JSX.Element;

package/build/esm/components/MetaWrapper/MetaWrapper.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+/**
+ * Wrapper on meta data of page
+ *
+ * @param needHelmetWrapper - component needs helmet wrapper
+ * @param metaComponent - meta data component
+ *
+ * @returns jsx
+ */
+export const MetaWrapper = ({ needHelmetWrapper = false, metaComponent }) => needHelmetWrapper ? React.createElement(Helmet, null, metaComponent) : metaComponent;

package/build/esm/components/Paginator/Paginator.css

@@ -0,0 +1,54 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.bc-paginator {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  align-items: center;
+}
+.bc-paginator__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  min-height: 44px;
+  margin-left: 4px;
+  padding: 12px 0px;
+  color: var(--yc-color-text-primary);
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+}
+.bc-paginator__item_type_page {
+  --bc-border-radius: 10px;
+  width: 44px;
+  height: 44px;
+  cursor: pointer;
+  border-radius: var(--bc-border-radius);
+}
+.bc-paginator__item_type_page:hover {
+  background: var(--yc-color-base-simple-hover);
+}
+.bc-paginator__item_type_page.bc-paginator__item_active {
+  background: var(--yc-color-base-simple-hover);
+  cursor: default;
+}
+.bc-paginator__pagination {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+@media (max-width: 577px) {
+  .bc-paginator__pagination {
+    flex-direction: column;
+  }
+}
+.bc-paginator__pagination-block {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 4px;
+}

package/build/esm/components/Paginator/Paginator.d.ts

@@ -0,0 +1,3 @@
+import { PaginatorProps } from './types';
+import './Paginator.css';
+export declare const Paginator: ({ itemsPerPage, totalItems, maxPages, page, className, loading, onPageChange, pageCountForShowSupportButtons, }: PaginatorProps) => JSX.Element | null;

package/build/esm/components/Paginator/Paginator.js

@@ -0,0 +1,89 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useState, useMemo } from 'react';
+import { BlogMetrikaGoalIds } from '../../constants';
+import metrika from '../../counters/metrika.js';
+import { MetrikaCounter } from '../../counters/utils';
+import { getPageConfigs, getPagesCount } from './utils';
+import { ArrowType } from './types';
+import { block } from '../../utils/cn';
+import { NavigationButton } from './components/NavigationButton';
+import { PaginatorItem } from './components/PaginatorItem';
+import './Paginator.css';
+const b = block('paginator');
+const DEFAULT_PAGE_COUNT_FOR_SHOW_SUPPORT_BUTTONS = 6;
+export const Paginator = ({ itemsPerPage, totalItems, maxPages, page, className, loading, onPageChange, pageCountForShowSupportButtons = DEFAULT_PAGE_COUNT_FOR_SHOW_SUPPORT_BUTTONS, }) => {
+    const [pagesCount, setPagesCount] = useState(getPagesCount({ itemsPerPage, totalItems, maxPages }));
+    useEffect(() => {
+        const count = getPagesCount({ itemsPerPage, totalItems, maxPages });
+        setPagesCount(count);
+    }, [itemsPerPage, totalItems, maxPages]);
+    const handlePageChange = (pageIndex) => onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(pageIndex);
+    const isShowSupportButtons = useMemo(() => pagesCount > pageCountForShowSupportButtons, [pageCountForShowSupportButtons, pagesCount]);
+    if (pagesCount <= 1) {
+        return null;
+    }
+    const handleArrowClick = (type) => {
+        let newPage = page;
+        if (type === 'prev' && page > 1) {
+            metrika.reachGoal(MetrikaCounter.CrossSite, BlogMetrikaGoalIds.home);
+            newPage = 1;
+        }
+        else if (type === 'next' && page < pagesCount) {
+            metrika.reachGoal(MetrikaCounter.CrossSite, BlogMetrikaGoalIds.next);
+            newPage = page + 1;
+        }
+        if (newPage !== page) {
+            handlePageChange(newPage);
+        }
+    };
+    const handlePageClick = (index) => {
+        if (index !== page && typeof index === 'number') {
+            metrika.reachGoal(MetrikaCounter.CrossSite, BlogMetrikaGoalIds.page, { page: index });
+            handlePageChange(index);
+        }
+    };
+    const paginatorItems = getPageConfigs({ page, pagesCount, handlePageClick });
+    if (page > 1 && isShowSupportButtons) {
+        paginatorItems.unshift({
+            key: ArrowType.Prev,
+            dataKey: ArrowType.Prev,
+            mods: { type: ArrowType.Prev },
+            onClick: handleArrowClick,
+            content: React.createElement(NavigationButton, { arrowType: ArrowType.Prev }),
+        });
+    }
+    if (page < pagesCount && isShowSupportButtons) {
+        paginatorItems.push({
+            key: ArrowType.Next,
+            dataKey: ArrowType.Next,
+            mods: { type: ArrowType.Next },
+            onClick: handleArrowClick,
+            content: React.createElement(NavigationButton, { arrowType: ArrowType.Next }),
+        });
+    }
+    const renderPaginatorItem = (item) => {
+        const { key } = item, rest = __rest(item, ["key"]);
+        return React.createElement(PaginatorItem, Object.assign({ key: `page_${key}` }, rest, { loading: loading }));
+    };
+    return (React.createElement("div", { className: b('pagination') },
+        page > 1 && (React.createElement("div", { className: b('pagination-block') },
+            React.createElement("ul", { className: b(null, className) }, paginatorItems.slice(0, 1).map(renderPaginatorItem)))),
+        React.createElement("div", { className: b('pagination-block') },
+            React.createElement("ul", { className: b(null, className) }, paginatorItems
+                .slice(page > 1 ? 1 : 0, page < pagesCount ? paginatorItems.length - 1 : paginatorItems.length)
+                .map(renderPaginatorItem))),
+        page < pagesCount && (React.createElement("div", { className: b('pagination-block') },
+            React.createElement("ul", { className: b(null, className) }, paginatorItems
+                .slice(paginatorItems.length - 1, paginatorItems.length)
+                .map(renderPaginatorItem))))));
+};

package/build/esm/components/Paginator/components/NavigationButton.d.ts

@@ -0,0 +1,7 @@
+import { ArrowType } from '../types';
+import '../Paginator.css';
+export type NavigationButtonProps = {
+    arrowType: ArrowType;
+    disabled?: boolean;
+};
+export declare const NavigationButton: ({ arrowType, disabled }: NavigationButtonProps) => JSX.Element | null;

package/build/esm/components/Paginator/components/NavigationButton.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ArrowType } from '../types';
+import { i18, Keyset } from '../../../i18n';
+import { block } from '../../../utils/cn';
+import '../Paginator.css';
+const b = block('paginator');
+export const NavigationButton = ({ arrowType, disabled }) => disabled ? null : (React.createElement("div", { className: b('icon') }, arrowType === ArrowType.Prev ? i18(Keyset.ButtonBegin) : i18(Keyset.ButtonFarther)));

package/build/esm/components/Paginator/components/PaginatorItem.d.ts

@@ -0,0 +1,3 @@
+import { PaginatorItemProps } from '../types';
+import '../Paginator.css';
+export declare const PaginatorItem: ({ dataKey, mods, content, onClick, loading, }: PaginatorItemProps) => JSX.Element;

package/build/esm/components/Paginator/components/PaginatorItem.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Button } from '@gravity-ui/uikit';
+import { block } from '../../../utils/cn';
+import '../Paginator.css';
+const b = block('paginator');
+export const PaginatorItem = ({ dataKey, mods, content, onClick, loading = false, }) => {
+    const itemKey = Number(dataKey) > 0 ? Number(dataKey) : dataKey;
+    return (React.createElement(Button, { view: "flat", size: "xl", className: b('item', mods), onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(itemKey), loading: loading && Boolean(mods.active) }, content));
+};

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

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { Modifications } from 'bem-cn-lite';
+import { ClassNameProps } from '../../models/common';
+export interface PaginatorItemProps {
+    key: string | ArrowType;
+    dataKey: string | ArrowType;
+    mods: Modifications;
+    content: ReactNode;
+    onClick?: (key: number | ArrowType) => void;
+    loading?: boolean;
+}
+export type PaginatorProps = {
+    page: number;
+    totalItems: number;
+    itemsPerPage: number;
+    maxPages: number;
+    loading: boolean;
+    onPageChange: (page: number) => void;
+    pageCountForShowSupportButtons?: number;
+} & ClassNameProps;
+export declare enum ArrowType {
+    Prev = "prev",
+    Next = "next"
+}
+export type GetPageConfigParams = {
+    page: number;
+    pagesCount: number;
+    handlePageClick: (key: number | ArrowType) => void;
+};

package/build/esm/components/Paginator/types.js

@@ -0,0 +1,5 @@
+export var ArrowType;
+(function (ArrowType) {
+    ArrowType["Prev"] = "prev";
+    ArrowType["Next"] = "next";
+})(ArrowType || (ArrowType = {}));

package/build/esm/components/Paginator/utils.d.ts

@@ -0,0 +1,3 @@
+import { GetPageConfigParams, PaginatorItemProps, PaginatorProps } from './types';
+export declare const getPageConfigs: ({ page, pagesCount, handlePageClick }: GetPageConfigParams) => PaginatorItemProps[];
+export declare const getPagesCount: (props: Pick<PaginatorProps, 'totalItems' | 'itemsPerPage' | 'maxPages'>) => number;

package/build/esm/components/Paginator/utils.js

@@ -0,0 +1,27 @@
+const MAX_VISIBLE_PAGES = 5;
+export const getPageConfigs = ({ page, pagesCount, handlePageClick }) => {
+    const paginatorItems = [];
+    // it is calculating the middle of visible pages below
+    const pageOffset = (MAX_VISIBLE_PAGES - 1) / 2;
+    let startPage = page - pageOffset;
+    let endPage = page + pageOffset;
+    if (startPage < 1) {
+        endPage = page + pageOffset - startPage + 1;
+        startPage = 1;
+    }
+    endPage = Math.min(endPage, pagesCount);
+    for (let i = startPage; i <= endPage; i++) {
+        paginatorItems.push({
+            key: String(i),
+            dataKey: String(i),
+            mods: { type: 'page', active: page === i },
+            onClick: handlePageClick,
+            content: i,
+        });
+    }
+    return paginatorItems;
+};
+export const getPagesCount = (props) => {
+    const totalPages = Math.ceil(props.totalItems / props.itemsPerPage);
+    return Math.min(totalPages, props.maxPages);
+};

package/build/esm/components/PostCard/PostCard.css

@@ -0,0 +1,85 @@
+.bc-post-card__title_size_m, .bc-post-card__title_size_s {
+  margin: 0;
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.bc-post-card__card {
+  display: flex;
+  flex-direction: column;
+  min-height: 400px;
+}
+.bc-post-card__card_fullWidth {
+  flex-direction: row;
+}
+@media (max-width: 1081px) {
+  .bc-post-card__card_fullWidth {
+    flex-direction: column;
+  }
+}
+.bc-post-card__header_fullWidth {
+  width: 66%;
+  min-height: 480px;
+  height: 100%;
+}
+@media (max-width: 1081px) {
+  .bc-post-card__header_fullWidth {
+    width: 100%;
+    min-height: auto;
+  }
+}
+.bc-post-card__title {
+  margin-bottom: 8px;
+}
+.bc-post-card__title_size_s {
+  font-size: var(--yc-text-header-1-font-size);
+  line-height: var(--yc-text-header-1-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--yc-text-accent-font-weight);
+}
+.bc-post-card__title_size_m {
+  font-size: var(--yc-text-display-2-font-size);
+  line-height: var(--yc-text-display-2-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--yc-text-accent-font-weight);
+}
+@media (max-width: 576px) {
+  .bc-post-card__title_size_m {
+    font-size: var(--yc-text-display-1-font-size);
+    line-height: var(--yc-text-display-1-line-height);
+  }
+}
+.bc-post-card__image-container {
+  height: 156px;
+}
+.bc-post-card__tag {
+  color: var(--yc-color-text-secondary);
+  font-weight: var(--yc-text-accent-font-weight);
+}
+.bc-post-card__tag_size_s {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+  padding-bottom: 4px;
+}
+.bc-post-card__tag_size_m {
+  font-size: var(--yc-text-body-3-font-size);
+  line-height: var(--yc-text-body-3-line-height);
+  padding-bottom: 8px;
+}
+.bc-post-card__description {
+  word-wrap: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: 96px;
+  white-space: initial;
+  color: var(--yc-color-text-primary);
+}
+@supports (-webkit-line-clamp: 5) {
+  .bc-post-card__description {
+    max-height: auto;
+    -webkit-line-clamp: 5;
+  }
+}
+.bc-post-card__description_size_m {
+  max-height: 128px;
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { MetrikaGoal } from '@gravity-ui/page-constructor';
+import { PostData } from '../../models/common';
+import './PostCard.css';
+type PostCardProps = {
+    post: PostData;
+    fullWidth?: boolean;
+    showTag?: boolean;
+    size?: 's' | 'm';
+    metrikaGoals?: MetrikaGoal;
+};
+export declare const PostCard: React.FC<PostCardProps>;
+export {};

package/build/esm/components/PostCard/PostCard.js

@@ -0,0 +1,34 @@
+import React, { useMemo, useContext } from 'react';
+import { CardBase, YFMWrapper, HTML } from '@gravity-ui/page-constructor';
+import { LikesContext } from '../../contexts/LikesContext';
+import { SuggestPostInfo } from '../PostInfo/SuggestPostInfo';
+import { block } from '../../utils/cn';
+import './PostCard.css';
+const b = block('post-card');
+export const PostCard = ({ post, metrikaGoals, fullWidth = false, size = 's', showTag = false, }) => {
+    var _a;
+    const { title: postTitle, htmlTitle, textTitle, blogPostId, id, date, readingTime, hasUserLike, likes, image, description, tags, url, } = post;
+    const title = postTitle || textTitle || htmlTitle;
+    const { toggleLike, hasLikes } = useContext(LikesContext);
+    const likesProps = useMemo(() => hasLikes
+        ? {
+            hasUserLike,
+            likesCount: likes,
+            toggleLike,
+        }
+        : undefined, [hasUserLike, likes, toggleLike, hasLikes]);
+    return (React.createElement(CardBase, { url: url, metrikaGoals: metrikaGoals, className: b('card', { fullWidth }) },
+        React.createElement(CardBase.Header, { image: image, className: b('header', { fullWidth }) },
+            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)))),
+            description && (React.createElement(YFMWrapper, { className: b('description'), content: description, modifiers: {
+                    blog: size === 'm',
+                    blogCard: true,
+                } }))),
+        React.createElement(CardBase.Footer, null,
+            React.createElement(SuggestPostInfo, { postId: blogPostId || id, date: date, readingTime: readingTime, hasUserLike: hasUserLike, likes: likesProps, size: size, dataQa: "blog-suggest-block" }))));
+};

package/build/esm/components/PostInfo/PostInfo.css

@@ -0,0 +1,88 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.bc-post-info__item {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+  display: flex;
+  padding-right: 24px;
+  padding-top: 12px;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.bc-post-info__item_size_s {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+}
+.bc-post-info__item_size_m {
+  font-size: var(--yc-text-body-3-font-size);
+  line-height: var(--yc-text-body-3-line-height);
+}
+.bc-post-info__item:last-child {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+  display: flex;
+  padding-right: 0px;
+  padding-top: 12px;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.bc-post-info__switcher {
+  color: var(--yc-color-text-secondary);
+}
+.bc-post-info__switcher:hover {
+  color: var(--yc-color-text-primary);
+}
+.bc-post-info__switcher_theme_dark {
+  color: var(--yc-color-text-light-secondary);
+}
+.bc-post-info__switcher_theme_dark.yc-share-tooltip__container, .bc-post-info__switcher_theme_dark.yc-share-popover__container {
+  color: var(--yc-color-text-light-secondary);
+}
+.bc-post-info__switcher_theme_dark:hover {
+  color: var(--yc-color-text-light-primary);
+}
+.bc-post-info__switcher_theme_dark:hover.yc-share-tooltip__container, .bc-post-info__switcher_theme_dark:hover.yc-share-popover__container {
+  color: var(--yc-color-text-light-primary);
+}
+.bc-post-info__container {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  padding-top: 12px;
+  color: var(--yc-color-text-secondary);
+}
+.bc-post-info__container_theme_dark {
+  color: var(--yc-color-text-light-secondary);
+}
+.bc-post-info__icon {
+  margin-right: 6px;
+  display: flex;
+  align-items: center;
+}
+.bc-post-info__title {
+  width: auto;
+  overflow: hidden;
+}
+.bc-post-info__title_cursor {
+  cursor: pointer;
+}
+.bc-post-info__content {
+  display: flex;
+}
+.bc-post-info__content_cursor {
+  cursor: pointer;
+}
+.bc-post-info__content_cursor:hover {
+  color: var(--yc-color-text-primary);
+}
+.bc-post-info__content_cursor.bc-post-info__content_theme_dark:hover {
+  color: var(--yc-color-text-light-primary);
+}
+.bc-post-info__likes {
+  display: flex;
+}
+.bc-post-info__suggest-container {
+  display: flex;
+  flex-grow: 1;
+  flex-wrap: wrap;
+}