@hashicorp/react-components 0.0.0-canary.57d393c

package/src/components/call-to-action/styles/variant-compact.module.css

@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.root {
+	--background: var(--white);
+	--text-color-display: var(--gray-1);
+	--text-color-body: var(--gray-2);
+
+	background: var(--background);
+	padding: 48px 0;
+
+	@media (--medium) {
+		padding: 64px 0;
+	}
+	@media (--large) {
+		padding: 88px 0;
+	}
+
+	&.theme-gray {
+		--background: var(--gray-6);
+	}
+
+	&.theme-dark {
+		--background: var(--black);
+		--text-color-display: var(--white);
+		--text-color-body: var(--gray-5);
+	}
+
+	&.theme-brand {
+		--background: var(--brand);
+		--text-color-display: var(--white);
+		--text-color-body: var(--gray-6);
+	}
+}
+
+.container {
+	composes: g-grid-container from global;
+
+	@media (--medium-up) {
+		display: flex;
+	}
+}
+
+.heading {
+	composes: g-type-display-2 from global;
+	color: var(--text-color-display);
+	margin: 0;
+
+	@media (--medium-up) {
+		flex-basis: 33.3%;
+		padding-right: 32px;
+	}
+}
+
+.contentAndLinks {
+	@media (--medium-up) {
+		flex-basis: 66.6%;
+		margin-left: 32px;
+	}
+}
+
+.content {
+	composes: g-type-body-large from global;
+	color: var(--text-color-body);
+	margin: 0;
+	max-width: 35em;
+
+	&.hasHeading {
+		margin-top: 16px;
+
+		@media (--medium-up) {
+			margin: 0;
+		}
+	}
+}
+
+.links {
+	margin-top: 32px;
+	margin-bottom: -16px;
+
+	@media (--large) {
+		margin-top: 40px;
+	}
+}
+
+.button {
+	margin-right: 16px;
+	margin-bottom: 16px;
+}

package/src/components/call-to-action/styles/variant-links.module.css

@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.root {
+	--background: var(--white);
+	--text-color-display: var(--gray-1);
+	--text-color-body: var(--gray-2);
+
+	background: var(--background);
+	padding: 64px 0;
+
+	@media (--medium) {
+		padding: 88px 0;
+	}
+	@media (--large) {
+		padding: 128px 0;
+	}
+
+	&.theme-gray {
+		--background: var(--gray-6);
+	}
+
+	&.theme-dark {
+		--background: var(--black);
+		--text-color-display: var(--white);
+		--text-color-body: var(--gray-5);
+	}
+
+	&.theme-brand {
+		--background: var(--brand);
+		--text-color-display: var(--white);
+		--text-color-body: var(--gray-6);
+	}
+}
+
+.container {
+	composes: g-grid-container from global;
+}
+
+.heading {
+	composes: g-type-display-2 from global;
+	color: var(--text-color-display);
+	margin: 0;
+}
+
+.content {
+	composes: g-type-body-large from global;
+	color: var(--text-color-body);
+	margin: 0;
+	max-width: 30em;
+
+	&.hasHeading {
+		margin-top: 16px;
+
+		@media (--large) {
+			margin-top: 24px;
+		}
+	}
+}
+
+.links {
+	margin-top: 32px;
+
+	@media (--large) {
+		margin-top: 40px;
+	}
+
+	&::after {
+		display: block;
+		float: none;
+		content: '';
+		clear: both;
+	}
+}
+
+.button {
+	display: block;
+	float: left;
+	clear: both;
+	& + .g-btn {
+		margin-top: 8px;
+	}
+}

package/src/components/card/README.md

@@ -0,0 +1,11 @@
+# Card
+
+A component used to promote and link to marketing pages, always using a descriptive heading but optionally other elements as needed.
+
+### Props
+
+See [the props file](props.js) for more details.
+
+### Notes
+
+Sub-components of this card can be directly accessed from the base component (e.g.: `<Card.Heading />`) and used to compose the card's `children`.

