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 DefinitelyTyped/DefinitelyTyped#35572 (comment)

* 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

@@ -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 })
     })
 

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(

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')
     })
   })
 })

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