fix: feedback ui heading post card (#77)

Author: fpasquet

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@eleven-labs/design-system",
   "description": "Design System for Eleven Labs",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/eleven-labs/design-system.git"

package.json

@@ -28,17 +28,19 @@
   $this: &;
 
   --background-color-post-card: white;
-  --cover-size-square-mobile-post-card: 74px;
-  --cover-size-square-desktop-post-card: 200px;
+  --cover-size-square-mobile-post-card: 67px;
+  --cover-size-square-desktop-post-card: 190px;
   --cover-height-horizontal-mobile-post-card: 130px;
   --cover-height-horizontal-medium-desktop-post-card: 175px;
   --cover-height-horizontal-large-desktop-post-card: 245px;
+  --max-height-post-card: auto;
 
 
   position: relative;
   display: flex;
   background-color: var(--background-color-post-card);
   border-radius: #{map-get-strict($token-variables, 'radius', 's')};
+  max-height: var(--max-height-post-card);
 
   #{$this}__cover {
     width: 100%;
@@ -80,9 +82,13 @@
   }
 
   &--side-image {
+    --max-height-post-card: var(--cover-size-square-mobile-post-card);
+
     flex-direction: row-reverse;
 
     @include create-media-queries('md') {
+      --max-height-post-card: var(--cover-size-square-desktop-post-card);
+
       flex-direction: row;
     }
     #{$this}__cover {

src/components/Molecules/Cards/PostCard/PostCard.scss

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 
 import type { BoxProps, PictureProps } from '@/components';
-import { Box, Flex, Heading, Picture, Skeleton, Text } from '@/components';
+import { Box, Heading, Picture, Skeleton, Text } from '@/components';
 import { PostMetadata } from '@/components';
 import type { ComponentPropsWithoutRef } from '@/types';
 
@@ -49,18 +49,16 @@ export const PostCard: React.FC<PostCardProps> = ({
     })}
   >
     <Skeleton isLoading={isLoading}>
-      <Picture {...cover} img={{ className: 'post-card__cover', ...cover?.img }} />
+      <Picture {...cover} img={{ ...cover?.img, className: 'post-card__cover' }} />
     </Skeleton>
-    <Flex
-      flexDirection="column"
-      justifyContent="between"
-      my={{ xs: 's', md: 'm' }}
-      pl={{ xs: 's', md: 'm' }}
-      pr={{ xs: 'xs', md: 'm' }}
-      flex="1"
-    >
+    <Box my={{ xs: 's', md: 'm' }} pl={{ xs: 's', md: 'm' }} pr={{ xs: 'xs', md: 'm' }} flex="1">
       <Skeleton isLoading={isLoading}>
-        <Heading as="h2" size="xs" lineClamp={2} className="post-card__heading">
+        <Heading
+          as="h2"
+          size="xs"
+          lineClamp={{ xs: variant === 'highlight-dark' ? 2 : 4, md: variant === 'highlight-light' ? 3 : 2 }}
+          className="post-card__heading"
+        >
           <Text as="a" {...link} size="m" data-internal-link="post" className="post-card__link">
             {title}
           </Text>
