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 ( +
+
+ {alt} +
+
+ ) +} + 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);