claim info on media article cards [CV2-5445] (#2155)

* begin work on showing claim info on media article cards [CV2-5445] * sort prop types [CV2-5445] * improve css to remove need for important designation [CV2-5445] [smoke tests]
meedan · Oct 11, 2024 · 5498140 · 5498140
1 parent d3ddd51
commit 5498140
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 39 deletions.
diff --git a/src/app/components/article/ArticleCard.module.css b/src/app/components/article/ArticleCard.module.css
@@ -18,12 +18,13 @@
 
     .mediaArticleCard {
       flex-direction: column;
-      gap: 3px;
+      gap: 6px;
 
       .articleCardHeader {
-        align-items: flex-start;
+        align-items: center;
         display: flex;
         gap: 3px;
+        height: 30px;
 
         .articleIcon {
           font-size: var(--font-size-subtitle-1);

diff --git a/src/app/components/article/MediaArticleCard.js b/src/app/components/article/MediaArticleCard.js
@@ -1,24 +1,25 @@
-/* eslint-disable react/sort-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames/bind';
 import { FormattedMessage } from 'react-intl';
 import RemoveArticleButton from './RemoveArticleButton';
 import Alert from '../cds/alerts-and-prompts/Alert';
 import Card from '../cds/media-cards/Card';
-import EllipseIcon from '../../icons/ellipse.svg';
 import FactCheckIcon from '../../icons/fact_check.svg';
 import BookIcon from '../../icons/book.svg';
 import BulletSeparator from '../layout/BulletSeparator';
 import Language from '../cds/media-cards/Language';
 import LastRequestDate from '../cds/media-cards/LastRequestDate';
+import ItemRating from '../cds/media-cards/ItemRating';
 import ArticleUrl from '../cds/media-cards/ArticleUrl';
 import ItemReportStatus from '../cds/media-cards/ItemReportStatus';
 import ButtonMain from '../cds/buttons-checkboxes-chips/ButtonMain';
 import cardStyles from '../cds/media-cards/Card.module.css';
 import styles from './ArticleCard.module.css';
 
 const MediaArticleCard = ({
+  claimSummary,
+  claimTitle,
   date,
   id,
   languageCode,
@@ -61,7 +62,6 @@ const MediaArticleCard = ({
               { variant === 'fact-check' && <FormattedMessage defaultMessage="Claim & Fact-Check" description="Title in an article card on item page." id="mediaArticleCard.factCheck" /> }
               { variant === 'explainer' && <FormattedMessage defaultMessage="Explainer" description="Title in an article card on item page." id="mediaArticleCard.explainer" /> }
             </div>
-            { statusLabel && <div><EllipseIcon style={{ color: statusColor }} /> {statusLabel}</div> }
           </div>
           <div
             className={cx(
@@ -70,18 +70,39 @@ const MediaArticleCard = ({
             )}
           >
             <div className={cardStyles.cardSummaryContent}>
-              <h6 className={cx(cardStyles.cardTitle)}>
-                { url ?
-                  <ArticleUrl linkText={title} showIcon={false} title={title} url={url} variant={variant} />
-                  :
-                  <>
-                    {title}
-                  </>
-                }
-              </h6>
-              <div className={cardStyles.cardDescription}>
-                {summary}
-              </div>
+              { variant === 'fact-check' &&
+                <div
+                  className={cx(
+                    [cardStyles.cardSummaryClaimContent],
+                    {
+                      [cardStyles.cardSummaryClaimFactCheck]: title || summary,
+                    })
+                  }
+                >
+                  <h6 className={cx(cardStyles.cardTitle)}>
+                    {claimTitle}
+                  </h6>
+                  <div className={cardStyles.cardDescription}>
+                    {claimSummary}
+                  </div>
+                </div>
+              }
+              { title &&
+                <h6 className={cx(cardStyles.cardTitle)}>
+                  { url ?
+                    <ArticleUrl linkText={title} showIcon={false} title={title} url={url} variant={variant} />
+                    :
+                    <>
+                      {title}
+                    </>
+                  }
+                </h6>
+              }
+              { summary &&
+                <div className={cardStyles.cardDescription}>
+                  {summary}
+                </div>
+              }
             </div>
           </div>
         </div>
@@ -92,13 +113,22 @@ const MediaArticleCard = ({
       <BulletSeparator
         className={styles.mediaArticleCardFooter}
         details={[
-          variant === 'fact-check' && (<ItemReportStatus
-            displayLabel
-            isPublished={Boolean(publishedAt)}
-            publishedAt={publishedAt ? new Date(publishedAt * 1000) : null}
-            theme="lightText"
-            tooltip={false}
-          />),
+          statusLabel && (
+            <ItemRating
+              rating={statusLabel}
+              ratingColor={statusColor}
+              size="small"
+            />
+          ),
+          variant === 'fact-check' && (
+            <ItemReportStatus
+              displayLabel
+              isPublished={Boolean(publishedAt)}
+              publishedAt={publishedAt ? new Date(publishedAt * 1000) : null}
+              theme="lightText"
+              tooltip={false}
+            />
+          ),
           languageCode && (
             <Language
               languageCode={languageCode}
@@ -139,6 +169,8 @@ const MediaArticleCard = ({
 );
 
 MediaArticleCard.defaultProps = {
+  claimSummary: null,
+  claimTitle: null,
   url: null,
   languageCode: null,
   variant: 'explainer',
@@ -152,19 +184,22 @@ MediaArticleCard.defaultProps = {
 };
 
 MediaArticleCard.propTypes = {
-  id: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  url: PropTypes.string,
+  claimSummary: PropTypes.string,
+  claimTitle: PropTypes.string,
   date: PropTypes.instanceOf(Date).isRequired,
-  statusLabel: PropTypes.string,
-  statusColor: PropTypes.string,
-  summary: PropTypes.string,
+  id: PropTypes.string.isRequired,
   languageCode: PropTypes.string,
   publishedAt: PropTypes.number, // Timestamp
+  removeDisabled: PropTypes.bool,
+  statusColor: PropTypes.string,
+  statusLabel: PropTypes.string,
+  summary: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  url: PropTypes.string,
   variant: PropTypes.oneOf(['explainer', 'fact-check']),
   onClick: PropTypes.func,
   onRemove: PropTypes.func,
-  removeDisabled: PropTypes.bool,
+
 };
 
 export default MediaArticleCard;
diff --git a/src/app/components/article/MediaArticlesDisplay.js b/src/app/components/article/MediaArticlesDisplay.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { graphql, createFragmentContainer } from 'react-relay/compat';
+import cx from 'classnames/bind';
 import MediaArticleCard from './MediaArticleCard';
 import ClaimFactCheckForm from './ClaimFactCheckForm';
 import ExplainerForm from './ExplainerForm';
@@ -30,6 +31,8 @@ const MediaArticlesDisplay = ({ onUpdate, projectMedia }) => {
     <div className={styles.mediaArticlesDisplay}>
       { hasFactCheck ?
         <MediaArticleCard
+          claimSummary={factCheck.claim_description.context}
+          claimTitle={factCheck.claim_description.description}
           date={new Date(factCheck.updated_at * 1000)}
           id={factCheck.claim_description.id}
           key={factCheck.id}
@@ -38,8 +41,8 @@ const MediaArticlesDisplay = ({ onUpdate, projectMedia }) => {
           removeDisabled={projectMedia.type === 'Blank'}
           statusColor={currentStatus ? currentStatus.style?.color : null}
           statusLabel={currentStatus ? currentStatus.label : null}
-          summary={isFactCheckValueBlank(factCheck.summary) ? factCheck.claim_description.context : factCheck.summary}
-          title={isFactCheckValueBlank(factCheck.title) ? factCheck.claim_description.description : factCheck.title}
+          summary={isFactCheckValueBlank(factCheck.summary) ? null : factCheck.summary}
+          title={isFactCheckValueBlank(factCheck.title) ? null : factCheck.title}
           url={factCheck.url}
           variant="fact-check"
           onClick={() => { setArticleToEdit(factCheck); }}
@@ -73,9 +76,13 @@ const MediaArticlesDisplay = ({ onUpdate, projectMedia }) => {
 
         return (
           <div
-            className={styles.explainerCard}
+            className={cx(
+              [styles.explainerCard],
+              {
+                [styles.explainerCardDimmed]: hasFactCheck && hasExplainer,
+              })
+            }
             key={explainerItem.id}
-            style={{ opacity: ((hasFactCheck && hasExplainer) ? 0.15 : 1) }}
           >
             <MediaArticleCard
               date={new Date(explainer.updated_at * 1000)}

diff --git a/src/app/components/article/MediaArticlesDisplay.module.css b/src/app/components/article/MediaArticlesDisplay.module.css
@@ -7,6 +7,19 @@
   padding: 0 16px 16px;
   width: 100%;
 
+  .explainerCard {
+    opacity: 1;
+
+    &.explainerCardDimmed {
+      opacity: .15;
+      transition: opacity 225ms cubic-bezier(0, 0, .2, 1) 0ms;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
   &::before {
     background-color: var(--color-white-100);
     content: '';
@@ -20,7 +33,3 @@
     z-index: 2;
   }
 }
-
-.explainerCard:hover {
-  opacity: 1 !important;
-}
diff --git a/src/app/components/cds/media-cards/Card.module.css b/src/app/components/cds/media-cards/Card.module.css
@@ -82,6 +82,18 @@
       overflow: hidden;
     }
 
+    .cardSummaryClaimContent {
+      display: flex;
+      flex-direction: column;
+      margin: 0 0 8px;
+
+      &.cardSummaryClaimFactCheck {
+        border-bottom: solid 2px var(--color-gray-96);
+        margin: 0;
+        padding: 0 0 6px;
+      }
+    }
+
     .toggleCollapse {
       align-items: center;
       background-color: var(--color-blue-98);