Articles review cleanup

localization/react-intl/src/app/components/article/ArticleForm.json

@@ -2,22 +2,22 @@
   {
     "id": "article-form-explainer-create-title",
     "description": "Title for the slideout create explainer form",
-    "defaultMessage": "Create Explainer"
+    "defaultMessage": "Create Explainer Article"
   },
   {
     "id": "article-form-explainer-edit-title",
     "description": "Title for the slideout edit explainer form",
-    "defaultMessage": "Edit Explainer"
+    "defaultMessage": "Edit Explainer Article"
   },
   {
     "id": "article-form-fact-check-create-title",
     "description": "Title for the slideout create fact-check form",
-    "defaultMessage": "Create New Claim & Fact-Check"
+    "defaultMessage": "Create New Claim & Fact-Check Article"
   },
   {
     "id": "article-form-fact-check-edit-title",
     "description": "Title for the slideout edit fact-check form",
-    "defaultMessage": "Edit Claim & Fact-Check"
+    "defaultMessage": "Edit Claim & Fact-Check Article"
   },
   {
     "id": "articleForm.editedByLabel",

localization/react-intl/src/app/components/article/MediaArticlesDisplay.json

@@ -2,11 +2,11 @@
   {
     "id": "mediaArticlesDisplay.readOnlyAlertTitle",
     "description": "Title of the alert message displayed on data points section of the edit feed page.",
-    "defaultMessage": "Fact-Check Added"
+    "defaultMessage": "Claim & Fact-Check Added"
   },
   {
     "id": "mediaArticlesDisplay.readOnlyAlertContent",
     "description": "Description of the alert message displayed on data points section of the edit feed page.",
-    "defaultMessage": "When a fact-check article is added it will be prioritized to be sent to all media and requests that match this item."
+    "defaultMessage": "When a claim & fact-check article is added, it will be prioritized as the only article to be delivered as a response to requests that match this item."
   }
 ]

localization/react-intl/src/app/components/cds/slideout/Slideout.json

