From 7bdc66a7dac6f526275f0ecf4067a0858ccd0d53 Mon Sep 17 00:00:00 2001 From: kkmch Date: Fri, 18 Aug 2023 13:19:31 +0300 Subject: [PATCH 1/3] feat: more appropriate heading levels for post cards --- src/components/PostCard/PostCard.tsx | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/src/components/PostCard/PostCard.tsx b/src/components/PostCard/PostCard.tsx index 96196b63..1e62eb99 100644 --- a/src/components/PostCard/PostCard.tsx +++ b/src/components/PostCard/PostCard.tsx @@ -9,19 +9,31 @@ import {SuggestPostInfo} from '../PostInfo/SuggestPostInfo'; import './PostCard.scss'; -const b = block('post-card'); +type PostCardSize = 's' | 'm'; type PostCardProps = { post: PostData; fullWidth?: boolean; showTag?: boolean; - size?: 's' | 'm'; + size?: PostCardSize; /** * @deprecated Metrika will be deleted after launch of analyticsEvents */ metrikaGoals?: MetrikaGoal; }; +const b = block('post-card'); + +const mapSizeToHeadingLevel = (size: PostCardSize) => { + switch (size) { + case 's': + return 'h3'; + case 'm': + default: + return 'h2'; + } +}; + export const PostCard: React.FC = ({ post, metrikaGoals, @@ -70,13 +82,14 @@ export const PostCard: React.FC = ({ {showTag && tags?.[0]?.name && (
{tags[0].name}
)} - {title && ( -

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

- )} + , + )} {description && ( Date: Fri, 18 Aug 2023 13:24:41 +0300 Subject: [PATCH 2/3] feat: adjust heading level automatically --- src/components/PostCard/PostCard.tsx | 15 ++++----------- src/components/Posts/Posts.tsx | 15 +++++++++++++-- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/components/PostCard/PostCard.tsx b/src/components/PostCard/PostCard.tsx index 1e62eb99..a6a1f8a2 100644 --- a/src/components/PostCard/PostCard.tsx +++ b/src/components/PostCard/PostCard.tsx @@ -10,12 +10,14 @@ import {SuggestPostInfo} from '../PostInfo/SuggestPostInfo'; import './PostCard.scss'; type PostCardSize = 's' | 'm'; +type TitleHeadingLevel = 'h2' | 'h3'; type PostCardProps = { post: PostData; fullWidth?: boolean; showTag?: boolean; size?: PostCardSize; + titleHeadingLevel?: TitleHeadingLevel; /** * @deprecated Metrika will be deleted after launch of analyticsEvents */ @@ -24,22 +26,13 @@ type PostCardProps = { const b = block('post-card'); -const mapSizeToHeadingLevel = (size: PostCardSize) => { - switch (size) { - case 's': - return 'h3'; - case 'm': - default: - return 'h2'; - } -}; - export const PostCard: React.FC = ({ post, metrikaGoals, fullWidth = false, size = 's', showTag = false, + titleHeadingLevel = 'h3', }) => { const { title: postTitle, @@ -84,7 +77,7 @@ export const PostCard: React.FC = ({ )} {title && React.createElement( - mapSizeToHeadingLevel(size), + titleHeadingLevel, {className: b('title', {size})}, {title} diff --git a/src/components/Posts/Posts.tsx b/src/components/Posts/Posts.tsx index ff7e6764..e856b377 100644 --- a/src/components/Posts/Posts.tsx +++ b/src/components/Posts/Posts.tsx @@ -50,7 +50,13 @@ export const Posts: React.FC = ({
{pinnedPostOnPage && currentPage === 1 && (
- +
)} {postsOnPage?.length ? ( @@ -63,7 +69,12 @@ export const Posts: React.FC = ({ }} > {postsOnPage?.map((post) => ( - + ))} ) : ( From e52af6e49804ecda6f7e0dc159ee7b9f9cf59671 Mon Sep 17 00:00:00 2001 From: kkmch Date: Mon, 21 Aug 2023 14:42:28 +0300 Subject: [PATCH 3/3] feat: use enums --- src/components/PostCard/PostCard.tsx | 11 ++++------- src/components/PostInfo/SuggestPostInfo.tsx | 6 +++--- src/components/PostInfo/components/Date.tsx | 5 +++-- src/components/Posts/Posts.tsx | 12 ++++++++---- src/models/common.ts | 10 ++++++++++ 5 files changed, 28 insertions(+), 16 deletions(-) diff --git a/src/components/PostCard/PostCard.tsx b/src/components/PostCard/PostCard.tsx index a6a1f8a2..a7f3148c 100644 --- a/src/components/PostCard/PostCard.tsx +++ b/src/components/PostCard/PostCard.tsx @@ -3,21 +3,18 @@ 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'; -type PostCardSize = 's' | 'm'; -type TitleHeadingLevel = 'h2' | 'h3'; - type PostCardProps = { post: PostData; fullWidth?: boolean; showTag?: boolean; size?: PostCardSize; - titleHeadingLevel?: TitleHeadingLevel; + titleHeadingLevel?: PostCardTitleHeadingLevel; /** * @deprecated Metrika will be deleted after launch of analyticsEvents */ @@ -30,9 +27,9 @@ export const PostCard: React.FC = ({ post, metrikaGoals, fullWidth = false, - size = 's', + size = PostCardSize.SMALL, showTag = false, - titleHeadingLevel = 'h3', + titleHeadingLevel = PostCardTitleHeadingLevel.H3, }) => { const { title: postTitle, diff --git a/src/components/PostInfo/SuggestPostInfo.tsx b/src/components/PostInfo/SuggestPostInfo.tsx index 1e6b5db6..c011e080 100644 --- a/src/components/PostInfo/SuggestPostInfo.tsx +++ b/src/components/PostInfo/SuggestPostInfo.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {useLikes} from '../../hooks/useLikes'; -import {PostData, QAProps, ToggleLikeCallbackType} from '../../models/common'; +import {PostCardSize, PostData, QAProps, ToggleLikeCallbackType} from '../../models/common'; import {block} from '../../utils/cn'; import {Date} from './components/Date'; @@ -16,7 +16,7 @@ export interface SuggestPostInfoProps extends Pick, 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 e856b377..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'; @@ -52,10 +52,10 @@ export const Posts: React.FC = ({
)} @@ -73,7 +73,11 @@ export const Posts: React.FC = ({ key={post.id} post={post} showTag - titleHeadingLevel={pinnedPostOnPage ? 'h3' : 'h2'} + titleHeadingLevel={ + pinnedPostOnPage + ? PostCardTitleHeadingLevel.H3 + : PostCardTitleHeadingLevel.H2 + } /> ))} 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', +}