@hashicorp/react-components 1.1.10 → 1.2.0

package/src/components/related-content/index.test.tsx

@@ -1,74 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import RelatedContent from '.'
-
-const defaultProps = {
-	headline: 'Related Content',
-	description:
-		'Leo mauris fermentum pharetra blandit tellus euismod. Leo mauris fermentum pharetra blandit tellus euismod.',
-	cards: [
-		{
-			link: 'https://hashicorp.com',
-			meta: ['USE CASES'],
-			heading:
-				'Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…',
-			description:
-				'Body small - 4 lines with character limit of 170. Leo mauris fermentum pharetra blandit tellus euismod pharetra. Duis egestas volutpat dolor…',
-		},
-		{
-			link: 'https://hashicorp.com',
-			meta: ['USE CASES'],
-			heading:
-				'Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…',
-			description:
-				'Body small - 4 lines with character limit of 170. Leo mauris fermentum pharetra blandit tellus euismod pharetra. Duis egestas volutpat dolor…',
-		},
-		{
-			link: 'https://hashicorp.com',
-			meta: ['USE CASES'],
-			heading:
-				'Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…',
-			description:
-				'Body small - 4 lines with character limit of 170. Leo mauris fermentum pharetra blandit tellus euismod pharetra. Duis egestas volutpat dolor…',
-		},
-		{
-			link: 'https://hashicorp.com',
-			meta: ['USE CASES'],
-			heading:
-				'Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…',
-			description:
-				'Body small - 4 lines with character limit of 170. Leo mauris fermentum pharetra blandit tellus euismod pharetra. Duis egestas volutpat dolor…',
-		},
-	],
-	cta: {
-		text: 'Sign up now',
-		href: '/components/relatedcontent',
-	},
-}
-
-describe('<RelatedContent />', () => {
-	it('should render the headline prop', () => {
-		render(<RelatedContent {...defaultProps} />)
-		const headlineText = screen.getByText(defaultProps.headline)
-		expect(headlineText.tagName).toBe('H2')
-		expect(headlineText).toHaveClass(/headline/)
-	})
-
-	it('should render the description prop', () => {
-		render(<RelatedContent {...defaultProps} />)
-		const descText = screen.getByText(defaultProps.description)
-		expect(descText.tagName).toBe('P')
-		expect(descText).toHaveClass(/description/)
-	})
-
-	it('should render cards', () => {
-		render(<RelatedContent {...defaultProps} />)
-		const cardsContainer = screen.getByTestId('wpl-cards-container')
-		expect(cardsContainer.children.length).toBeGreaterThan(0)
-	})
-
-	it('should render the optional CTA', () => {
-		render(<RelatedContent {...defaultProps} />)
-		const ctaContainer = screen.getByTestId('wpl-cta-container')
-		expect(ctaContainer).toHaveClass(/cta/)
-	})
-})

package/src/components/related-content/index.tsx

@@ -1,56 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Card from '../card'
-import classNames from 'classnames'
-import Link from 'next/link'
-import type { RelatedContentProps } from './types'
-import s from './style.module.css'
-
-const RelatedContent = ({
-	appearance = 'light',
-	headline,
-	description,
-	cards,
-	cta,
-}: RelatedContentProps) => {
-	return (
-		<div
-			className={classNames([
-				s.wrapper,
-				s[appearance],
-				{ ['hdsplus-dark-mode']: appearance === 'dark' },
-			])}
-		>
-			<div className={s.textStack}>
-				<h2 className={classNames([s.headline, s[appearance]])}>{headline}</h2>
-				{description ? (
-					<p className={classNames([s.description, s[appearance]])}>
-						{description}
-					</p>
-				) : null}
-			</div>
-			<div className={s.cards} data-testid="wpl-cards-container">
-				{cards.map((card, i) => (
-					<Card
-						key={i}
-						link={card.link}
-						thumbnail={card.thumbnail}
-						meta={card.meta}
-						heading={card.heading}
-						description={card.description}
-					/>
-				))}
-			</div>
-			<div className={s.cta} data-testid="wpl-cta-container">
-				<Link href={cta.href} legacyBehavior>
-					{cta.text}
-				</Link>
-			</div>
-		</div>
-	)
-}
-
-export default RelatedContent

