fix: feedback ui (#76)

package.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"

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

@@ -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.tsx

@@ -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/PostMetadata/PostMetadata.scss

@@ -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.stories.ts

@@ -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.tsx

@@ -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/Organisms/Autocomplete/AutocompleteResult/AutocompleteResult.scss

@@ -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.tsx

@@ -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/Blocks/LastArticlesBlock/LastArticlesBlock.scss

@@ -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;
+      }
     }
   }
 }

src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.stories.ts

@@ -11,7 +11,7 @@ const meta: Meta<typeof LastArticlesBlock> = {
   args: {
     title: 'Nos articles récents autour des dernières tendances technologiques',
     posts: [
-      ...Array.from({ length: 3 }).map((_) => PostCardStories.Overview.args as LastArticlesBlockProps['posts'][0]),
+      ...Array.from({ length: 2 }).map((_) => PostCardStories.Overview.args as LastArticlesBlockProps['posts'][0]),
       {
         ...(PostCardStories.Overview.args as LastArticlesBlockProps['posts'][0]),
         title: `Quisque at libero lorem etiam tristique eros magna`,

src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.tsx

@@ -18,7 +18,7 @@ export const LastArticlesBlock: React.FC<LastArticlesBlockProps> = ({
   linkSeeMore: { label: labelLinkSeeMore, ...linkSeeMore },
   ...props
 }) => (
-  <Box {...props} my="xl" mx={{ xs: 's', md: 'auto' }} className="last-articles-block container-content">
+  <Box {...props} my="xl" className="last-articles-block container-content">
     <Heading size="m" color="primary">
       {title}
     </Heading>

src/constants/systemProps/typographySystemProps.ts

@@ -7,4 +7,5 @@ export const typographySystemProps: Record<keyof TypographySystemProps, readonly
   italic: ['font-style'],
   underline: ['text-decoration'],
   textTransform: ['text-transform'],
+  lineClamp: ['-webkit-line-clamp'],
 };

src/helpers/systemPropsHelper/typographySystemClassName.ts

@@ -6,6 +6,7 @@ import type { MediaQueryType, TextAlignType, TypographySystemProps } from '@/typ
 export const typographySystemClassName = <TProps extends TypographySystemProps>({
   textAlign,
   textSize,
+  lineClamp,
   ...props
 }: TProps): string =>
   classNames(
@@ -19,5 +20,6 @@ export const typographySystemClassName = <TProps extends TypographySystemProps>(
       [`text-underline`]: props.underline,
       [`text-italic`]: props.italic,
       [`text-${textSize}`]: textSize,
+      [`line-clamp-${lineClamp}`]: lineClamp,
     }
   );

src/pages/HomePage/HomePage.tsx

@@ -6,7 +6,7 @@ import type {
   LastTutorialsBlockProps,
   NewsletterCardProps,
 } from '@/components';
-import { Box, HomeIntroBlock, LastArticlesBlock, LastTutorialsBlock, NewsletterCard } from '@/components';
+import { HomeIntroBlock, LastArticlesBlock, LastTutorialsBlock, NewsletterCard } from '@/components';
 
 export type HomePageProps = {
   homeIntroBlock: HomeIntroBlockProps;
@@ -25,8 +25,6 @@ export const HomePage: React.FC<HomePageProps> = ({
     <HomeIntroBlock {...homeIntroBlock} />
     <LastArticlesBlock {...lastArticlesBlock} />
     {lastTutorialsBlock && <LastTutorialsBlock {...lastTutorialsBlock} />}
-    <Box my="xl" mx={{ xs: 's', md: 'auto' }}>
-      <NewsletterCard variant="horizontal" className="container-content" {...newsletterCard} />
-    </Box>
+    <NewsletterCard my="xl" variant="horizontal" className="container-content" {...newsletterCard} />
   </>
 );

src/styles/utilities/_typography.scss

@@ -52,6 +52,14 @@ $typography-prop-list-with-breakpoints: (
   }
 }
 
+@mixin line-clamp($number-of-lines) {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $number-of-lines;
+  text-overflow: ellipsis;
+}
+
 /*
  * Typography System Class Names
  */
@@ -71,3 +79,9 @@ $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);
+  }
+}

src/types/SystemProps/TypographySystemProps.ts

@@ -1,4 +1,11 @@
-import type { FontWeightType, TextAlignType, TextSizeType, TextTransformType, TypeWithMediaQueriesType } from '@/types';
+import type {
+  FontWeightType,
+  LineClampType,
+  TextAlignType,
+  TextSizeType,
+  TextTransformType,
+  TypeWithMediaQueriesType,
+} from '@/types';
 
 export interface TypographySystemProps {
   /**
@@ -25,4 +32,8 @@ export interface TypographySystemProps {
    * text-size
    */
   textSize?: TextSizeType;
+  /**
+   * clamping text to a specific number of lines
+   */
+  lineClamp?: LineClampType;
 }

src/types/tokenTypes.ts

@@ -13,3 +13,4 @@ export type IconNameType = keyof (typeof tokenVariables)['asset']['icon'];
 
 export type HeadingSizeType = keyof (typeof tokenVariables)['typography']['heading'];
 export type TextSizeType = keyof (typeof tokenVariables)['typography']['text'];
+export type LineClampType = 1 | 2 | 3 | 4;