From ed1fb3327168a37fe65eab7d6e7dd0f713d406c3 Mon Sep 17 00:00:00 2001
From: fpasquet <fab.pasquet@gmail.com>
Date: Fri, 8 Mar 2024 18:39:14 +0100
Subject: [PATCH] fix: feedback ui post card (#73)

---
 package.json                                   |  2 +-
 .../Molecules/Cards/PostCard/PostCard.scss     |  5 +++++
 .../LastArticlesBlock/LastArticlesBlock.scss   | 10 ++++++----
 .../LastTutorialsBlock.stories.ts              | 12 +++++++++---
 src/components/Organisms/Header/Header.scss    | 18 +++++++++++-------
 .../Organisms/PostCardList/PostCardList.tsx    |  2 +-
 src/pages/PostPage/PostPage.tsx                |  4 ++--
 7 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 1cbc9da8..6c876d5f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@eleven-labs/design-system",
   "description": "Design System for Eleven Labs",
-  "version": "0.30.2",
+  "version": "0.30.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/eleven-labs/design-system.git"
diff --git a/src/components/Molecules/Cards/PostCard/PostCard.scss b/src/components/Molecules/Cards/PostCard/PostCard.scss
index b2a524d2..8605ce5c 100644
--- a/src/components/Molecules/Cards/PostCard/PostCard.scss
+++ b/src/components/Molecules/Cards/PostCard/PostCard.scss
@@ -93,6 +93,7 @@
 
     #{$this}__heading {
       -webkit-line-clamp: 3;
+      min-height: 5.5rem;
     }
   }
 
@@ -113,6 +114,10 @@
 
     #{$this}__heading {
       -webkit-line-clamp: 2;
+
+      @include create-media-queries('md') {
+        width: calc(100% - 55px);
+      }
     }
     #{$this}__excerpt {
       -webkit-line-clamp: 2;
diff --git a/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.scss b/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.scss
index 3bba5d9b..47df6a5b 100644
--- a/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.scss
+++ b/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.scss
@@ -3,11 +3,13 @@
 .last-articles-block {
   &__post-list {
     display: grid; // @todo: add component for grid
-  }
 
-  @include create-media-queries('md') {
-    &__post-list {
-      grid-template-columns: repeat(4, 1fr); // @todo: add component for grid
+    @include create-media-queries('md') {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @include create-media-queries('lg') {
+      grid-template-columns: repeat(4, 1fr);
     }
   }
 }
diff --git a/src/components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock.stories.ts b/src/components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock.stories.ts
index 914070e3..e3be17a4 100644
--- a/src/components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock.stories.ts
+++ b/src/components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock.stories.ts
@@ -13,9 +13,15 @@ const meta: Meta<typeof LastTutorialsBlock> = {
     description:
       'Avec nos tutoriels, apprenez pas à pas à créer de nouvelles features : créer un chat avec Mercure et Symfony, mettre en place un CI/CD avec GitLab-CI pour une application Javascript et bien plus encore. Suivez le guide !',
     tutorialLabel: 'Tutoriel',
-    posts: Array.from({ length: 2 }).map(
-      () => PostCardStories.WithContentTypeTutorial.args as LastTutorialsBlockProps['posts'][0]
-    ),
+    posts: [
+      {
+        ...(PostCardStories.WithContentTypeTutorial.args as LastTutorialsBlockProps['posts'][0]),
+      },
+      {
+        ...(PostCardStories.WithContentTypeTutorial.args as LastTutorialsBlockProps['posts'][0]),
+        title: 'Nam molestie elementum libero, ut sollicitudin lorem placerat',
+      },
+    ],
     linkSeeMore: { label: 'Découvrir tous nos tutoriels', href: '#' },
   },
 };
diff --git a/src/components/Organisms/Header/Header.scss b/src/components/Organisms/Header/Header.scss
index 40fca3af..1318b59b 100644
--- a/src/components/Organisms/Header/Header.scss
+++ b/src/components/Organisms/Header/Header.scss
@@ -50,6 +50,17 @@
       width: 100%;
       border-top: 0.5px solid #{map-get-strict($token-variables, 'color', 'secondary-dark')};
 
+      @include create-media-queries('md') {
+        margin: 0 #{map-get-strict($token-variables, 'spacing', 'xs')};
+        gap: #{map-get-strict($token-variables, 'spacing', 'm')};
+        font-weight: #{map-get-strict($token-variables, 'font-weight', 'bold')};
+      }
+
+      @include create-media-queries('lg') {
+        margin: 0;
+        gap: #{map-get-strict($token-variables, 'spacing', 'xl')};
+      }
+
       &--is-open {
         display: flex;
       }
@@ -60,11 +71,4 @@
         border-bottom: 0.5px solid #{map-get-strict($token-variables, 'color', 'secondary-dark')};
     }
   }
-
-  @include create-media-queries('md') {
-    &__menu {
-      gap: #{map-get-strict($token-variables, 'spacing', 'xl')};
-      font-weight: #{map-get-strict($token-variables, 'font-weight', 'bold')};
-    }
-  }
 }
diff --git a/src/components/Organisms/PostCardList/PostCardList.tsx b/src/components/Organisms/PostCardList/PostCardList.tsx
index 8998d384..352c2df4 100644
--- a/src/components/Organisms/PostCardList/PostCardList.tsx
+++ b/src/components/Organisms/PostCardList/PostCardList.tsx
@@ -17,7 +17,7 @@ export const PostCardList: React.FC<PostCardListProps> = ({ posts, pagination, i
           <PostCard {...(post || {})} isLoading={isLoading} />
         </React.Fragment>
       ))}
-      {pagination && pagination?.totalPages > 1 && <Pagination {...pagination} />}
+      {pagination && pagination?.totalPages > 1 && <Pagination mx="auto" {...pagination} />}
     </Flex>
   </>
 );
diff --git a/src/pages/PostPage/PostPage.tsx b/src/pages/PostPage/PostPage.tsx
index 60c37c42..1655f562 100644
--- a/src/pages/PostPage/PostPage.tsx
+++ b/src/pages/PostPage/PostPage.tsx
@@ -23,8 +23,8 @@ export const PostPage: React.FC<PostPageProps> = ({
   ...postPageContent
 }) => (
   <Box mx="auto" className="post-page">
-    <Breadcrumb {...breadcrumb} />
-    <Picture {...cover} img={{ className: 'post-page__cover', ...cover?.img }} />
+    <Breadcrumb mx={{ xs: 'xs', md: '0' }} {...breadcrumb} />
+    <Picture {...cover} mx={{ xs: 'xs', md: '0' }} img={{ className: 'post-page__cover', ...cover?.img }} />
     <LayoutContentWithSidebar
       content={
         <PostPageContent {...postPageContent} variant={variant} summary={summary}>