feat(Card): <NewsroomCard /> updates (#982)

* feat: create & use LogoThumbnail primitive, instead of Thumbnail

This allows customizations to be made that favor logos and
allow them to display correctly in the thumbnail space of the card.

* refactor: Prop adjustments

- Make thumbnail optional
- Add category prop
- Move withArrow to prop
- Adjust tests for thumbnail

* chore: Add changeset

* chore: remove unnecessary console log

.changeset/hot-students-knock.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-card': minor
+---
+
+Updates NewsroomCard with new/updated props, and creates a LogoThumbnail primitive for use within NewsroomCard

packages/card/docs.mdx

@@ -340,7 +340,7 @@ A component used to promote and link to marketing pages, always using a descript
   <CustomerStoryCard
     thumbnail={{
       src: 'https://www.datocms-assets.com/2885/1670949945-example-customer-story.png',
-      alt: 'Customer Story'
+      alt: 'Customer Story',
     }}
     link="https://hashicorp.com"
     heading="Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus"
@@ -351,7 +351,7 @@ A component used to promote and link to marketing pages, always using a descript
     appearance="dark"
     thumbnail={{
       src: 'https://www.datocms-assets.com/2885/1670949945-example-customer-story.png',
-      alt: 'Customer Story'
+      alt: 'Customer Story',
     }}
     link="https://hashicorp.com"
     heading="Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus"
@@ -380,6 +380,7 @@ A component used to promote and link to marketing pages, always using a descript
     link="https://hashicorp.com"
     heading="Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus"
     date="August 15, 2022"
+    category="Case study"
   />
   <NewsroomCard
     appearance="dark"
@@ -390,6 +391,15 @@ A component used to promote and link to marketing pages, always using a descript
     link="https://hashicorp.com"
     heading="Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus"
     date="August 15, 2022"
+    category="Case study"
+  />
+  <NewsroomCard
+    appearance="light"
+    link="https://hashicorp.com"
+    heading="Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus"
+    date="August 15, 2022"
+    category="Press release"
+    withArrow
   />
 </div>
 

packages/card/newsroom-card/index.test.tsx

@@ -10,6 +10,7 @@ const defaultProps = {
   link: 'https://hashicorp.com',
   heading: 'Example heading',
   date: 'August 15, 2022',
+  category: 'Post type',
   thumbnail: {
     src: 'https://www.datocms-assets.com/19447/1648680074-screenshot-2022-03-31-at-00-40-47.png',
     alt: 'HashiConf Europe 2022 Recap',
@@ -18,7 +19,7 @@ const defaultProps = {
 
 describe('<NewsroomCard />', () => {
   it('should render the provided metadata correctly', () => {
-    const expectedMeta = [defaultProps.date]
+    const expectedMeta = [defaultProps.date, defaultProps.category]
 
     render(<NewsroomCard {...defaultProps} />)
 
@@ -28,6 +29,11 @@ describe('<NewsroomCard />', () => {
       expect(metaElement).toContainElement(screen.getByText(item))
     })
 
-    expect(metaElement).not.toContainElement(screen.queryByText('|'))
+    expect(metaElement).toContainElement(screen.queryByText('|'))
+  })
+
+  it('should not render the logo thumbnail if no thumbnail data provided', () => {
+    render(<NewsroomCard {...defaultProps} thumbnail={undefined} />)
+    expect(screen.queryByTestId('wpl-card-logo-thumbnail')).toBeNull()
   })
 })

packages/card/newsroom-card/index.tsx

@@ -9,28 +9,32 @@ import type { CardProps, ThumbnailProps } from '../types'
 export interface NewsroomCardProps {
   heading: string
   date: string
+  category: string
   link: string
-  thumbnail: ThumbnailProps
+  thumbnail?: ThumbnailProps
   appearance?: CardProps['appearance']
+  withArrow?: boolean
 }
 
 export function NewsroomCard({
   heading,
   date,
+  category,
   link,
   thumbnail,
   appearance,
+  withArrow = false,
 }: NewsroomCardProps): JSX.Element {
   return (
     <CardPrimitives.Card
       heading={heading}
       link={link}
-      withArrow={false}
+      withArrow={withArrow}
       appearance={appearance}
     >
-      <CardPrimitives.Thumbnail {...thumbnail} />
+      {thumbnail ? <CardPrimitives.LogoThumbnail {...thumbnail} /> : null}
       <CardPrimitives.Content>
-        <CardPrimitives.Meta items={[date]} />
+        <CardPrimitives.Meta items={[date, category]} />
         <CardPrimitives.Heading>{heading}</CardPrimitives.Heading>
       </CardPrimitives.Content>
     </CardPrimitives.Card>

packages/card/primitives.tsx

@@ -58,6 +58,16 @@ function Thumbnail({ src, alt }: ThumbnailProps) {
   )
 }
 
+function LogoThumbnail({ src, alt }: ThumbnailProps) {
+  return (
+    <div className={s.logoThumbnail} data-testid="wpl-card-logo-thumbnail">
+      <div className={s.image}>
+        <Image src={src} alt={alt} width={800} height={450} />
+      </div>
+    </div>
+  )
+}
+
 function Meta({ items }: MetaProps) {
   return (
     <ul className={s.meta} data-testid="wpl-card-meta">
@@ -121,4 +131,13 @@ function Description({ children }: DescriptionProps) {
 }
 
 Card.displayName = 'Card'
-export { Card, Thumbnail, Meta, Content, Heading, Description, ProductBadges }
+export {
+  Card,
+  Thumbnail,
+  LogoThumbnail,
+  Meta,
+  Content,
+  Heading,
+  Description,
+  ProductBadges,
+}

packages/card/style.module.css

@@ -92,6 +92,20 @@
   }
 }
 
+.logoThumbnail {
+  composes: thumbnail;
+  padding: var(--wpl-spacing-05);
+
+  & .image {
+    aspect-ratio: none;
+
+    & img {
+      aspect-ratio: 16 / 9;
+      object-fit: contain;
+    }
+  }
+}
+
 .meta {
   composes: g-type-label from global;
   color: var(--secondary-text-color);