@hashicorp/react-components 0.0.0-nightly.d1a8734 → 0.0.0-nightly.e6fe953

package/src/lib/parse-url/index.test.ts

@@ -0,0 +1,69 @@
+import { parseUrl, hasHashiCorpDestination } from '.'
+
+describe('parseUrl', () => {
+	it('detects hashicorp.com URLs as internal', () => {
+		const url = parseUrl('https://hashicorp.com/example')
+		expect(url.href).toBe('/example')
+		expect(url.linkType).toBe('inbound')
+	})
+
+	it('detects www.hashicorp.com URLs as internal', () => {
+		const url = parseUrl('https://hashicorp.com/foo')
+		expect(url.href).toBe('/foo')
+		expect(url.linkType).toBe('inbound')
+	})
+
+	it('detects URLs not containing hashicorp.com as external', () => {
+		const externalUrl = 'https://google.com/example'
+		const url = parseUrl(externalUrl)
+		expect(url.href).toBe(externalUrl)
+		expect(url.linkType).toBe('outbound')
+	})
+
+	it('detects relative URLs as internal', () => {
+		const relativeUrl = '/resources'
+		const url = parseUrl(relativeUrl)
+		expect(url.href).toBe(relativeUrl)
+		expect(url.linkType).toBe('inbound')
+	})
+
+	it('leaves URL search params intact', () => {
+		const url = parseUrl(
+			'https://hashicorp.com/resources?type=case-study&products=terraform'
+		)
+		expect(url.href).toBe('/resources?type=case-study&products=terraform')
+	})
+
+	it('leaves URL hash intact', () => {
+		const url = parseUrl('https://hashicorp.com/about#leadership')
+		expect(url.href).toBe('/about#leadership')
+	})
+
+	it('leaves HashiCorp subdomain URLs intact', () => {
+		const url = parseUrl('https://developer.hashicorp.com/terraform')
+		expect(url.href).toBe('https://developer.hashicorp.com/terraform')
+	})
+})
+
+describe('hasHashiCorpDestination', () => {
+	it('returns true for supported hashicorp domains', () => {
+		const isHashiCorpDestination = hasHashiCorpDestination(
+			'https://portal.cloud.hashicorp.com/foo'
+		)
+		expect(isHashiCorpDestination).toBe(true)
+	})
+	it('returns false for external domains', () => {
+		const isHashiCorpDestination = hasHashiCorpDestination(
+			'https://foo.com/bar'
+		)
+		expect(isHashiCorpDestination).toBe(false)
+	})
+	it('returns true for relative links', () => {
+		const isHashiCorpDestination = hasHashiCorpDestination('/bar')
+		expect(isHashiCorpDestination).toBe(true)
+	})
+	it('returns true for hashes', () => {
+		const isHashiCorpDestination = hasHashiCorpDestination('#someHash')
+		expect(isHashiCorpDestination).toBe(true)
+	})
+})

package/src/lib/parse-url/index.ts