package/src/components/related-content/style.module.css

@@ -1,89 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-.wrapper {
-  composes: g-grid from global;
-  composes: g-grid-container from global;
-  padding-top: 64px;
-  padding-bottom: 64px;
-
-  @media (--large) {
-    padding-top: 88px;
-    padding-bottom: 88px;
-  }
-  &.dark {
-    background-color: var(--wpl-neutral-900);
-  }
-}
-
-.textStack {
-  grid-column: 1 / -1;
-  margin-bottom: 24px;
-
-  @media (--medium) {
-    grid-column: 1 / span 7;
-    margin-bottom: 32px;
-  }
-
-  @media (--large) {
-    grid-column: 1 / span 6;
-    margin-bottom: 32px;
-  }
-}
-
-.headline {
-  composes: g-type-display-3 from global;
-  color: var(--wpl-neutral-900);
-  margin: 0 0 16px 0;
-
-  &.dark {
-    color: white;
-  }
-}
-
-.description {
-  composes: g-type-body from global;
-  color: var(--wpl-neutral-500);
-  margin: 0;
-
-  &.dark {
-    color: white;
-  }
-}
-
-.cards {
-  --columns: 1;
-
-  grid-column: 1 / -1;
-  display: grid;
-  grid-gap: 32px;
-  grid-template-columns: repeat(var(--columns), 1fr);
-  margin-bottom: 32px;
-
-  @media (--medium) {
-    --columns: 2;
-  }
-  @media (--large) {
-    --columns: 4;
-  }
-}
-
-.cta {
-  grid-column: 1 / -1;
-
-  & a {
-    font-weight: 500;
-    font-size: 17px;
-    line-height: 20px;
-    letter-spacing: 0.0125em;
-    text-decoration: underline;
-    text-underline-offset: 3px;
-    display: inline;
-
-    @nest .dark & {
-      color: var(--wpl-neutral-300);
-    }
-  }
-}

package/src/components/related-content/types.ts

@@ -1,21 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import type { CardProps } from '../card/types'
-
-export interface RelatedContentProps {
-	appearance?: 'light' | 'dark'
-	headline: string
-	description?: string
-	cards: Array<RelatedContentCardProps>
-	cta: RelatedContentCtaProps
-}
-
-interface RelatedContentCtaProps {
-	href: string
-	text: string
-}
-
-type RelatedContentCardProps = Omit<CardProps, 'appearance'>

package/src/components/subnav/helpers/areBasePathsMatching.ts

@@ -1,13 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-export function areBasePathsMatching(pathA: string, pathB: string) {
-	if (!pathA || !pathB) return false
-	// use .filter(Boolean) to remove any falsy values, like ""
-	const [pathABase] = pathA.split('/').filter(Boolean)
-	const [pathBBase] = pathB.split('/').filter(Boolean)
-
-	return pathABase === pathBBase
-}

package/src/components/subnav/helpers/traverse/index.ts

@@ -1,42 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-function visitObject(objectIn, handleNode) {
-	const objectOut = {}
-	Object.keys(objectIn).forEach((key) => {
-		objectOut[key] = visitProperty(key, objectIn[key], handleNode)
-	})
-	return objectOut
-}
-
-function visitProperty(key, value, handleNode) {
-	const handledValue = handleNode(key, value)
-	if (isObject(value)) {
-		return visitObject(handledValue, handleNode)
-	} else if (isArray(handledValue)) {
-		return handledValue.map((v) => visitProperty(key, v, handleNode))
-	} else {
-		return handledValue
-	}
-}
-
-// Returns true if a value is an array, false otherwise
-export function isArray(value) {
-	return value && typeof value === 'object' && value.constructor === Array
-}
-
-// Returns true if a value is an object, false otherwise
-export function isObject(value) {
-	return value && typeof value === 'object' && value.constructor === Object
-}
-
-function traverse(
-	valueIn: unknown,
-	handleNode: (key: unknown, value: unknown) => unknown = (n) => n
-) {
-	return visitProperty(false, valueIn, handleNode)
-}
-
-export default traverse

