@hashicorp/react-components 0.0.0-nightly.f8bc604 → 0.0.0-nightly.f8fa6d1

package/package.json

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

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

@@ -1,3 +1,3 @@
 .flight-icon {
-	display: block;
+	display: inline-block;
 }

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

@@ -5,8 +5,8 @@
 	border-radius: var(--mds-spacing-01);
 	border: 1px solid var(--token-color-border-faint);
 	background-color: var(--token-color-surface-faint);
-	padding: var(--mds-spacing-05) var(--mds-spacing-08)
-		var(--mds-spacing-06) var(--mds-spacing-08);
+	padding: var(--mds-spacing-05) var(--mds-spacing-08) var(--mds-spacing-06)
+		var(--mds-spacing-08);
 	flex-direction: row;
 	gap: var(--mds-spacing-04);
 	margin: var(--mds-spacing-07);
@@ -28,6 +28,10 @@
 			margin-bottom: var(--mds-spacing-05);
 		}
 		&.hasSide {
+			&.topPromo {
+				margin-bottom: var(--mds-spacing-05);
+			}
+
 			margin: 0;
 			width: min-content;
 			min-width: 100%;

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

@@ -96,7 +96,7 @@ const ProductPanel = ({
 
 			{sidePanel ? (
 				<NavPanel.Column className={s.sidePanel}>
-					<Text size="200" weight="semibold">
+					<Text size="200" weight="semibold" className={s.sidePanelText}>
 						{sidePanel.label}
 					</Text>
 
@@ -122,7 +122,11 @@ const ProductPanel = ({
 											/>
 										</div>
 										<div className={s.sidePanelItemContent}>
-											<Text size="200" weight="semibold">
+											<Text
+												size="200"
+												weight="semibold"
+												className={s.sidePanelText}
+											>
 												{title}
 											</Text>
 											<span className={s.sidePanelItemDesc}>{description}</span>

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

@@ -109,8 +109,7 @@
 
 	@media (--large) {
 		@nest .noSide & {
-			padding: var(--mds-spacing-06) var(--mds-spacing-05)
-				var(--mds-spacing-04);
+			padding: var(--mds-spacing-06) var(--mds-spacing-05) var(--mds-spacing-04);
 			grid-auto-flow: row;
 			grid-template-columns: repeat(2, 300px);
 			grid-template-rows: repeat(2, max-content);
@@ -120,8 +119,7 @@
 
 	@media (--dev-dot-viewport) {
 		@nest .hasSide & {
-			padding: var(--mds-spacing-06) var(--mds-spacing-05)
-				var(--mds-spacing-04);
+			padding: var(--mds-spacing-06) var(--mds-spacing-05) var(--mds-spacing-04);
 			grid-auto-flow: row;
 			grid-template-columns: repeat(2, 300px);
 			grid-template-rows: repeat(2, max-content);
@@ -222,11 +220,19 @@
 	justify-content: space-between;
 	flex-direction: column;
 
+	@nest .topPromo & {
+		justify-content: flex-start;
+	}
+
 	@media (--large) {
 		@nest .noSide & {
 			padding: var(--mds-spacing-07) 0 var(--mds-spacing-09)
 				var(--mds-spacing-04);
 		}
+
+		@nest .topPromo & {
+			padding-bottom: var(--mds-spacing-04);
+		}
 	}
 
 	@media (--dev-dot-viewport) {
@@ -234,6 +240,10 @@
 			padding: var(--mds-spacing-07) 0 var(--mds-spacing-09)
 				var(--mds-spacing-04);
 		}
+
+		@nest .topPromo & {
+			padding-bottom: var(--mds-spacing-04);
+		}
 	}
 }
 
@@ -244,8 +254,8 @@
 	flex-direction: column;
 	gap: var(--mds-spacing-05);
 	margin: 0;
-	padding: var(--mds-spacing-07) var(--mds-spacing-04)
-		var(--mds-spacing-09) var(--mds-spacing-07);
+	padding: var(--mds-spacing-07) var(--mds-spacing-04) var(--mds-spacing-09)
+		var(--mds-spacing-07);
 }
 
 .sidePanelItems {
@@ -340,3 +350,7 @@ packages/react-components/src/components/nav-panel/components/link-list/style.mo
 		fill: inherit;
 	}
 }
+
+.sidePanelText {
+	font-weight: var(--mds-typography-font-weight-semibold);
+}

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

@@ -39,7 +39,6 @@ export function parseUrl(url: string | undefined): {
 	href: string
 } {
 	if (!url) {
-		console.log('No url to parse, returning empty string')
 		return { linkType: '', href: '' }
 	}