@@ -0,0 +1,98 @@
+export const hashicorpDestinations: string[] = [
+	'app.terraform.io',
+	'boundaryproject.io',
+	'cloud.hashicorp.com',
+	'consul.io',
+	'developer.hashicorp.com',
+	'hashicorp.com',
+	'nomadproject.io',
+	'packer.io',
+	'portal.cloud.hashicorp.com',
+	'registry.terraform.io',
+	'terraform.io',
+	'vagrantup.com',
+	'vaultproject.io',
+	'waypointproject.io',
+] as const
+
+const containsHashiCorpDestination = (str: string): boolean =>
+	hashicorpDestinations.some(function (destination) {
+		return str.indexOf(destination) >= 0
+	})
+
+/**
+ * This function determines if a `url` is a HashiCorp link (relative URLs, hashes,
+ * or a url with a HashiCorp domain) or a  non-HashiCorp link.
+ *
+ * @param {string | undefined} url - The URL to be parsed. It may be a relative URL, an anchor, or a full external/internal URL.
+ *
+ * @returns {{ linkType: 'inbound' | 'outbound', href: string }}
+ *   An object with two properties:
+ *     - `linkType`: Indicates whether the URL is 'inbound' or 'outbound'. Can be used to conditionally
+ * 		     render the value of the target attribute.
+ *     - `href`: The parsed href (may include pathname, search, and hash for internal URLs).
+ *
+ * @throws {Error} Throws an error if the URL is undefined or invalid.
+ */
+export function parseUrl(url: string | undefined): {
+	linkType: 'inbound' | 'outbound' | ''
+	href: string
+} {
+	if (!url) {
+		console.log('No url to parse, returning empty string')
+		return { linkType: '', href: '' }
+	}
+
+	if (isRelative(url) || isAnchor(url)) {
+		return { linkType: 'inbound', href: url }
+	}
+
+	if (isInternal(url)) {
+		try {
+			const { pathname, search, hash } = new URL(url)
+			const href = pathname + search + hash
+			return { linkType: 'inbound', href }
+		} catch (error) {
+			console.log(`Invalid href: ${url}`)
+			return { linkType: '', href: '' }
+		}
+	}
+
+	return { linkType: 'outbound', href: url }
+}
+
+const isRelative = (url: string) => url.startsWith('/')
+const isAnchor = (url: string) => url.startsWith('#')
+
+/**
+ * Determines whether the provided url uses hashicorp.com or www.hashicorp.com as the hostname.
+ *
+ * @param {string} url - The URL to check.
+ * @returns {boolean} - Returns true if the link uses a HashiCorp domain, otherwise false.
+ */
+
+export const isInternal = (url: string): boolean => {
+	const hostname = new URL(url).hostname
+	return hostname === 'hashicorp.com' || hostname === 'www.hashicorp.com'
+}
+
+/**
+ * Determines whether the provided url uses a HashiCorp hostname. This is used in several
+ * components to open a new tab for non-HashiCorp links.
+ *
+ * @param {string} url - The URL to check.
+ * @returns {boolean} - Returns true if the link uses a HashiCorp domain, otherwise false.
+ */
+
+export const hasHashiCorpDestination = (url: string): boolean => {
+	// Fast return in case a relative URL or anchor is passed in
+	if (isRelative(url) || isAnchor(url)) return true
+	try {
+		const hostname = new URL(url).hostname
+		const isHashiCorpDestination = containsHashiCorpDestination(hostname)
+		return isHashiCorpDestination
+	} catch (e) {
+		console.error('Error: `url` is not a valid URL', e)
+		return false
+	}
+}

package/src/lib/send-posthog-event/index.ts

@@ -0,0 +1,22 @@
+import posthog from 'posthog-js'
+
+/**
+ * A custom hook to send a custom event to PostHog.
+ *
+ * @param {string} eventName - The name of the custom event to be tracked in PostHog.
+ * @param {Record<string, any>} properties - A key-value object containing properties associated with the event.
+ *
+ * @example
+ * const MyComponent = () => {
+ *   sendPosthogEvent('button_click', { buttonId: 'submit', action: 'clicked' });
+ *   return <button id="submit">Submit</button>;
+ * };
+ */
+const sendPosthogEvent = (
+	eventName: string,
+	properties: Record<string, any>
+) => {
+	posthog.capture(eventName, properties)
+}
+
+export default sendPosthogEvent

package/src/lib/supported-locales/index.ts

@@ -0,0 +1 @@
+export const allSupportedLocales = ['en', 'de', 'es', 'fr', 'ja', 'ko', 'pt']

package/src/lib/track-nav-click-event/index.ts

@@ -0,0 +1,22 @@
+import sendPosthogEvent from '../send-posthog-event'
+
+/**
+ * Pushes a 'Nav link click' custom event to PostHog.
+ * A wrapper around the PostHog custom event method.
+ *
+ * @param {string} name - The name of the nav link
+ * @param {string} href - The href for the nav link
+ * @param {string} [section] - The name of the section of the nav. Top-level links do not have a section.
+ */
+
+export const trackNavClickEvent = (
+	name: string,
+	href: string,
+	section: string
+) => {
+	sendPosthogEvent('Nav link click', {
+		name,
+		href,
+		section,
+	})
+}

