Scroll Indicator & Continued Text Updates (#2170)

* bring scroll indication to the media list and add a mixins for DRYness

* allow slideout content to be static and not scroll

* bring scroll indicator to lists

* fix button main typo

* better button color and some minor text changes

* fix stacking on drawer

* sort prop types on touched files

* add in headers to the medias list to denote pinned vs remaining similar media in cluster

* [smoke tests] Run all smoke tests for this branch

* address PR comments

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

@@ -15,8 +15,8 @@
     "defaultMessage": "Search by article title or summary"
   },
   {
-    "id": "chooseExistingArticleButton.recentArticles",
-    "description": "Label for the list of articles.",
-    "defaultMessage": "Recent Articles"
+    "id": "mediaArticles.chooseRecentArticle",
+    "description": "Message displayed on articles sidebar when an item has no articles.",
+    "defaultMessage": "Choose a recent article to add to this media:"
   }
 ]

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

@@ -4,11 +4,6 @@
     "description": "Banner displayed after an article is successfully added to an item.",
     "defaultMessage": "Article added successfully!"
   },
-  {
-    "id": "mediaArticles.mediaArticlesListTitle",
-    "description": "Title for the list of articles being delivered to users of the tipline for this cluster of media",
-    "defaultMessage": "Articles blab alb"
-  },
   {
     "id": "mediaArticles.noArticlesAddedToItem",
     "description": "Message displayed on articles sidebar when an item has no articles.",

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

@@ -2,7 +2,7 @@
   {
     "id": "mediaArticlesDisplay.listTitle",
     "description": "Title for the list of articles being delivered to users of the tipline for this cluster of media",
-    "defaultMessage": "Articles Delivered to Tipline Requests"
+    "defaultMessage": "Articles Delivered to Tipline Requests:"
   },
   {
     "id": "mediaArticlesDisplay.readOnlyAlertContent",

localization/react-intl/src/app/components/media/ItemTitle.json

@@ -11,8 +11,8 @@
   },
   {
     "id": "itemTitle.menuHeader",
-    "description": "Header for a menu containing content options for item title",
-    "defaultMessage": "Select Item Name"
+    "description": "Header for a menu containing content options for title of the cluster of media",
+    "defaultMessage": "Select Media Cluster Name"
   },
   {
     "id": "itemTitle.customTitle",

localization/react-intl/src/app/components/media/MediaComponent.json

@@ -8,5 +8,15 @@
     "id": "mediaComponent.requests",
     "description": "Number of times a request has been sent about this media",
     "defaultMessage": "{count, plural, one {# request} other {# requests}}"
+  },
+  {
+    "id": "mediaComponent.pinnedMedia",
+    "description": "Title for the media in this list that is pinned to the top",
+    "defaultMessage": "Pinned Media"
+  },
+  {
+    "id": "mediaComponent.similarMediaList",
+    "description": "Title for the remaining media in this list that are not pinned to the top",
+    "defaultMessage": "Similar Media in Cluster"
   }
 ]

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

@@ -2,22 +2,8 @@
   display: flex;
   flex: 1;
   flex-direction: column;
-  overflow-y: auto;
-  position: relative;
+  min-height: 0;
   width: 100%;
-  z-index: 1;
-
-  &::after {
-    background-color: var(--color-beige-86);
-    content: '';
-    display: block;
-    height: 2px;
-    left: 0;
-    position: absolute;
-    right: 16px;
-    top: 62px;
-    z-index: 1;
-  }
 
   .articlesSidebarTopBar {
     background: var(--color-white-100);
@@ -28,35 +14,20 @@
     padding: 16px;
   }
 
