@hashicorp/react-components 0.0.0-nightly.9ce2a10 → 0.0.0-nightly.a1aa23a

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hashicorp/react-components",
-	"version": "0.0.0-nightly.9ce2a10",
+	"version": "0.0.0-nightly.a1aa23a",
 	"main": "src/index.ts",
 	"scripts": {
 		"lint": "next-hashicorp lint",

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

@@ -1,4 +1,4 @@
-@custom-media --dev-dot-viewport (min-width: 1230px);
+@custom-media --dev-dot-viewport (min-width: 924px);
 
 .column {
 	position: relative;
@@ -7,7 +7,7 @@
 	justify-content: flex-start;
 	min-width: 190px;
 	padding: 0;
-	margin: 0 var(--hdsplus-spacing-05);
+	margin: 0 var(--hdsplus-spacing-07);
 	border-radius: var(--hdsplus-spacing-03);
 
 	@media (--large) {

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

@@ -1,4 +1,4 @@
-@custom-media --dev-dot-viewport (min-width: 1230px);
+@custom-media --dev-dot-viewport (min-width: 924px);
 
 .root {
 	width: 100%;

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

@@ -1,4 +1,4 @@
-@custom-media --dev-dot-viewport (min-width: 1230px);
+@custom-media --dev-dot-viewport (min-width: 924px);
 
 .promo {
 	display: flex;
@@ -9,7 +9,8 @@
 		var(--hdsplus-spacing-06) var(--hdsplus-spacing-08);
 	flex-direction: row;
 	gap: var(--hdsplus-spacing-04);
-	margin: var(--hdsplus-spacing-05);
+	margin: var(--hdsplus-spacing-07);
+	margin-bottom: var(--hdsplus-spacing-09);
 
 	@media (--large) {
 		&.noSide {

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

@@ -1,4 +1,3 @@
-import { CSSProperties } from 'react'
 import classNames from 'classnames'
 import Link from 'next/link'
 import * as NavPanel from '../components/panel'
@@ -12,7 +11,7 @@ import * as NavigationMenu from '@radix-ui/react-navigation-menu'
 import s from './style.module.css'
 
 const PRODUCT_LOGO_MAP = new Map([
-	['Terraform', 'terraform-fill-color'],
+	['Terraform', 'terraform-fill'],
 	['Packer', 'packer-fill-color'],
 	['Vault', 'vault-fill-color'],
 	['Boundary', 'boundary-fill-color'],
@@ -25,6 +24,7 @@ const PRODUCT_LOGO_MAP = new Map([
 ])
 
 const PRODUCT_LOGO_EXCEPTION_CLASSNAMES = {
+	Terraform: 'terraform',
 	'HCP Vault Secrets': 'hcpVaultSecrets',
 	'HCP Vault Radar': 'hcpVaultRadar',
 }
@@ -63,17 +63,7 @@ const ProductPanel = ({
 							return (
 								<li key={title} className={s.productCategory}>
 									<TextPlus.Body className={s.eyebrow}>{title}</TextPlus.Body>
-									<ul
-										className={s.productList}
-										// Dynamically calculate row count based on number of items divided by expected columns
-										style={
-											{
-												'--row-count-above-mobile': Math.ceil(
-													products.length / 2
-												),
-											} as CSSProperties
-										}
-									>
+									<ul className={s.productList}>
 										{products.map((product) => {
 											return (
 												<li key={product.url}>
@@ -105,7 +95,11 @@ const ProductPanel = ({
 						{sidePanel.navItems.map(({ icon, title, description, url }) => {
 							return (
 								<li key={title}>
-									<Link href={parseUrl(url).href} className={s.sidePanelItem}>
+									<Link
+										aria-label={`${title} - ${description}`}
+										href={parseUrl(url).href}
+										className={classNames(s.sidePanelItem, s.focusIndicator)}
+									>
 										<div className={s.iconBackground}>
 											<FlightIcon
 												size={16}
@@ -140,6 +134,7 @@ function NavProduct({ url, product, description }: NavProductProps) {
 	return (
 		<NavigationMenu.Link asChild>
 			<Link
+				aria-label={`${product} - ${description}`}
 				href={parseUrl(url).href}
 				onClickCapture={() => {
 					trackNavClickEvent(product, url, 'products')

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

@@ -1,4 +1,4 @@
-@custom-media --dev-dot-viewport (min-width: 1230px);
+@custom-media --dev-dot-viewport (min-width: 924px);
 
 .productPanel {
 	height: 100%;
@@ -26,7 +26,7 @@
 	list-style: none;
 	padding: 0;
 	display: grid;
-	margin: var(--hdsplus-spacing-06) 0 0;
+	margin: var(--hdsplus-spacing-07) 0 0;
 
 	@media (--large) {
 		@nest .noSide & {
@@ -84,9 +84,9 @@
 		@nest .noSide & {
 			padding: var(--hdsplus-spacing-06) var(--hdsplus-spacing-05)
 				var(--hdsplus-spacing-04);
-			grid-auto-flow: column;
+			grid-auto-flow: row;
 			grid-template-columns: repeat(2, 300px);
-			grid-template-rows: repeat(var(--row-count-above-mobile, 1), max-content);
+			grid-template-rows: repeat(2, max-content);
 			gap: 0;
 		}
 	}
@@ -95,12 +95,18 @@
 		@nest .hasSide & {
 			padding: var(--hdsplus-spacing-06) var(--hdsplus-spacing-05)
 				var(--hdsplus-spacing-04);
-			grid-auto-flow: column;
+			grid-auto-flow: row;
 			grid-template-columns: repeat(2, 300px);
-			grid-template-rows: repeat(var(--row-count-above-mobile, 1), max-content);
+			grid-template-rows: repeat(2, max-content);
 			gap: 0;
 		}
 	}
+
+	& li:last-child {
+		& .productWrapper {
+			margin-bottom: 0;
+		}
+	}
 }
 
 /* NavProduct styles */
@@ -191,14 +197,14 @@
 
 	@media (--large) {
 		@nest .noSide & {
-			padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-05)
+			padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-09)
 				var(--hdsplus-spacing-04);
 		}
 	}
 
 	@media (--dev-dot-viewport) {
 		@nest .hasSide & {
-			padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-05)
+			padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-09)
 				var(--hdsplus-spacing-04);
 		}
 	}
@@ -231,12 +237,10 @@
 /* Lifted from .productWrapper */
 .sidePanelItem {
 	display: flex;
-	margin-bottom: var(--hdsplus-spacing-05);
 	gap: var(--hdsplus-spacing-05);
 
 	@media (--dev-dot-viewport) {
 		padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-05);
-		margin-bottom: 0;
 
 		&:hover {
 			background-color: var(--token-color-surface-interactive-hover);
@@ -276,6 +280,21 @@ packages/react-components/src/components/nav-panel/components/link-list/style.mo
 
 /* Branding exception classnames */
 
+/* Allows switching to a dark-mode-specific color for Terraform */
+.terraform {
+	& use {
+		fill: var(--token-color-terraform-brand);
+
+		@nest [data-theme='dark'] & {
+			fill: var(--token-color-terraform-foreground);
+		}
+	}
+
+	& path {
+		fill: inherit;
+	}
+}
+
 /* Styles for HCP Vault mimic the spec for `product-square` icons,
 	while allowing the symbol inside the icon border to change color
 	based on the site's theme

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

@@ -2,7 +2,7 @@
 	display: flex;
 	gap: var(--hdsplus-spacing-03);
 	flex-direction: column;
-	margin-top: var(--hdsplus-spacing-06);
+	margin-top: var(--hdsplus-spacing-07);
 
 	@media (--large) {
 		flex-direction: row;

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

@@ -5,5 +5,6 @@ import packer from '@hashicorp/web-mktg-logos/src/packer/packer-community/packer
 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

@@ -5,5 +5,6 @@ import packer from '@hashicorp/web-mktg-logos/src/packer/packer-community/packer
 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 }