From 4211a8894aaa6aa1fb346a12b4d0f058fb26ca09 Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Fri, 22 Dec 2023 22:13:18 +0330 Subject: [PATCH] feat: implement PostCard component design adjustments --- .../ArticleReference/ArticleReference.tsx | 8 +- src/components/Authors/Author.tsx | 52 +-- src/components/Authors/Authors.tsx | 40 +-- src/components/PostCard/PostCard.Label.tsx | 11 +- .../PostCard/PostCard.ShowDetails.tsx | 61 +--- src/components/PostCard/PostCard.Subtitle.tsx | 2 +- src/components/PostCard/PostCard.tsx | 327 +++++------------- 7 files changed, 144 insertions(+), 357 deletions(-) diff --git a/src/components/ArticleReference/ArticleReference.tsx b/src/components/ArticleReference/ArticleReference.tsx index b4fe292..7e79a36 100644 --- a/src/components/ArticleReference/ArticleReference.tsx +++ b/src/components/ArticleReference/ArticleReference.tsx @@ -3,7 +3,6 @@ import styled from '@emotion/styled' import Link from 'next/link' import { LPE } from '../../types/lpe.types' import { Authors } from '../Authors' -import { AuthorsDirection } from '../Authors/Authors' type Props = { data: LPE.Article.Metadata @@ -29,12 +28,7 @@ export default function ArticleReference({ - + • {localDate} diff --git a/src/components/Authors/Author.tsx b/src/components/Authors/Author.tsx index 78ddaa9..35c0bbf 100644 --- a/src/components/Authors/Author.tsx +++ b/src/components/Authors/Author.tsx @@ -1,42 +1,48 @@ import { Typography } from '@acid-info/lsd-react' import styled from '@emotion/styled' -import { AuthorsConfig } from '../../configs/data.configs' import { LPE } from '../../types/lpe.types' -const Author = ({ - author, - email, -}: { +export type AuthorProps = React.ComponentProps & { author: LPE.Author.Document - email: boolean - gap?: number -}) => ( - +} + +const Author: React.FC = ({ author, ...props }) => ( + + + {author.name.slice(0, 1)} + {author.name} - {email && - author.emailAddress && - !AuthorsConfig.hiddenEmailAddresses.includes(author.emailAddress) && ( - - {author.emailAddress} - - )} ) const AuthorInfo = styled.div` display: flex; - flex-direction: column; + flex-direction: row; + align-items: center; + gap: 0 var(--lsd-spacing-8); +` + +const AuthorInitials = styled.div` + display: flex; + align-items: center; + justify-content: center; + width: 1rem; + height: 1rem; + border-radius: 50%; + box-sizing: border-box; + border: 1px solid rgb(var(--lsd-border-primary)); + + span { + font-size: 0.6875rem !important; + font-weight: 400 !important; + line-height: 1rem !important; + } ` const CustomTypography = styled(Typography)` diff --git a/src/components/Authors/Authors.tsx b/src/components/Authors/Authors.tsx index 42138bf..6d5d70f 100644 --- a/src/components/Authors/Authors.tsx +++ b/src/components/Authors/Authors.tsx @@ -1,59 +1,45 @@ -import { Typography } from '@acid-info/lsd-react' import styled from '@emotion/styled' import { LPE } from '../../types/lpe.types' import { DotIcon } from '../Icons/DotIcon' import Author from './Author' -export enum AuthorsDirection { - COLUMN = 'column', - ROW = 'row', -} - export type AuthorsProps = Partial< React.ComponentProps > & { authors: LPE.Author.Document[] - email: boolean + separator?: boolean } const Authors: React.FC = ({ authors, - email, - gap = 12, - flexDirection = AuthorsDirection.ROW, + separator = true, ...props }) => { return authors?.length > 0 ? ( - - - by - + {authors.map((author, index) => ( - - - {index < authors.length - 1 && } + + + {separator && index < authors.length - 1 && ( + + )} ))} ) : null } -const AuthorsContainer = styled.div<{ - gap?: number - flexDirection?: AuthorsDirection -}>` +const AuthorsContainer = styled.div` + gap: 12px; display: flex; - flex-direction: ${({ flexDirection }) => flexDirection}; - gap: ${({ gap }) => gap}px; + flex-direction: row; align-items: center; ` -const AuthorContainer = styled.div<{ - gap: number -}>` +const AuthorContainer = styled.div` + gap: 12px; display: flex; align-items: center; - gap: ${({ gap }) => gap}px; ` export default Authors diff --git a/src/components/PostCard/PostCard.Label.tsx b/src/components/PostCard/PostCard.Label.tsx index cc5841b..ba380dc 100644 --- a/src/components/PostCard/PostCard.Label.tsx +++ b/src/components/PostCard/PostCard.Label.tsx @@ -9,6 +9,7 @@ export type Props = React.ComponentProps & { contentType: PostType date: Date | null displayYear?: boolean + size?: 'small' | 'medium' | 'large' } export const PostCardLabel: FC = ({ @@ -19,13 +20,13 @@ export const PostCardLabel: FC = ({ }) => { return ( - + {contentType.toUpperCase()} {date && ( <> - + {date.toLocaleString('en-GB', { day: 'numeric', month: 'short', @@ -38,6 +39,12 @@ export const PostCardLabel: FC = ({ )} + {props.children && ( + <> + + {props.children} + + )} ) } diff --git a/src/components/PostCard/PostCard.ShowDetails.tsx b/src/components/PostCard/PostCard.ShowDetails.tsx index acc70e4..11c27fe 100644 --- a/src/components/PostCard/PostCard.ShowDetails.tsx +++ b/src/components/PostCard/PostCard.ShowDetails.tsx @@ -45,14 +45,9 @@ export const PostCardShowDetails = ({ alt={podcast.logo.alt} className="show-details__logo" /> -
- - {podcast.title} - - - {episodeNumber} EP - -
+ + {podcast.title} + )} @@ -63,13 +58,7 @@ export const PostCardShowDetails = ({ PostCardShowDetails.styles = { small: (theme: Theme) => css` .show-details__title { - font-size: 12px !important; - font-weight: 400 !important; - line-height: 16px !important; - } - - .show-details__episodes { - display: none !important; + ${lsdUtils.typography('label2')} } .show-details__logo { @@ -78,9 +67,9 @@ PostCardShowDetails.styles = { } `, - medium: (theme: Theme) => css` - .show-details__episodes { - display: none; + large: (theme: Theme) => css` + .show-details__title { + ${lsdUtils.typography('label1')} } .show-details__logo { @@ -88,43 +77,21 @@ PostCardShowDetails.styles = { height: 28px; } `, - - large: (theme: Theme) => css` - .show-details__episodes { - display: block !important; - } - .show-details__logo { - width: 38px; - height: 38px; - } - `, } type CustomLinkProps = { size?: Size - xsSize?: Size - smSize?: Size - mdSize?: Size - lgSize?: Size applySizeStyles?: boolean } const CustomLink = styled(Link)` - text-decoration: none; - .show-details { &__container { display: flex; - gap: 8px; + gap: 12px; align-items: center; } - &__info { - display: flex; - flex-direction: column; - gap: 2px; - } - &__logo { border-radius: 100%; } @@ -135,17 +102,14 @@ const CustomLink = styled(Link)` props.applySizeStyles && PostCardShowDetails.styles.small(props.theme)} } - &.show-details--medium { - ${(props) => - props.applySizeStyles && PostCardShowDetails.styles.medium(props.theme)} - } - &.show-details--large { ${(props) => props.applySizeStyles && PostCardShowDetails.styles.large(props.theme)} } +` - &.show-details { +/** + * &.show-details { ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} { ${(props) => props.xsSize && @@ -174,4 +138,5 @@ const CustomLink = styled(Link)` PostCardShowDetails.styles[props.lgSize](props.theme)} } } -` + * + */ diff --git a/src/components/PostCard/PostCard.Subtitle.tsx b/src/components/PostCard/PostCard.Subtitle.tsx index 74b0914..46f8311 100644 --- a/src/components/PostCard/PostCard.Subtitle.tsx +++ b/src/components/PostCard/PostCard.Subtitle.tsx @@ -4,7 +4,7 @@ import { PropsWithChildren } from 'react' export const PostCardSubTitle = ({ children }: PropsWithChildren) => ( {children} diff --git a/src/components/PostCard/PostCard.tsx b/src/components/PostCard/PostCard.tsx index 8ba38ec..feb6898 100644 --- a/src/components/PostCard/PostCard.tsx +++ b/src/components/PostCard/PostCard.tsx @@ -16,7 +16,6 @@ import { LPE } from '../../types/lpe.types' import { lsdUtils } from '../../utils/lsd.utils' import { getPostLink } from '../../utils/route.utils' import { Authors } from '../Authors' -import { AuthorsDirection } from '../Authors/Authors' import { ResponsiveImageProps } from '../ResponsiveImage/ResponsiveImage' import { PostCardLabel } from './PostCard.Label' @@ -81,12 +80,20 @@ export const PostCard = (_props: PostCardProps) => { /> ) + const authorsElement = authors && authors.length > 0 && ( +
+ +
+ ) + const labelElement = ( + > + {contentType === 'article' && authorsElement} + ) const titleElement = {title} @@ -95,17 +102,6 @@ export const PostCard = (_props: PostCardProps) => { {subtitle} ) - const authorsElement = authors && authors.length > 0 && ( -
- -
- ) - const showElement = displayPodcastShow && podcastShowDetails && ( { applySizeStyles && applySizeStyles && `post-card--${size}`, coverImageElement && 'post-card--with-image', props.className, - `post-card__${contentType}`, + `post-card--${contentType}`, )} > {coverImageElement} - {labelElement} {titleElement} + {labelElement} {subtitleElement} {showElement} - {authorsElement} - {tagsElement} ) } @@ -175,125 +169,71 @@ PostCard.toData = (post: LPE.Post.Document, shows: LPE.Podcast.Show[] = []) => { } PostCard.styles = { - xxsmall: (theme: Theme) => css` - height: 100%; - - .post-card__title-text { - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - max-height: calc(2 * var(--lsd-h5-lineHeight)); - - ${lsdUtils.typography('h5')} - } - - .post-card__subtitle { - display: none; - } - - .post-card__cover-image { - display: none; - } - - .post-card__tags { - display: none; - } - - .post-card__authors, - .post-card__show-details { - flex-grow: 1; - display: flex; - align-items: flex-end; - } - - .post-card__show-details { - ${PostCardShowDetails.styles.small(theme)} - } - - ${lsdUtils.breakpoint(theme, 'sm', 'exact')} { - .post-card__authors { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 6px 0; - - > div { - > span { - display: none; - } - } - } - } - - ${lsdUtils.breakpoint(theme, 'md', 'down')} { - .post-card__title-text { - ${lsdUtils.typography('subtitle1', true)} - max-height: calc(2 * var(--lsd-subtitle1-lineHeight)); - } - } - `, - xsmall: (theme: Theme) => css` - .post-card__title-text { - ${lsdUtils.typography('h5')} - } - - ${lsdUtils.breakpoint(theme, 'md', 'down')} { - .post-card__title-text { - ${lsdUtils.typography('h5')} - } - } - `, + xxsmall: (theme: Theme) => css``, + xsmall: (theme: Theme) => css``, small: (theme: Theme) => css` + .post-card__title { + margin-top: var(--lsd-spacing-16); + } + .post-card__title-text { - ${lsdUtils.typography('h4')} + ${lsdUtils.typography('h5')} + + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + max-height: calc(3 * var(--lsd-h5-lineHeight)); } .post-card__subtitle { - ${lsdUtils.typography('subtitle2')} + ${lsdUtils.typography('subtitle4')} + + margin-top: var(--lsd-spacing-16); } - .post-card__show-details { - ${PostCardShowDetails.styles.large(theme)} + .post-card__label { + margin-top: var(--lsd-spacing-8); + + * { + ${lsdUtils.typography('subtitle4')} + } } &.post-card__search-explore { - .post-card__title h3 { - ${lsdUtils.typography('h6')} - } } .post-card__show-details { ${PostCardShowDetails.styles.small(theme)} - } - ${lsdUtils.breakpoint(theme, 'md', 'down')} { - .post-card__title-text { - ${lsdUtils.typography('h5')} - - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - max-height: calc(3 * var(--lsd-h5-lineHeight)); - } - } - - ${lsdUtils.breakpoint(theme, 'xs', 'exact')} { - .post-card__show-details { - ${PostCardShowDetails.styles.small(theme)} - } + margin-top: var(--lsd-spacing-16); } `, medium: (theme: Theme) => css` - .post-card__title-text { - ${lsdUtils.typography('h2')} + .post-card__title { + margin-top: var(--lsd-spacing-24); } - .post-card__subtitle { - ${lsdUtils.typography('subtitle2')} + .post-card__title-text { + ${lsdUtils.typography('h2')} + + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + max-height: calc(3 * var(--lsd-h2-lineHeight)); + } + + .post-card__label { + margin-top: var(--lsd-spacing-16); + + * { + ${lsdUtils.typography('subtitle2')} + } } .post-card__show-details { ${PostCardShowDetails.styles.large(theme)} + + margin-top: var(--lsd-spacing-24); } .post-card__cover-image { @@ -313,37 +253,28 @@ PostCard.styles = { } } } - - ${lsdUtils.breakpoint(theme, 'md', 'down')} { - .post-card__title-text { - ${lsdUtils.typography('h3')} - - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - max-height: calc(3 * var(--lsd-h3-lineHeight)); - } - } `, large: (theme: Theme) => css` display: grid; grid-template-columns: repeat(2, 1fr); grid-template-areas: - 'info image' - 'info image' - 'info image' 'info image' 'info image' 'info image' '. image'; - gap: 16px 105px; + gap: 0 var(--lsd-spacing-64); .post-card__title-text { - ${lsdUtils.typography('h2')} + ${lsdUtils.typography('h1')} + + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + max-height: calc(3 * var(--lsd-h1-lineHeight)); } - .postcard__subtitle { - ${lsdUtils.typography('subtitle2')} + .post-card__subtitle { + margin-top: var(--lsd-spacing-32); } .post-card__cover-image { @@ -369,6 +300,9 @@ PostCard.styles = { .post-card__label { grid-area: info; grid-row: auto; + * { + ${lsdUtils.typography('subtitle2')} + } } .post-card__title { @@ -391,124 +325,10 @@ PostCard.styles = { ${PostCardShowDetails.styles.large(theme)} } - ${lsdUtils.breakpoint(theme, 'sm', 'exact')} { - gap: 16px 16px; - } - - ${lsdUtils.breakpoint(theme, 'md', 'exact')} { - gap: 16px 100px; - } - - ${lsdUtils.breakpoint(theme, 'md', 'down')} { - .post-card__title-text { - ${lsdUtils.typography('h3')} - - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - max-height: calc(3 * var(--lsd-h3-lineHeight)); - } - } - - ${lsdUtils.breakpoint(theme, 'xs', 'exact')} { - .post-card__title-text { - ${lsdUtils.typography('h5')} - } - } - &.post-card__search-explore { - opacity: 0.5; } &.post-card__search-result { - padding: 24px 0; - - gap: 0 16px; - display: grid; - - .post-card__title { - margin-top: 8px; - } - - .post-card__title-text { - ${lsdUtils.typography('h4')} - } - - .post-card__subtitle { - margin-top: 8px; - - grid-area: info; - grid-row: auto; - ${lsdUtils.typography('subtitle2')} - } - - .post-card__authors { - display: none; - } - - .post-card__label { - margin-bottom: 0; - } - - .show-details__title { - ${lsdUtils.typography('subtitle3')} - } - - .post-card__show-details { - margin-top: 12px; - ${PostCardShowDetails.styles.small(theme)} - } - - .post-card__tags { - margin-top: 16px; - align-self: end; - } - - &.top-post { - .post-card__title-text { - ${lsdUtils.typography('h4')} - } - } - - &:not(.post-card--with-image) { - grid-template-areas: - 'info info info info info info info info' - 'info info info info info info info info' - 'info info info info info info info info' - 'info info info info info info info info' !important; - } - - ${lsdUtils.breakpoint(theme, 'md', 'down')} { - grid-template-columns: repeat(8, 1fr); - grid-template-areas: - 'info info info info info image image image' - 'info info info info info image image image' - 'info info info info info image image image' - 'info info info info info image image image' - '. . . . . image image image'; - } - - ${lsdUtils.breakpoint(theme, 'sm', 'down')} { - &.post-card__article { - .post-card__subtitle { - display: none; - } - } - - .post-card__title-text { - ${lsdUtils.typography('h6')} - } - } - - ${lsdUtils.breakpoint(theme, 'lg', 'up')} { - grid-template-columns: repeat(11, 1fr); - grid-template-areas: - 'info info info info info info info info image image image' - 'info info info info info info info info image image image' - 'info info info info info info info info image image image' - 'info info info info info info info info image image image' - '. . . . . . . . image image image'; - } } `, } @@ -517,11 +337,6 @@ const Container = styled.div>` display: flex; flex-direction: column; position: 'relative'; - gap: 16px 0; - - .post-card__label { - margin-bottom: -8px; - } .post-card__title { text-decoration: none; @@ -535,6 +350,20 @@ const Container = styled.div>` word-break: break-word; } + .post-card__label { + margin-top: var(--lsd-spacing-16); + } + + .post-card__show-details { + margin-top: var(--lsd-spacing-16); + } + + ${(props) => lsdUtils.breakpoint(props.theme, 'md', 'down')} { + .post-card__label { + margin-top: var(--lsd-spacing-8); + } + } + &.post-card--xxsmall { ${({ theme }) => PostCard.styles.xxsmall(theme)} }