feat(card): Make date optional on <ResourceCard />

.changeset/old-comics-argue.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-card': minor
+---
+
+Makes the `date` prop optional, preventing it and the `|` separator from rendering if not set.

packages/card/docs.mdx

@@ -316,7 +316,6 @@ A component used to promote and link to marketing pages, always using a descript
     appearance="dark"
     heading="Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus"
     category="Category"
-    date="August 15, 2022"
     thumbnail={{
       src: 'https://www.datocms-assets.com/19447/1648680074-screenshot-2022-03-31-at-00-40-47.png',
       alt: 'HashiConf Europe 2022 Recap',

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

@@ -18,7 +18,7 @@ const defaultProps = {
 }
 
 describe('<ResourceCard />', () => {
-  it('should render the provided metadata correctly', () => {
+  it('should render the provided date and category with separator', () => {
     const expectedMeta = [defaultProps.date, defaultProps.category]
 
     render(<ResourceCard {...defaultProps} />)
@@ -31,4 +31,18 @@ describe('<ResourceCard />', () => {
 
     expect(metaElement).toContainElement(screen.getByText('|'))
   })
+
+  it('should not render the date if no date is provided', () => {
+    const defaultPropsWithoutDate = { ...defaultProps, date: '' }
+
+    render(<ResourceCard {...defaultPropsWithoutDate} />)
+
+    const metaElement = screen.getByTestId('wpl-card-meta')
+
+    expect(metaElement).toContainElement(
+      screen.getByText(defaultProps.category)
+    )
+
+    expect(metaElement).not.toContainElement(screen.queryByText('|'))
+  })
 })

packages/card/resource-card/index.tsx

@@ -8,7 +8,7 @@ import type { CardProps, ThumbnailProps } from '../types'
 
 export interface ResourceCardProps {
   heading: string
-  date: string
+  date?: string
   category: string
   link: string
   productBadges?: CardProps['productBadges']
@@ -25,6 +25,8 @@ export function ResourceCard({
   thumbnail,
   appearance,
 }: ResourceCardProps): JSX.Element {
+  const meta: string[] = date ? [date, category] : [category]
+
   return (
     <CardPrimitives.Card
       heading={heading}
@@ -34,7 +36,7 @@ export function ResourceCard({
     >
       <CardPrimitives.Thumbnail {...thumbnail} />
       <CardPrimitives.Content>
-        <CardPrimitives.Meta items={[date, category]} />
+        <CardPrimitives.Meta items={meta} />
         <CardPrimitives.Heading>{heading}</CardPrimitives.Heading>
         {productBadges && productBadges?.length > 0 ? (
           <CardPrimitives.ProductBadges