package/src/lib/v/index.ts

@@ -0,0 +1,10 @@
+import { vercelStegaSplit } from '@vercel/stega'
+
+/**
+ * Takes in a Vercel Visual Editing string and returns the string without
+ * hidden data.
+ *
+ */
+export const vercelSplit = <VercelString>(
+	original: VercelString
+): VercelString => vercelStegaSplit(original as string).cleaned as VercelString

package/src/components/actions/index.tsx

@@ -1,107 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import classNames from 'classnames'
-import Button from '@hashicorp/react-design-system-components/src/components/button'
-import StandaloneLink from '@hashicorp/react-design-system-components/src/components/standalone-link'
-import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16'
-import { IconArrowRight24 } from '@hashicorp/flight-icons/svg-react/arrow-right-24'
-import type { ActionsProps } from './types'
-import s from './style.module.css'
-import { ComponentProps } from 'react'
-
-const hasButton = (item) => item.type === 'button' || item.type === undefined
-const hasStandaloneLink = (item) => item.type === 'standalone-link'
-
-export default function Actions({
-	appearance = 'light',
-	layout = 'inline',
-	alignment = 'left',
-	theme = 'primary',
-	size = 'large',
-	ctas,
-}: ActionsProps) {
-	if (ctas.length < 1 || ctas.length > 2) {
-		throw new Error(
-			`Actions expects at least 1 cta, no more than 2. You provided ${ctas.length}.`
-		)
-	}
-	let mixed = false
-	// If CTAs contain a button and standalone link
-	// increase the column gap
-	if (ctas.some(hasButton) && ctas.some(hasStandaloneLink)) {
-		mixed = true
-	}
-	return (
-		<div
-			className={classNames(
-				s.actions,
-				s[layout],
-				s[alignment],
-				mixed && s.mixed
-			)}
-			data-testid="actions"
-		>
-			{ctas.map((cta, index) => {
-				// The first CTA and second CTA should always
-				// have the `primary` and `secondary` variations respectively.
-
-				const standaloneLinkVariant: ComponentProps<
-					typeof StandaloneLink
-				>['color'] =
-					index === 0
-						? 'primary'
-						: appearance === 'dark'
-						? 'secondary-inverted'
-						: 'secondary'
-				const isStandaloneLink = cta?.type === 'standalone-link'
-
-				if (isStandaloneLink) {
-					return (
-						<StandaloneLink
-							// eslint-disable-next-line react/no-array-index-key
-							key={index}
-							text={cta.title}
-							icon={
-								size === 'large' ? (
-									<IconArrowRight24
-										width="100%"
-										height="100%"
-										style={{ display: 'block' }}
-									/>
-								) : (
-									<IconArrowRight16
-										width="100%"
-										height="100%"
-										style={{ display: 'block' }}
-									/>
-								)
-							}
-							iconPosition="trailing"
-							href={cta.href}
-							color={standaloneLinkVariant}
-							size={size}
-							onClick={cta?.onClick}
-							data-testid={`standaloneLink-${index}`}
-						/>
-					)
-				} else {
-					return (
-						<Button
-							// eslint-disable-next-line react/no-array-index-key
-							key={index}
-							text={cta.title}
-							href={cta.href}
-							onClick={cta.onClick}
-							size={size}
-							color={theme}
-							data-testid={`button-${index}`}
-						/>
-					)
-				}
-			})}
-		</div>
-	)
-}

package/src/components/actions/style.module.css

@@ -1,28 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-.actions {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: 16px 18px;
-
-	&.stacked {
-		flex-direction: column;
-
-		&.left {
-			align-items: flex-start;
-		}
-
-		&.center {
-			align-items: center;
-		}
-	}
-
-	&.mixed {
-		column-gap: 24px;
-		row-gap: 32px;
-	}
-}

