npm - @hashicorp/react-components - Versions diffs - 1.2.0 → 1.2.2 - Mend

@hashicorp/react-components 1.2.0 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/.test/setup-vitest.js CHANGED Viewed

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

package/global.d.ts CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@hashicorp/react-components",
-	"version": "1.2.0",
+	"version": "1.2.2",
 	"main": "src/index.ts",
 	"scripts": {
 		"lint": "npm run lint:js",
@@ -10,7 +10,6 @@
 	},
 	"dependencies": {
 		"@hashicorp/flight-icons": "^3.7.0",
-		"@web/product-meta": "^0.1.1",
 		"@hashicorp/web-mktg-logos": "*",
 		"@radix-ui/react-navigation-menu": "^1.2.14",
 		"@radix-ui/react-visually-hidden": "^1.2.4",

package/postcss.config.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
 import classNames from 'classnames'
 import s from './style.module.css'

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
 @custom-media --dev-dot-viewport (min-width: 924px);
 .column {

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

@@ -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 CHANGED Viewed

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
 import classNames from 'classnames'
 import s from './style.module.css'

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
 @custom-media --dev-dot-viewport (min-width: 924px);
 .root {

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
 import { useCallback } from 'react'
 import classNames from 'classnames'
 import { vercelSplit } from '../../../../lib/v'

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
 @custom-media --dev-dot-viewport (min-width: 924px);
 .promo {

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,9 +1,12 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
 import classNames from 'classnames'
 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 '@web/product-meta'
 import FlightIcon from '../components/flight-icon'
 import { Text } from '../components/text'
 import { trackNavClickEvent } from '../../../lib/track-nav-click-event'
@@ -160,6 +163,16 @@ const ProductPanel = ({
 	)
 }
+type Products =
+	| 'hashicorp'
+	| 'boundary'
+	| 'consul'
+	| 'nomad'
+	| 'packer'
+	| 'terraform'
+	| 'vault'
+	| 'vagrant'
+	| 'waypoint'
 export interface NavProductProps {
 	locale?: string
 	url: string

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
 @custom-media --dev-dot-viewport (min-width: 924px);
 .productPanel {

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

@@ -1,3 +1,7 @@
+/**
+ * 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'

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

@@ -1,3 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 2026
+ */
 .columns {
 	display: flex;
 	gap: var(--mds-spacing-03);

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

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

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

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

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

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

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

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

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

package/src/lib/v/index.ts CHANGED Viewed

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