@hashicorp/react-components 1.2.1 → 1.2.3

package/.test/setup-vitest.js

@@ -1 +1,5 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 import '@testing-library/jest-dom'

package/global.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) HashiCorp, Inc.
+ * Copyright IBM Corp. 2022, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hashicorp/react-components",
-	"version": "1.2.1",
+	"version": "1.2.3",
 	"main": "src/index.ts",
 	"scripts": {
 		"lint": "npm run lint:js",
@@ -9,7 +9,7 @@
 		"test:watch": "vitest watch"
 	},
 	"dependencies": {
-		"@hashicorp/flight-icons": "^3.7.0",
+		"@hashicorp/flight-icons": "^5.0.0",
 		"@hashicorp/web-mktg-logos": "*",
 		"@radix-ui/react-navigation-menu": "^1.2.14",
 		"@radix-ui/react-visually-hidden": "^1.2.4",

package/postcss.config.js

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 // Next.js allows for plugins to be specified as an array of arrays, but this
 // isn't supported by Vitest, so use a helper function to convert the array of
 // arrays to an object.

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 import svgSprite from '@hashicorp/flight-icons/svg-sprite/svg-sprite.svg'
 import classNames from 'classnames'
 import { useId, type SVGProps } from 'react'

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 .flight-icon {
 	display: inline-block;
 }

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 import Image from 'next/image'
 import Link from 'next/link'
 import classNames from 'classnames'
@@ -17,6 +21,7 @@ interface NavLinkProps {
 	icon?: string
 	description?: string
 	iconGradient?: string
+	isDevPortal?: boolean
 	linkClickHandler?: (title: string, url: string) => void
 	locale?: string
 	className?: string
@@ -56,6 +61,13 @@ const GRADIENT_VALUE_MAP = new Map([
 	],
 	['ILM Solid', { iconBackground: '#7948FF' }],
 	['SLM Solid', { iconBackground: '#FF6423' }],
+	[
+		'Learn',
+		{
+			iconBackground: 'var(--mds-color-foreground-high-contrast)',
+			iconBorder: 'var(--mds-color-border-primary)',
+		},
+	],
 ])
 
 export default function NavLink({
@@ -67,12 +79,16 @@ export default function NavLink({
 	linkClickHandler,
 	locale,
 	className,
+	isDevPortal = false,
 }: NavLinkProps) {
 	const style = iconGradient
 		? {
 				['--iconBackground' as string]: GRADIENT_VALUE_MAP.get(
 					vercelSplit(iconGradient),
 				)?.iconBackground,
+				['--iconBorder' as string]: GRADIENT_VALUE_MAP.get(
+					vercelSplit(iconGradient),
+				)?.iconBorder,
 			}
 		: undefined
 
@@ -86,8 +102,16 @@ export default function NavLink({
 				}}
 			>
 				{iconGradient && icon ? (
-					<div className={s.iconBackground} style={style} data-theme="dark">
-						<IconSwitcher icon={icon} iconGradient={iconGradient} />
+					<div
+						className={s.iconBackground}
+						style={style}
+						data-theme={!isDevPortal && 'dark'}
+					>
+						<IconSwitcher
+							icon={icon}
+							iconGradient={iconGradient}
+							isDevPortal={isDevPortal}
+						/>
 					</div>
 				) : (
 					icon && (
@@ -111,10 +135,20 @@ export default function NavLink({
 const IconSwitcher = ({
 	icon,
 	iconGradient,
+	isDevPortal = false,
 }: {
 	icon: string
 	iconGradient: string
+	isDevPortal?: boolean
 }) => {
+	if (isDevPortal) {
+		return (
+			<FlightIcon
+				name={vercelSplit(icon)}
+				color={'var(--mds-color-foreground-faint)'}
+			/>
+		)
+	}
 	switch (icon) {
 		case 'shield-alert':
 			return <Image src={ShieldAlertFill} alt="shield alert icon" />

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 .linkList {
 	display: flex;
 	list-style: none;
@@ -52,6 +56,7 @@
 	border-radius: 3px;
 	flex: none;
 	margin-top: 3px;
+	border: 1px solid var(--iconBorder);
 }
 
 .boldTitle {

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 import NavLink from '../link'
 import s from './style.module.css'
 
@@ -9,6 +13,7 @@ export interface LinkListProps {
 		icon?: string
 		description?: string
 		iconGradient?: string
+		isDevPortal?: boolean
 	}[]
 	linkClickHandler?: (title: string, url: string) => void
 }

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 .linkList {
 	display: flex;
 	list-style: none;

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

@@ -1,21 +1,25 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 import classNames from 'classnames'
 import s from './style.module.css'
 
 export interface NavColumnProps {
 	className?: string
 	children: React.ReactNode
-	hasSidePanel?: boolean
+	isDevPortal?: boolean
 }
 
 export default function Column({
 	className,
 	children,
-	hasSidePanel,
+	isDevPortal,
 }: NavColumnProps) {
 	return (
 		<div
 			className={classNames(s.column, className, {
-				[s.hasSide]: hasSidePanel,
+				[s.isDevPortal]: isDevPortal,
 			})}
 		>
 			{children}

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 @custom-media --dev-dot-viewport (min-width: 924px);
 
 .column {
@@ -11,13 +15,13 @@
 	border-radius: var(--mds-spacing-03);
 
 	@media (--large) {
-		&:not(.hasSide) {
+		&:not(.isDevPortal) {
 			margin: 0;
 		}
 	}
 
 	@media (--dev-dot-viewport) {
-		&.hasSide {
+		&.isDevPortal {
 			margin: 0;
 		}
 	}

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 import Root from './root'
 import Column from './column'
 

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

@@ -1,17 +1,21 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 import classNames from 'classnames'
 import s from './style.module.css'
 
 interface RootProps {
 	className?: string
 	children: React.ReactNode
-	hasSidePanel?: boolean
+	isDevPortal?: boolean
 }
 
-export default function Root({ className, children, hasSidePanel }: RootProps) {
+export default function Root({ className, children, isDevPortal }: RootProps) {
 	return (
 		<div
 			className={classNames(s.root, className, {
-				[s.hasSide]: hasSidePanel,
+				[s.isDevPortal]: isDevPortal,
 			})}
 		>
 			{children}

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 @custom-media --dev-dot-viewport (min-width: 924px);
 
 .root {
@@ -9,7 +13,7 @@
 	min-height: calc(100dvh - var(--mds-spacing-12));
 
 	@media (--large) {
-		&:not(.hasSide) {
+		&:not(.isDevPortal) {
 			justify-content: flex-start;
 			height: 100%;
 			min-height: fit-content;
@@ -19,7 +23,7 @@
 	}
 
 	@media (--dev-dot-viewport) {
-		&.hasSide {
+		&.isDevPortal {
 			justify-content: flex-start;
 			height: 100%;
 			min-height: fit-content;

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 import { useCallback } from 'react'
 import classNames from 'classnames'
 import { vercelSplit } from '../../../../lib/v'
@@ -18,7 +22,7 @@ export interface PromoProps {
 	slug?: string
 	icon?: string
 	theme: string
-	hasSidePanel?: boolean
+	isDevPortal?: boolean
 	isPromoOnTop?: boolean
 }
 
@@ -32,7 +36,7 @@ export default function Promo({
 	slug,
 	icon,
 	theme,
-	hasSidePanel,
+	isDevPortal,
 	isPromoOnTop = false,
 }: PromoProps) {
 	const handleClick = useCallback((title, linkUrl, linkTitle, slug) => {
@@ -50,8 +54,7 @@ export default function Promo({
 	return (
 		<div
 			className={classNames(s.promo, {
-				[s.hasSide]: hasSidePanel,
-				[s.noSide]: !hasSidePanel,
+				[s.isDevPortal]: isDevPortal,
 				[s.topPromo]: isPromoOnTop,
 			})}
 		>

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 @custom-media --dev-dot-viewport (min-width: 924px);
 
 .promo {
@@ -15,7 +19,7 @@
 		&.topPromo {
 			margin-bottom: var(--mds-spacing-05);
 		}
-		&.noSide {
+		&:not(.isDevPortal) {
 			margin: 0;
 			width: min-content;
 			min-width: 100%;
@@ -26,7 +30,7 @@
 		&.topPromo {
 			margin-bottom: var(--mds-spacing-05);
 		}
-		&.hasSide {
+		&.isDevPortal {
 			&.topPromo {
 				margin-bottom: var(--mds-spacing-05);
 			}
@@ -64,14 +68,14 @@
 	display: none;
 
 	@media (--large) {
-		@nest .noSide & {
+		@nest :not(.isDevPortal) & {
 			display: block;
 			margin-top: 3px;
 		}
 	}
 
 	@media (--dev-dot-viewport) {
-		@nest .hasSide & {
+		@nest .isDevPortal & {
 			display: block;
 			margin-top: 3px;
 		}

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 import classNames from 'classnames'
 import { type ReactNode, type HTMLAttributes } from 'react'
 

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 import ProductPanel, { type NavProductProps } from './product-panel'
 import StandardPanel, { type NavItem } from './standard-panel'
 import { PromoProps } from './components/promo'

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 import classNames from 'classnames'
 import Link from 'next/link'
 import * as NavPanel from '../components/panel'
@@ -51,6 +55,7 @@ export interface ProductsPanelProps {
 		}[]
 	}
 	isPromoOnTop?: boolean
+	isDevPortal?: boolean
 }
 
 const ProductPanel = ({
@@ -59,25 +64,25 @@ const ProductPanel = ({
 	promo,
 	sidePanel,
 	isPromoOnTop = false,
+	isDevPortal = false,
 }: ProductsPanelProps) => {
 	return (
 		<NavPanel.Root
 			className={classNames(s.productPanel, {
-				[s.hasSide]: sidePanel,
-				[s.noSide]: !sidePanel,
 				[s.topPromo]: isPromoOnTop,
+				[s.isDevPortal]: isDevPortal,
 			})}
-			hasSidePanel={Boolean(sidePanel)}
+			isDevPortal={isDevPortal}
 		>
 			<div className={s.mainPanel}>
 				{promo && isPromoOnTop ? (
 					<Promo
 						{...promo}
-						hasSidePanel={Boolean(sidePanel)}
+						isDevPortal={isDevPortal}
 						isPromoOnTop={isPromoOnTop}
 					/>
 				) : null}
-				<NavPanel.Column hasSidePanel={Boolean(sidePanel)}>
+				<NavPanel.Column isDevPortal={isDevPortal}>
 					<ul className={s.productCategories}>
 						{productCategories.map(({ group, title, products }) => {
 							return (
@@ -107,7 +112,7 @@ const ProductPanel = ({
 					</ul>
 				</NavPanel.Column>
 				{promo && !isPromoOnTop ? (
-					<Promo {...promo} hasSidePanel={Boolean(sidePanel)} />
+					<Promo {...promo} isDevPortal={isDevPortal} />
 				) : null}
 			</div>
 

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

@@ -1,10 +1,14 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 @custom-media --dev-dot-viewport (min-width: 924px);
 
 .productPanel {
 	height: 100%;
 
 	@media (--large) {
-		&.noSide {
+		&:not(.isDevPortal) {
 			display: grid;
 			grid-template-rows: 1fr;
 			grid-template-columns: max-content max-content;
@@ -13,7 +17,7 @@
 	}
 
 	@media (--dev-dot-viewport) {
-		&.hasSide {
+		&.isDevPortal {
 			display: grid;
 			grid-template-rows: 1fr;
 			grid-template-columns: max-content max-content;
@@ -33,13 +37,13 @@
 	}
 
 	@media (--large) {
-		@nest .noSide & {
+		@nest :not(.isDevPortal) & {
 			margin: 0;
 		}
 	}
 
 	@media (--dev-dot-viewport) {
-		@nest .hasSide & {
+		@nest .isDevPortal & {
 			margin: 0;
 		}
 	}
@@ -63,14 +67,14 @@
 	font-weight: var(--mds-typography-font-weight-semibold);
 
 	@media (--large) {
-		@nest .noSide & {
+		@nest :not(.isDevPortal) & {
 			padding-bottom: 0;
 			padding-left: var(--mds-spacing-06);
 		}
 	}
 
 	@media (--dev-dot-viewport) {
-		@nest .hasSide & {
+		@nest .isDevPortal & {
 			padding-bottom: 0;
 			padding-left: var(--mds-spacing-06);
 		}
@@ -85,7 +89,7 @@
 	padding: 0;
 
 	@media (--large) {
-		@nest .noSide & {
+		@nest :not(.isDevPortal) & {
 			padding: var(--mds-spacing-06) var(--mds-spacing-05) var(--mds-spacing-04);
 			grid-auto-flow: row;
 			grid-template-columns: repeat(2, 300px);
@@ -95,7 +99,7 @@
 	}
 
 	@media (--dev-dot-viewport) {
-		@nest .hasSide & {
+		@nest .isDevPortal & {
 			padding: var(--mds-spacing-06) var(--mds-spacing-05) var(--mds-spacing-04);
 			grid-auto-flow: row;
 			grid-template-columns: repeat(2, 300px);
@@ -119,7 +123,7 @@
 	gap: var(--mds-spacing-05);
 
 	@media (--large) {
-		@nest .noSide & {
+		@nest :not(.isDevPortal) & {
 			padding: var(--mds-spacing-03) var(--mds-spacing-05);
 			margin-bottom: 0;
 
@@ -131,7 +135,7 @@
 	}
 
 	@media (--dev-dot-viewport) {
-		@nest .hasSide & {
+		@nest .isDevPortal & {
 			padding: var(--mds-spacing-03) var(--mds-spacing-05);
 			margin-bottom: 0;
 
@@ -151,7 +155,7 @@
 		width: 42px;
 	}
 
-	@nest .noSide & {
+	@nest :not(.isDevPortal) & {
 		& svg {
 			@media (--large) {
 				height: var(--mds-spacing-08);
@@ -160,7 +164,7 @@
 		}
 	}
 
-	@nest .hasSide & {
+	@nest .isDevPortal & {
 		& svg {
 			@media (--dev-dot-viewport) {
 				height: var(--mds-spacing-08);
@@ -202,7 +206,7 @@
 	}
 
 	@media (--large) {
-		@nest .noSide & {
+		@nest :not(.isDevPortal) & {
 			padding: var(--mds-spacing-05) 0 var(--mds-spacing-05) var(--mds-spacing-04);
 		}
 
@@ -212,7 +216,7 @@
 	}
 
 	@media (--dev-dot-viewport) {
-		@nest .hasSide & {
+		@nest .isDevPortal & {
 			padding: var(--mds-spacing-07) 0 var(--mds-spacing-09) var(--mds-spacing-04);
 		}
 

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

@@ -1,8 +1,13 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 import { trackNavClickEvent } from '../../../lib/track-nav-click-event'
 import * as NavPanel from '../components/panel'
 import LinkList, { type LinkListProps } from '../components/link-list'
 import Promo, { type PromoProps } from '../components/promo'
 import s from './style.module.css'
+import classNames from 'classnames'
 
 export interface NavItem {
 	navItems: LinkListProps['links']
@@ -13,6 +18,7 @@ interface StandardPanelProps {
 	promo?: PromoProps
 	sectionName?: string
 	locale?: any
+	isDevPortal?: boolean
 }
 
 const StandardPanel = ({
@@ -20,13 +26,14 @@ const StandardPanel = ({
 	promo,
 	sectionName = '',
 	locale,
+	isDevPortal = false,
 }: StandardPanelProps) => {
 	return (
-		<NavPanel.Root>
-			<div className={s.columns}>
+		<NavPanel.Root isDevPortal={isDevPortal}>
+			<div className={classNames(s.columns, { [s.isDevPortal]: isDevPortal })}>
 				{navData.map(({ navItems }, stableIdx) => {
 					return (
-						<NavPanel.Column key={stableIdx}>
+						<NavPanel.Column key={stableIdx} isDevPortal={isDevPortal}>
 							<LinkList
 								locale={locale}
 								links={navItems}

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

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
+@custom-media --dev-dot-viewport (min-width: 924px);
+
 .columns {
 	display: flex;
 	gap: var(--mds-spacing-03);
@@ -5,7 +11,16 @@
 	margin-top: var(--mds-spacing-07);
 
 	@media (--large) {
-		flex-direction: row;
-		margin-top: 0;
+		&:not(.isDevPortal) {
+			flex-direction: row;
+			margin-top: 0;
+		}
+	}
+
+	@media (--dev-dot-viewport) {
+		&.isDevPortal {
+			flex-direction: row;
+			margin-top: 0;
+		}
 	}
 }

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 import { getLocalizedLinkProps } from '.'
 
 describe('getLocalizedLinkProps', () => {

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 import { parseUrl } from '../parse-url'
 import { allSupportedLocales } from '../supported-locales'
 

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 import { parseUrl, hasHashiCorpDestination } from '.'
 
 describe('parseUrl', () => {

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 export const hashicorpDestinations: string[] = [
 	'app.terraform.io',
 	'boundaryproject.io',

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 import posthog from 'posthog-js'
 
 /**

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 export const allSupportedLocales = [
 	'en',
 	'de',

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 import sendPosthogEvent from '../send-posthog-event'
 
 /**

package/src/lib/v/index.ts

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
+
 import { vercelStegaSplit } from '@vercel/stega'
 
 /**