feat(react-card): add custom cards for faceted search (#848)

* update: add blog card

* update: add career card

* update: add customer story card

* update: add newsroom card

* update: add partner card

* update: add resource card

* feat: start adding cards to docs

* update: add all card tpyes to docs

* update: date prop type

* feat: add tests

* fix: export types

* Create thick-mice-rule.md

* fix: remove bottom class and add appearance prop

* update card wpl color

.changeset/thick-mice-rule.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/react-card": minor
+---
+
+Add custom cards for faceted search

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

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react'
+import { BlogCard } from '.'
+
+const defaultProps = {
+  link: 'https://hashicorp.com',
+  heading: 'Example heading',
+  description: 'Example Description',
+  date: 'August 15, 2022',
+  category: 'Category',
+  thumbnail: {
+    src: 'https://www.datocms-assets.com/19447/1648680074-screenshot-2022-03-31-at-00-40-47.png',
+    alt: 'HashiConf Europe 2022 Recap',
+  },
+}
+
+describe('<BlogCard />', () => {
+  it('should render the provided metadata correctly', () => {
+    const expectedMeta = [defaultProps.date, defaultProps.category]
+
+    render(<BlogCard {...defaultProps} />)
+
+    const metaElement = screen.getByTestId('wpl-card-meta')
+
+    expectedMeta.forEach((item) => {
+      expect(metaElement).toContainElement(screen.getByText(item))
+    })
+
+    expect(metaElement).toContainElement(screen.getByText('|'))
+  })
+})

packages/card/blog-card/index.tsx

@@ -0,0 +1,43 @@
+import * as CardPrimitives from '../primitives'
+import type { CardProps } from '../types'
+
+export interface BlogCardProps {
+  heading: string
+  description: string
+  date: string
+  category: string
+  link: string
+  productBadges?: CardProps['productBadges']
+  appearance?: CardProps['appearance']
+}
+
+export function BlogCard({
+  heading,
+  description,
+  date,
+  category,
+  link,
+  productBadges,
+  appearance,
+}: BlogCardProps): JSX.Element {
+  return (
+    <CardPrimitives.Card
+      heading={heading}
+      link={link}
+      withArrow={false}
+      appearance={appearance}
+    >
+      <CardPrimitives.Content>
+        <CardPrimitives.Meta items={[date, category]} />
+        <CardPrimitives.Heading>{heading}</CardPrimitives.Heading>
+        <CardPrimitives.Description>{description}</CardPrimitives.Description>
+        {productBadges && productBadges?.length > 0 ? (
+          <CardPrimitives.ProductBadges
+            badges={productBadges}
+            appearance={appearance}
+          />
+        ) : null}
+      </CardPrimitives.Content>
+    </CardPrimitives.Card>
+  )
+}

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

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react'
+import { CareerCard } from '.'
+
+const defaultProps = {
+  link: 'https://hashicorp.com',
+  heading: 'Example heading',
+  workplaceType: 'Remote',
+  location: 'Example Location',
+  thumbnail: {
+    src: 'https://www.datocms-assets.com/19447/1648680074-screenshot-2022-03-31-at-00-40-47.png',
+    alt: 'HashiConf Europe 2022 Recap',
+  },
+}
+
+describe('<CareerCard />', () => {
+  it('should render the provided metadata correctly', () => {
+    const expectedMeta = [defaultProps.workplaceType]
+
+    render(<CareerCard {...defaultProps} />)
+
+    const metaElement = screen.getByTestId('wpl-card-meta')
+
+    expectedMeta.forEach((item) => {
+      expect(metaElement).toContainElement(screen.getByText(item))
+    })
+
+    expect(metaElement).not.toContainElement(screen.queryByText('|'))
+  })
+})

packages/card/career-card/index.tsx

@@ -0,0 +1,42 @@
+import * as CardPrimitives from '../primitives'
+import type { CardProps } from '../types'
+import s from './style.module.css'
+
+export interface CareerCardProps {
+  heading: string
+  workplaceType: string
+  location: string
+  link: string
+  productBadges?: CardProps['productBadges']
+  appearance?: CardProps['appearance']
+}
+
+export function CareerCard({
+  heading,
+  workplaceType,
+  location,
+  link,
+  productBadges,
+  appearance,
+}: CareerCardProps) {
+  return (
+    <CardPrimitives.Card
+      heading={heading}
+      link={link}
+      withArrow={false}
+      appearance={appearance}
+    >
+      <CardPrimitives.Content>
+        <CardPrimitives.Meta items={[workplaceType]} />
+        <p className={s.subHeading}>{location}</p>
+        <CardPrimitives.Heading>{heading}</CardPrimitives.Heading>
+        {productBadges && productBadges?.length > 0 ? (
+          <CardPrimitives.ProductBadges
+            badges={productBadges}
+            appearance={appearance}
+          />
+        ) : null}
+      </CardPrimitives.Content>
+    </CardPrimitives.Card>
+  )
+}

packages/card/career-card/style.module.css

@@ -0,0 +1,11 @@
+.bottom {
+  display: flex;
+  align-items: flex-end;
+  height: 100%;
+}
+
+.subHeading {
+  composes: g-type-body-small-x-strong from global;
+  margin: 0;
+  color: var(--secondary-text-color);
+}

packages/card/customer-story-card/index.tsx

@@ -0,0 +1,41 @@
+import * as CardPrimitives from '../primitives'
+import type { CardProps, ThumbnailProps } from '../types'
+
+export interface CustomerStoryCardProps {
+  heading: string
+  category: string
+  link: string
+  productBadges?: CardProps['productBadges']
+  thumbnail: ThumbnailProps
+  appearance?: CardProps['appearance']
+}
+
+export function CustomerStoryCard({
+  heading,
+  category,
+  link,
+  thumbnail,
+  productBadges,
+  appearance,
+}: CustomerStoryCardProps): JSX.Element {
+  return (
+    <CardPrimitives.Card
+      heading={heading}
+      link={link}
+      withArrow={false}
+      appearance={appearance}
+    >
+      <CardPrimitives.Thumbnail {...thumbnail} />
+      <CardPrimitives.Content>
+        <CardPrimitives.Meta items={[category]} />
+        <CardPrimitives.Heading>{heading}</CardPrimitives.Heading>
+        {productBadges && productBadges?.length > 0 ? (
+          <CardPrimitives.ProductBadges
+            badges={productBadges}
+            appearance={appearance}
+          />
+        ) : null}
+      </CardPrimitives.Content>
+    </CardPrimitives.Card>
+  )
+}