@@ -1,4 +1,9 @@
 [
+  {
+    "id": "global.closeSlideout",
+    "description": "Button label for closing an open slideout",
+    "defaultMessage": "Close Slideout"
+  },
   {
     "id": "global.cancel",
     "description": "Regular Cancel action label",

src/app/components/article/ArticleCard.module.css

@@ -1,36 +1,47 @@
 .articleCard {
   display: block;
   min-width: 500px;
-}
 
-.card {
-  background-color: var(--color-white-100);
-  border: 1px solid var(--color-gray-88);
-  border-radius: 8px;
-  outline: solid 1px transparent;
-  padding: 8px;
-  transition: border-color 225ms cubic-bezier(0, 0, .2, 1) 0ms, outline-color 225ms cubic-bezier(0, 0, .2, 1) 0ms;
-  width: 100%;
-}
+  &.mediaArticleCardWrapper {
+    :global(.card):hover {
+      border-color: var(--color-gray-88);
+      cursor: auto;
+      outline-color: transparent;
+    }
 
-.articleIcon {
-  font-size: var(--font-size-subtitle-1);
-  margin-right: .5px;
-}
+    .mediaArticleCard {
+      flex-direction: column;
+      gap: 3px;
 
-.articleType {
-  color: var(--color-gray-37);
-}
+      .articleCardHeader {
+        align-items: flex-start;
+        display: flex;
 
-.articleCardHeader {
-  align-items: flex-start;
-  display: flex;
+        .articleIcon {
+          font-size: var(--font-size-subtitle-1);
+        }
 
-  & > div {
-    display: flex;
-  }
+        .articleType {
+          color: var(--color-gray-37);
+        }
+
+        & > div {
+          display: flex;
+          gap: 3px;
+        }
+
+        & > div + div {
+          align-items: center;
+        }
+      }
 
-  & > div + div {
-    align-items: center;
+      :global(.article-url) a {
+        -webkit-box-orient: vertical;
+        display: -webkit-box; /* stylelint-disable-line */
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        white-space: pre-line;
+      }
+    }
   }
 }

src/app/components/article/ArticleForm.js

@@ -28,10 +28,10 @@ const ArticleForm = ({
 }) => {
   const title = (
     <>
-      {articleType === 'explainer' && mode === 'create' && <FormattedMessage id="article-form-explainer-create-title" defaultMessage="Create Explainer" description="Title for the slideout create explainer form" />}
-      {articleType === 'explainer' && mode === 'edit' && <FormattedMessage id="article-form-explainer-edit-title" defaultMessage="Edit Explainer" description="Title for the slideout edit explainer form" />}
-      {articleType === 'fact-check' && mode === 'create' && <FormattedMessage id="article-form-fact-check-create-title" defaultMessage="Create New Claim & Fact-Check" description="Title for the slideout create fact-check form" />}
-      {articleType === 'fact-check' && mode === 'edit' && <FormattedMessage id="article-form-fact-check-edit-title" defaultMessage="Edit Claim & Fact-Check" description="Title for the slideout edit fact-check form" />}
+      {articleType === 'explainer' && mode === 'create' && <FormattedMessage id="article-form-explainer-create-title" defaultMessage="Create Explainer Article" description="Title for the slideout create explainer form" />}
+      {articleType === 'explainer' && mode === 'edit' && <FormattedMessage id="article-form-explainer-edit-title" defaultMessage="Edit Explainer Article" description="Title for the slideout edit explainer form" />}
+      {articleType === 'fact-check' && mode === 'create' && <FormattedMessage id="article-form-fact-check-create-title" defaultMessage="Create New Claim & Fact-Check Article" description="Title for the slideout create fact-check form" />}
+      {articleType === 'fact-check' && mode === 'edit' && <FormattedMessage id="article-form-fact-check-edit-title" defaultMessage="Edit Claim & Fact-Check Article" description="Title for the slideout edit fact-check form" />}
     </>
   );
 

src/app/components/article/MediaArticleCard.js

@@ -8,6 +8,7 @@ import FactCheckIcon from '../../icons/fact_check.svg';
 import BookIcon from '../../icons/book.svg';
 import BulletSeparator from '../layout/BulletSeparator';
 import styles from './ArticleCard.module.css';
+import cardStyles from '../cds/media-cards/Card.module.css';
 import Language from '../cds/media-cards/Language';
 import LastRequestDate from '../cds/media-cards/LastRequestDate';
 import ArticleUrl from '../cds/media-cards/ArticleUrl';
@@ -25,69 +26,74 @@ const MediaArticleCard = ({
   variant,
   onClick,
 }) => (
-  <div className={cx('article-card', styles.articleCard)}>
-    <Card>
-      <div>
-        <div className={cx('typography-body2-bold', styles.articleCardHeader)}>
-          <div className={styles.articleType}>
-            <div className={styles.articleIcon}>
-              { variant === 'fact-check' && <FactCheckIcon /> }
-              { variant === 'explainer' && <BookIcon /> }
-            </div>
-            { variant === 'fact-check' && <FormattedMessage id="mediaArticleCard.factCheck" defaultMessage="Fact-Check" description="Title in an article card on item page." /> }
-            { variant === 'explainer' && <FormattedMessage id="mediaArticleCard.explainer" defaultMessage="Explainer" description="Title in an article card on item page." /> }
-            { statusLabel && ': ' }
+  <div className={cx('article-card', styles.articleCard, styles.mediaArticleCardWrapper)}>
+    <Card className={styles.mediaArticleCard}>
+      <div className={cx('typography-body2-bold', styles.articleCardHeader)}>
+        <div className={styles.articleType}>
+          <div className={styles.articleIcon}>
+            { variant === 'fact-check' && <FactCheckIcon /> }
+            { variant === 'explainer' && <BookIcon /> }
           </div>
-          { statusLabel && <div><EllipseIcon style={{ color: statusColor }} /> {statusLabel}</div> }
+          { variant === 'fact-check' && <FormattedMessage id="mediaArticleCard.factCheck" defaultMessage="Fact-Check" description="Title in an article card on item page." /> }
+          { variant === 'explainer' && <FormattedMessage id="mediaArticleCard.explainer" defaultMessage="Explainer" description="Title in an article card on item page." /> }
+          { statusLabel && ': ' }
         </div>
-        <span>
+        { statusLabel && <div><EllipseIcon style={{ color: statusColor }} /> {statusLabel}</div> }
+      </div>
+      <div
+        className={cx(
+          cardStyles.cardSummary,
+          cardStyles.cardSummaryCollapsed,
+        )}
+      >
+        <div className={cardStyles.cardSummaryContent}>
           { url ?
-            <ArticleUrl url={url} title={title} variant={variant} showIcon={false} linkText={title} /> :
-            <div className="typography-body2">
+            <ArticleUrl url={url} title={title} variant={variant} showIcon={false} linkText={title} />
+            :
+            <span className={cx(cardStyles.cardDescription)}>
               {title}
-            </div>
+            </span>
           }
-        </span>
-        <div />
-        <BulletSeparator
-          details={[
-            variant === 'fact-check' && (<ItemReportStatus
-              publishedAt={publishedAt ? new Date(publishedAt * 1000) : null}
-              isPublished={Boolean(publishedAt)}
+        </div>
+      </div>
+      <BulletSeparator
+        details={[
+          variant === 'fact-check' && (<ItemReportStatus
+            publishedAt={publishedAt ? new Date(publishedAt * 1000) : null}
+            isPublished={Boolean(publishedAt)}
+            variant="text"
+            theme="lightText"
+            tooltip={false}
+          />),
+          languageCode && (
+            <Language
+              languageCode={languageCode}
               variant="text"
               theme="lightText"
+            />
+          ),
+          date && (
+            <LastRequestDate
               tooltip={false}
-            />),
-            languageCode && (
-              <Language
-                languageCode={languageCode}
-                variant="text"
-                theme="lightText"
-              />
-            ),
-            date && (
-              <LastRequestDate
-                tooltip={false}
-                variant="text"
-                theme="lightText"
-                lastRequestDate={new Date(date * 1000)}
-              />
-            ),
-            (
-              <ButtonMain
-                buttonProps={{
-                  type: null,
-                }}
-                label={<FormattedMessage id="mediaArticleCard.editButton" defaultMessage="Edit Article" description="Label for edit button" />}
-                variant="contained"
-                size="small"
-                theme="text"
-                onClick={onClick}
-              />
-            ),
-          ]}
-        />
-      </div>
+              variant="text"
+              theme="lightText"
+              lastRequestDate={new Date(date * 1000)}
+            />
+          ),
+          (
+            <ButtonMain
+              buttonProps={{
+                type: null,
+              }}
+              label={<FormattedMessage id="mediaArticleCard.editButton" defaultMessage="Edit Article" description="Label for edit button" />}
+              variant="contained"
+              size="small"
+              theme="text"
+              onClick={onClick}
+            />
+          ),
+        ]}
+      />
     </Card>
   </div>
 );

src/app/components/article/MediaArticlesDisplay.js

@@ -50,14 +50,14 @@ const MediaArticlesDisplay = ({ projectMedia }) => {
           title={
             <FormattedMessage
               id="mediaArticlesDisplay.readOnlyAlertTitle"
-              defaultMessage="Fact-Check Added"
+              defaultMessage="Claim & Fact-Check Added"
               description="Title of the alert message displayed on data points section of the edit feed page."
             />
           }
           content={
             <FormattedMessage
               id="mediaArticlesDisplay.readOnlyAlertContent"
-              defaultMessage="When a fact-check article is added it will be prioritized to be sent to all media and requests that match this item."
+              defaultMessage="When a claim & fact-check article is added, it will be prioritized as the only article to be delivered as a response to requests that match this item."
               description="Description of the alert message displayed on data points section of the edit feed page."
             />
           }

src/app/components/cds/media-cards/Card.module.css

@@ -29,6 +29,7 @@
 
   &:hover {
     border-color: var(--color-blue-32);
+    cursor: pointer;
     outline-color: var(--color-blue-32);
   }
 

src/app/components/cds/slideout/Slideout.js

@@ -5,6 +5,7 @@ import cx from 'classnames/bind';
 import { FormattedMessage } from 'react-intl';
 import styles from './Slideout.module.css';
 import ButtonMain from '../buttons-checkboxes-chips/ButtonMain';
+import Tooltip from '../alerts-and-prompts/Tooltip';
 import IconClose from '../../../icons/clear.svg';
 
 const Slideout = ({
@@ -43,13 +44,22 @@ const Slideout = ({
             <h6>
               {title}
             </h6>
-            <ButtonMain
-              theme="text"
-              variant="contained"
-              size="small"
-              iconCenter={<IconClose />}
-              onClick={() => handleClose()}
-            />
+            <Tooltip
+              arrow
+              title={
+                <FormattedMessage id="global.closeSlideout" description="Button label for closing an open slideout" defaultMessage="Close Slideout" />
+              }
+            >
+              <span>
+                <ButtonMain
+                  theme="beige"
+                  variant="contained"
+                  size="small"
+                  iconCenter={<IconClose />}
+                  onClick={() => handleClose()}
+                />
+              </span>
+            </Tooltip>
           </div>
         </div>
         <div className={styles.slideoutBody}>

src/app/components/cds/slideout/Slideout.module.css

@@ -1,12 +1,12 @@
 .slideoutMain {
   box-shadow: -5px 0 5px 2px rgb(0 0 0 / .3);
   height: 100%;
-  max-width: 600px;
+  max-width: 620px;
   min-width: 320px;
   position: fixed;
   text-transform: none;
   top: 0;
-  width: 25vw;
+  width: 40vw;
 
   textarea {
     font-weight: normal;