diff --git a/.changeset/hot-students-knock.md b/.changeset/hot-students-knock.md
new file mode 100644
index 000000000..7e3aefbed
--- /dev/null
+++ b/.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
diff --git a/package-lock.json b/package-lock.json
index be9412b72..06cdfbab2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40353,7 +40353,7 @@
},
"packages/form-fields": {
"name": "@hashicorp/react-form-fields",
- "version": "0.2.0",
+ "version": "0.2.1",
"dependencies": {
"@hashicorp/flight-icons": "^2.5.0",
"classnames": "^2.3.2",
diff --git a/packages/card/docs.mdx b/packages/card/docs.mdx
index 6c5f0015d..d525e2865 100644
--- a/packages/card/docs.mdx
+++ b/packages/card/docs.mdx
@@ -340,7 +340,7 @@ A component used to promote and link to marketing pages, always using a descript
+
diff --git a/packages/card/newsroom-card/index.test.tsx b/packages/card/newsroom-card/index.test.tsx
index 73a12d1db..d37ea8cd7 100644
--- a/packages/card/newsroom-card/index.test.tsx
+++ b/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('', () => {
it('should render the provided metadata correctly', () => {
- const expectedMeta = [defaultProps.date]
+ const expectedMeta = [defaultProps.date, defaultProps.category]
render()
@@ -28,6 +29,11 @@ describe('', () => {
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()
+ expect(screen.queryByTestId('wpl-card-logo-thumbnail')).toBeNull()
})
})
diff --git a/packages/card/newsroom-card/index.tsx b/packages/card/newsroom-card/index.tsx
index c5b2154b4..a9785e72c 100644
--- a/packages/card/newsroom-card/index.tsx
+++ b/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 (
-
+ {thumbnail ? : null}
-
+
{heading}
diff --git a/packages/card/primitives.tsx b/packages/card/primitives.tsx
index 03ac8709a..8336f4b10 100644
--- a/packages/card/primitives.tsx
+++ b/packages/card/primitives.tsx
@@ -58,6 +58,16 @@ function Thumbnail({ src, alt }: ThumbnailProps) {
)
}
+function LogoThumbnail({ src, alt }: ThumbnailProps) {
+ return (
+
+ )
+}
+
function Meta({ items }: MetaProps) {
return (
@@ -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,
+}
diff --git a/packages/card/style.module.css b/packages/card/style.module.css
index 6c46db2e9..b7bf0b988 100644
--- a/packages/card/style.module.css
+++ b/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);