@hashicorp/react-components 1.1.8 → 1.1.11

package/src/components/nav-panel/product-panel/style.module.css

@@ -1,8 +1,31 @@
-@custom-media --dev-dot-viewport (min-width: 1230px);
+@custom-media --dev-dot-viewport (min-width: 924px);
 
 .productPanel {
 	height: 100%;
 
+	/* Temporarily included for devdot compatability
+	   https://app.asana.com/1/90955849329269/project/1209320521286316/task/1210514680913728?focus=true */
+	--mds-spacing-01: 0.25rem;
+	--mds-spacing-02: 0.375rem;
+	--mds-spacing-03: 0.5rem;
+	--mds-spacing-04: 0.75rem;
+	--mds-spacing-05: 1rem;
+	--mds-spacing-06: 1.25rem;
+	--mds-spacing-07: 1.5rem;
+	--mds-spacing-08: 2rem;
+	--mds-spacing-09: 2.5rem;
+	--mds-spacing-10: 3rem;
+	--mds-spacing-11: 3.5rem;
+	--mds-spacing-12: 4rem;
+	--mds-spacing-13: 4.5rem;
+	--mds-spacing-14: 5.5rem;
+	--mds-spacing-15: 6rem;
+	--mds-spacing-16: 8rem;
+	--mds-spacing-17: 8.5rem;
+	--mds-typography-body-200-font-size: 0.875rem;
+	--mds-typography-font-weight-regular: 400;
+	--mds-typography-font-weight-semibold: 600;
+
 	@media (--large) {
 		&.noSide {
 			display: grid;
@@ -26,7 +49,11 @@
 	list-style: none;
 	padding: 0;
 	display: grid;
-	margin: var(--hdsplus-spacing-07) 0 0;
+	margin: var(--mds-spacing-07) 0 0;
+
+	@nest .topPromo & {
+		margin-bottom: var(--mds-spacing-07);
+	}
 
 	@media (--large) {
 		@nest .noSide & {
@@ -48,27 +75,27 @@
 
 	&:first-child {
 		border-bottom: 1px solid var(--token-color-border-primary);
-		margin-bottom: var(--hdsplus-spacing-05);
-		padding-bottom: var(--hdsplus-spacing-05);
+		margin-bottom: var(--mds-spacing-05);
+		padding-bottom: var(--mds-spacing-05);
 	}
 }
 
 .eyebrow {
-	padding-bottom: var(--hdsplus-spacing-04);
+	padding-bottom: var(--mds-spacing-04);
 	color: var(--token-color-foreground-strong);
-	font-weight: var(--font-weight-semi-bold);
+	font-weight: var(--mds-typography-font-weight-semibold);
 
 	@media (--large) {
 		@nest .noSide & {
 			padding-bottom: 0;
-			padding-left: var(--hdsplus-spacing-06);
+			padding-left: var(--mds-spacing-06);
 		}
 	}
 
 	@media (--dev-dot-viewport) {
 		@nest .hasSide & {
 			padding-bottom: 0;
-			padding-left: var(--hdsplus-spacing-06);
+			padding-left: var(--mds-spacing-06);
 		}
 	}
 }
@@ -82,8 +109,7 @@
 
 	@media (--large) {
 		@nest .noSide & {
-			padding: var(--hdsplus-spacing-06) var(--hdsplus-spacing-05)
-				var(--hdsplus-spacing-04);
+			padding: var(--mds-spacing-06) var(--mds-spacing-05) var(--mds-spacing-04);
 			grid-auto-flow: row;
 			grid-template-columns: repeat(2, 300px);
 			grid-template-rows: repeat(2, max-content);
@@ -93,8 +119,7 @@
 
 	@media (--dev-dot-viewport) {
 		@nest .hasSide & {
-			padding: var(--hdsplus-spacing-06) var(--hdsplus-spacing-05)
-				var(--hdsplus-spacing-04);
+			padding: var(--mds-spacing-06) var(--mds-spacing-05) var(--mds-spacing-04);
 			grid-auto-flow: row;
 			grid-template-columns: repeat(2, 300px);
 			grid-template-rows: repeat(2, max-content);
@@ -113,29 +138,29 @@
 
 .productWrapper {
 	display: flex;
-	margin-bottom: var(--hdsplus-spacing-05);
-	gap: var(--hdsplus-spacing-05);
+	margin-bottom: var(--mds-spacing-05);
+	gap: var(--mds-spacing-05);
 
 	@media (--large) {
 		@nest .noSide & {
-			padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-05);
+			padding: var(--mds-spacing-03) var(--mds-spacing-05);
 			margin-bottom: 0;
 
 			&:hover {
 				background-color: var(--token-color-surface-interactive-hover);
-				border-radius: var(--hdsplus-spacing-01);
+				border-radius: var(--mds-spacing-01);
 			}
 		}
 	}
 
 	@media (--dev-dot-viewport) {
 		@nest .hasSide & {
-			padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-05);
+			padding: var(--mds-spacing-03) var(--mds-spacing-05);
 			margin-bottom: 0;
 
 			&:hover {
 				background-color: var(--token-color-surface-interactive-hover);
-				border-radius: var(--hdsplus-spacing-01);
+				border-radius: var(--mds-spacing-01);
 			}
 		}
 	}
@@ -152,8 +177,8 @@
 	@nest .noSide & {
 		& svg {
 			@media (--large) {
-				height: var(--hdsplus-spacing-08);
-				width: var(--hdsplus-spacing-08);
+				height: var(--mds-spacing-08);
+				width: var(--mds-spacing-08);
 			}
 		}
 	}
@@ -161,8 +186,8 @@
 	@nest .hasSide & {
 		& svg {
 			@media (--dev-dot-viewport) {
-				height: var(--hdsplus-spacing-08);
-				width: var(--hdsplus-spacing-08);
+				height: var(--mds-spacing-08);
+				width: var(--mds-spacing-08);
 			}
 		}
 	}
@@ -195,17 +220,29 @@
 	justify-content: space-between;
 	flex-direction: column;
 
+	@nest .topPromo & {
+		justify-content: flex-start;
+	}
+
 	@media (--large) {
 		@nest .noSide & {
-			padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-09)
-				var(--hdsplus-spacing-04);
+			padding: var(--mds-spacing-07) 0 var(--mds-spacing-09)
+				var(--mds-spacing-04);
+		}
+
+		@nest .topPromo & {
+			padding-bottom: var(--mds-spacing-04);
 		}
 	}
 
 	@media (--dev-dot-viewport) {
 		@nest .hasSide & {
-			padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-09)
-				var(--hdsplus-spacing-04);
+			padding: var(--mds-spacing-07) 0 var(--mds-spacing-09)
+				var(--mds-spacing-04);
+		}
+
+		@nest .topPromo & {
+			padding-bottom: var(--mds-spacing-04);
 		}
 	}
 }
@@ -215,10 +252,10 @@
 	background: var(--token-color-surface-faint);
 	display: flex;
 	flex-direction: column;
-	gap: var(--hdsplus-spacing-05);
+	gap: var(--mds-spacing-05);
 	margin: 0;
-	padding: var(--hdsplus-spacing-07) var(--hdsplus-spacing-04)
-		var(--hdsplus-spacing-09) var(--hdsplus-spacing-07);
+	padding: var(--mds-spacing-07) var(--mds-spacing-04) var(--mds-spacing-09)
+		var(--mds-spacing-07);
 }
 
 .sidePanelItems {
@@ -227,24 +264,24 @@
 	padding: 0;
 	display: grid;
 	grid-template-columns: 1fr;
-	gap: var(--hdsplus-spacing-07);
+	gap: var(--mds-spacing-07);
 
 	@media (--dev-dot-viewport) {
-		gap: var(--hdsplus-spacing-05);
+		gap: var(--mds-spacing-05);
 	}
 }
 
 /* Lifted from .productWrapper */
 .sidePanelItem {
 	display: flex;
-	gap: var(--hdsplus-spacing-05);
+	gap: var(--mds-spacing-05);
 
 	@media (--dev-dot-viewport) {
-		padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-05);
+		padding: var(--mds-spacing-03) var(--mds-spacing-05);
 
 		&:hover {
 			background-color: var(--token-color-surface-interactive-hover);
-			border-radius: var(--hdsplus-spacing-01);
+			border-radius: var(--mds-spacing-01);
 		}
 	}
 }
@@ -253,8 +290,8 @@
 packages/react-components/src/components/nav-panel/components/link-list/style.module.css  */
 .iconBackground {
 	background: var(--token-color-foreground-high-contrast);
-	height: var(--hdsplus-spacing-08);
-	width: var(--hdsplus-spacing-08);
+	height: var(--mds-spacing-08);
+	width: var(--mds-spacing-08);
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -301,7 +338,7 @@ packages/react-components/src/components/nav-panel/components/link-list/style.mo
 */
 .hcpVaultSecrets,
 .hcpVaultRadar {
-	padding: var(--hdsplus-spacing-01);
+	padding: var(--mds-spacing-01);
 	border: 2px solid var(--token-color-vault-brand);
 	border-radius: 3px;
 
@@ -313,3 +350,7 @@ packages/react-components/src/components/nav-panel/components/link-list/style.mo
 		fill: inherit;
 	}
 }
+
+.sidePanelText {
+	font-weight: var(--mds-typography-font-weight-semibold);
+}

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/nav-panel/standard-panel/style.module.css

@@ -1,8 +1,8 @@
 .columns {
 	display: flex;
-	gap: var(--hdsplus-spacing-03);
+	gap: var(--mds-spacing-03);
 	flex-direction: column;
-	margin-top: var(--hdsplus-spacing-07);
+	margin-top: var(--mds-spacing-07);
 
 	@media (--large) {
 		flex-direction: row;

package/src/lib/get-localized-link-props/index.test.ts

@@ -0,0 +1,30 @@
+import { getLocalizedLinkProps } from '.'
+
+describe('getLocalizedLinkProps', () => {
+	it('does not format localized homepage', () => {
+		const localizedLinkProps = getLocalizedLinkProps('/en', 'ja')
+		expect(localizedLinkProps.href).toBe('/en')
+		expect(localizedLinkProps.hrefLang).toBe('en')
+	})
+
+	it('does not format localized path hrefs', () => {
+		const localizedLinkProps = getLocalizedLinkProps('/ja/solutions', 'de')
+		expect(localizedLinkProps.href).toBe('/ja/solutions')
+		expect(localizedLinkProps.hrefLang).toBe('ja')
+	})
+
+	it('does format paths that start with a locale string', () => {
+		const localizedLinkProps = getLocalizedLinkProps(
+			'/deconstructing-cloud',
+			'en'
+		)
+		expect(localizedLinkProps.href).toBe('/en/deconstructing-cloud')
+		expect(localizedLinkProps.hrefLang).toBe('en')
+	})
+
+	it('does not format external paths', () => {
+		const localizedLinkProps = getLocalizedLinkProps('https://google.com', 'ja')
+		expect(localizedLinkProps.href).toBe('https://google.com')
+		expect(localizedLinkProps.hrefLang).toBe(undefined)
+	})
+})

package/src/lib/get-localized-link-props/index.ts

@@ -0,0 +1,45 @@
+import { parseUrl } from '../parse-url'
+import { allSupportedLocales } from '../supported-locales'
+
+export const getLocalizedLinkProps = (
+	url: string,
+	locale?: string
+): {
+	href: string
+	hrefLang: string | undefined
+} => {
+	const parsedHref = parseUrl(url).href
+
+	// example: /en
+	const hrefIsLocalizedHomepage = allSupportedLocales.includes(
+		parsedHref.substring(1)
+	)
+
+	// true example: /en/solutions
+	// false example: /entry-point
+	const hrefIsLocalized =
+		allSupportedLocales.includes(parsedHref.substring(1, 3)) &&
+		parsedHref[3] === '/'
+
+	// If the href is already localized:
+	// - do not format the href
+	// - use the locale from the href for the hrefLang
+	if (hrefIsLocalizedHomepage || hrefIsLocalized) {
+		return {
+			href: parsedHref,
+			hrefLang: parsedHref.substring(1, 3),
+		}
+	}
+
+	if (parsedHref.startsWith('/') && locale) {
+		return {
+			href: `/${locale}${parsedHref}`,
+			hrefLang: locale,
+		}
+	}
+
+	return {
+		href: parsedHref,
+		hrefLang: undefined,
+	}
+}

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)
@@ -27,4 +33,37 @@ describe('parseUrl', () => {
 		)
 		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

@@ -1,9 +1,46 @@
+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) {
-		throw new Error('url is required')
+		console.log('No url to parse, returning empty string')
+		return { linkType: '', href: '' }
 	}
 
 	if (isRelative(url) || isAnchor(url)) {
@@ -12,21 +49,50 @@ export function parseUrl(url: string | undefined): {
 
 	if (isInternal(url)) {
 		try {
-			const { pathname, search } = new URL(url)
-			const href = pathname + search
+			const { pathname, search, hash } = new URL(url)
+			const href = pathname + search + hash
 			return { linkType: 'inbound', href }
 		} catch (error) {
-			throw new Error(`Invalid href: ${url}`)
+			console.log(`Invalid href: ${url}`)
+			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('#')
 
-export const isInternal = (url) => {
+/**
+ * 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'
+	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

@@ -1,8 +1,8 @@
-import va from '@vercel/analytics'
+import sendPosthogEvent from '../send-posthog-event'
 
 /**
- * Pushes a 'Nav link click' custom event to Vercel Analytics.
- * A wrapper around the Vercel Analytics track method.
+ * 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
@@ -14,7 +14,7 @@ export const trackNavClickEvent = (
 	href: string,
 	section: string
 ) => {
-	va.track('Nav link click', {
+	sendPosthogEvent('Nav link click', {
 		name,
 		href,
 		section,

package/src/lib/v/index.ts

@@ -3,9 +3,8 @@ import { vercelStegaSplit } from '@vercel/stega'
 /**
  * Takes in a Vercel Visual Editing string and returns the string without
  * hidden data.
+ *
  */
-export function v<VercelVEString extends string>(
-	s: VercelVEString
-): VercelVEString {
-	return vercelStegaSplit(s).cleaned as VercelVEString
-}
+export const vercelSplit = <VercelString>(
+	original: VercelString
+): VercelString => vercelStegaSplit(original as string).cleaned as VercelString