package/src/components/actions/types.ts

@@ -1,73 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import type { Products } from '@hashicorp/platform-product-meta'
-
-interface CtaProps {
-	/**
-	 * The text that appears inside the button.
-	 */
-	title: string
-	/**
-	 * Where the button links to when clicked.
-	 */
-	href: string
-	/**
-	 * A function that will be called when the button is clicked.
-	 */
-	onClick?: () => void
-}
-
-interface ButtonCtaProps extends CtaProps {
-	type?: 'button'
-}
-
-interface StandaloneLinkCtaProps extends CtaProps {
-	type: 'standalone-link'
-}
-
-export interface ActionsProps {
-	/**
-	 * Display actions on light or dark background.
-	 */
-	appearance?: 'light' | 'dark'
-	/**
-	 * Display buttons inline or stacked by default.
-	 */
-	layout?: 'inline' | 'stacked'
-	/**
-	 * Display buttons inline or stacked by default.
-	 */
-	alignment?: 'left' | 'center'
-	/**
-	 * Render primary button with product color.
-	 */
-	theme?:
-		| 'primary'
-		| 'secondary'
-		| 'secondary-high-contrast'
-		| 'tertiary'
-		| 'critical'
-		| Exclude<Products, 'hashicorp'>
-	/**
-	 * Determines CTA button sizing.
-	 */
-	size?: 'small' | 'medium' | 'large'
-	/**
-	 * Array of CTAs. Minimum of one, max of two.
-	 * When both a Button and StandaloneLink are
-	 * rendered, they can only render in said order.
-	 * This is intentional and ensures adherence to a design
-	 * requirement of rendering the Button first when data
-	 * for both a Button and a StandaloneLink are provided.
-	 * @see CtaProps
-	 */
-	ctas:
-		| [ButtonCtaProps]
-		| [StandaloneLinkCtaProps]
-		| [ButtonCtaProps, ButtonCtaProps]
-		| [StandaloneLinkCtaProps, StandaloneLinkCtaProps]
-		| [ButtonCtaProps, StandaloneLinkCtaProps]
-}

package/src/components/call-to-action/index.tsx

