diff --git a/src/components/PostCard/PostCard.tsx b/src/components/PostCard/PostCard.tsx index 96196b63..a7f3148c 100644 --- a/src/components/PostCard/PostCard.tsx +++ b/src/components/PostCard/PostCard.tsx @@ -3,31 +3,33 @@ import React, {useContext, useMemo} from 'react'; import {CardBase, HTML, MetrikaGoal, YFMWrapper} from '@gravity-ui/page-constructor'; import {LikesContext} from '../../contexts/LikesContext'; -import {PostData} from '../../models/common'; +import {PostCardSize, PostCardTitleHeadingLevel, PostData} from '../../models/common'; import {block} from '../../utils/cn'; import {SuggestPostInfo} from '../PostInfo/SuggestPostInfo'; import './PostCard.scss'; -const b = block('post-card'); - type PostCardProps = { post: PostData; fullWidth?: boolean; showTag?: boolean; - size?: 's' | 'm'; + size?: PostCardSize; + titleHeadingLevel?: PostCardTitleHeadingLevel; /** * @deprecated Metrika will be deleted after launch of analyticsEvents */ metrikaGoals?: MetrikaGoal; }; +const b = block('post-card'); + export const PostCard: React.FC = ({ post, metrikaGoals, fullWidth = false, - size = 's', + size = PostCardSize.SMALL, showTag = false, + titleHeadingLevel = PostCardTitleHeadingLevel.H3, }) => { const { title: postTitle, @@ -70,13 +72,14 @@ export const PostCard: React.FC = ({ {showTag && tags?.[0]?.name && (
{tags[0].name}
)} - {title && ( -

+ {title && + React.createElement( + titleHeadingLevel, + {className: b('title', {size})}, {title} - -

- )} + , + )} {description && ( , QAProps { postId: PostData['blogPostId']; - size?: 's' | 'm'; + size?: PostCardSize; likes?: { likesCount?: number; hasUserLike?: boolean; @@ -43,7 +43,7 @@ export const SuggestPostInfo: React.FC = ({ date, readingTime, likes, - size = 's', + size = PostCardSize.SMALL, qa, }) => { const {hasUserLike, likesCount, handleLike} = useLikes({ diff --git a/src/components/PostInfo/components/Date.tsx b/src/components/PostInfo/components/Date.tsx index 17414646..6d885d06 100644 --- a/src/components/PostInfo/components/Date.tsx +++ b/src/components/PostInfo/components/Date.tsx @@ -1,6 +1,7 @@ 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'; @@ -10,10 +11,10 @@ const b = block('post-info'); type DateProps = { date: string | number; - size?: 's' | 'm'; + size?: PostCardSize; }; -export const Date: React.FC = ({date, size = 's'}) => { +export const Date: React.FC = ({date, size = PostCardSize.SMALL}) => { const {locale} = useContext(LocaleContext); return
{format(date, 'longDate', locale?.code)}
; diff --git a/src/components/Posts/Posts.tsx b/src/components/Posts/Posts.tsx index ff7e6764..e9edc73c 100644 --- a/src/components/Posts/Posts.tsx +++ b/src/components/Posts/Posts.tsx @@ -4,7 +4,7 @@ import {CardLayoutBlock} from '@gravity-ui/page-constructor'; import {Button} from '@gravity-ui/uikit'; import {Keyset, i18} from '../../i18n'; -import {PostData} from '../../models/common'; +import {PostCardSize, PostCardTitleHeadingLevel, PostData} from '../../models/common'; import {block} from '../../utils/cn'; import {Paginator} from '../Paginator/Paginator'; import {PostCard} from '../PostCard/PostCard'; @@ -50,7 +50,13 @@ export const Posts: React.FC = ({
{pinnedPostOnPage && currentPage === 1 && (
- +
)} {postsOnPage?.length ? ( @@ -63,7 +69,16 @@ export const Posts: React.FC = ({ }} > {postsOnPage?.map((post) => ( - + ))} ) : ( diff --git a/src/models/common.ts b/src/models/common.ts index 0e865699..9d1a0390 100644 --- a/src/models/common.ts +++ b/src/models/common.ts @@ -201,3 +201,13 @@ export type FetchArgs = { export interface QAProps { qa?: string; } + +export enum PostCardSize { + SMALL = 's', + MEDIUM = 'm', +} + +export enum PostCardTitleHeadingLevel { + H2 = 'h2', + H3 = 'h3', +}