@@ -89,11 +87,11 @@ export const PostCard: React.FC<PostCardProps> = ({
       />
       {variant !== 'highlight-dark' && (
         <Skeleton isLoading={isLoading}>
-          <Text mt="xs" size="s" hiddenBelow="md" lineClamp={2} className="post-card__excerpt">
+          <Text mt="xs" size="s" hiddenBelow="md" lineClamp={{ xs: 4, md: 2 }} className="post-card__excerpt">
             {excerpt}
           </Text>
         </Skeleton>
       )}
-    </Flex>
+    </Box>
   </Box>
 );

src/components/Molecules/Cards/PostCard/PostCard.tsx

@@ -26,10 +26,16 @@ WithVariantSecondary.args = {
     {
       username: 'jdoe',
       name: 'J. Doe',
+      link: {
+        href: '/fr/authors/jdoe',
+      },
     },
     {
       username: 'jdupont',
       name: 'J. Dupont',
+      link: {
+        href: '/fr/authors/jdupont',
+      },
     },
   ],
   variant: 'secondary',

src/components/Molecules/PostMetadata/PostMetadata.stories.ts

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import React, { Fragment } from 'react';
 
-import { Flex, Icon, Skeleton, Text } from '@/components';
-import type { SpacingSystemProps } from '@/types';
+import { Flex, Icon, Link, Skeleton, Text } from '@/components';
+import type { ComponentPropsWithoutRef, SpacingSystemProps } from '@/types';
 
 import './PostMetadata.scss';
 
@@ -16,6 +16,7 @@ export interface PostMetadataProps extends SpacingSystemProps {
   authors?: {
     username: string;
     name: string;
+    link?: ComponentPropsWithoutRef<'a'>;
   }[];
   isLoading?: boolean;
   displayedFields?: ('date' | 'readingTime' | 'authors')[];
@@ -73,15 +74,15 @@ export const PostMetadata: React.FC<PostMetadataProps> = ({
             style={{ minWidth: 50, minHeight: 16 }}
           >
             {authors && (
-              <>
+              <Flex alignContent="center" alignItems="center" gap="xxs" className="post-metadata__authors">
                 {variant === 'secondary' && <Icon name="person" size="24px" color="light-grey" />}
-                {authors.map(({ username, name }, authorIndex) => (
+                {authors.map(({ username, name, link }, authorIndex) => (
                   <Fragment key={username}>
-                    <Text as="span">{name}</Text>
+                    {link ? <Link {...link}>{name}</Link> : <Text as="span">{name}</Text>}
                     {authorIndex !== authors.length - 1 && <Text as="span">{' & '}</Text>}
                   </Fragment>
                 ))}
-              </>
+              </Flex>
             )}
           </Skeleton>
         );

src/components/Molecules/PostMetadata/PostMetadata.tsx

@@ -67,7 +67,7 @@ export const AutocompleteResult = polyRef<'div', AutocompleteResultProps>(
                     size="s"
                     text={title}
                     textQuery={searchValue}
-                    lineClamp={2}
+                    lineClamp={{ xs: 4, md: 2 }}
                     className="autocomplete-result__link"
                   />
                   <PostMetadata mt="xxs-3" date={date} authors={authors} displayedFields={['date', 'authors']} />

src/components/Organisms/Autocomplete/AutocompleteResult/AutocompleteResult.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 
 import { classNamesWithModifiers } from '@/helpers/systemPropsHelper/classNamesWithModifiers';
-import type { MediaQueryType, TextAlignType, TypographySystemProps } from '@/types';
+import type { LineClampType, MediaQueryType, TextAlignType, TypographySystemProps } from '@/types';
 
 export const typographySystemClassName = <TProps extends TypographySystemProps>({
   textAlign,
@@ -20,6 +20,9 @@ export const typographySystemClassName = <TProps extends TypographySystemProps>(
       [`text-underline`]: props.underline,
       [`text-italic`]: props.italic,
       [`text-${textSize}`]: textSize,
-      [`line-clamp-${lineClamp}`]: lineClamp,
-    }
+    },
+    ...classNamesWithModifiers<MediaQueryType, LineClampType>({
+      propValue: lineClamp,
+      className: 'line-clamp',
+    })
   );

src/helpers/systemPropsHelper/typographySystemClassName.ts

@@ -37,7 +37,7 @@ $headings-by-compoent-variant-name: (
     border-radius: #{map-get-strict($token-variables, 'radius', 'xs')};
 
     @include create-media-queries('md') {
-      --height-cover-post-page: 335px;
+      --height-cover-post-page: 330px;
     }
   }
 

src/pages/PostPage/PostPage.scss

@@ -80,8 +80,12 @@ $text-config: map.get($token-variables, 'typography', 'text');
 @include component('heading', $heading-config);
 @include text-component($text-config);
 
-@for $number-of-lines from 1 to 4 {
-  .line-clamp-#{$number-of-lines} {
-    @include line-clamp($number-of-lines);
+@each $breakpoint-name, $breakpoint-value in map.get($token-variables, 'breakpoint') {
+  @include create-media-queries($breakpoint-name) {
+    @for $number-of-lines from 1 to 4 {
+      .line-clamp-#{$number-of-lines}\@#{$breakpoint-name} {
+        @include line-clamp($number-of-lines);
+      }
+    }
   }
 }