package/src/components/card/card.tsx

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { CardProps } from './types'
+import * as CardPrimitive from './primitives'
+
+function Card({
+	withArrow,
+	heading,
+	link,
+	thumbnail,
+	meta,
+	description,
+	productBadges,
+	isExternal,
+	hasBorder,
+}: CardProps) {
+	return (
+		<CardPrimitive.Card
+			withArrow={withArrow}
+			heading={heading}
+			link={link}
+			isExternal={isExternal}
+			hasBorder={hasBorder}
+		>
+			{thumbnail ? (
+				<CardPrimitive.Thumbnail src={thumbnail.src} alt={thumbnail.alt} />
+			) : null}
+			<CardPrimitive.Content>
+				{meta && meta.length > 0 ? <CardPrimitive.Meta items={meta} /> : null}
+				<CardPrimitive.Heading>{heading}</CardPrimitive.Heading>
+				{description ? (
+					<CardPrimitive.Description>{description}</CardPrimitive.Description>
+				) : null}
+				{productBadges && productBadges?.length > 0 ? (
+					<CardPrimitive.ProductBadges badges={productBadges} />
+				) : null}
+			</CardPrimitive.Content>
+		</CardPrimitive.Card>
+	)
+}
+
+export default Card

package/src/components/card/index.test.tsx

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { render, screen } from '@testing-library/react'
+import Card from './'
+
+const defaultProps = {
+	link: 'https://hashicorp.com',
+	heading: 'Example heading',
+	description: 'Example description',
+	meta: ['August 15, 2022', '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('<Card />', () => {
+	// Prop tests
+	it('should render the provided link prop', () => {
+		render(<Card {...defaultProps} />)
+
+		expect(screen.getByRole('link')).toHaveAttribute('href', defaultProps.link)
+	})
+
+	it('should render the provided heading prop', () => {
+		render(<Card {...defaultProps} />)
+
+		const heading = screen.getByText(defaultProps.heading)
+		expect(heading.tagName).toBe('H2')
+	})
+
+	it('should render the provided description prop', () => {
+		render(<Card {...defaultProps} />)
+
+		const description = screen.getByText(defaultProps.description)
+		expect(description.tagName).toBe('P')
+	})
+
+	it('should render the provided meta prop (single item)', () => {
+		const cardMeta = ['Category']
+
+		render(<Card {...defaultProps} meta={cardMeta} />)
+
+		const metaElement = screen.getByTestId('wpl-card-meta')
+		expect(metaElement).toContainElement(screen.getByText(cardMeta[0]))
+	})
+
+	it('should render the provided meta prop (two items)', () => {
+		const cardMeta = ['August 15, 2022', 'Category']
+
+		render(<Card {...defaultProps} />)
+
+		const metaElement = screen.getByTestId('wpl-card-meta')
+
+		cardMeta.forEach((item) => {
+			expect(metaElement).toContainElement(screen.getByText(item))
+		})
+		expect(metaElement).toContainElement(screen.getByText('|'))
+	})
+
+	it('should render the provided thumbnail prop', () => {
+		const { getByAltText } = render(<Card {...defaultProps} />)
+
+		expect(getByAltText(defaultProps.thumbnail.alt).tagName).toBe('IMG')
+	})
+})

package/src/components/card/index.tsx

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Card from './card'
+import { NewsroomCard } from './newsroom-card'
+import { PersonCard } from './person-card'
+import { ResourceCard } from './resource-card'
+import { UnifiedCard } from './unified-card'
+import { PromoCard } from './promo-card'
+
+export default Card
+export { NewsroomCard, PersonCard, ResourceCard, UnifiedCard, PromoCard }

package/src/components/card/newsroom-card/index.test.tsx

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { render, screen } from '@testing-library/react'
+import { NewsroomCard } from '.'
+
+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',
+	},
+}
+
+describe('<NewsroomCard />', () => {
+	it('should render the provided metadata correctly', () => {
+		const expectedMeta = [defaultProps.date, defaultProps.category]
+
+		render(<NewsroomCard {...defaultProps} />)
+
+		const metaElement = screen.getByTestId('wpl-card-meta')
+
+		expectedMeta.forEach((item) => {
+			expect(metaElement).toContainElement(screen.getByText(item))
+		})
+
+		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()
+	})
+})

