fix: feedback ui (#76)

Author: fpasquet

package-lock.json

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

package.json

@@ -29,7 +29,7 @@
 
   --background-color-post-card: white;
   --cover-size-square-mobile-post-card: 74px;
-  --cover-size-square-desktop-post-card: 185px;
+  --cover-size-square-desktop-post-card: 200px;
   --cover-height-horizontal-mobile-post-card: 130px;
   --cover-height-horizontal-medium-desktop-post-card: 175px;
   --cover-height-horizontal-large-desktop-post-card: 245px;
@@ -57,19 +57,6 @@
         @include cover-image-horizontal(var(--cover-height-horizontal-medium-desktop-post-card));
       }
     }
-
-    #{$this}__heading {
-      -webkit-line-clamp: 3;
-    }
-    #{$this}__excerpt {
-      -webkit-line-clamp: 4;
-    }
-
-    @include create-media-queries('md') {
-      #{$this}__heading {
-        min-height: 6rem;
-      }
-    }
   }
 
   &--highlight-dark {
@@ -90,19 +77,13 @@
         @include cover-image-horizontal(var(--cover-height-horizontal-large-desktop-post-card));
       }
     }
-
-    #{$this}__heading {
-      -webkit-line-clamp: 3;
-      min-height: 5.5rem;
-    }
   }
 
   &--side-image {
     flex-direction: row-reverse;
 
     @include create-media-queries('md') {
       flex-direction: row;
-      max-height: var(--cover-size-square-desktop-post-card);
     }
     #{$this}__cover {
       @include cover-image-square;
@@ -112,31 +93,13 @@
       }
     }
 
-    #{$this}__heading {
-      -webkit-line-clamp: 2;
-
-      @include create-media-queries('md') {
-        width: calc(100% - 55px);
+    &#{$this}--with-tutorial {
+      #{$this}__heading {
+        @include create-media-queries('md') {
+          width: calc(100% - 55px);
+        }
       }
     }
-    #{$this}__excerpt {
-      -webkit-line-clamp: 2;
-    }
-  }
-
-  &__heading {
-    align-items: center;
-    justify-content: space-between;
-    gap: #{map-get-strict($token-variables, 'spacing', 'xxs')};
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-  }
-
-  &__excerpt {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
   }
 
 

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, Heading, Picture, Skeleton, Text } from '@/components';
+import { Box, Flex, Heading, Picture, Skeleton, Text } from '@/components';
 import { PostMetadata } from '@/components';
 import type { ComponentPropsWithoutRef } from '@/types';
 
@@ -27,6 +27,7 @@ export interface PostCardProps extends BoxProps {
 }
 
 export const PostCard: React.FC<PostCardProps> = ({
+  slug,
   contentType,
   variant = 'side-image',
   cover = {},
@@ -40,13 +41,26 @@ export const PostCard: React.FC<PostCardProps> = ({
   tutorialLabel,
   ...props
 }) => (
-  <Box as="article" {...props} className={classNames('post-card', `post-card--${variant}`)}>
+  <Box
+    as="article"
+    {...props}
+    className={classNames('post-card', `post-card--${variant}`, {
+      ['post-card--with-tutorial']: contentType === 'tutorial',
+    })}
+  >
     <Skeleton isLoading={isLoading}>
       <Picture {...cover} img={{ className: 'post-card__cover', ...cover?.img }} />
     </Skeleton>
-    <Box my={{ xs: 's', md: 'm' }} pl={{ xs: 's', md: 'm' }} pr={{ xs: 'xs', md: 'm' }} flex="1">
+    <Flex
+      flexDirection="column"
+      justifyContent="between"
+      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" className="post-card__heading">
+        <Heading as="h2" size="xs" lineClamp={2} className="post-card__heading">
           <Text as="a" {...link} size="m" data-internal-link="post" className="post-card__link">
             {title}
           </Text>
@@ -75,11 +89,11 @@ export const PostCard: React.FC<PostCardProps> = ({
       />
       {variant !== 'highlight-dark' && (
         <Skeleton isLoading={isLoading}>
-          <Text mt="xs" size="s" hiddenBelow="md" className="post-card__excerpt">
+          <Text mt="xs" size="s" hiddenBelow="md" lineClamp={2} className="post-card__excerpt">
             {excerpt}
           </Text>
         </Skeleton>
       )}
-    </Box>
+    </Flex>
   </Box>
 );

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

@@ -17,11 +17,4 @@
   &__date {
     min-width: max-content;
   }
-
-  &__authors {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-  }
 }

src/components/Molecules/PostMetadata/PostMetadata.scss

@@ -26,16 +26,10 @@ 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, Link, Skeleton, Text } from '@/components';
-import type { ComponentPropsWithoutRef, SpacingSystemProps } from '@/types';
+import { Flex, Icon, Skeleton, Text } from '@/components';
+import type { SpacingSystemProps } from '@/types';
 
 import './PostMetadata.scss';
 
@@ -16,7 +16,6 @@ export interface PostMetadataProps extends SpacingSystemProps {
   authors?: {
     username: string;
     name: string;
-    link?: ComponentPropsWithoutRef<'a'>;
   }[];
   isLoading?: boolean;
   displayedFields?: ('date' | 'readingTime' | 'authors')[];
@@ -74,15 +73,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, link }, authorIndex) => (
+                {authors.map(({ username, name }, authorIndex) => (
                   <Fragment key={username}>
-                    {link ? <Link {...link}>{name}</Link> : <Text as="span">{name}</Text>}
+                    <Text as="span">{name}</Text>
                     {authorIndex !== authors.length - 1 && <Text as="span">{' & '}</Text>}
                   </Fragment>
                 ))}
-              </Flex>
+              </>
             )}
           </Skeleton>
         );
@@ -106,7 +105,7 @@ export const PostMetadata: React.FC<PostMetadataProps> = ({
       {...props}
       alignItems="center"
       textSize="s"
-      flexWrap="no-wrap"
+      flexWrap="wrap"
       gap={variant === 'secondary' ? 's' : 'xxs'}
       className={classNames('post-metadata', { [`post-metadata--${variant}`]: variant })}
     >

src/components/Molecules/PostMetadata/PostMetadata.tsx

@@ -35,10 +35,6 @@
 
   &__link {
     color: black;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
 
     &::before {
       content: " ";

src/components/Organisms/Autocomplete/AutocompleteResult/AutocompleteResult.scss

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

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

@@ -4,12 +4,20 @@
   &__post-list {
     display: grid; // @todo: add component for grid
 
-    @include create-media-queries('md') {
+    @include create-media-queries('md' ) {
       grid-template-columns: repeat(2, 1fr);
+
+      .post-card:last-child {
+        display: none;
+      }
     }
 
     @include create-media-queries('lg') {
-      grid-template-columns: repeat(4, 1fr);
+      grid-template-columns: repeat(3, 1fr);
+
+      .post-card:last-child {
+        display: flex;
+      }
     }
   }
 }