@hashicorp/react-components 0.0.0-nightly.2c86693 → 0.0.0-nightly.2e0daaf

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hashicorp/react-components",
-	"version": "0.0.0-nightly.2c86693",
+	"version": "0.0.0-nightly.2e0daaf",
 	"main": "src/index.ts",
 	"scripts": {
 		"lint": "next-hashicorp lint",

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

@@ -13,6 +13,7 @@ export interface ResourceCardProps {
 	link: string
 	productBadges?: CardProps['productBadges']
 	thumbnail: ThumbnailProps
+	isExternal?: CardProps['isExternal']
 }
 
 export function ResourceCard({
@@ -22,6 +23,7 @@ export function ResourceCard({
 	link,
 	productBadges,
 	thumbnail,
+	isExternal,
 }: ResourceCardProps) {
 	const meta: string[] = date ? [date, category] : [category]
 
@@ -32,6 +34,7 @@ export function ResourceCard({
 			meta={meta}
 			productBadges={productBadges}
 			thumbnail={thumbnail}
+			isExternal={isExternal}
 		/>
 	)
 }

package/src/components/nav-panel/components/link-list/index.tsx

@@ -6,6 +6,7 @@ import * as NavigationMenu from '@radix-ui/react-navigation-menu'
 import s from './style.module.css'
 
 export interface LinkListProps {
+	locale?: string
 	links: {
 		title: string
 		url: string
@@ -37,7 +38,21 @@ const GRADIENT_VALUE_MAP = new Map([
 	],
 ])
 
-export default function LinkList({ links, linkClickHandler }: LinkListProps) {
+function getLocalizedHref(url: string, locale?: string): string {
+	const parsedHref = parseUrl(url).href
+
+	if (parsedHref.startsWith('/') && locale) {
+		return `/${locale}${parsedHref}`
+	}
+
+	return parsedHref
+}
+
+export default function LinkList({
+	locale,
+	links,
+	linkClickHandler,
+}: LinkListProps) {
 	return (
 		<ul className={s.linkList}>
 			{links.map((link) => {
@@ -53,8 +68,9 @@ export default function LinkList({ links, linkClickHandler }: LinkListProps) {
 					<li key={link.title}>
 						<NavigationMenu.Link asChild>
 							<Link
+								hrefLang={locale ? locale : undefined}
 								className={s.link}
-								href={parseUrl(link.url).href}
+								href={getLocalizedHref(link.url, locale)}
 								onClickCapture={() => {
 									linkClickHandler && linkClickHandler(link.title, link.url)
 								}}

package/src/components/nav-panel/standard-panel/index.tsx

@@ -12,12 +12,14 @@ interface StandardPanelProps {
 	navData: NavItem[]
 	promo?: PromoProps
 	sectionName?: string
+	locale?: any
 }
 
 const StandardPanel = ({
 	navData,
 	promo,
 	sectionName = '',
+	locale,
 }: StandardPanelProps) => {
 	return (
 		<NavPanel.Root>
@@ -26,6 +28,7 @@ const StandardPanel = ({
 					return (
 						<NavPanel.Column key={stableIdx}>
 							<LinkList
+								locale={locale}
 								links={navItems}
 								linkClickHandler={(text, href) => {
 									trackNavClickEvent(text, href, sectionName)

package/src/components/subnav/index.tsx

@@ -115,6 +115,7 @@ function SubnavInner({
 						theme={theme}
 					/>
 				</NavigationMenu.Link>
+
 				{!hasOverflow && (
 					<div className={s.subNavRight}>
 						<MenuItemsDefault

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

@@ -44,7 +44,7 @@
 
 .subnavInner {
 	display: grid;
-	grid-template-columns: minmax(max-content, 1fr) min-content;
+	grid-template-columns: max-content min-content;
 	align-items: center;
 	justify-content: space-between;
 	min-height: 62px;

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

@@ -1,4 +1,4 @@
-import { parseUrl } from '.'
+import { parseUrl, hasHashiCorpDestination } from '.'
 
 describe('parseUrl', () => {
 	it('detects hashicorp.com URLs as internal', () => {
@@ -7,6 +7,12 @@ describe('parseUrl', () => {
 		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)
@@ -38,3 +44,26 @@ describe('parseUrl', () => {
 		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

@@ -1,10 +1,47 @@
+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'
+	linkType: 'inbound' | 'outbound' | ''
 	href: string
 } {
 	if (!url) {
-		console.log('url is required')
-		return { linkType: 'outbound', href: '' }
+		console.log('No url to parse, returning empty string')
+		return { linkType: '', href: '' }
 	}
 
 	if (isRelative(url) || isAnchor(url)) {
@@ -18,17 +55,45 @@ export function parseUrl(url: string | undefined): {
 			return { linkType: 'inbound', href }
 		} catch (error) {
 			console.log(`Invalid href: ${url}`)
-			return { linkType: 'outbound', href: '' }
+			return { linkType: '', href: '' }
 		}
 	}
 
 	return { linkType: 'outbound', href: url }
 }
 
-const isRelative = (url) => url.startsWith('/')
-const isAnchor = (url) => url.startsWith('#')
+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) => {
+export const isInternal = (url: string): boolean => {
 	const hostname = new URL(url).hostname
-	return hostname === 'hashicorp.com'
+	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
+	}
 }