package/src/components/card/newsroom-card/index.tsx

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { ThumbnailProps } from '../types'
+import { UnifiedCard } from '../unified-card'
+import s from './style.module.css'
+
+export interface NewsroomCardProps {
+	heading: string
+	date: string
+	category: string
+	link: string
+	thumbnail?: ThumbnailProps
+	withArrow?: boolean
+}
+
+export function NewsroomCard({
+	heading,
+	date,
+	category,
+	link,
+	thumbnail,
+	withArrow = false,
+}: NewsroomCardProps): JSX.Element {
+	return (
+		<UnifiedCard
+			heading={heading}
+			meta={[date, category]}
+			link={link}
+			thumbnail={thumbnail}
+			withArrow={withArrow}
+			className={s.newsroomCard}
+		/>
+	)
+}

package/src/components/card/newsroom-card/style.module.css

@@ -0,0 +1,12 @@
+.newsroomCard {
+	& img {
+		padding: var(--hdsplus-spacing-07);
+		aspect-ratio: 16 / 9;
+
+		/* 
+			! HACK: Overrides object-fit set by Thumbnail primitive in Card component styles
+			Ref: https://github.com/hashicorp/web/blob/main/packages/react-components/src/components/card/style.module.css#L75
+		*/
+		object-fit: contain !important;
+	}
+}

package/src/components/card/partner-card/index.test.tsx

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { render, screen } from '@testing-library/react'
+import { PartnerCard } from '.'
+
+const defaultProps = {
+	logo: {
+		width: 360,
+		src: 'https://www.datocms-assets.com/2885/1506535057-black.svg',
+		height: 97,
+		alt: 'GitHub Logo',
+	},
+	link: '#',
+	heading: 'Github',
+	description:
+		'GitHub, Inc. is a provider of Internet hosting for software development and version control using Git.',
+	meta: ['Tech Partner'],
+}
+
+describe('<PartnerCard />', () => {
+	it('should not render badges when none are provided', () => {
+		render(<PartnerCard {...defaultProps} />)
+
+		const badgeElement = screen.queryByTestId('wpl-card-badges')
+
+		expect(badgeElement).toBeNull()
+	})
+
+	it('should render badges when badges are provided', () => {
+		const competencyBadges = ['Infrastructure', 'Security']
+
+		render(
+			<PartnerCard {...defaultProps} competencyBadges={competencyBadges} />
+		)
+
+		const badgeElement = screen.getByTestId('wpl-card-badges')
+
+		competencyBadges.forEach((item) => {
+			expect(badgeElement).toContainElement(screen.getByText(item))
+		})
+	})
+
+	it('should render badges when product badges are provided', () => {
+		const productBadges = ['vault' as const, 'terraform' as const]
+
+		render(<PartnerCard {...defaultProps} productBadges={productBadges} />)
+
+		const badgeElement = screen.getByTestId('wpl-card-badges')
+
+		productBadges.forEach((item) => {
+			expect(badgeElement).toContainElement(screen.getByText(item))
+		})
+	})
+})

