feat: display hero image in news carousel (#901)

* feat: display hero image in news carousel

* test: modify storybook to show hero image in carousel

Co-authored-by: Shauna Keating <59394696+shkeating@users.noreply.github.com>
Co-authored-by: Abigail Young <abbyoung@gmail.com>

src/components/NewsCarousel/NewsCarousel.stories.tsx

@@ -28,6 +28,7 @@ const mockArticles: ArticleListItemRecord[] = [
     ],
     publishedDate: 'Aug 03, 2022',
     preview: "It's a thing",
+    hero: { url: '/assets/images/hero.jpeg' },
   },
   {
     id: '2',

src/components/NewsCarouselItem/NewsCarouselItem.module.scss

@@ -17,9 +17,15 @@
     rgba(101, 114, 180, 1) 100%
   );
 
-  .carouselImage {
+  .ussfLogo {
     width: 50%;
   }
+
+  .hero {
+    width: 100%;
+    max-height: 534px;
+    object-fit: cover;
+  }
 }
 
 .gridContainer {

src/components/NewsCarouselItem/NewsCarouselItem.stories.tsx

@@ -33,3 +33,11 @@ const mockArticle: ArticleListItemRecord = {
 export const DefaultNewsCarouselItem = () => (
   <NewsCarouselItem article={mockArticle} />
 )
+
+const articleWithHero = {
+  ...mockArticle,
+  hero: { url: '/assets/images/hero.jpeg' },
+}
+export const NewsCarouselItemWithHero = () => (
+  <NewsCarouselItem article={articleWithHero} />
+)

src/components/NewsCarouselItem/NewsCarouselItem.test.tsx

@@ -15,12 +15,55 @@ const mockArticle = {
   preview: 'This is the preview text!',
   publishedDate: '2022-05-18T17:18:40.802Z',
   labels: [],
+  hero: {
+    url: 'http://cms.example.com/images/image.png',
+  },
 }
 
 describe('NewsCarouselItem component', () => {
-  it('renders the component with a mock article', () => {
+  test('renders the component with a mock article', () => {
     render(<NewsCarouselItem article={mockArticle} />)
     expect(screen.getAllByText('Announcing the dev blog')).toHaveLength(1)
     expect(screen.getAllByText('This is the preview text!')).toHaveLength(1)
   })
+
+  test("renders the article's hero image", () => {
+    render(<NewsCarouselItem article={mockArticle} />)
+
+    // should have no USSF logo
+    const logo = screen.queryByRole('img', {
+      name: 'USSF logo',
+    })
+    expect(logo).not.toBeInTheDocument()
+
+    // expect the hero image to be there
+    const img = screen.getByRole('img', { name: 'article hero graphic' })
+    expect(img).toBeInTheDocument()
+    expect(img).toHaveAttribute('src')
+    expect(img.getAttribute('src')).toEqual(
+      'http://cms.example.com/images/image.png'
+    )
+    expect(img).toHaveClass('hero')
+  })
+
+  test('does not render an img tag if article has no hero url', () => {
+    const mockWithNoHero = { ...mockArticle, hero: undefined }
+    render(<NewsCarouselItem article={mockWithNoHero} />)
+
+    const img = screen.queryByRole('img', {
+      name: 'article hero graphic',
+    })
+    expect(img).not.toBeInTheDocument()
+
+    // expect the default space force logo
+    const logo = screen.getByRole('img', {
+      name: 'USSF logo',
+    })
+    expect(logo).toBeInTheDocument()
+    expect(logo).toHaveAttribute('src')
+    expect(logo.getAttribute('src')).toEqual(
+      '/assets/images/Seal_of_the_United_States_Space_Force.svg'
+    )
+    expect(logo).toHaveClass('ussfLogo')
+  })
 })

src/components/NewsCarouselItem/NewsCarouselItem.tsx

@@ -8,15 +8,19 @@ const NewsCarouselItem = ({ article }: { article: ArticleListItemRecord }) => {
   return (
     <Grid row className={styles.carouselItemContainer}>
       <Grid col={5} className={styles.imageContainer}>
-        {/* 
-        TODO: current image is a placeholder. Will need to add a check 
-        for determining if the article has an image.
-        */}
-        <img
-          src="/assets/images/Seal_of_the_United_States_Space_Force.svg"
-          alt="USSF logo"
-          className={styles.carouselImage}
-        />
+        {article.hero ? (
+          <img
+            src={article.hero.url}
+            alt="article hero graphic"
+            className={styles.hero}
+          />
+        ) : (
+          <img
+            src="/assets/images/Seal_of_the_United_States_Space_Force.svg"
+            alt="USSF logo"
+            className={styles.ussfLogo}
+          />
+        )}
       </Grid>
       <Grid col={'fill'} className={styles.gridContainer}>
         <Grid className={styles.textContainer}>

src/operations/cms/queries/getInternalNewsCarouselArticles.ts

@@ -20,6 +20,9 @@ export const GET_INTERNAL_NEWS_CAROUSEL_ARTICLES = gql`
         name
         type
       }
+      hero {
+        url
+      }
     }
   }
 `

src/types/index.ts

@@ -55,6 +55,9 @@ export type ArticleListItemRecord = {
   sourceName?: string
   sourceLink?: string
   labels?: LabelRecord[]
+  hero?: {
+    url: string
+  }
 }
 
 /* ArticleRecord is the complete article used when viewing the single article page */