Merge branch 'develop' of github.com:meedan/check-web into develop

meedan · Jul 27, 2024 · b8264f2 · b8264f2
2 parents 39ce67d + 241f96e
commit b8264f2
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 39 deletions.
diff --git a/localization/react-intl/src/app/components/article/MediaArticlesCard.json b/localization/react-intl/src/app/components/article/MediaArticlesCard.json
@@ -1,7 +1,22 @@
 [
   {
-    "id": "articlesSidebarCard.tooltip",
-    "description": "Tooltip message displayed on explainer cards on item page.",
-    "defaultMessage": "Add article to this media cluster"
+    "id": "mediaArticlesCard.factcheckTooltip",
+    "description": "Tooltip message displayed on article cards on item page for fact-check type articles.",
+    "defaultMessage": "Add Claim & Fact-Check article to this media cluster"
+  },
+  {
+    "id": "mediaArticlesCard.explainerTooltip",
+    "description": "Tooltip message displayed on article cards on item page for explainer type articles.",
+    "defaultMessage": "Add Explainer article to this media cluster"
+  },
+  {
+    "id": "mediaArticlesCard.factCheck",
+    "description": "Type description of a fact-check article card.",
+    "defaultMessage": "Claim & Fact-Check"
+  },
+  {
+    "id": "mediaArticlesCard.explainer",
+    "description": "Type description of an explainer article card.",
+    "defaultMessage": "Explainer"
   }
 ]
diff --git a/localization/react-intl/src/app/components/article/MediaArticlesTeamArticles.json b/localization/react-intl/src/app/components/article/MediaArticlesTeamArticles.json
@@ -1,6 +1,6 @@
 [
   {
-    "id": "articlesSidebar.noResults",
+    "id": "mediaArticlesTeamArticles.noResults",
     "description": "Message displayed on articles sidebar when search returns no articles.",
     "defaultMessage": "No results matched your search."
   }

diff --git a/src/app/components/article/Articles.module.css b/src/app/components/article/Articles.module.css
@@ -53,11 +53,16 @@
 
   .articlesSidebarNoArticle {
     border: 2px dashed var(--color-gray-88);
+    border-radius: 8px;
     color: var(--color-gray-75);
     font-style: italic;
     margin: 16px 0 32px;
     padding: 16px;
     text-align: center;
+
+    :global(.check-icon) {
+      font-size: var(--font-size-h4);
+    }
   }
 
   .articlesSidebarList {
@@ -72,36 +77,49 @@
     border-radius: 5px;
     cursor: pointer;
     display: flex;
+    flex-direction: column;
     gap: 3px;
     padding: 6px;
 
-    &:hover {
-      border-color: var(--color-blue-54);
-      border-width: 2px;
-      padding: 5px;
+    .articlesSidebarCardIcon {
+      align-items: center;
+      color: var(--color-gray-37);
+      display: flex;
+      flex-direction: row;
+      gap: 3px;
+
+      :global(.check-icon) {
+        font-size: var(--font-size-subtitle-1);
+      }
     }
-  }
 
-  .articlesSidebarCardIcon {
-    color: var(--color-gray-37);
-    font-size: var(--font-size-subtitle-1);
-  }
+    .articlesSidebarCardTitle {
+      -webkit-box-orient: vertical;
+      color: var(--color-gray-15);
+      display: -webkit-box; /* stylelint-disable-line */
+      -webkit-line-clamp: 2;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
 
-  .articlesSidebarCardTitle {
-    -webkit-box-orient: vertical;
-    color: var(--color-gray-15);
-    display: -webkit-box; /* stylelint-disable-line */
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+    .articlesSidebarCardCaption {
+      align-items: center;
+      display: flex;
 
-  .articlesSidebarCardCaption {
-    align-items: center;
-    display: flex;
+      svg {
+        font-size: var(--font-size-base);
+      }
+    }
+
+    &:hover {
+      border-color: var(--color-blue-54);
+      border-width: 2px;
+      padding: 5px;
 
-    svg {
-      font-size: var(--font-size-base);
+      .articlesSidebarCardIcon {
+        color: var(--color-blue-54);
+        font-weight: bold;
+      }
     }
   }
 }
diff --git a/src/app/components/article/MediaArticlesCard.js b/src/app/components/article/MediaArticlesCard.js
@@ -48,11 +48,10 @@ const MediaArticlesCard = ({ article, team, onAdd }) => {
       key={article.id}
       placement="top"
       title={
-        <FormattedMessage
-          id="articlesSidebarCard.tooltip"
-          defaultMessage="Add article to this media cluster"
-          description="Tooltip message displayed on explainer cards on item page."
-        />
+        <>
+          { article.nodeType === 'FactCheck' && <FormattedMessage id="mediaArticlesCard.factcheckTooltip" defaultMessage="Add Claim & Fact-Check article to this media cluster" description="Tooltip message displayed on article cards on item page for fact-check type articles." /> }
+          { article.nodeType === 'Explainer' && <FormattedMessage id="mediaArticlesCard.explainerTooltip" defaultMessage="Add Explainer article to this media cluster" description="Tooltip message displayed on article cards on item page for explainer type articles." /> }
+        </>
       }
       arrow
     >
@@ -61,6 +60,8 @@ const MediaArticlesCard = ({ article, team, onAdd }) => {
           { isHovered && <AddIcon /> }
           { article.nodeType === 'Explainer' && !isHovered && <BookIcon /> }
           { article.nodeType === 'FactCheck' && !isHovered && <FactCheckIcon /> }
+          { article.nodeType === 'FactCheck' && <FormattedMessage id="mediaArticlesCard.factCheck" tagName="small" defaultMessage="Claim & Fact-Check" description="Type description of a fact-check article card." /> }
+          { article.nodeType === 'Explainer' && <FormattedMessage id="mediaArticlesCard.explainer" tagName="small" defaultMessage="Explainer" description="Type description of an explainer article card." /> }
         </div>
         <div className={cx('typography-body1', styles.articlesSidebarCardTitle)}>
           {article.title}

diff --git a/src/app/components/article/MediaArticlesTeamArticles.js b/src/app/components/article/MediaArticlesTeamArticles.js
@@ -19,14 +19,13 @@ const MediaArticlesTeamArticlesComponent = ({
   <>
     { textSearch && !articles.length ? (
       <div className={cx('typography-body1', styles.articlesSidebarNoArticle)}>
-        <DescriptionIcon style={{ fontSize: 'var(--font-size-h4)' }} />
-        <div>
-          <FormattedMessage
-            id="articlesSidebar.noResults"
-            defaultMessage="No results matched your search."
-            description="Message displayed on articles sidebar when search returns no articles."
-          />
-        </div>
+        <DescriptionIcon />
+        <FormattedMessage
+          tagName="div"
+          id="mediaArticlesTeamArticles.noResults"
+          defaultMessage="No results matched your search."
+          description="Message displayed on articles sidebar when search returns no articles."
+        />
       </div>
     ) : null }
     <div id="articles-sidebar-team-articles" className={styles.articlesSidebarList}>