package/src/components/subnav/helpers/useHeightRef.ts

@@ -1,42 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { useCallback, useState } from 'react'
-
-export default function useHeightRef(): [number, (target: any) => void] {
-	const [height, setHeight] = useState(0)
-
-	const heightRef = useCallback((target) => {
-		let viewport
-		let requestId
-
-		if (target) {
-			viewport = target.ownerDocument.defaultView
-			viewport.addEventListener('resize', requestHeight)
-
-			requestHeight()
-
-			return cleanup
-		}
-
-		function requestHeight() {
-			if (!requestId) requestId = requestAnimationFrame(checkHeight)
-		}
-
-		function checkHeight() {
-			requestId = null
-			setHeight(target.offsetHeight)
-		}
-
-		function cleanup() {
-			cancelAnimationFrame(requestId)
-			viewport.removeEventListener('resize', requestHeight)
-		}
-	}, undefined as any)
-	// Current behavior requires that this callback have a dependency list of
-	// `undefined` even though that's not a valid invocation of useCallback.
-
-	return [height, heightRef]
-}

package/src/components/subnav/helpers/useNavRef.ts

@@ -1,30 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import useHeightRef from './useHeightRef'
-import useOverflowRef from './useOverflowRef'
-import useStuckRef from './useStuckRef'
-
-export default function useNavRef(): [
-	boolean,
-	boolean,
-	number,
-	(target: any) => void
-] {
-	const [isStuck, stuckRef] = useStuckRef()
-	const [hasOverflow, overflowRef] = useOverflowRef()
-	const [height, heightRef] = useHeightRef()
-
-	return [
-		isStuck,
-		hasOverflow,
-		height,
-		function navRef(target) {
-			if (typeof stuckRef === 'function') stuckRef(target)
-			if (typeof overflowRef === 'function') overflowRef(target)
-			if (typeof heightRef === 'function') heightRef(target)
-		},
-	]
-}

package/src/components/subnav/helpers/useOverflowRef.ts

@@ -1,85 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { useCallback, useState } from 'react'
-
-const MutationObserver =
-	(typeof window !== 'undefined' && window.MutationObserver) || null
-const mutationOpts = { attributes: true, childList: true, subtree: true }
-
-/*
-
-Overflow is determined by whether the width of a target element’s content is
-greater than the width of its layout.
-
-Overflow is checked on viewport resize and on a target element’s DOM mutation.
-Both are throttled by animation frame requests.
-
-MutationObserver Compatibility (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver):
-
-- Chrome 26+
-- Edge 12+
-- Firefox 14+
-- Internet Explorer 11+
-- Safari 17+
-
-*/
-
-export default function useOverflowRef(): [boolean, (target: any) => void] {
-	const [[hasOverflow, currentScrollWidth], setState] = useState([false, 0])
-
-	const overflowRef = useCallback((target) => {
-		let viewport
-		let requestId
-		let mutationObserver
-
-		if (target) {
-			viewport = target.ownerDocument.defaultView
-
-			viewport.addEventListener('resize', requestOverflow)
-
-			if (MutationObserver) {
-				mutationObserver = new MutationObserver(requestOverflow)
-
-				mutationObserver.observe(target, mutationOpts)
-			}
-
-			requestOverflow()
-
-			return cleanup
-		}
-
-		function requestOverflow() {
-			if (!requestId) requestId = requestAnimationFrame(checkOverflow)
-		}
-
-		function checkOverflow() {
-			requestId = null
-
-			const newScrollWidth = target.scrollWidth
-			const newOffsetWidth = target.offsetWidth
-			const newHasOverflow =
-				(currentScrollWidth || newScrollWidth) > newOffsetWidth
-
-			if (hasOverflow !== newHasOverflow) {
-				cleanup()
-
-				setState([newHasOverflow, newScrollWidth])
-			}
-		}
-
-		function cleanup() {
-			cancelAnimationFrame(requestId)
-
-			viewport.removeEventListener('resize', requestOverflow)
-
-			if (MutationObserver) mutationObserver.disconnect()
-		}
-	}, undefined as any)
-	// Current behavior requires that this callback have a dependency list of
-	// `undefined` even though that's not a valid invocation of useCallback.
-
-	return [hasOverflow, overflowRef]
-}