-  .articlesSidebarNoArticleWrapper {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    gap: 16px;
+  .articlesSidebarScroller {
+    @mixin scroll-indicator-top 16px, var(--color-white-100), var(--color-beige-86);
     overflow-y: auto;
-    padding: 0 16px 16px;
+    padding: 16px;
+    position: relative;
     width: 100%;
-
-    &::before {
-      background-color: var(--color-white-100);
-      content: '';
-      display: block;
-      flex-shrink: 0;
-      height: 2px;
-      left: 0;
-      margin: auto -16px 0;
-      position: relative;
-      right: 0;
-      z-index: 2;
-    }
   }
 
   .articlesSidebarNoArticle {
     border: 2px dashed var(--color-gray-88);
     border-radius: var(--border-radius-default);
     color: var(--color-gray-75);
     font-style: italic;
-    margin: 16px 0 32px;
+    margin: 0 0 32px;
     padding: 16px;
     text-align: center;
 

src/app/components/article/ChooseExistingArticleButton.js

@@ -73,34 +73,37 @@ const ChooseExistingArticleButton = ({
         <Slideout
           content={
             <div className={styles.contentWrapper}>
-              <FormattedMessage
-                defaultMessage="Search by article title or summary"
-                description="Label for the search field to find an article."
-                id="chooseExistingArticleButton.search"
-              >
-                {placeholder => (
-                  <TextField
-                    iconLeft={<SearchIcon />}
-                    id="search-articles"
-                    placeholder={placeholder}
-                    onChange={e => handleType(e.target.value)}
-                  />
-                )}
-              </FormattedMessage>
-              <div>
+              <div className={styles.seachHeader}>
+                <FormattedMessage
+                  defaultMessage="Search by article title or summary"
+                  description="Label for the search field to find an article."
+                  id="chooseExistingArticleButton.search"
+                >
+                  {placeholder => (
+                    <TextField
+                      iconLeft={<SearchIcon />}
+                      id="search-articles"
+                      placeholder={placeholder}
+                      onChange={e => handleType(e.target.value)}
+                    />
+                  )}
+                </FormattedMessage>
+              </div>
+              <div className={styles.seachResults}>
                 { !search && (
-                  <div className={cx('typography-body2', styles.heading)}>
+                  <div className={cx('typography-subtitle2', styles.heading)}>
                     <FormattedMessage
-                      defaultMessage="Recent Articles"
-                      description="Label for the list of articles."
-                      id="chooseExistingArticleButton.recentArticles"
+                      defaultMessage="Choose a recent article to add to this media:"
+                      description="Message displayed on articles sidebar when an item has no articles."
+                      id="mediaArticles.chooseRecentArticle"
                     />
                   </div>
                 )}
                 <MediaArticlesTeamArticles targetId={projectMediaDbid} teamSlug={teamSlug} textSearch={search} onAdd={onAdd} />
               </div>
             </div>
           }
+          contentScrollable={false}
           footer
           showCancel
           title={title}

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

@@ -1,7 +1,20 @@
 .contentWrapper {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  height: 100%;
+
+  .seachHeader,
+  .seachResults {
+    padding: 16px;
+  }
+
+  .seachResults {
+    @mixin scroll-indicator-top 16px, var(--color-white-100), var(--color-beige-86);
+    overflow-y: auto;
+    padding: 16px;
+    position: relative;
+    width: 100%;
+  }
 }
 
 .heading {

src/app/components/article/MediaArticles.js

@@ -1,4 +1,3 @@
-/* eslint-disable react/sort-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
 import Relay from 'react-relay/classic';
@@ -151,30 +150,32 @@ const MediaArticlesComponent = ({
           onCreate={onUpdate}
         />
       </div>
-      { hasArticle ? (
-        <MediaArticlesDisplay projectMedia={projectMedia} onUpdate={onUpdate} />
-      ) : (
-        <div className={cx('typography-body1', styles.articlesSidebarNoArticleWrapper)}>
-          <div className={cx('typography-body1', styles.articlesSidebarNoArticle)}>
-            <DescriptionIcon style={{ fontSize: 'var(--font-size-h4)' }} />
-            <div>
+      <div className={cx('typography-body1', styles.articlesSidebarScroller)}>
+        { hasArticle ? (
+          <MediaArticlesDisplay projectMedia={projectMedia} onUpdate={onUpdate} />
+        ) : (
+          <>
+            <div className={cx('typography-body1', styles.articlesSidebarNoArticle)}>
+              <DescriptionIcon style={{ fontSize: 'var(--font-size-h4)' }} />
+              <div>
+                <FormattedMessage
+                  defaultMessage="No articles are being delivered to Tipline users who send requests that match this Media."
+                  description="Message displayed on articles sidebar when an item has no articles."
+                  id="mediaArticles.noArticlesAddedToItem"
+                />
+              </div>
+            </div>
+            <div className="typography-subtitle2">
               <FormattedMessage
-                defaultMessage="No articles are being delivered to Tipline users who send requests that match this Media."
+                defaultMessage="Choose a recent article to add to this media:"
                 description="Message displayed on articles sidebar when an item has no articles."
-                id="mediaArticles.noArticlesAddedToItem"
+                id="mediaArticles.chooseRecentArticle"
               />
             </div>
-          </div>
-          <div className="typography-subtitle2">
-            <FormattedMessage
-              defaultMessage="Choose a recent article to add to this media:"
-              description="Message displayed on articles sidebar when an item has no articles."
-              id="mediaArticles.chooseRecentArticle"
-            />
-          </div>
-          <MediaArticlesTeamArticles teamSlug={team.slug} onAdd={handleConfirmAdd} />
-        </div>
-      )}
+            <MediaArticlesTeamArticles teamSlug={team.slug} onAdd={handleConfirmAdd} />
+          </>
+        )}
+      </div>
 
       {/* Confirm dialog for replacing fact-check */}
       <ConfirmProceedDialog
@@ -215,9 +216,6 @@ const MediaArticlesComponent = ({
 };
 
 MediaArticlesComponent.propTypes = {
-  team: PropTypes.shape({
-    slug: PropTypes.string.isRequired,
-  }).isRequired,
   projectMedia: PropTypes.shape({
     dbid: PropTypes.number.isRequired,
     type: PropTypes.string.isRequired,
@@ -226,6 +224,9 @@ MediaArticlesComponent.propTypes = {
       id: PropTypes.string.isRequired,
     }),
   }).isRequired,
+  team: PropTypes.shape({
+    slug: PropTypes.string.isRequired,
+  }).isRequired,
   onUpdate: PropTypes.func.isRequired,
 };
 
@@ -282,8 +283,8 @@ const MediaArticles = ({ projectMediaDbid, teamSlug }) => {
 };
 
 MediaArticles.propTypes = {
-  teamSlug: PropTypes.string.isRequired,
   projectMediaDbid: PropTypes.number.isRequired,
+  teamSlug: PropTypes.string.isRequired,
 };
 
 export default MediaArticles;

src/app/components/article/MediaArticlesDisplay.js

@@ -31,7 +31,7 @@ const MediaArticlesDisplay = ({ onUpdate, projectMedia }) => {
     <div className={styles.mediaArticlesDisplay}>
       <div className="typography-subtitle2">
         <FormattedMessage
-          defaultMessage="Articles Delivered to Tipline Requests"
+          defaultMessage="Articles Delivered to Tipline Requests:"
           description="Title for the list of articles being delivered to users of the tipline for this cluster of media"
           id="mediaArticlesDisplay.listTitle"
         />

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

@@ -3,8 +3,6 @@
   flex: 1 1 auto;
   flex-direction: column;
   gap: 16px;
-  overflow-y: auto;
-  padding: 0 16px 16px;
   width: 100%;
 
   .explainerCard {
@@ -19,17 +17,4 @@
       }
     }
   }
-
-  &::before {
-    background-color: var(--color-white-100);
-    content: '';
-    display: block;
-    flex-shrink: 0;
-    height: 2px;
-    left: 0;
-    margin: auto -16px 0;
-    position: relative;
-    right: 0;
-    z-index: 2;
-  }
 }

src/app/components/cds/Sandbox.js

@@ -244,6 +244,7 @@ const SandboxComponent = ({ admin }) => {
   const [slideoutTitle, setSlideoutTitle] = React.useState('');
   const [openSlideout, setOpenSlideout] = React.useState(Boolean(false));
   const [slideoutFooter, setSlideoutFooter] = React.useState(Boolean(true));
+  const [slideoutScrollable, setSlideoutScrollable] = React.useState(Boolean(true));
   const [slideoutCancel, setSlideoutCancel] = React.useState(Boolean(true));
   const [slideoutMainAction, setSlideoutMainAction] = React.useState(Boolean(true));
   const [slideoutSecondaryAction, setSlideoutSecondaryAction] = React.useState(Boolean(false));
@@ -1876,6 +1877,14 @@ const SandboxComponent = ({ admin }) => {
                     onChange={() => setSlideoutFooter(!slideoutFooter)}
                   />
                 </li>
+                <li>
+                  <SwitchComponent
+                    checked={slideoutScrollable}
+                    label="Content Scrollable"
+                    labelPlacement="top"
+                    onChange={() => setSlideoutScrollable(!slideoutScrollable)}
+                  />
+                </li>
                 <li>
                   <SwitchComponent
                     checked={slideoutCancel}
@@ -1928,6 +1937,7 @@ const SandboxComponent = ({ admin }) => {
                     </p>
                   </>
                 }
+                contentScrollable={slideoutScrollable}
                 footer={slideoutFooter}
                 mainActionButton={slideoutMainAction && <ButtonMain label="Main content" size="small" />}
                 optionalNode={slideoutOptionalNode && <SwitchComponent label="Optional Node label" />}

src/app/components/cds/buttons-checkboxes-chips/ButtonMain.module.css

@@ -189,7 +189,7 @@
     }
 
     &.textVariant {
-      @mixin main-button-text-theme var(--color-blue-54), var(--color-blue-38, var(--color-blue-98));
+      @mixin main-button-text-theme var(--color-blue-54), var(--color-blue-38), var(--color-blue-98);
     }
   }