@hashicorp/react-components 1.1.8 → 1.1.11

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

@@ -1,85 +0,0 @@
-/**
- * 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

@@ -1,11 +0,0 @@
-# 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

@@ -1,45 +0,0 @@
-/**
- * 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

@@ -1,69 +0,0 @@
-/**
- * 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

@@ -1,14 +0,0 @@
-/**
- * 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

@@ -1,39 +0,0 @@
-/**
- * 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

@@ -1,37 +0,0 @@
-/**
- * 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

@@ -1,12 +0,0 @@
-.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

@@ -1,57 +0,0 @@
-/**
- * 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

@@ -1,69 +0,0 @@
-/**
- * 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

@@ -1,24 +0,0 @@
-.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

@@ -1,71 +0,0 @@
-/**
- * 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()
-	})
-})

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

@@ -1,93 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { memo, type ReactNode } from 'react'
-import { TextPlus } from '@hashicorp/react-design-system-components/src/components/text'
-import { IconGithub16 } from '@hashicorp/flight-icons/svg-react/github-16'
-import { IconTwitter16 } from '@hashicorp/flight-icons/svg-react/twitter-16'
-import { IconLinkedin16 } from '@hashicorp/flight-icons/svg-react/linkedin-16'
-import { IconLink16 } from '@hashicorp/flight-icons/svg-react/link-16'
-import { IconMail16 } from '@hashicorp/flight-icons/svg-react/mail-16'
-import type { ProductBadgesProps, ThumbnailProps } from '../types'
-import * as CardPrimitives from '../primitives'
-import s from './style.module.css'
-
-export interface PersonCardProps {
-	thumbnail: ThumbnailProps
-	link: string
-	name: string
-	location?: string
-	bio?: string
-	productBadges?: ProductBadgesProps['badges']
-}
-
-// Map of hostnames to icons.
-/* eslint-disable react/jsx-key */
-const iconMap = new Map<string, ReactNode>([
-	// null signals that we don't want to render any icon
-	['hashicorp.com', null],
-	[
-		'twitter.com',
-		<IconTwitter16 data-testid={'wpl-personcard-twitter-icon'} />,
-	],
-	['github.com', <IconGithub16 data-testid={'wpl-personcard-github-icon'} />],
-	[
-		'linkedin.com',
-		<IconLinkedin16 data-testid={'wpl-personcard-linkedin-icon'} />,
-	],
-	['mailto:', <IconMail16 data-testid={'wpl-personcard-mail-icon'} />],
-])
-/* eslint-enable react/jsx-key */
-
-const Icon = memo(function Icon({ url }: { url: string }) {
-	const { protocol, host } = new URL(url)
-	const icon = iconMap.get(protocol === 'mailto:' ? 'mailto:' : host)
-
-	// If the icon value is null, don't render an icon
-	if (icon === null) {
-		return null
-	}
-
-	// Render the icon or the default icon if the icon value is undefined
-	return (
-		<div className={s.thumbnailIcon}>
-			{icon ?? <IconLink16 data-testid={'wpl-personcard-link-icon'} />}
-		</div>
-	)
-})
-
-export function PersonCard({
-	link,
-	thumbnail,
-	name,
-	location,
-	bio,
-	productBadges,
-}: PersonCardProps) {
-	return (
-		<CardPrimitives.Card heading={name} link={link} withArrow={false}>
-			<div className={s.thumbnailContainer}>
-				<CardPrimitives.PersonThumbnail {...thumbnail} />
-				<Icon url={link} />
-			</div>
-			<CardPrimitives.Content>
-				<div>
-					<CardPrimitives.Heading>{name}</CardPrimitives.Heading>
-					{location ? (
-						<TextPlus.Body tag="p" size="200" className={s.location}>
-							{location}
-						</TextPlus.Body>
-					) : null}
-				</div>
-				{bio ? (
-					<CardPrimitives.Description>{bio}</CardPrimitives.Description>
-				) : null}
-				{productBadges && productBadges?.length > 0 ? (
-					<CardPrimitives.ProductBadges badges={productBadges} />
-				) : null}
-			</CardPrimitives.Content>
-		</CardPrimitives.Card>
-	)
-}

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

@@ -1,33 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-.location {
-	margin: 0;
-	color: var(--token-color-foreground-faint);
-}
-
-.thumbnailContainer {
-	position: relative;
-}
-
-.thumbnailIcon {
-	--size: 40px;
-
-	position: absolute;
-	bottom: 20px;
-	right: 20px;
-	width: var(--size);
-	height: var(--size);
-	display: grid;
-	place-items: center;
-	border-radius: 9999px;
-	overflow: hidden;
-	background-color: white;
-	opacity: 0.5;
-
-	& svg {
-		position: relative;
-	}
-}