package/src/components/subnav/helpers/useStuckRef.ts

@@ -1,51 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { useCallback, useState } from 'react'
-
-const IntersectionObserver =
-	(typeof window !== 'undefined' && window.IntersectionObserver) || null
-const intersectionOpts = { threshold: [1] }
-
-/*
-
-Stuck-ness is determined by whether a sticky target element has intersected the
-top boundary of its viewport.
-
-Stuck-ness is checked on intersection observation.
-
-IntersectionObserver Compatibility (https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver#Browser_compatibility):
-
-- Chrome 51+
-- Edge 15+
-- Firefox 55+
-- Safari 12.1+
-
-Internet Explorer 11 gracefully skips over this functionality, as it does not
-support `IntersectionObserver` or CSS `position: sticky`.
-
-*/
-
-export default function useStuckRef(): [boolean, (target: any) => void] {
-	const [isStuck, setStuck] = useState(false)
-
-	const stuckRef = useCallback((target) => {
-		if (target && IntersectionObserver) {
-			const intersectionObserver = new IntersectionObserver(([entry]) => {
-				const nowIsStuck = entry.intersectionRatio < 1
-
-				if (isStuck !== nowIsStuck) setStuck(nowIsStuck)
-			}, intersectionOpts)
-
-			intersectionObserver.observe(target)
-
-			return intersectionObserver.disconnect.bind(intersectionObserver)
-		}
-	}, undefined as any)
-	// Current behavior requires that this callback have a dependency list of
-	// `undefined` even though that's not a valid invocation of useCallback.
-
-	return [isStuck, stuckRef]
-}

package/src/components/subnav/index.tsx

