@hashicorp/react-components 1.1.10 → 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,30 +1,25 @@
 {
 	"name": "@hashicorp/react-components",
-	"version": "1.1.10",
+	"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.5.0",
-		"@hashicorp/platform-product-meta": "^0.1.1",
-		"@hashicorp/platform-util": "^0.2.0",
-		"@hashicorp/react-design-system-components": "*",
+		"@hashicorp/flight-icons": "^3.7.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",
-		"@vercel/analytics": "^1.3.1",
+		"@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",
 		"classnames": "^2.3.2",
-		"js-cookie": "^3.0.5",
-		"moize": "^6.1.3",
-		"react-hook-form": "^7.43.5"
+		"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

@@ -0,0 +1,53 @@
+import svgSprite from '@hashicorp/flight-icons/svg-sprite/svg-sprite.svg'
+import classNames from 'classnames'
+import { useId, type SVGProps } from 'react'
+import s from './style.module.css'
+
+interface Props extends SVGProps<SVGSVGElement> {
+	/**
+	 * The name of the icon you wish to use. If the value does not match an
+	 * existing icon name, an error will be thrown. Search for existing icon
+	 * names in the Icon library.
+	 */
+	name: string
+
+	/**
+	 * The `color` prop can be used to change the color. It works by setting
+	 * the value of the icon SVG’s fill property.
+	 */
+	color?: string
+
+	className?: string
+	size?: 16 | 24
+}
+
+// When an SVG file is imported in Next.js, it is an object with a `src`
+// property. However, tools like Webpack and Vite default to returning a URL.
+// This runtime check allows the component to work in all of these cases.
+const svgSpriteSrc =
+	typeof svgSprite === 'string' ? svgSprite : (svgSprite as { src: string }).src
+
+export default function FlightIcon({
+	name,
+	color = 'currentColor',
+	className,
+	size = 16,
+	...rest
+}: Props) {
+	const iconId = useId()
+	return (
+		<svg
+			className={classNames(s['flight-icon'], className)}
+			{...rest}
+			aria-hidden="true"
+			fill={color}
+			id={iconId}
+			width={size}
+			height={size}
+			viewBox="0 0 16 16"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<use href={`${svgSpriteSrc}#flight-${name}-16`}></use>
+		</svg>
+	)
+}

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

@@ -0,0 +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,11 +1,8 @@
-import Link from 'next/link'
-import { parseUrl } from '../../../../lib/parse-url'
-import { v } from '../../../../lib/v'
-import FlightIcon from '@hashicorp/react-design-system-components/src/components/flight-icon'
-import * as NavigationMenu from '@radix-ui/react-navigation-menu'
+import NavLink from '../link'
 import s from './style.module.css'
 
 export interface LinkListProps {
+	locale?: string
 	links: {
 		title: string
 		url: string
@@ -16,70 +13,21 @@ 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({ links, linkClickHandler }: LinkListProps) {
+export default function LinkList({
+	locale,
+	links,
+	linkClickHandler,
+}: LinkListProps) {
 	return (
 		<ul className={s.linkList}>
 			{links.map((link) => {
-				let style
-				link.iconGradient
-					? (style = {
-							'--iconGradient': GRADIENT_VALUE_MAP.get(v(link.iconGradient))
-								?.iconGradient,
-					  } as React.CSSProperties)
-					: (style = null)
 				return (
 					<li key={link.title}>
-						<NavigationMenu.Link asChild>
-							<Link
-								className={s.link}
-								href={parseUrl(link.url).href}
-								onClickCapture={() => {
-									linkClickHandler && linkClickHandler(link.title, link.url)
-								}}
-							>
-								{link.iconGradient && link.icon ? (
-									<div className={s.iconBackground} style={style}>
-										<FlightIcon name={v(link.icon)} />
-									</div>
-								) : (
-									link.icon && (
-										<FlightIcon
-											name={v(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

@@ -2,56 +2,7 @@
 	display: flex;
 	list-style: none;
 	flex-direction: column;
-	gap: var(--hdsplus-spacing-03);
+	gap: var(--mds-spacing-03);
 	margin: 0;
 	padding: 0;
 }
-
-.link {
-	color: var(--token-color-foreground-primary);
-	display: flex;
-	gap: var(--hdsplus-spacing-04);
-	padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-04);
-	min-width: 190px;
-	align-items: center;
-
-	&:hover {
-		background-color: var(--token-color-surface-interactive-hover);
-		border-radius: var(--hdsplus-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(--hdsplus-typography-body-200-font-size);
-	font-weight: var(--token-typography-font-weight-regular);
-	margin-top: var(--hdsplus-spacing-02);
-}
-
-.iconBackground {
-	background: var(--iconGradient);
-	height: var(--hdsplus-spacing-08);
-	width: var(--hdsplus-spacing-08);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	border-radius: 3px;
-	flex: none;
-	margin-top: 3px;
-}
-
-.boldTitle {
-	font-weight: var(--font-weight-semi-bold);
-}

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

@@ -7,8 +7,8 @@
 	justify-content: flex-start;
 	min-width: 190px;
 	padding: 0;
-	margin: 0 var(--hdsplus-spacing-07);
-	border-radius: var(--hdsplus-spacing-03);
+	margin: 0 var(--mds-spacing-07);
+	border-radius: var(--mds-spacing-03);
 
 	@media (--large) {
 		&:not(.hasSide) {

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

@@ -6,15 +6,15 @@
 	flex-direction: column;
 	justify-content: space-between;
 	/* stylelint-disable-next-line unit-no-unknown */
-	min-height: calc(100dvh - var(--hdsplus-spacing-12));
+	min-height: calc(100dvh - var(--mds-spacing-12));
 
 	@media (--large) {
 		&:not(.hasSide) {
 			justify-content: flex-start;
 			height: 100%;
 			min-height: fit-content;
-			padding: var(--hdsplus-spacing-05) var(--hdsplus-spacing-04);
-			gap: var(--hdsplus-spacing-04);
+			padding: var(--mds-spacing-05) var(--mds-spacing-04);
+			gap: var(--mds-spacing-04);
 		}
 	}
 
@@ -23,8 +23,8 @@
 			justify-content: flex-start;
 			height: 100%;
 			min-height: fit-content;
-			padding: var(--hdsplus-spacing-05) var(--hdsplus-spacing-04);
-			gap: var(--hdsplus-spacing-04);
+			padding: var(--mds-spacing-05) var(--mds-spacing-04);
+			gap: var(--mds-spacing-04);
 		}
 	}
 }

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

@@ -1,15 +1,17 @@
 import { useCallback } from 'react'
 import classNames from 'classnames'
-import { v } from '../../../../lib/v'
+import { vercelSplit } from '../../../../lib/v'
 import Link from 'next/link'
-import { parseUrl } from '../../../../lib/parse-url'
+import { getLocalizedLinkProps } from '../../../../lib/get-localized-link-props'
 import { trackNavClickEvent } from '../../../../lib/track-nav-click-event'
-import FlightIcon from '@hashicorp/react-design-system-components/src/components/flight-icon'
+import FlightIcon from '../flight-icon'
 import * as NavigationMenu from '@radix-ui/react-navigation-menu'
 import s from './style.module.css'
 
 export interface PromoProps {
+	locale?: string
 	title: string
+	titleLinkUrl?: string
 	description: string
 	linkUrl: string
 	linkTitle: string
@@ -17,10 +19,13 @@ export interface PromoProps {
 	icon?: string
 	theme: string
 	hasSidePanel?: boolean
+	isPromoOnTop?: boolean
 }
 
 export default function Promo({
+	locale,
 	title,
+	titleLinkUrl,
 	description,
 	linkUrl,
 	linkTitle,
@@ -28,6 +33,7 @@ export default function Promo({
 	icon,
 	theme,
 	hasSidePanel,
+	isPromoOnTop = false,
 }: PromoProps) {
 	const handleClick = useCallback((title, linkUrl, linkTitle, slug) => {
 		if (window && window.analytics) {
@@ -46,33 +52,47 @@ export default function Promo({
 			className={classNames(s.promo, {
 				[s.hasSide]: hasSidePanel,
 				[s.noSide]: !hasSidePanel,
+				[s.topPromo]: isPromoOnTop,
 			})}
 		>
 			{icon && (
 				<div
 					className={classNames(s.icon, {
-						[s.hashidays]: v(theme) === 'hashidays',
-						[s.hashiconf]: v(theme) === 'hashiconf',
+						[s.hashidays]: vercelSplit(theme) === 'hashidays',
+						[s.hashiconf]: vercelSplit(theme) === 'hashiconf',
 					})}
 				>
-					<FlightIcon name={v(icon)} />
+					<FlightIcon name={vercelSplit(icon)} size={24} />
 				</div>
 			)}
 			<div className={s.rightContent}>
 				<div>
-					<div
-						className={classNames(s.title, {
-							[s.hashidays]: v(theme) === 'hashidays',
-							[s.hashiconf]: v(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>
 					<Link
-						href={parseUrl(linkUrl).href}
+						locale={locale ? locale : undefined}
+						{...getLocalizedLinkProps(linkUrl, locale)}
 						className={s.link}
 						onClickCapture={() => handleClick(title, linkUrl, linkTitle, slug)}
 					>