refactor: refactor PostCard component

src/components/PostCard/PostCard.ShowDetails.tsx

@@ -1,20 +1,21 @@
 import { LPE } from '@/types/lpe.types'
-import { Typography } from '@acid-info/lsd-react'
+import { Theme, Typography } from '@acid-info/lsd-react'
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
+import clsx from 'clsx'
 import Image from 'next/image'
 import Link from 'next/link'
 
-export type PostCardShowDetailsProps = Partial<
-  React.ComponentProps<typeof CustomLink>
-> & {
+type Size = 'small' | 'medium' | 'large'
+
+export type PostCardShowDetailsProps = React.HTMLAttributes<HTMLAnchorElement> &
+  Partial<CustomLinkProps> & {
     title: string
     slug: string
     episodeNumber: number
     logo?: LPE.Image.Document
     podcast: LPE.Podcast.Show
-  size?: 'small' | 'medium'
-}
+  }
 
 // TODO
 export const PostCardShowDetails = ({
@@ -25,45 +26,137 @@ export const PostCardShowDetails = ({
   ...props
 }: PostCardShowDetailsProps) => {
   return (
-    <CustomLink {...props} href={`/podcasts/${slug}`}>
-      <Container>
+    <CustomLink
+      {...props}
+      href={`/podcasts/${slug}`}
+      className={clsx('show-details', `show-details--${size}`, props.className)}
+    >
+      <div className="show-details__container">
         {podcast && (
           <>
-            <Logo
+            <Image
               src={podcast?.logo?.url}
-              width={size === 'medium' ? 38 : 28}
-              height={size === 'medium' ? 38 : 28}
+              width={38}
+              height={38}
               alt={podcast.logo.alt}
+              className="show-details__logo"
             />
-            <PodcastInfo>
-              <Typography variant="body2">{podcast.title}</Typography>
-              {size !== 'small' && (
-                <Typography variant="body3">{episodeNumber} EP</Typography>
-              )}
-            </PodcastInfo>
+            <div className="show-details__info">
+              <Typography variant="subtitle2" className="show-details__title">
+                {podcast.title}
+              </Typography>
+              <Typography variant="body3" className="show-details__episodes">
+                {episodeNumber} EP
+              </Typography>
+            </div>
           </>
         )}
-      </Container>
+      </div>
     </CustomLink>
   )
 }
 
-const Container = styled.div`
+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;
+    }
+
+    .show-details__logo {
+      width: 24px;
+      height: 24px;
+    }
+  `,
+
+  medium: (theme: Theme) => css`
+    .show-details__episodes {
+      display: none;
+    }
+
+    .show-details__logo {
+      width: 28px;
+      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
+}
+
+const CustomLink = styled(Link)<CustomLinkProps>`
+  text-decoration: none;
+
+  .show-details {
+    &__container {
       display: flex;
       gap: 8px;
       align-items: center;
-`
+    }
 
-const PodcastInfo = styled.div`
+    &__info {
       display: flex;
       flex-direction: column;
       gap: 2px;
-`
+    }
 
-const CustomLink = styled(Link)`
-  text-decoration: none;
-`
-
-const Logo = styled(Image)`
+    &__logo {
       border-radius: 100%;
+    }
+  }
+
+  &.show-details--small {
+    ${(props) => PostCardShowDetails.styles.small(props.theme)}
+  }
+
+  &.show-details--medium {
+    ${(props) => PostCardShowDetails.styles.medium(props.theme)}
+  }
+
+  &.show-details--large {
+    ${(props) => PostCardShowDetails.styles.large(props.theme)}
+  }
+
+  &.show-details {
+    @media (max-width: ${({ theme }) => theme.breakpoints.sm.width - 1}px) {
+      ${(props) =>
+        props.xsSize && PostCardShowDetails.styles[props.xsSize](props.theme)}
+    }
+
+    @media (min-width: ${({ theme }) => theme.breakpoints.sm.width}px) {
+      ${(props) =>
+        props.smSize && PostCardShowDetails.styles[props.smSize](props.theme)}
+    }
+
+    @media (min-width: ${({ theme }) => theme.breakpoints.md.width}px) {
+      ${(props) =>
+        props.mdSize && PostCardShowDetails.styles[props.mdSize](props.theme)}
+    }
+
+    @media (min-width: ${({ theme }) => theme.breakpoints.lg.width}px) {
+      ${(props) =>
+        props.lgSize && PostCardShowDetails.styles[props.lgSize](props.theme)}
+    }
+  }
 `

src/components/PostCard/PostCard.tsx

@@ -1,21 +1,21 @@
-import { Tags } from '@/components/Tags'
-import { Typography } from '@acid-info/lsd-react'
-import { CommonProps } from '@acid-info/lsd-react/dist/utils/useCommonProps'
-import styled from '@emotion/styled'
-import Link from 'next/link'
-import React from 'react'
-import { LPE } from '../../types/lpe.types'
-import { Authors } from '../Authors'
-import { AuthorsDirection } from '../Authors/Authors'
-
-import { ResponsiveImageProps } from '../ResponsiveImage/ResponsiveImage'
-
 import { PostCardCover } from '@/components/PostCard/PostCard.Cover'
 import {
   PostCardShowDetails,
   PostCardShowDetailsProps,
 } from '@/components/PostCard/PostCard.ShowDetails'
+import { Tags } from '@/components/Tags'
+import { Theme, Typography } from '@acid-info/lsd-react'
+import { CommonProps } from '@acid-info/lsd-react/dist/utils/useCommonProps'
 import { css } from '@emotion/react'
+import styled from '@emotion/styled'
+import clsx from 'clsx'
+import Link from 'next/link'
+import React from 'react'
+import { LPE } from '../../types/lpe.types'
+import { lsdUtils } from '../../utils/lsd.utils'
+import { Authors } from '../Authors'
+import { AuthorsDirection } from '../Authors/Authors'
+import { ResponsiveImageProps } from '../ResponsiveImage/ResponsiveImage'
 import { PostCardLabel } from './PostCard.Label'
 
 export type PostAppearanceProps = {
@@ -39,6 +39,7 @@ export type PostCardProps = CommonProps &
     data: PostDataProps
     contentType: LPE.PostType
     size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'
+    applySizeStyles?: boolean
     displayPodcastShow?: boolean
   }
 
@@ -57,6 +58,7 @@ export const PostCard = (_props: PostCardProps) => {
     },
     size = 'small',
     contentType,
+    applySizeStyles = true,
     displayPodcastShow = true,
     ...props
   } = _props
@@ -68,7 +70,7 @@ export const PostCard = (_props: PostCardProps) => {
 
   const coverImageElement = coverImage && (
     <PostCardCover
-      className="coverImage"
+      className="post-card__cover-image"
       href={link}
       imageProps={imageProps}
       imageData={coverImage}
@@ -76,24 +78,20 @@ export const PostCard = (_props: PostCardProps) => {
   )
 
   const labelElement = (
-    <PostCardLabel className="label" contentType={contentType} date={date} />
+    <PostCardLabel
+      className="post-card__label"
+      contentType={contentType}
+      date={date}
+    />
   )
 
   const titleElement = (
-    <Link href={link} className="titleLink">
+    <Link href={link} className="post-card__title">
       <Typography
-        className="title"
-        genericFontFamily="serif"
+        variant={'h3'}
         component="h3"
-        variant={
-          size === 'xxsmall'
-            ? 'h6'
-            : size === 'xsmall'
-            ? 'body3'
-            : size === 'small'
-            ? 'h4'
-            : 'h2'
-        }
+        genericFontFamily="serif"
+        className="post-card__title-text"
       >
         {title}
       </Typography>
@@ -102,7 +100,7 @@ export const PostCard = (_props: PostCardProps) => {
 
   const subtitleElement = subtitle && (
     <Typography
-      className="subtitle"
+      className="post-card__subtitle"
       variant={'body1'}
       genericFontFamily="sans-serif"
     >
@@ -112,7 +110,7 @@ export const PostCard = (_props: PostCardProps) => {
 
   const authorsElement = authors && authors.length > 0 && (
     <Authors
-      className="authors"
+      className="post-card__authors"
       authors={authors}
       email={false}
       flexDirection={AuthorsDirection.ROW}
@@ -123,38 +121,29 @@ export const PostCard = (_props: PostCardProps) => {
   const showElement = displayPodcastShow && podcastShowDetails && (
     <PostCardShowDetails
       {...podcastShowDetails}
-      size={size === 'large' ? 'medium' : 'small'}
-      className="showDetails"
+      className="post-card__show-details"
+      size={'small'}
     />
   )
 
-  const tagsElement = tags.length > 0 && <Tags className="tags" tags={tags} />
+  const tagsElement = tags.length > 0 && (
+    <Tags className="post-card__tags" tags={tags} />
+  )
 
   return (
-    <Container {...props} size={size}>
-      {size === 'large' ? (
-        <>
-          <div>
-            {labelElement}
-            {titleElement}
-            {subtitleElement}
-            {authorsElement}
-            {showElement}
-            {tagsElement}
-          </div>
-          <div>{coverImageElement}</div>
-        </>
-      ) : (
-        <>
-          {coverImageElement}
-          {labelElement}
-          {titleElement}
-          {subtitleElement}
-          {authorsElement}
-          {showElement}
-          {tagsElement}
-        </>
+    <Container
+      className={clsx(
+        'post-card',
+        applySizeStyles && applySizeStyles && `post-card--${size}`,
       )}
+    >
+      {labelElement}
+      {coverImageElement}
+      {titleElement}
+      {subtitleElement}
+      {showElement}
+      {authorsElement}
+      {tagsElement}
     </Container>
   )
 }
@@ -193,115 +182,166 @@ 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-h6-lineHeight));
+
+      ${lsdUtils.typography('h6')}
+    }
+
+    .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;
+    }
+
+    @media (max-width: ${theme.breakpoints.lg.width - 1}px) {
+      .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('h6')}
+    }
+  `,
+  small: (theme: Theme) => css`
+    .post-card__title-text {
+      ${lsdUtils.typography('h4')}
+    }
+
+    .post-card__subtitle {
+      ${lsdUtils.typography('subtitle2')}
+    }
+
+    .post-card__show-details {
+      ${PostCardShowDetails.styles.large(theme)}
+    }
+  `,
+  medium: (theme: Theme) => css`
+    .post-card__title-text {
+      ${lsdUtils.typography('h2')}
+    }
+
+    .post-card__subtitle {
+      ${lsdUtils.typography('subtitle2')}
+    }
+
+    .post-card__show-details {
+      ${PostCardShowDetails.styles.large(theme)}
+    }
+  `,
+  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;
+
+    .post-card__title-text {
+      ${lsdUtils.typography('h2')}
+    }
+
+    .postcard__subtitle {
+      ${lsdUtils.typography('subtitle2')}
+    }
+
+    .post-card__cover-image {
+      grid-area: image;
+    }
+
+    .post-card__label {
+      grid-area: info;
+      grid-row: auto;
+    }
+
+    .post-card__title {
+      grid-area: info;
+      grid-row: auto;
+    }
+
+    .post-card__authors,
+    .post-card__show-details {
+      grid-area: info;
+      grid-row: auto;
+    }
+
+    .post-card__tags {
+      grid-area: info;
+      grid-row: auto;
+    }
+
+    .post-card__show-details {
+      ${PostCardShowDetails.styles.large(theme)}
+    }
+  `,
+}
+
 const Container = styled.div<Pick<PostCardProps, 'size'>>`
   display: flex;
   flex-direction: column;
   position: 'relative';
-  gap: 16px;
+  gap: 16px 0;
 
-  .label {
+  .post-card__label {
     margin-bottom: -8px;
   }
 
-  .titleLink {
+  .post-card__title {
     text-decoration: none;
     width: fit-content;
   }
 
-  .title,
-  .subtitle {
+  .post-card__title-text,
+  .post-card__subtitle {
     text-overflow: ellipsis;
     overflow: hidden;
     word-break: break-word;
   }
 
-  .title {
-    @media (max-width: 768px) {
-      font-size: 28px;
-      line-height: 36px;
-    }
+  &.post-card--xxsmall {
+    ${({ theme }) => PostCard.styles.xxsmall(theme)}
   }
 
-  .subtitle {
-    @media (max-width: 768px) {
-      font-size: 14px;
-      line-height: 20px;
-    }
+  &.post-card--xsmall {
+    ${({ theme }) => PostCard.styles.xsmall(theme)}
   }
 
-  ${({ size }) =>
-    size === 'xxsmall' &&
-    css`
-      .label {
+  &.post-card--small {
+    ${({ theme }) => PostCard.styles.small(theme)}
   }
 
-      .title {
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        max-height: calc(2 * var(--lsd-h6-lineHeight));
+  &.post-card--medium {
+    ${({ theme }) => PostCard.styles.medium(theme)}
   }
 
-      .subtitle {
-        display: none;
+  &.post-card--large {
+    ${({ theme }) => PostCard.styles.large(theme)}
   }
-
-      .coverImage {
-        display: none;
-      }
-
-      .tags {
-        display: none;
-      }
-
-      .authors,
-      .showDetails {
-        flex-grow: 1;
-        display: flex;
-      }
-    `}
-
-  ${({ size }) =>
-    size === 'xsmall' &&
-    css`
-      .label {
-        margin-bottom: -px;
-      }
-
-      .title {
-      }
-
-      .subtitle {
-        display: none;
-      }
-
-      .coverImage {
-      }
-
-      .tags {
-        margin-top: 8px;
-      }
-
-      .authors,
-      .showDetails {
-      }
-    `}
-
-  ${({ size }) => size === 'small' && css``}
-
-  ${({ size }) => size === 'medium' && css``}
-
-  ${({ size }) =>
-    size === 'large' &&
-    css`
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-
-      > * {
-        display: flex;
-        flex-direction: column;
-        position: 'relative';
-        gap: 16px;
-      }
-    `}
 `