@hashicorp/react-components 1.1.11 → 1.2.0

package/README.md

@@ -1,3 +1,3 @@
 # `@hashicorp/react-components`
 
-This package contains React components that are built using HDS guidelines that don't align with existing HDS components.
+This package contains React components that are built using HDS guidelines that don't align with existing HDS components.

package/package.json

@@ -1,26 +1,25 @@
 {
 	"name": "@hashicorp/react-components",
-	"version": "1.1.11",
+	"version": "1.2.0",
 	"main": "src/index.ts",
 	"scripts": {
-		"lint": "next-hashicorp lint",
+		"lint": "npm run lint:js",
+		"lint:js": "eslint . --quiet",
 		"test": "vitest run",
 		"test:watch": "vitest watch"
 	},
 	"dependencies": {
 		"@hashicorp/flight-icons": "^3.7.0",
-		"@hashicorp/platform-product-meta": "^0.1.1",
-		"@hashicorp/platform-util": "^0.2.0",
+		"@web/product-meta": "^0.1.1",
 		"@hashicorp/web-mktg-logos": "*",
-		"@radix-ui/react-navigation-menu": "^1.2.0",
-		"@radix-ui/react-visually-hidden": "^1.1.0",
+		"@radix-ui/react-navigation-menu": "^1.2.14",
+		"@radix-ui/react-visually-hidden": "^1.2.4",
 		"@vercel/fetch": "^7.0.0",
 		"@vercel/stega": "^0.1.2",
-		"posthog-js": "^1.195.0",
-		"classnames": "^2.3.2"
+		"classnames": "^2.3.2",
+		"posthog-js": "^1.195.0"
 	},
 	"devDependencies": {
-		"@hashicorp/platform-cli": "^2.8.0",
 		"@hashicorp/platform-types": "^0.4.0",
 		"@testing-library/jest-dom": "^6.4.2",
 		"@vitejs/plugin-react": "^4.2.1",

package/postcss.config.js

@@ -13,7 +13,7 @@ function standardSyntax(plugins) {
 	return _plugins
 }
 
-const baseConfig = require('@hashicorp/platform-postcss-config')
+const baseConfig = require('@hashicorp/mds-postcss-config')
 
 module.exports = {
 	...baseConfig,

package/src/components/nav-panel/components/flight-icon/index.tsx

@@ -18,6 +18,7 @@ interface Props extends SVGProps<SVGSVGElement> {
 	color?: string
 
 	className?: string
+	size?: 16 | 24
 }
 
 // When an SVG file is imported in Next.js, it is an object with a `src`
@@ -30,6 +31,7 @@ export default function FlightIcon({
 	name,
 	color = 'currentColor',
 	className,
+	size = 16,
 	...rest
 }: Props) {
 	const iconId = useId()
@@ -40,8 +42,8 @@ export default function FlightIcon({
 			aria-hidden="true"
 			fill={color}
 			id={iconId}
-			width={16}
-			height={16}
+			width={size}
+			height={size}
 			viewBox="0 0 16 16"
 			xmlns="http://www.w3.org/2000/svg"
 		>

package/src/components/nav-panel/components/flight-icon/style.module.css

@@ -1,3 +1,3 @@
 .flight-icon {
 	display: inline-block;
-}
+}

package/src/components/nav-panel/components/link/cloud-fill.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.93179 2.37285C4.98771 1.98353 6.13197 1.89703 7.23466 2.12309C8.33737 2.34915 9.35467 2.87879 10.1708 3.65225C10.844 4.29015 11.358 5.07282 11.6757 5.93748H11.9554C13.0271 5.93748 14.0556 6.36147 14.8143 7.11713C15.5731 7.8729 16 8.89859 16 9.96872C16 11.0389 15.5731 12.0645 14.8143 12.8203C14.0556 13.576 13.0271 14 11.9554 14H6.03326C6.03078 14 6.02829 14 6.02579 14C4.90005 14.0008 3.79643 13.6872 2.84032 13.0944C1.88417 12.5016 1.11373 11.6533 0.616922 10.6456C0.120097 9.63781 -0.0830371 8.51125 0.0307977 7.39398C0.144632 6.27672 0.57082 5.21396 1.26058 4.32641C1.94849 3.44122 2.87099 2.76578 3.92346 2.37597C3.92623 2.37492 3.929 2.37388 3.93179 2.37285Z" fill="#EFEFF1"/>
+</svg>

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

@@ -0,0 +1,139 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import classNames from 'classnames'
+import { vercelSplit } from '../../../../lib/v'
+import { getLocalizedLinkProps } from '../../../../lib/get-localized-link-props'
+import FlightIcon from '../flight-icon'
+import * as NavigationMenu from '@radix-ui/react-navigation-menu'
+import ShieldAlertFill from './shield-alert-fill.svg'
+import CloudFill from './cloud-fill.svg'
+import LayersFill from './layers-fill.svg'
+import ZapFill from './zap-fill.svg'
+import s from './style.module.css'
+
+interface NavLinkProps {
+	title: string
+	url: string
+	icon?: string
+	description?: string
+	iconGradient?: string
+	linkClickHandler?: (title: string, url: string) => void
+	locale?: string
+	className?: string
+}
+
+const GRADIENT_VALUE_MAP = new Map([
+	[
+		'ILM',
+		{
+			iconBackground: 'var(--mds-gradient-ilm)',
+		},
+	],
+	[
+		'SLM',
+		{
+			iconBackground: 'var(--mds-gradient-slm)',
+		},
+	],
+	[
+		'Cloud',
+		{
+			iconBackground: 'var(--mds-gradient-hashicorp)',
+		},
+	],
+	[
+		'Black',
+		{
+			iconBackground: 'var(--mds-color-surface-faint)',
+		},
+	],
+	[
+		'Solution Application',
+		{
+			iconBackground:
+				'linear-gradient(90deg, #a3f7d6 0%, #5cd1d9 50%, #5494e3 100%)',
+		},
+	],
+	['ILM Solid', { iconBackground: '#7948FF' }],
+	['SLM Solid', { iconBackground: '#FF6423' }],
+])
+
+export default function NavLink({
+	url,
+	title,
+	description,
+	icon,
+	iconGradient,
+	linkClickHandler,
+	locale,
+	className,
+}: NavLinkProps) {
+	const style = iconGradient
+		? {
+				['--iconBackground' as string]: GRADIENT_VALUE_MAP.get(
+					vercelSplit(iconGradient),
+				)?.iconBackground,
+			}
+		: undefined
+
+	return (
+		<NavigationMenu.Link asChild>
+			<Link
+				className={classNames(s.link, className)}
+				{...getLocalizedLinkProps(url, locale)}
+				onClickCapture={() => {
+					linkClickHandler && linkClickHandler(title, url)
+				}}
+			>
+				{iconGradient && icon ? (
+					<div className={s.iconBackground} style={style} data-theme="dark">
+						<IconSwitcher icon={icon} iconGradient={iconGradient} />
+					</div>
+				) : (
+					icon && (
+						<div className={s.iconWrapper}>
+							<FlightIcon
+								name={vercelSplit(icon)}
+								color="var(--mds-color-foreground-faint)"
+							/>
+						</div>
+					)
+				)}
+				<div>
+					<div className={iconGradient && s.boldTitle}>{title}</div>
+					{description && <div className={s.description}>{description}</div>}
+				</div>
+			</Link>
+		</NavigationMenu.Link>
+	)
+}
+
+const IconSwitcher = ({
+	icon,
+	iconGradient,
+}: {
+	icon: string
+	iconGradient: string
+}) => {
+	switch (icon) {
+		case 'shield-alert':
+			return <Image src={ShieldAlertFill} alt="shield alert icon" />
+		case 'cloud':
+			return <Image src={CloudFill} alt="cloud icon" />
+		case 'layers':
+			return <Image src={LayersFill} alt="layers icon" />
+		case 'zap':
+			return <Image src={ZapFill} alt="zap icon" />
+		default:
+			return (
+				<FlightIcon
+					name={vercelSplit(icon)}
+					color={
+						iconGradient === 'ILM' || iconGradient === 'SLM'
+							? 'var(--mds-color-foreground-high-contrast)'
+							: 'var(--mds-color-foreground-strong)'
+					}
+				/>
+			)
+	}
+}

package/src/components/nav-panel/components/link/layers-fill.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.65568 0.0838368C7.87179 -0.0279456 8.1287 -0.0279456 8.34481 0.0838368L15.5948 3.83384C15.8439 3.96265 16.0002 4.21962 16.0002 4.5C16.0002 4.78038 15.8439 5.03735 15.5948 5.16616L8.34481 8.91616C8.1287 9.02795 7.87179 9.02795 7.65568 8.91616L0.405677 5.16616C0.156637 5.03735 0.000244137 4.78038 0.000244137 4.5C0.000244137 4.21962 0.156637 3.96265 0.405677 3.83384L7.65568 0.0838368Z" fill="#EFEFF1"/>
+<path d="M0.0934554 10.8876C0.293553 10.5249 0.749771 10.3931 1.11245 10.5932L8.00014 14.3933L14.8878 10.5932C15.2505 10.3931 15.7067 10.5249 15.9068 10.8876C16.1069 11.2503 15.9751 11.7065 15.6124 11.9066L8.36245 15.9066C8.13693 16.031 7.86335 16.031 7.63783 15.9066L0.387831 11.9066C0.0251545 11.7065 -0.106642 11.2503 0.0934554 10.8876Z" fill="#EFEFF1"/>
+<path d="M1.11245 7.09321C0.749771 6.89311 0.293553 7.02491 0.0934554 7.38759C-0.106642 7.75026 0.0251545 8.20648 0.387831 8.40658L7.63783 12.4066C7.86335 12.531 8.13693 12.531 8.36245 12.4066L15.6124 8.40658C15.9751 8.20648 16.1069 7.75026 15.9068 7.38759C15.7067 7.02491 15.2505 6.89311 14.8878 7.09321L8.00014 10.8933L1.11245 7.09321Z" fill="#EFEFF1"/>
+</svg>

package/src/components/nav-panel/components/link/shield-alert-fill.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.26074 0.125C6.73954 -0.0415734 7.26046 -0.0415732 7.73926 0.125L12.4893 1.77832C13.3937 2.09305 14 2.94572 14 3.90332V7.91211C13.9998 9.96031 12.8191 11.6595 11.5498 12.9033C10.2686 14.1588 8.79248 15.0539 7.97656 15.501C7.36496 15.8361 6.63504 15.8361 6.02344 15.501C5.20752 15.0539 3.7314 14.1588 2.4502 12.9033C1.18094 11.6595 0.00016175 9.96031 0 7.91211V3.90332C0 2.94572 0.606344 2.09305 1.51074 1.77832L6.26074 0.125ZM7 10C6.44772 10 6 10.4477 6 11C6.00004 11.5522 6.44774 12 7 12H7.00684C7.55902 11.9999 8.00679 11.5522 8.00684 11C8.00684 10.4478 7.55904 10.0001 7.00684 10H7ZM7 4C6.58579 4 6.25 4.33579 6.25 4.75V8.25C6.25004 8.66418 6.58581 9 7 9C7.41419 9 7.74996 8.66418 7.75 8.25C7.75 8.25 7.75 5.16452 7.75 4.75C7.75 4.33579 7.41421 4 7 4Z" fill="white"/>
+</svg>

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

@@ -0,0 +1,64 @@
+.linkList {
+	display: flex;
+	list-style: none;
+	flex-direction: column;
+	gap: var(--mds-spacing-03);
+	margin: 0;
+	padding: 0;
+}
+
+.link {
+	color: var(--mds-color-foreground-primary);
+	display: flex;
+	gap: var(--mds-spacing-04);
+	padding: var(--mds-spacing-03) var(--mds-spacing-05);
+	min-width: 190px;
+	align-items: flex-start;
+	height: 100%;
+
+	&:hover {
+		background-color: var(--mds-color-surface-interactive-hover);
+		border-radius: var(--mds-spacing-01);
+	}
+
+	&:has(.iconBackground) {
+		align-items: flex-start;
+	}
+
+	@media (--large) {
+		max-width: 416px;
+	}
+
+	&:focus {
+		outline: 2px solid var(--mds-color-focus-action-internal);
+		outline-style: auto;
+	}
+}
+
+.description {
+	font-size: var(--mds-typography-body-200-font-size);
+	font-weight: var(--mds-typography-font-weight-regular);
+	margin-top: var(--mds-spacing-02);
+	color: var(--mds-color-foreground-faint);
+}
+
+.iconBackground {
+	background: var(--iconBackground);
+	height: var(--mds-spacing-08);
+	width: var(--mds-spacing-08);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 3px;
+	flex: none;
+	margin-top: 3px;
+}
+
+.boldTitle {
+	font-weight: var(--mds-typography-font-weight-semibold);
+}
+
+.iconWrapper {
+	margin-top: 3px;
+	height: fit-content;
+}

package/src/components/nav-panel/components/link/zap-fill.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.3747 0.078024C9.67891 0.228777 9.8439 0.565087 9.77695 0.897934L8.88834 5.31559L14.3726 6.22441C14.6414 6.26896 14.865 6.45581 14.9565 6.71247C15.048 6.96914 14.9931 7.25524 14.813 7.4598L7.52137 15.7455C7.29708 16.0004 6.92954 16.0728 6.62533 15.922C6.32112 15.7713 6.15612 15.435 6.22307 15.1021L7.11168 10.6845L1.6274 9.77566C1.35858 9.73111 1.13506 9.54426 1.04356 9.2876C0.952061 9.03093 1.00697 8.74483 1.18699 8.54027L8.47865 0.254555C8.70295 -0.000319332 9.07049 -0.0727287 9.3747 0.078024Z" fill="#EFEFF1"/>
+</svg>

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

@@ -1,8 +1,4 @@
-import Link from 'next/link'
-import { vercelSplit } from '../../../../lib/v'
-import { getLocalizedLinkProps } from '../../../../lib/get-localized-link-props'
-import FlightIcon from '../flight-icon'
-import * as NavigationMenu from '@radix-ui/react-navigation-menu'
+import NavLink from '../link'
 import s from './style.module.css'
 
 export interface LinkListProps {
@@ -17,27 +13,6 @@ export interface LinkListProps {
 	linkClickHandler?: (title: string, url: string) => void
 }
 
-const GRADIENT_VALUE_MAP = new Map([
-	[
-		'ILM',
-		{
-			iconGradient: 'var(--icon-gradient-infrastructure-lifecycle-management)',
-		},
-	],
-	[
-		'SLM',
-		{
-			iconGradient: 'var(--icon-gradient-security-lifecycle-management)',
-		},
-	],
-	[
-		'Cloud',
-		{
-			iconGradient: 'var(--icon-gradient-infrastructure-cloud)',
-		},
-	],
-])
-
 export default function LinkList({
 	locale,
 	links,
@@ -46,46 +21,13 @@ export default function LinkList({
 	return (
 		<ul className={s.linkList}>
 			{links.map((link) => {
-				let style
-				link.iconGradient
-					? (style = {
-							'--iconGradient': GRADIENT_VALUE_MAP.get(
-								vercelSplit(link.iconGradient)
-							)?.iconGradient,
-					  } as React.CSSProperties)
-					: (style = null)
 				return (
 					<li key={link.title}>
-						<NavigationMenu.Link asChild>
-							<Link
-								className={s.link}
-								{...getLocalizedLinkProps(link.url, locale)}
-								onClickCapture={() => {
-									linkClickHandler && linkClickHandler(link.title, link.url)
-								}}
-							>
-								{link.iconGradient && link.icon ? (
-									<div className={s.iconBackground} style={style}>
-										<FlightIcon name={vercelSplit(link.icon)} />
-									</div>
-								) : (
-									link.icon && (
-										<FlightIcon
-											name={vercelSplit(link.icon)}
-											color="var(--token-color-foreground-faint)"
-										/>
-									)
-								)}
-								<div>
-									<div className={link.iconGradient && s.boldTitle}>
-										{link.title}
-									</div>
-									{link.description && (
-										<div className={s.description}>{link.description}</div>
-									)}
-								</div>
-							</Link>
-						</NavigationMenu.Link>
+						<NavLink
+							{...link}
+							linkClickHandler={linkClickHandler}
+							locale={locale}
+						/>
 					</li>
 				)
 			})}

package/src/components/nav-panel/components/link-list/style.module.css

@@ -6,52 +6,3 @@
 	margin: 0;
 	padding: 0;
 }
-
-.link {
-	color: var(--token-color-foreground-primary);
-	display: flex;
-	gap: var(--mds-spacing-04);
-	padding: var(--mds-spacing-03) var(--mds-spacing-04);
-	min-width: 190px;
-	align-items: center;
-
-	&:hover {
-		background-color: var(--token-color-surface-interactive-hover);
-		border-radius: var(--mds-spacing-01);
-	}
-
-	&:has(.iconBackground) {
-		align-items: flex-start;
-	}
-
-	@media (--large) {
-		max-width: 416px;
-	}
-
-	&:focus {
-		outline: 2px solid var(--token-color-focus-action-internal);
-		outline-style: auto;
-	}
-}
-
-.description {
-	font-size: var(--mds-typography-body-200-font-size);
-	font-weight: var(--mds-typography-font-weight-regular);
-	margin-top: var(--mds-spacing-02);
-}
-
-.iconBackground {
-	background: var(--iconGradient);
-	height: var(--mds-spacing-08);
-	width: var(--mds-spacing-08);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	border-radius: 3px;
-	flex: none;
-	margin-top: 3px;
-}
-
-.boldTitle {
-	font-weight: var(--mds-typography-font-weight-semibold);
-}

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

@@ -11,6 +11,7 @@ import s from './style.module.css'
 export interface PromoProps {
 	locale?: string
 	title: string
+	titleLinkUrl?: string
 	description: string
 	linkUrl: string
 	linkTitle: string
@@ -24,6 +25,7 @@ export interface PromoProps {
 export default function Promo({
 	locale,
 	title,
+	titleLinkUrl,
 	description,
 	linkUrl,
 	linkTitle,
@@ -60,19 +62,31 @@ export default function Promo({
 						[s.hashiconf]: vercelSplit(theme) === 'hashiconf',
 					})}
 				>
-					<FlightIcon name={vercelSplit(icon)} />
+					<FlightIcon name={vercelSplit(icon)} size={24} />
 				</div>
 			)}
 			<div className={s.rightContent}>
 				<div>
-					<div
-						className={classNames(s.title, {
-							[s.hashidays]: vercelSplit(theme) === 'hashidays',
-							[s.hashiconf]: vercelSplit(theme) === 'hashiconf',
-						})}
-					>
-						{title}
-					</div>
+					{titleLinkUrl ? (
+						<a
+							className={classNames(s.title, s.link, {
+								[s.hashidays]: vercelSplit(theme) === 'hashidays',
+								[s.hashiconf]: vercelSplit(theme) === 'hashiconf',
+							})}
+							href={titleLinkUrl}
+						>
+							{title}
+						</a>
+					) : (
+						<div
+							className={classNames(s.title, {
+								[s.hashidays]: vercelSplit(theme) === 'hashidays',
+								[s.hashiconf]: vercelSplit(theme) === 'hashiconf',
+							})}
+						>
+							{title}
+						</div>
+					)}
 					<div className={s.description}>{description}</div>
 				</div>
 				<NavigationMenu.Link asChild>

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

@@ -3,10 +3,9 @@
 .promo {
 	display: flex;
 	border-radius: var(--mds-spacing-01);
-	border: 1px solid var(--token-color-border-faint);
-	background-color: var(--token-color-surface-faint);
-	padding: var(--mds-spacing-05) var(--mds-spacing-08) var(--mds-spacing-06)
-		var(--mds-spacing-08);
+	border: 1px solid var(--mds-color-border-faint);
+	background-color: var(--mds-color-surface-faint);
+	padding: var(--mds-spacing-05) var(--mds-spacing-08) var(--mds-spacing-06) var(--mds-spacing-08);
 	flex-direction: row;
 	gap: var(--mds-spacing-04);
 	margin: var(--mds-spacing-07);
@@ -80,7 +79,7 @@
 }
 
 .link {
-	color: var(--token-color-foreground-strong);
+	color: var(--mds-color-foreground-strong);
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -91,18 +90,13 @@
 	}
 
 	&:focus {
-		outline: 2px solid var(--token-color-focus-action-internal);
+		outline: 2px solid var(--mds-color-focus-action-internal);
 		outline-style: auto;
 	}
 }
 
 .hashidays {
-	background: linear-gradient(
-		90deg,
-		#7b54b6 0%,
-		#4c69d8 74.77%,
-		#60d0dc 115.93%
-	);
+	background: linear-gradient(90deg, #7b54b6 0%, #4c69d8 74.77%, #60d0dc 115.93%);
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
 	max-width: fit-content;
@@ -113,16 +107,12 @@
 }
 
 .hashiconf {
-	background: linear-gradient(
-		to right,
-		var(--token-color-terraform-foreground),
-		var(--token-color-vagrant-foreground)
-	);
+	background: linear-gradient(to right, var(--mds-color-terraform-foreground), var(--mds-color-vagrant-foreground));
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
 	max-width: fit-content;
 
 	& svg {
-		color: var(--token-color-terraform-foreground);
+		color: var(--mds-color-terraform-foreground);
 	}
 }

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

@@ -22,7 +22,7 @@ const Text = ({
 			className={classNames(
 				`mds-typography-body-${size}`,
 				weight && `mds-typography-font-weight-${weight}`,
-				className
+				className,
 			)}
 			{...rest}
 		>

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

@@ -3,17 +3,20 @@ import Link from 'next/link'
 import * as NavPanel from '../components/panel'
 import Promo, { type PromoProps } from '../components/promo'
 import { getLocalizedLinkProps } from '../../../lib/get-localized-link-props'
-import { Products } from '@hashicorp/platform-product-meta'
+import { Products } from '@web/product-meta'
 import FlightIcon from '../components/flight-icon'
 import { Text } from '../components/text'
 import { trackNavClickEvent } from '../../../lib/track-nav-click-event'
 import * as NavigationMenu from '@radix-ui/react-navigation-menu'
+import { LinkListProps } from '../components/link-list'
+import NavLink from '../components/link'
 import s from './style.module.css'
 
 const PRODUCT_LOGO_MAP = new Map([
 	['Terraform', 'terraform-fill'],
 	['Packer', 'packer-fill-color'],
 	['Vault', 'vault-fill-color'],
+	['Vault Radar', 'vault-fill-color'],
 	['Boundary', 'boundary-fill-color'],
 	['Consul', 'consul-fill-color'],
 	['Nomad', 'nomad-fill-color'],
@@ -29,9 +32,15 @@ const PRODUCT_LOGO_EXCEPTION_CLASSNAMES = {
 	'HCP Vault Radar': 'hcpVaultRadar',
 }
 
+export type ProductCategoriesProps = Array<{
+	title: string
+	group?: LinkListProps['links'][0]
+	products: NavProductProps[]
+}>
+
 export interface ProductsPanelProps {
 	locale?: string
-	productCategories: any
+	productCategories: ProductCategoriesProps
 	promo?: PromoProps
 	sidePanel?: {
 		label: string
@@ -71,10 +80,19 @@ const ProductPanel = ({
 				) : null}
 				<NavPanel.Column hasSidePanel={Boolean(sidePanel)}>
 					<ul className={s.productCategories}>
-						{productCategories.map(({ title, products }) => {
+						{productCategories.map(({ group, title, products }) => {
 							return (
-								<li key={title} className={s.productCategory}>
-									<Text className={s.eyebrow}>{title}</Text>
+								<li
+									key={title}
+									className={classNames(s.productCategory, {
+										[s.productCategoryHasGroup]: group,
+									})}
+								>
+									{group ? (
+										<NavLink {...group} className={s.productGroupLink} />
+									) : (
+										<Text className={s.eyebrow}>{title}</Text>
+									)}
 									<ul className={s.productList}>
 										{products.map((product) => {
 											return (
@@ -118,7 +136,7 @@ const ProductPanel = ({
 										<div className={s.iconBackground}>
 											<FlightIcon
 												name={icon}
-												color="var(--token-color-foreground-faint)"
+												color="var(--mds-color-foreground-faint)"
 											/>
 										</div>
 										<div className={s.sidePanelItemContent}>
@@ -173,7 +191,20 @@ function NavProduct({ locale, url, product, description }: NavProductProps) {
 						/>
 					</div>
 					<div className={s.productTextContent}>
-						<span>{product}</span>
+						{product === 'Vault Radar' ? (
+							<div>
+								<Text size="200" weight="semibold">
+									Vault&nbsp;
+								</Text>
+								<Text size="200" weight="regular">
+									Radar
+								</Text>
+							</div>
+						) : (
+							<Text size="200" weight="semibold">
+								{product}
+							</Text>
+						)}
 						<span className={s.productDesc}>{description}</span>
 					</div>
 				</div>

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

@@ -3,29 +3,6 @@
 .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;
@@ -74,7 +51,7 @@
 	min-width: 160px;
 
 	&:first-child {
-		border-bottom: 1px solid var(--token-color-border-primary);
+		border-bottom: 1px solid var(--mds-color-border-primary);
 		margin-bottom: var(--mds-spacing-05);
 		padding-bottom: var(--mds-spacing-05);
 	}
@@ -82,7 +59,7 @@
 
 .eyebrow {
 	padding-bottom: var(--mds-spacing-04);
-	color: var(--token-color-foreground-strong);
+	color: var(--mds-color-foreground-strong);
 	font-weight: var(--mds-typography-font-weight-semibold);
 
 	@media (--large) {
@@ -147,7 +124,7 @@
 			margin-bottom: 0;
 
 			&:hover {
-				background-color: var(--token-color-surface-interactive-hover);
+				background-color: var(--mds-color-surface-interactive-hover);
 				border-radius: var(--mds-spacing-01);
 			}
 		}
@@ -159,7 +136,7 @@
 			margin-bottom: 0;
 
 			&:hover {
-				background-color: var(--token-color-surface-interactive-hover);
+				background-color: var(--mds-color-surface-interactive-hover);
 				border-radius: var(--mds-spacing-01);
 			}
 		}
@@ -196,7 +173,7 @@
 .productTextContent {
 	display: flex;
 	flex-direction: column;
-	color: var(--token-color-foreground-strong);
+	color: var(--mds-color-foreground-strong);
 }
 
 .productDesc {
@@ -204,12 +181,12 @@
 	font-size: 14px;
 	line-height: 20px;
 	letter-spacing: 0.0125em;
-	color: var(--token-color-foreground-faint);
+	color: var(--mds-color-foreground-faint);
 }
 
 .focusIndicator {
 	&:focus {
-		outline: 2px solid var(--token-color-focus-action-internal);
+		outline: 2px solid var(--mds-color-focus-action-internal);
 		outline-style: auto;
 	}
 }
@@ -226,8 +203,7 @@
 
 	@media (--large) {
 		@nest .noSide & {
-			padding: var(--mds-spacing-07) 0 var(--mds-spacing-09)
-				var(--mds-spacing-04);
+			padding: var(--mds-spacing-05) 0 var(--mds-spacing-05) var(--mds-spacing-04);
 		}
 
 		@nest .topPromo & {
@@ -237,8 +213,7 @@
 
 	@media (--dev-dot-viewport) {
 		@nest .hasSide & {
-			padding: var(--mds-spacing-07) 0 var(--mds-spacing-09)
-				var(--mds-spacing-04);
+			padding: var(--mds-spacing-07) 0 var(--mds-spacing-09) var(--mds-spacing-04);
 		}
 
 		@nest .topPromo & {
@@ -249,13 +224,12 @@
 
 .sidePanel {
 	height: 100%;
-	background: var(--token-color-surface-faint);
+	background: var(--mds-color-surface-faint);
 	display: flex;
 	flex-direction: column;
 	gap: var(--mds-spacing-05);
 	margin: 0;
-	padding: var(--mds-spacing-07) var(--mds-spacing-04) var(--mds-spacing-09)
-		var(--mds-spacing-07);
+	padding: var(--mds-spacing-07) var(--mds-spacing-04) var(--mds-spacing-09) var(--mds-spacing-07);
 }
 
 .sidePanelItems {
@@ -280,7 +254,7 @@
 		padding: var(--mds-spacing-03) var(--mds-spacing-05);
 
 		&:hover {
-			background-color: var(--token-color-surface-interactive-hover);
+			background-color: var(--mds-color-surface-interactive-hover);
 			border-radius: var(--mds-spacing-01);
 		}
 	}
@@ -289,7 +263,7 @@
 /* Lifted from:
 packages/react-components/src/components/nav-panel/components/link-list/style.module.css  */
 .iconBackground {
-	background: var(--token-color-foreground-high-contrast);
+	background: var(--mds-color-foreground-high-contrast);
 	height: var(--mds-spacing-08);
 	width: var(--mds-spacing-08);
 	display: flex;
@@ -298,21 +272,21 @@ packages/react-components/src/components/nav-panel/components/link-list/style.mo
 	border-radius: 3px;
 	flex: none;
 	margin-top: 3px;
-	border: 1px solid var(--token-color-border-primary);
+	border: 1px solid var(--mds-color-border-primary);
 }
 
 /* Lifted from .productTextContent */
 .sidePanelItemContent {
 	display: flex;
 	flex-direction: column;
-	color: var(--token-color-foreground-strong);
+	color: var(--mds-color-foreground-strong);
 }
 
 .sidePanelItemDesc {
 	font-weight: 400;
 	font-size: 13px;
 	line-height: 18px;
-	color: var(--token-color-foreground-primary);
+	color: var(--mds-color-foreground-primary);
 }
 
 /* Branding exception classnames */
@@ -320,10 +294,10 @@ packages/react-components/src/components/nav-panel/components/link-list/style.mo
 /* Allows switching to a dark-mode-specific color for Terraform */
 .terraform {
 	& use {
-		fill: var(--token-color-terraform-brand);
+		fill: var(--mds-color-terraform-brand);
 
 		@nest [data-theme='dark'] & {
-			fill: var(--token-color-terraform-foreground);
+			fill: var(--mds-color-terraform-foreground);
 		}
 	}
 
@@ -339,11 +313,11 @@ packages/react-components/src/components/nav-panel/components/link-list/style.mo
 .hcpVaultSecrets,
 .hcpVaultRadar {
 	padding: var(--mds-spacing-01);
-	border: 2px solid var(--token-color-vault-brand);
+	border: 2px solid var(--mds-color-vault-brand);
 	border-radius: 3px;
 
 	& use {
-		fill: var(--token-color-foreground-strong);
+		fill: var(--mds-color-foreground-strong);
 	}
 
 	& path {
@@ -354,3 +328,46 @@ packages/react-components/src/components/nav-panel/components/link-list/style.mo
 .sidePanelText {
 	font-weight: var(--mds-typography-font-weight-semibold);
 }
+
+.productCategoryHasGroup {
+	& .productList {
+		padding-left: 0;
+		padding-right: 0;
+		padding-top: 0;
+	}
+
+	& .productWrapper {
+		gap: var(--mds-spacing-04);
+
+		@media (--small) {
+			padding: var(--mds-spacing-03) var(--mds-spacing-05);
+		}
+	}
+
+	& .productLogo {
+		margin-top: 3px;
+		height: 32px;
+		width: 32px;
+		min-width: 32px;
+
+		& svg {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	& .terraform {
+		width: 100%;
+		height: 100%;
+	}
+}
+
+.productGroupLink {
+	min-width: 100%;
+	max-width: 100%;
+	margin-bottom: var(--mds-spacing-03);
+	color: var(--mds-color-foreground-strong);
+	font-family: var(--mds-typography-font-stack-text);
+	font-size: var(--mds-typography-body-200-font-size);
+	line-height: var(--mds-typography-body-200-line-height);
+}

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

@@ -16,7 +16,7 @@ describe('getLocalizedLinkProps', () => {
 	it('does format paths that start with a locale string', () => {
 		const localizedLinkProps = getLocalizedLinkProps(
 			'/deconstructing-cloud',
-			'en'
+			'en',
 		)
 		expect(localizedLinkProps.href).toBe('/en/deconstructing-cloud')
 		expect(localizedLinkProps.hrefLang).toBe('en')

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

@@ -3,7 +3,7 @@ import { allSupportedLocales } from '../supported-locales'
 
 export const getLocalizedLinkProps = (
 	url: string,
-	locale?: string
+	locale?: string,
 ): {
 	href: string
 	hrefLang: string | undefined
@@ -12,7 +12,7 @@ export const getLocalizedLinkProps = (
 
 	// example: /en
 	const hrefIsLocalizedHomepage = allSupportedLocales.includes(
-		parsedHref.substring(1)
+		parsedHref.substring(1),
 	)
 
 	// true example: /en/solutions

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

@@ -29,7 +29,7 @@ describe('parseUrl', () => {
 
 	it('leaves URL search params intact', () => {
 		const url = parseUrl(
-			'https://hashicorp.com/resources?type=case-study&products=terraform'
+			'https://hashicorp.com/resources?type=case-study&products=terraform',
 		)
 		expect(url.href).toBe('/resources?type=case-study&products=terraform')
 	})
@@ -43,18 +43,34 @@ describe('parseUrl', () => {
 		const url = parseUrl('https://developer.hashicorp.com/terraform')
 		expect(url.href).toBe('https://developer.hashicorp.com/terraform')
 	})
+
+	it('detects not allowed schemes', () => {
+		const url = parseUrl('ftp://hashicorp.com/example')
+		expect(url.linkType).toBe('')
+		expect(url.href).toBe('')
+	})
+
+	it('returns mailto links', () => {
+		const mailtoUrl = parseUrl('mailto:example@hashicorp.com')
+		expect(mailtoUrl.href).toBe('mailto:example@hashicorp.com')
+	})
+
+	it('returns tel links', () => {
+		const telUrl = parseUrl('tel:+1234567890')
+		expect(telUrl.href).toBe('tel:+1234567890')
+	})
 })
 
 describe('hasHashiCorpDestination', () => {
 	it('returns true for supported hashicorp domains', () => {
 		const isHashiCorpDestination = hasHashiCorpDestination(
-			'https://portal.cloud.hashicorp.com/foo'
+			'https://portal.cloud.hashicorp.com/foo',
 		)
 		expect(isHashiCorpDestination).toBe(true)
 	})
 	it('returns false for external domains', () => {
 		const isHashiCorpDestination = hasHashiCorpDestination(
-			'https://foo.com/bar'
+			'https://foo.com/bar',
 		)
 		expect(isHashiCorpDestination).toBe(false)
 	})

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

@@ -39,26 +39,35 @@ export function parseUrl(url: string | undefined): {
 	href: string
 } {
 	if (!url) {
-		console.log('No url to parse, returning empty string')
 		return { linkType: '', href: '' }
 	}
 
+	// Allow safe relative paths and in-page anchors as-is.
 	if (isRelative(url) || isAnchor(url)) {
 		return { linkType: 'inbound', href: url }
 	}
 
-	if (isInternal(url)) {
-		try {
-			const { pathname, search, hash } = new URL(url)
+	// For absolute URLs, ensure they use an allowed scheme and then classify as internal/outbound.
+	try {
+		const parsed = new URL(url)
+
+		if (!isAllowedScheme(parsed.protocol)) {
+			console.log(`Disallowed URL scheme in href: ${url}`)
+			return { linkType: '', href: '' }
+		}
+
+		if (isInternal(url)) {
+			const { pathname, search, hash } = parsed
 			const href = pathname + search + hash
 			return { linkType: 'inbound', href }
-		} catch (error) {
-			console.log(`Invalid href: ${url}`)
-			return { linkType: '', href: '' }
 		}
-	}
 
-	return { linkType: 'outbound', href: url }
+		// Outbound but still using an allowed scheme.
+		return { linkType: 'outbound', href: url }
+	} catch (error) {
+		console.log(`Invalid href: ${url}`)
+		return { linkType: '', href: '' }
+	}
 }
 
 const isRelative = (url: string) => url.startsWith('/')
@@ -69,6 +78,15 @@ const isAnchor = (url: string) => url.startsWith('#')
  *
  * @param {string} url - The URL to check.
  * @returns {boolean} - Returns true if the link uses a HashiCorp domain, otherwise false.
+ * Returns true if the given protocol string is an allowed URL scheme for links.
+ * Only http and https are allowed to prevent injection of javascript:, data:, etc.
+ */
+const ALLOWED_SCHEMES = ['http:', 'https:', 'mailto:', 'tel:']
+const isAllowedScheme = (protocol: string): boolean => {
+	return ALLOWED_SCHEMES.includes(protocol)
+}
+
+/**
  */
 
 export const isInternal = (url: string): boolean => {

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

@@ -14,7 +14,7 @@ import posthog from 'posthog-js'
  */
 const sendPosthogEvent = (
 	eventName: string,
-	properties: Record<string, any>
+	properties: Record<string, any>,
 ) => {
 	posthog.capture(eventName, properties)
 }

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

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

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

@@ -12,7 +12,7 @@ import sendPosthogEvent from '../send-posthog-event'
 export const trackNavClickEvent = (
 	name: string,
 	href: string,
-	section: string
+	section?: string,
 ) => {
 	sendPosthogEvent('Nav link click', {
 		name,

package/src/lib/v/index.ts

@@ -6,5 +6,11 @@ import { vercelStegaSplit } from '@vercel/stega'
  *
  */
 export const vercelSplit = <VercelString>(
-	original: VercelString
-): VercelString => vercelStegaSplit(original as string).cleaned as VercelString
+	original: VercelString,
+): VercelString => {
+	if (typeof original === 'string') {
+		return vercelStegaSplit(original).cleaned as VercelString
+	} else {
+		return original
+	}
+}

package/tsconfig.json

@@ -9,6 +9,5 @@
 		],
 		"types": ["vitest/globals", "@testing-library/jest-dom"]
 	},
-	"include": ["./**/*"],
-	"exclude": ["node_modules"]
+	"include": ["./**/*"]
 }

package/.eslintrc.js

@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: require.resolve('@hashicorp/platform-cli/config/.eslintrc.js'),
-}

package/.stylelintrc.js

@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['@hashicorp/platform-cli/config/stylelint.config']
-}