@@ -1,205 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import type { ComponentProps, ReactNode } from 'react'
-import Button from '@hashicorp/react-design-system-components/src/components/button'
-import ButtonSet from '@hashicorp/react-design-system-components/src/components/button-set'
-import StandaloneLink from '@hashicorp/react-design-system-components/src/components/standalone-link'
-import { IconArrowRight24 } from '@hashicorp/flight-icons/svg-react/arrow-right-24'
-import { IconExternalLink24 } from '@hashicorp/flight-icons/svg-react/external-link-24'
-import { IconDownload24 } from '@hashicorp/flight-icons/svg-react/download-24'
-import { IconCornerRightDown24 } from '@hashicorp/flight-icons/svg-react/corner-right-down-24'
-import type { Products } from '@hashicorp/platform-product-meta'
-import classNames from 'classnames'
-import variantCentered from './styles/variant-centered.module.css'
-import variantCompact from './styles/variant-compact.module.css'
-import variantCompactGrid from './styles/variant-compact-grid.module.css'
-import variantLinks from './styles/variant-links.module.css'
-
-const stylesDict = {
-	centered: variantCentered,
-	compact: variantCompact,
-	compactGrid: variantCompactGrid,
-	links: variantLinks,
-}
-
-interface CallToActionProps {
-	heading?: string
-	content?: ReactNode
-	links?: {
-		type?: 'inbound' | 'outbound' | 'anchor' | 'download'
-		text: string
-		url: string
-	}[]
-	variant?: 'centered' | 'compact' | 'compactGrid' | 'links'
-	product?: 'primary' | 'secondary' | Exclude<Products, 'hashicorp'>
-	theme?: 'light' | 'gray' | 'dark' | 'brand'
-	className?: string
-}
-
-function determineIconFromLinktype(
-	linkType: 'inbound' | 'outbound' | 'anchor' | 'download'
-): ReactNode {
-	switch (linkType) {
-		case 'inbound':
-			return (
-				<IconArrowRight24
-					style={{ display: 'block' }}
-					width="100%"
-					height="100%"
-				/>
-			)
-		case 'outbound':
-			return (
-				<IconExternalLink24
-					style={{ display: 'block' }}
-					width="100%"
-					height="100%"
-				/>
-			)
-		case 'download':
-			return (
-				<IconDownload24
-					style={{ display: 'block' }}
-					width="100%"
-					height="100%"
-				/>
-			)
-		case 'anchor':
-			return (
-				<IconCornerRightDown24
-					style={{ display: 'block' }}
-					width="100%"
-					height="100%"
-				/>
-			)
-		default:
-			throw new Error(`Unsupported linkType: ${linkType}`)
-	}
-}
-
-function CallToAction({
-	heading,
-	content,
-	links,
-	variant = 'centered',
-	product = 'primary',
-	theme = 'light',
-	className,
-}: CallToActionProps) {
-	const s = stylesDict[variant]
-	if (!heading && !content) {
-		throw new Error('<CallToAction /> requires either heading or content')
-	}
-	const hasLinks = links && links.length > 0
-	if (hasLinks && links.filter((l) => !l.text || !l.url).length > 0) {
-		throw new Error(
-			'<CallToAction /> `links` must have both a "text" and a "url" prop'
-		)
-	}
-	return (
-		<div className={classNames(s.root, s[`theme-${theme}`], className)}>
-			<div className={s.container}>
-				{heading && (
-					<h2 className={s.heading} data-testid="heading">
-						{heading}
-					</h2>
-				)}
-				<div className={s.contentAndLinks}>
-					{content && (
-						<div
-							className={classNames(s.content, { [s.hasHeading]: heading })}
-							data-testid="content"
-						>
-							{content}
-						</div>
-					)}
-					{links && (
-						<ButtonSet className={s.links} data-testid="links">
-							{links.map((link, stableIdx) => {
-								let color: ComponentProps<typeof Button>['color'] =
-									variant === 'links'
-										? 'tertiary'
-										: stableIdx === 0
-										? product
-										: 'secondary'
-
-								if (color === 'tertiary') {
-									return (
-										<StandaloneLink
-											key={stableIdx}
-											color="secondary"
-											text={link.text}
-											href={link.url}
-											size="large"
-											icon={
-												<IconArrowRight24
-													style={{ display: 'block' }}
-													width="100%"
-													height="100%"
-												/>
-											}
-											iconPosition="trailing"
-										/>
-									)
-								}
-
-								// @ts-expect-error - TypeScript doesn't allow 'hashicorp', but
-								// Dato might still pass it, so rewrite it to 'primary'.
-								if (color === 'hashicorp') {
-									color = 'primary'
-								}
-
-								if (theme === 'brand' && color === 'primary') {
-									// `primary` doesn't work on brand, so
-									// update it to `secondary`
-									color = 'secondary'
-								} else if (theme === 'brand' && color === 'secondary') {
-									return (
-										<StandaloneLink
-											key={stableIdx}
-											color="secondary-inverted"
-											text={link.text}
-											href={link.url}
-											size="large"
-											icon={
-												<IconArrowRight24
-													style={{ display: 'block' }}
-													width="100%"
-													height="100%"
-												/>
-											}
-											iconPosition="trailing"
-										/>
-									)
-								}
-
-								return (
-									<Button
-										// eslint-disable-next-line react/no-array-index-key
-										key={stableIdx}
-										// className={s.button}
-										color={color}
-										text={link.text}
-										href={link.url}
-										size="large"
-										icon={
-											link.type
-												? determineIconFromLinktype(link.type)
-												: undefined
-										}
-										iconPosition="trailing"
-									/>
-								)
-							})}
-						</ButtonSet>
-					)}
-				</div>
-			</div>
-		</div>
-	)
-}
-
-export default CallToAction