From e13b57af70864c1fe1d2774500bb5e077b21cfa0 Mon Sep 17 00:00:00 2001
From: Jacob Capps <99674188+jcbcapps@users.noreply.github.com>
Date: Tue, 23 Aug 2022 14:51:00 -0500
Subject: [PATCH] feat: Display Spaceforce.mil news articles below the news
 carousel (#746)

* Change current news path to news-announcments

* Update test

* Add NewsCarousel and NewsCarouselItem components

* Update storybook component

* Add CTA

* Add query for carousel articles

* Add NewsCarousel component to page

* Add custom ellipses and custom arrows

* Update styles

* Move class to module

* fix: resolve type error from useRef return

See for where the solution came from https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35572#issuecomment-498242139

* test: add article mock to NewsAnnouncements component

* fix a11y violation in carousel, update mock in test

* Style updates

* Add test

* Add test

* Add news page from main

* Add view older internal news link

* Add comment

* Update styles

* Add conditional render for link

* Update text

* Display four latest articles

* Update link

* Update button text

* Update test

* Update test

* Update page copy

* Update RSS query

* Update test

* Update test

* Update classname

Co-authored-by: John Gedeon <john@truss.works>
Co-authored-by: Abigail Young <abbyoung@gmail.com>
---
 e2e/cypress/integration/navigation.spec.js      |  2 +-
 e2e/cypress/integration/news.spec.js            |  2 +-
 src/__tests__/pages/news-announcements.test.tsx |  5 +++--
 src/pages/news-announcements.tsx                | 15 +++++++--------
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/e2e/cypress/integration/navigation.spec.js b/e2e/cypress/integration/navigation.spec.js
index b1b5a012b..674ee8473 100644
--- a/e2e/cypress/integration/navigation.spec.js
+++ b/e2e/cypress/integration/navigation.spec.js
@@ -27,7 +27,7 @@ describe('Routes & navigation', () => {
     it('can navigate to the News & Announcments page', () => {
       cy.visit('/news-announcements')
       cy.injectAxe()
-      cy.contains('All USSF news')
+      cy.contains('Latest external USSF news')
       cy.checkA11y(null, null, logging, { skipFailures: true })
     })
 
diff --git a/e2e/cypress/integration/news.spec.js b/e2e/cypress/integration/news.spec.js
index 13494cfea..28abffe7c 100644
--- a/e2e/cypress/integration/news.spec.js
+++ b/e2e/cypress/integration/news.spec.js
@@ -9,7 +9,7 @@ describe('News and Announcements', () => {
     cy.preserveLoginCookies()
 
     cy.intercept(
-      'https://www.spaceforce.mil/DesktopModules/ArticleCS/RSS.ashx?ContentType=1&Site=1060&max=12'
+      'https://www.spaceforce.mil/DesktopModules/ArticleCS/RSS.ashx?ContentType=1&Site=1060&max=4'
     ).as('getNewsRSS')
 
     cy.intercept(
diff --git a/src/__tests__/pages/news-announcements.test.tsx b/src/__tests__/pages/news-announcements.test.tsx
index 28c62d80a..ad1b80442 100644
--- a/src/__tests__/pages/news-announcements.test.tsx
+++ b/src/__tests__/pages/news-announcements.test.tsx
@@ -100,9 +100,10 @@ describe('News page', () => {
       // so a length of 2 is accurate
       expect(screen.getAllByText('Test Announcement')).toHaveLength(2)
 
-      expect(screen.getByText('All USSF news')).toBeInTheDocument()
+      expect(screen.getByText('Latest external USSF news')).toBeInTheDocument()
 
-      expect(await screen.findAllByRole('article')).toHaveLength(10)
+      const allArticles = await screen.findAllByRole('article')
+      expect(allArticles[0]).toContainHTML('article')
     })
   })
 })
diff --git a/src/pages/news-announcements.tsx b/src/pages/news-announcements.tsx
index 50aea884c..3383087a4 100644
--- a/src/pages/news-announcements.tsx
+++ b/src/pages/news-announcements.tsx
@@ -24,7 +24,7 @@ import { GET_INTERNAL_NEWS_CAROUSEL_ARTICLES } from 'operations/cms/queries/getI
 import { SPACEFORCE_NEWS_RSS_URL } from 'constants/index'
 import { ArticleList } from 'components/ArticleList/ArticleList'
 
-const RSS_URL = `${SPACEFORCE_NEWS_RSS_URL}&max=12`
+const RSS_URL = `${SPACEFORCE_NEWS_RSS_URL}&max=4`
 
 const NewsAnnouncements = ({
   announcements,
@@ -73,10 +73,9 @@ const NewsAnnouncements = ({
       )}
 
       <div className={styles.pageTitle}>
-        <h2>All USSF news</h2>
+        <h2>Latest external USSF news</h2>
         <h3>
-          Publically and internally released Space Force news, published within
-          the last 30 days.
+          Publically released Space Force news released within the last 30 days.
         </h3>
       </div>
 
@@ -93,13 +92,13 @@ const NewsAnnouncements = ({
                 formatToArticleListItem(item as Required<RSSNewsItem>)
               )}
           />
-          <div style={{ textAlign: 'center' }}>
+          <div className={styles.olderInternalNewsLink}>
             <LinkTo
               href="https://www.spaceforce.mil/News"
               target="_blank"
               rel="noreferrer noopener"
               className="usa-button">
-              Read more news
+              View older Spaceforce.mil articles
             </LinkTo>
           </div>
         </>
@@ -113,14 +112,14 @@ export default NewsAnnouncements
 NewsAnnouncements.getLayout = (page: React.ReactNode) =>
   withPageLayout(
     <div>
-      <h1>News</h1>
+      <h1>News & Announcements</h1>
       <BreadcrumbBar>
         <Breadcrumb>
           <BreadcrumbLink<NavLinkProps> asCustom={NavLink} href="/">
             Service portal home
           </BreadcrumbLink>
         </Breadcrumb>
-        <Breadcrumb current>News</Breadcrumb>
+        <Breadcrumb current>News & Announcements</Breadcrumb>
       </BreadcrumbBar>
     </div>,
     page