fix: feedback ui line-clamp (#79)

eleven-labs · Apr 10, 2024 · 8d4a868 · 8d4a868
1 parent b8637f3
commit 8d4a868
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@eleven-labs/design-system",
   "description": "Design System for Eleven Labs",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/eleven-labs/design-system.git"

diff --git a/src/components/Molecules/Cards/PostCard/PostCard.tsx b/src/components/Molecules/Cards/PostCard/PostCard.tsx
@@ -56,7 +56,7 @@ export const PostCard: React.FC<PostCardProps> = ({
         <Heading
           as="h2"
           size="xs"
-          lineClamp={{ xs: variant === 'highlight-dark' ? 2 : 4, md: variant === 'highlight-light' ? 3 : 2 }}
+          lineClamp={variant === 'highlight-dark' ? 2 : { xs: 4, md: variant === 'side-image' ? 2 : 3 }}
           className="post-card__heading"
         >
           <Text as="a" {...link} size="m" data-internal-link="post" className="post-card__link">
@@ -87,7 +87,13 @@ export const PostCard: React.FC<PostCardProps> = ({
       />
       {variant !== 'highlight-dark' && (
         <Skeleton isLoading={isLoading}>
-          <Text mt="xs" size="s" hiddenBelow="md" lineClamp={{ xs: 4, md: 2 }} className="post-card__excerpt">
+          <Text
+            mt="xs"
+            size="s"
+            hiddenBelow="md"
+            lineClamp={variant === 'side-image' ? 2 : 4}
+            className="post-card__excerpt"
+          >
             {excerpt}
           </Text>
         </Skeleton>

diff --git a/src/components/Molecules/Pagination/Pagination.tsx b/src/components/Molecules/Pagination/Pagination.tsx
@@ -33,7 +33,7 @@ export const Pagination: React.FC<PaginationProps> = ({
   currentPage,
   totalPages,
   getLink,
-  siblingCount = 1,
+  siblingCount = 0,
   ...props
 }) => {
   const pagination = usePagination({ currentPage, totalPages, siblingCount });

diff --git a/src/components/Molecules/PostMetadata/PostMetadata.tsx b/src/components/Molecules/PostMetadata/PostMetadata.tsx
@@ -66,23 +66,30 @@ export const PostMetadata: React.FC<PostMetadataProps> = ({
         break;
       }
       case 'authors': {
+        const authorChildren = authors && (
+          <>
+            {variant === 'secondary' && <Icon name="person" size="24px" color="light-grey" />}
+            {authors.map(({ username, name, link }, authorIndex) => (
+              <Fragment key={username}>
+                {link ? <Link {...link}>{name}</Link> : <Text as="span">{name}</Text>}
+                {authorIndex !== authors.length - 1 && <Text as="span">{' & '}</Text>}
+              </Fragment>
+            ))}
+          </>
+        );
         currentFields.push(
           <Skeleton
             key={displayedField}
             isLoading={isLoading}
             display="inline-block"
             style={{ minWidth: 50, minHeight: 16 }}
           >
-            {authors && (
+            {variant === 'secondary' ? (
               <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) => (
-                  <Fragment key={username}>
-                    {link ? <Link {...link}>{name}</Link> : <Text as="span">{name}</Text>}
-                    {authorIndex !== authors.length - 1 && <Text as="span">{' & '}</Text>}
-                  </Fragment>
-                ))}
+                {authorChildren}
               </Flex>
+            ) : (
+              <>{authorChildren}</>
             )}
           </Skeleton>
         );

diff --git a/src/styles/utilities/_typography.scss b/src/styles/utilities/_typography.scss
@@ -82,7 +82,7 @@ $text-config: map.get($token-variables, 'typography', 'text');
 
 @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 {
+    @for $number-of-lines from 1 to 5 {
       .line-clamp-#{$number-of-lines}\@#{$breakpoint-name} {
         @include line-clamp($number-of-lines);
       }