package/src/components/card/partner-card/index.tsx

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Image, { type ImageProps } from 'next/image'
+import Badge from '@hashicorp/react-design-system-components/src/components/badge'
+import FlightIcon from '@hashicorp/react-design-system-components/src/components/flight-icon'
+import { TextPlus } from '@hashicorp/react-design-system-components/src/components/text'
+import * as CardPrimitives from '../primitives'
+import type { CardProps } from '../types'
+import s from './style.module.css'
+
+export interface PartnerCardProps {
+	heading: string
+	description: string
+	meta: string[]
+	link: string
+	productBadges?: CardProps['productBadges']
+	competencyBadges?: string[]
+	logo: ImageProps
+	className?: string
+}
+
+export function PartnerCard({
+	heading,
+	description,
+	meta,
+	link,
+	productBadges,
+	competencyBadges,
+	logo,
+	className,
+}: PartnerCardProps) {
+	const hasProductBadges = productBadges && productBadges.length > 0
+	const hasCompetencyBadges = competencyBadges && competencyBadges.length > 0
+
+	return (
+		<CardPrimitives.Card
+			heading={heading}
+			link={link}
+			withArrow={false}
+			isExternal={false}
+			className={className}
+		>
+			<div className={s.logoContainer}>
+				<Image {...logo} alt={logo.alt} className={s.logo} />
+			</div>
+			<CardPrimitives.Content>
+				<CardPrimitives.Meta items={meta} />
+				<TextPlus.Body tag="p" size="200" className={s.description}>
+					{description}
+				</TextPlus.Body>
+				{hasProductBadges || hasCompetencyBadges ? (
+					<CardPrimitives.ProductBadges badges={productBadges || []}>
+						{hasCompetencyBadges &&
+							competencyBadges.map((competencyBadge, stableIdx) => (
+								<Badge
+									key={stableIdx}
+									text={competencyBadge}
+									icon={<FlightIcon name="dot" stretched />}
+								/>
+							))}
+					</CardPrimitives.ProductBadges>
+				) : null}
+			</CardPrimitives.Content>
+		</CardPrimitives.Card>
+	)
+}

package/src/components/card/partner-card/style.module.css

@@ -0,0 +1,24 @@
+.description {
+	-webkit-box-orient: vertical;
+	display: -webkit-box;
+	-webkit-line-clamp: 4;
+	max-width: 100%;
+	overflow: hidden;
+}
+
+.logoContainer {
+	position: relative;
+	display: flex;
+	aspect-ratio: 16 / 9;
+	overflow: hidden;
+	align-items: center;
+	justify-content: center;
+	background: var(--token-color-surface-faint);
+}
+
+.logo {
+	max-width: 232px;
+	max-height: 64px;
+	height: auto;
+	width: auto;
+}

package/src/components/card/person-card/index.test.tsx

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { render, screen } from '@testing-library/react'
+import { PersonCard } from './index'
+
+const defaultProps = {
+	link: 'https://hashicorp.com',
+	name: 'Example name',
+	bio: 'Example bio',
+	location: 'Example location',
+	meta: ['August 15, 2022', '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('<PersonCard />', () => {
+	// Prop tests
+	it('should render the provided name prop', () => {
+		render(<PersonCard {...defaultProps} />)
+
+		const name = screen.getByText(defaultProps.name)
+		expect(name.tagName).toBe('H2')
+	})
+
+	it('should render the provided bio prop', () => {
+		render(<PersonCard {...defaultProps} />)
+
+		const bio = screen.getByText(defaultProps.bio)
+		expect(bio.tagName).toBe('P')
+	})
+
+	it('should render the provided location prop', () => {
+		render(<PersonCard {...defaultProps} />)
+
+		const location = screen.getByText(defaultProps.location)
+		expect(location.tagName).toBe('P')
+	})
+
+	it('should render the correct thumbnail icon based on the provided link prop', () => {
+		const links = {
+			github: 'https://github.com',
+			twitter: 'https://twitter.com',
+			linkedin: 'https://linkedin.com',
+			link: 'https://example.com',
+			mail: 'mailto:name@example.com',
+		}
+
+		render(
+			<>
+				{Object.keys(links).map((platform) => (
+					<PersonCard key={platform} {...defaultProps} link={links[platform]} />
+				))}
+			</>
+		)
+
+		Object.keys(links).forEach((platform) => {
+			screen.getByTestId(`wpl-personcard-${platform}-icon`)
+		})
+	})
+
+	it('should not render a thumbnail icon when link is on hashicorp.com', () => {
+		render(<PersonCard {...defaultProps} link="https://hashicorp.com" />)
+
+		expect(screen.queryByTestId('wpl-personcard-link-icon')).toBeNull()
+	})
+})