@hashicorp/react-components 0.0.0-nightly.f3bf415 → 0.0.0-nightly.f535c63

package/src/components/subnav/partials/MenuItemsOverflow/style.module.css

@@ -3,8 +3,6 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-/* Note: consumes from theme.module.css, as marked */
-
 .root {
 	position: relative;
 	display: flex;
@@ -12,14 +10,14 @@
 }
 
 .dropdown {
-	background: var(--dropdown-background-color); /* from theme.module.css */
-	border-radius: 4px;
+	background: var(--token-color-surface-primary);
+	border-radius: var(--hdsplus-spacing-03);
 	box-shadow: var(--token-elevation-high-box-shadow);
-	border: 1px solid var(--border-color);
+	border: 1px solid var(--token-color-border-primary);
 	margin-top: 8px;
 	max-height: calc(100vh - 300%);
 	overflow-y: auto;
-	padding: var(--hdsplus-spacing-04) var(--hdsplus-spacing-07);
+	padding: var(--hdsplus-spacing-04);
 	position: absolute;
 	right: 0;
 	top: 100%;
@@ -52,27 +50,35 @@
 
 .submenuTitle {
 	composes: g-type-label from global;
-	margin: 12px 0 8px 0;
-	color: var(--menu-item-heading-text-color); /* from theme.module.css */
+	margin: var(--hdsplus-spacing-04) var(--hdsplus-spacing-03) 8px;
+	color: var(--token-color-foreground-faint);
 }
 
 .divider {
-	margin: 12px 0;
+	margin: var(--hdsplus-spacing-04) var(--hdsplus-spacing-03);
 	border: 0;
 	padding: 0;
 	height: 1px;
-	background: var(--border-color); /* from theme.module.css */
+	background: var(--token-color-border-primary);
 }
 
 .submenuItem {
-	display: block;
-	padding: 4px 0;
-	color: var(--menu-item-text-color); /* from theme.module.css */
-	font-weight: var(--font-weight-semi-bold);
-	font-size: var(--token-typography-body-300-font-size);
+	composes: hds-typography-body-300 from global;
+	composes: hds-font-weight-semibold from global;
+	display: flex;
+	gap: var(--hdsplus-spacing-04);
+	padding: var(--hdsplus-spacing-02) var(--hdsplus-spacing-03);
+	color: var(--token-color-foreground-primary);
+	border-radius: var(--hdsplus-spacing-01);
+	align-items: center;
 
 	&:hover {
-		text-decoration: underline;
+		background-color: var(--token-color-surface-interactive-hover);
+	}
+
+	&:focus {
+		outline: 2px solid var(--token-color-focus-action-internal);
+		outline-style: auto;
 	}
 }
 

package/src/components/subnav/partials/TitleLink/index.tsx

@@ -7,20 +7,20 @@ import { forwardRef } from 'react'
 import { camelCase } from 'camel-case'
 import Link from 'next/link'
 import Image from 'next/image'
-import { v } from '@web/cms'
+import { vercelSplit } from '../../../../lib/v'
 import classNames from 'classnames'
 import * as CommunityProductLogosOnDark from './mktg-logos/all-community-product-logos_on-dark'
 import * as CommunityProductLogosOnLight from './mktg-logos/all-community-product-logos_on-light'
 import * as PrimaryLogosOnDark from './mktg-logos/all-primary-logos_on-dark'
 import * as PrimaryLogosOnLight from './mktg-logos/all-primary-logos_on-light'
-import HashiCorpLogoOnLight from '@web/mktg-logos/src/hashicorp/hashicorp-horizontal_on-light.svg'
-import HashiCorpLogoOnDark from '@web/mktg-logos/src/hashicorp/hashicorp-horizontal_on-dark.svg'
-import HCPLogoOnLight from '@web/mktg-logos/src/hcp/hcp-horizontal_on-light.svg'
-import HCPLogoOnDark from '@web/mktg-logos/src/hcp/hcp-horizontal_on-dark.svg'
-import WaypointLogoAttrOnLight from '@web/mktg-logos/src/waypoint/hashicorp-waypoint-attributed/hashicorp-waypoint_on-light.svg'
-import WaypointLogoAttrOnDark from '@web/mktg-logos/src/waypoint/hashicorp-waypoint-attributed/hashicorp-waypoint_on-dark.svg'
-import HCPTerraformLogoOnLight from '@web/mktg-logos/src/terraform/hcp-terraform/hcp-terraform_on-light.svg'
-import HCPTerraformLogoOnDark from '@web/mktg-logos/src/terraform/hcp-terraform/hcp-terraform_on-dark.svg'
+import HashiCorpLogoOnLight from '@hashicorp/web-mktg-logos/src/hashicorp/hashicorp-horizontal_on-light.svg'
+import HashiCorpLogoOnDark from '@hashicorp/web-mktg-logos/src/hashicorp/hashicorp-horizontal_on-dark.svg'
+import HCPLogoOnLight from '@hashicorp/web-mktg-logos/src/hcp/hcp-horizontal_on-light.svg'
+import HCPLogoOnDark from '@hashicorp/web-mktg-logos/src/hcp/hcp-horizontal_on-dark.svg'
+import WaypointLogoAttrOnLight from '@hashicorp/web-mktg-logos/src/waypoint/hashicorp-waypoint-attributed/hashicorp-waypoint_on-light.svg'
+import WaypointLogoAttrOnDark from '@hashicorp/web-mktg-logos/src/waypoint/hashicorp-waypoint-attributed/hashicorp-waypoint_on-dark.svg'
+import HCPTerraformLogoOnLight from '@hashicorp/web-mktg-logos/src/terraform/hcp-terraform/hcp-terraform_on-light.svg'
+import HCPTerraformLogoOnDark from '@hashicorp/web-mktg-logos/src/terraform/hcp-terraform/hcp-terraform_on-dark.svg'
 import s from './style.module.css'
 
 const logoDict = {
@@ -81,7 +81,7 @@ function getLogo(
 
 const TitleLink = forwardRef<HTMLAnchorElement, TitleLinkProps>(
 	({ text, url, product, theme }, ref) => {
-		const parsedText = v(text)
+		const parsedText = vercelSplit(text)
 		const Logo = getLogo(parsedText, theme)
 
 		return (

package/src/components/subnav/partials/TitleLink/mktg-logos/all-community-product-logos_on-dark.ts

@@ -1,9 +1,10 @@
-import boundary from '@web/mktg-logos/src/boundary/boundary-community/boundary-community_on-dark.svg'
-import consul from '@web/mktg-logos/src/consul/consul-community/consul-community_on-dark.svg'
-import nomad from '@web/mktg-logos/src/nomad/nomad-community/nomad-community_on-dark.svg'
-import packer from '@web/mktg-logos/src/packer/packer-community/packer-community_on-dark.svg'
-import terraform from '@web/mktg-logos/src/terraform/terraform-community/terraform-community_on-dark.svg'
-import vagrant from '@web/mktg-logos/src/vagrant/vagrant-community/vagrant-community_on-dark.svg'
-import vault from '@web/mktg-logos/src/vault/vault-community/vault-community_on-dark.svg'
+import boundary from '@hashicorp/web-mktg-logos/src/boundary/boundary-community/boundary-community_on-dark.svg'
+import consul from '@hashicorp/web-mktg-logos/src/consul/consul-community/consul-community_on-dark.svg'
+import nomad from '@hashicorp/web-mktg-logos/src/nomad/nomad-community/nomad-community_on-dark.svg'
+import packer from '@hashicorp/web-mktg-logos/src/packer/packer-community/packer-community_on-dark.svg'
+import terraform from '@hashicorp/web-mktg-logos/src/terraform/terraform-community/terraform-community_on-dark.svg'
+import vagrant from '@hashicorp/web-mktg-logos/src/vagrant/vagrant-community/vagrant-community_on-dark.svg'
+import vault from '@hashicorp/web-mktg-logos/src/vault/vault-community/vault-community_on-dark.svg'
+import waypoint from '@hashicorp/web-mktg-logos/src/waypoint/hashicorp-waypoint-attributed/hashicorp-waypoint_on-dark.svg'
 
-export { boundary, consul, nomad, packer, terraform, vagrant, vault }
+export { boundary, consul, nomad, packer, terraform, vagrant, vault, waypoint }

package/src/components/subnav/partials/TitleLink/mktg-logos/all-community-product-logos_on-light.ts

@@ -1,9 +1,10 @@
-import boundary from '@web/mktg-logos/src/boundary/boundary-community/boundary-community_on-light.svg'
-import consul from '@web/mktg-logos/src/consul/consul-community/consul-community_on-light.svg'
-import nomad from '@web/mktg-logos/src/nomad/nomad-community/nomad-community_on-light.svg'
-import packer from '@web/mktg-logos/src/packer/packer-community/packer-community_on-light.svg'
-import terraform from '@web/mktg-logos/src/terraform/terraform-community/terraform-community_on-light.svg'
-import vagrant from '@web/mktg-logos/src/vagrant/vagrant-community/vagrant-community_on-light.svg'
-import vault from '@web/mktg-logos/src/vault/vault-community/vault-community_on-light.svg'
+import boundary from '@hashicorp/web-mktg-logos/src/boundary/boundary-community/boundary-community_on-light.svg'
+import consul from '@hashicorp/web-mktg-logos/src/consul/consul-community/consul-community_on-light.svg'
+import nomad from '@hashicorp/web-mktg-logos/src/nomad/nomad-community/nomad-community_on-light.svg'
+import packer from '@hashicorp/web-mktg-logos/src/packer/packer-community/packer-community_on-light.svg'
+import terraform from '@hashicorp/web-mktg-logos/src/terraform/terraform-community/terraform-community_on-light.svg'
+import vagrant from '@hashicorp/web-mktg-logos/src/vagrant/vagrant-community/vagrant-community_on-light.svg'
+import vault from '@hashicorp/web-mktg-logos/src/vault/vault-community/vault-community_on-light.svg'
+import waypoint from '@hashicorp/web-mktg-logos/src/waypoint/hashicorp-waypoint-attributed/hashicorp-waypoint_on-light.svg'
 
-export { boundary, consul, nomad, packer, terraform, vagrant, vault }
+export { boundary, consul, nomad, packer, terraform, vagrant, vault, waypoint }

package/src/components/subnav/partials/TitleLink/mktg-logos/all-primary-logos_on-dark.ts

@@ -1,13 +1,13 @@
-import boundary from '@web/mktg-logos/src/boundary/boundary/boundary_on-dark.svg'
-import consul from '@web/mktg-logos/src/consul/consul/consul_on-dark.svg'
-import nomad from '@web/mktg-logos/src/nomad/nomad/nomad_on-dark.svg'
-import packer from '@web/mktg-logos/src/packer/packer/packer_on-dark.svg'
-import terraform from '@web/mktg-logos/src/terraform/terraform/terraform_on-dark.svg'
-import vagrant from '@web/mktg-logos/src/vagrant/vagrant/vagrant_on-dark.svg'
-import vault from '@web/mktg-logos/src/vault/vault/vault_on-dark.svg'
-import waypoint from '@web/mktg-logos/src/waypoint/waypoint/waypoint_on-dark.svg'
-import hashiconf from '@web/mktg-logos/src/conferences/hashiconf_on-dark.svg'
-import hashidays from '@web/mktg-logos/src/conferences/hashidays_on-dark.svg'
+import boundary from '@hashicorp/web-mktg-logos/src/boundary/boundary/boundary_on-dark.svg'
+import consul from '@hashicorp/web-mktg-logos/src/consul/consul/consul_on-dark.svg'
+import nomad from '@hashicorp/web-mktg-logos/src/nomad/nomad/nomad_on-dark.svg'
+import packer from '@hashicorp/web-mktg-logos/src/packer/packer/packer_on-dark.svg'
+import terraform from '@hashicorp/web-mktg-logos/src/terraform/terraform/terraform_on-dark.svg'
+import vagrant from '@hashicorp/web-mktg-logos/src/vagrant/vagrant/vagrant_on-dark.svg'
+import vault from '@hashicorp/web-mktg-logos/src/vault/vault/vault_on-dark.svg'
+import waypoint from '@hashicorp/web-mktg-logos/src/waypoint/waypoint/waypoint_on-dark.svg'
+import hashiconf from '@hashicorp/web-mktg-logos/src/conferences/hashiconf_on-dark.svg'
+import hashidays from '@hashicorp/web-mktg-logos/src/conferences/hashidays_on-dark.svg'
 
 export {
 	boundary,

package/src/components/subnav/partials/TitleLink/mktg-logos/all-primary-logos_on-light.ts

@@ -1,13 +1,13 @@
-import boundary from '@web/mktg-logos/src/boundary/boundary/boundary_on-light.svg'
-import consul from '@web/mktg-logos/src/consul/consul/consul_on-light.svg'
-import nomad from '@web/mktg-logos/src/nomad/nomad/nomad_on-light.svg'
-import packer from '@web/mktg-logos/src/packer/packer/packer_on-light.svg'
-import terraform from '@web/mktg-logos/src/terraform/terraform/terraform_on-light.svg'
-import vagrant from '@web/mktg-logos/src/vagrant/vagrant/vagrant_on-light.svg'
-import vault from '@web/mktg-logos/src/vault/vault/vault_on-light.svg'
-import waypoint from '@web/mktg-logos/src/waypoint/waypoint/waypoint_on-light.svg'
-import hashiconf from '@web/mktg-logos/src/conferences/hashiconf_on-light.svg'
-import hashidays from '@web/mktg-logos/src/conferences/hashidays_on-light.svg'
+import boundary from '@hashicorp/web-mktg-logos/src/boundary/boundary/boundary_on-light.svg'
+import consul from '@hashicorp/web-mktg-logos/src/consul/consul/consul_on-light.svg'
+import nomad from '@hashicorp/web-mktg-logos/src/nomad/nomad/nomad_on-light.svg'
+import packer from '@hashicorp/web-mktg-logos/src/packer/packer/packer_on-light.svg'
+import terraform from '@hashicorp/web-mktg-logos/src/terraform/terraform/terraform_on-light.svg'
+import vagrant from '@hashicorp/web-mktg-logos/src/vagrant/vagrant/vagrant_on-light.svg'
+import vault from '@hashicorp/web-mktg-logos/src/vault/vault/vault_on-light.svg'
+import waypoint from '@hashicorp/web-mktg-logos/src/waypoint/waypoint/waypoint_on-light.svg'
+import hashiconf from '@hashicorp/web-mktg-logos/src/conferences/hashiconf_on-light.svg'
+import hashidays from '@hashicorp/web-mktg-logos/src/conferences/hashidays_on-light.svg'
 
 export {
 	boundary,

package/src/components/subnav/partials/TitleLink/style.module.css

@@ -10,7 +10,7 @@
 	display: inline-flex;
 	padding-block: var(--hdsplus-spacing-04);
 	font-weight: var(--font-weight-bold);
-	color: var(--title-text-color); /* from theme.module.css */
+	color: var(--token-color-foreground-primary); /* from theme.module.css */
 	font-size: 1.25rem;
 	line-height: 1.35rem;
 

package/src/components/subnav/partials/nav-item-text/style.module.css

@@ -3,13 +3,11 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-/* Note: consumes from theme.module.css, as marked */
-
 .root {
-	color: var(--menu-item-text-color); /* from theme.module.css */
+	color: var(--token-color-foreground-primary);
 	position: relative;
 
 	&.isActive {
-		color: var(--menu-item-text-color-active);
+		color: var(--token-color-foreground-strong);
 	}
 }

package/src/components/subnav/style.module.css

@@ -3,19 +3,17 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-/* Note: consumes from theme.module.css, as marked */
-
 .root {
 	position: sticky;
 	top: -1px;
 	z-index: 900;
-	background: var(--background-color); /* from theme.module.css */
-	border-top: 1px solid var(--border-color); /* from theme.module.css */
+	background: var(--token-color-surface-primary);
+	border-top: 1px solid var(--token-color-border-faint);
 	border-bottom: 1px solid transparent;
 	transition: border-bottom-color 0.8s;
 
 	&.isSticky {
-		border-bottom-color: var(--border-color); /* from theme.module.css */
+		border-bottom-color: var(--token-color-border-faint);
 	}
 
 	/*

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

@@ -0,0 +1,35 @@
+import { parseUrl } from '.'
+
+describe('parseUrl', () => {
+	it('detects hashicorp.com URLs as internal', () => {
+		const url = parseUrl('https://hashicorp.com/example')
+		expect(url.href).toBe('/example')
+		expect(url.linkType).toBe('inbound')
+	})
+
+	it('detects URLs not containing hashicorp.com as external', () => {
+		const externalUrl = 'https://google.com/example'
+		const url = parseUrl(externalUrl)
+		expect(url.href).toBe(externalUrl)
+		expect(url.linkType).toBe('outbound')
+	})
+
+	it('detects relative URLs as internal', () => {
+		const relativeUrl = '/resources'
+		const url = parseUrl(relativeUrl)
+		expect(url.href).toBe(relativeUrl)
+		expect(url.linkType).toBe('inbound')
+	})
+
+	it('leaves URL search params intact', () => {
+		const url = parseUrl(
+			'https://hashicorp.com/resources?type=case-study&products=terraform'
+		)
+		expect(url.href).toBe('/resources?type=case-study&products=terraform')
+	})
+
+	it('leaves HashiCorp subdomain URLs intact', () => {
+		const url = parseUrl('https://developer.hashicorp.com/terraform')
+		expect(url.href).toBe('https://developer.hashicorp.com/terraform')
+	})
+})

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

@@ -0,0 +1,32 @@
+export function parseUrl(url: string | undefined): {
+	linkType: 'inbound' | 'outbound'
+	href: string
+} {
+	if (!url) {
+		throw new Error('url is required')
+	}
+
+	if (isRelative(url) || isAnchor(url)) {
+		return { linkType: 'inbound', href: url }
+	}
+
+	if (isInternal(url)) {
+		try {
+			const { pathname, search } = new URL(url)
+			const href = pathname + search
+			return { linkType: 'inbound', href }
+		} catch (error) {
+			throw new Error(`Invalid href: ${url}`)
+		}
+	}
+
+	return { linkType: 'outbound', href: url }
+}
+
+const isRelative = (url) => url.startsWith('/')
+const isAnchor = (url) => url.startsWith('#')
+
+export const isInternal = (url) => {
+	const hostname = new URL(url).hostname
+	return hostname === 'hashicorp.com'
+}

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

@@ -0,0 +1,22 @@
+import va from '@vercel/analytics'
+
+/**
+ * Pushes a 'Nav link click' custom event to Vercel Analytics.
+ * A wrapper around the Vercel Analytics track method.
+ *
+ * @param {string} name - The name of the nav link
+ * @param {string} href - The href for the nav link
+ * @param {string} [section] - The name of the section of the nav. Top-level links do not have a section.
+ */
+
+export const trackNavClickEvent = (
+	name: string,
+	href: string,
+	section: string
+) => {
+	va.track('Nav link click', {
+		name,
+		href,
+		section,
+	})
+}

package/src/lib/v/index.ts

@@ -0,0 +1,10 @@
+import { vercelStegaSplit } from '@vercel/stega'
+
+/**
+ * Takes in a Vercel Visual Editing string and returns the string without
+ * hidden data.
+ *
+ */
+export const vercelSplit = <VercelString>(
+	original: VercelString
+): VercelString => vercelStegaSplit(original as string).cleaned as VercelString

package/src/components/subnav/theme.module.css

@@ -1,50 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-/*
-Theme settings.
-Consumed in nearly all CSS files in this component,
-including in /partials.
-*/
-
-.light {
-	/* main */
-	--background-color: var(--white);
-	--border-color: var(--gray-5);
-	--dropdown-background-color: var(--white);
-
-	/* title or logo link */
-	--title-text-color: var(--gray-1);
-
-	/* github-stars-link */
-	--gh-stars-icon-color: var(--black);
-	--gh-stars-scrim-color: rgba(0, 0, 0, 0.1);
-
-	/* menu items */
-	--menu-item-text-color: #3B3D45;
-	--menu-item-text-color-active: #0C0C0E;
-	--menu-item-heading-text-color: var(--gray-3);
-	--menu-item-hover-color: #F1F2F3;
-}
-
-.dark {
-	/* main */
-	--background-color: var(--black);
-	--border-color: var(--gray-2);
-	--dropdown-background-color: var(--gray-1);
-
-	/* title or logo link */
-	--title-text-color: var(--white);
-
-	/* github-stars-link */
-	--gh-stars-icon-color: var(--white);
-	--gh-stars-scrim-color: rgba(255, 255, 255, 0.15);
-
-	/* menu items */
-	--menu-item-text-color: #D5D7DB;
-	--menu-item-text-color-active: #EFEFF1;
-	--menu-item-heading-text-color: var(--gray-4);
-	--menu-item-hover-color: #1E222A;
-}