@@ -1,199 +0,0 @@
-'use client'
-
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-import { useState } from 'react'
-import classNames from 'classnames'
-import useProductMeta, { Products } from '@hashicorp/platform-product-meta'
-import { THEMES } from './subnav-consts'
-import useNavRef from './helpers/useNavRef'
-
-import MenuItemsOverflow from './partials/MenuItemsOverflow'
-import TitleLink from './partials/TitleLink'
-import MenuItemsDefault from './partials/MenuItemsDefault'
-import CtaLinks, { type CtaLinkProps } from './partials/CtaLinks'
-import traverse, { isObject } from './helpers/traverse'
-import { areBasePathsMatching } from './helpers/areBasePathsMatching'
-import * as NavigationMenu from '@radix-ui/react-navigation-menu'
-import themeStyles from './theme.module.css'
-import s from './style.module.css'
-
-const productAllowList = {
-	consul: 'consul',
-	hcp: 'hcp',
-	nomad: 'nomad',
-	packer: 'packer',
-	terraform: 'terraform',
-	tfc: 'terraform',
-	vagrant: 'vagrant',
-	vault: 'vault',
-	boundary: 'boundary',
-	waypoint: 'waypoint',
-}
-
-type SubnavLink = {
-	text: string
-	url: string
-	_isActiveUrl?: boolean
-}
-
-type SubnavDropdown = {
-	text: string
-	submenu: Array<SubnavLink>
-}
-
-type MenuItem = SubnavLink | SubnavDropdown | 'divider'
-
-export interface SubnavInnerProps {
-	hasOverflow?: boolean
-	titleLink: { text: string; url: string }
-	product?: Products
-	ctaLinks?: CtaLinkProps
-	hideGithubStars?: boolean
-	menuItems: Array<MenuItem>
-	constrainWidth?: boolean
-	currentPath: string
-	matchOnBasePath?: boolean
-	theme?: (typeof THEMES)[number]
-	menuText?: string
-	activatePanel: (panel: string) => void
-}
-
-function SubnavInner({
-	hasOverflow,
-	titleLink,
-	product,
-	ctaLinks = [],
-	hideGithubStars,
-	menuItems,
-	constrainWidth,
-	currentPath,
-	matchOnBasePath = false,
-	theme = 'light',
-	menuText = 'Menu',
-	activatePanel,
-}: SubnavInnerProps) {
-	// Add _isActiveUrl to menuItems so we can highlight them appropriately
-	const menuItemsWithActive = traverse(menuItems, (_key, value: any) => {
-		const hasUrl = isObject(value) && value.url
-		if (hasUrl) {
-			value._isActiveUrl = matchOnBasePath
-				? areBasePathsMatching(value.url, currentPath)
-				: value.url === currentPath
-		}
-		return value
-	})
-
-	const { themeClass } = useProductMeta(product)
-
-	/**
-	 * Note on constrainWidth & g-grid-container
-	 *
-	 * TEMPORARY: this is a temporary patch
-	 * to constrain the width of the subnav.
-	 * We want to settle on fully consistent subnav
-	 * max-width and alignment behavior at some point
-	 * Related Asana task:
-	 * https://app.asana.com/0/1126477231080283/1162972875950505/f
-	 */
-	return (
-		<div className={s.subnavInnerRoot}>
-			<div
-				className={classNames(s.subnavInner, themeClass, {
-					'g-grid-container': constrainWidth,
-					[s.notConstrained]: !constrainWidth,
-					[s.hasOverflow]: hasOverflow,
-				})}
-				data-overflow-target
-			>
-				<NavigationMenu.Link asChild>
-					<TitleLink
-						text={titleLink.text}
-						url={titleLink.url}
-						product={product}
-						theme={theme}
-					/>
-				</NavigationMenu.Link>
-				{!hasOverflow && (
-					<div className={s.subNavRight}>
-						<MenuItemsDefault
-							menuItems={menuItemsWithActive}
-							activatePanel={activatePanel}
-						/>
-						{ctaLinks?.length > 0 && (
-							<CtaLinks
-								links={ctaLinks}
-								product={product}
-								hideGithubStars={hideGithubStars}
-							/>
-						)}
-					</div>
-				)}
-				{hasOverflow && (
-					<MenuItemsOverflow
-						menuItems={menuItemsWithActive}
-						ctaLinks={ctaLinks}
-						hideGithubStars={hideGithubStars}
-						product={product}
-						menuText={menuText}
-						constrainWidth={constrainWidth}
-						activatePanel={activatePanel}
-					/>
-				)}
-			</div>
-		</div>
-	)
-}
-
-export interface SubnavProps extends Omit<SubnavInnerProps, 'activatePanel'> {
-	className?: string
-}
-
-function Subnav({ className, theme = 'light', ...restProps }: SubnavProps) {
-	const [activePanel, setActivePanel] = useState('')
-	const [isSticky, hasOverflow, height, wrapperRef] = useNavRef()
-	// Set the brand theme automatically based on the nav's title
-	const product =
-		(restProps.product &&
-			restProps.product in productAllowList &&
-			productAllowList[restProps.product]) ||
-		'hashicorp'
-
-	const activatePanel = (panel) => {
-		setActivePanel(panel)
-	}
-
-	return (
-		<>
-			{/**
-			 * Injecting a :root css var for subnav-height so the `scroll-margin-top`
-			 * property on all page anchors can be dynamic based on the height of
-			 * the subnav.
-			 */}
-			<style>{`:root{--subnav-height:${height}px}`}</style>
-			<NavigationMenu.Root
-				ref={wrapperRef}
-				className={classNames(s.root, themeStyles[theme], className, {
-					[s.isSticky]: isSticky,
-					[s.hasOverflow]: hasOverflow,
-				})}
-				aria-label={`${product} website navigation`}
-				onValueChange={activatePanel}
-				value={activePanel}
-				delayDuration={0}
-			>
-				<SubnavInner
-					{...restProps}
-					product={product}
-					hasOverflow={hasOverflow}
-					theme={theme}
-					activatePanel={activatePanel}
-				/>
-			</NavigationMenu.Root>
-		</>
-	)
-}
-
-export default Subnav