From 0ac451e822f4cd5091f2dd2019ca9882900f4174 Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Thu, 19 Sep 2024 14:43:59 -0400
Subject: [PATCH] refactor: add support for nested components

this applies to form and meter. Form should no longer render a guidelines
link card, and meter should navigate to its own guidelines page instead
of progress bar's.
---
 .storybook/blocks/ComponentDetails.jsx | 13 +++++++++++++
 components/fieldlabel/package.json     |  3 ++-
 components/progressbar/package.json    |  3 ++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/.storybook/blocks/ComponentDetails.jsx b/.storybook/blocks/ComponentDetails.jsx
index df1d3dbbf23..e4e08f5d0d5 100644
--- a/.storybook/blocks/ComponentDetails.jsx
+++ b/.storybook/blocks/ComponentDetails.jsx
@@ -253,6 +253,9 @@ export const ResourceLinkContent = ({data, linkType=["package", "repository", "g
 	// componentBetaName: for components with guidelines that are still on spectrum-contributions/beta site
 	let packageAltName = "";
 	let packageAltLink = "";
+
+	// For form and meter, both are nested within other component package.json files
+  let nestedComponent = packageJson?.nestedComponentName ?? undefined;
 	
 	if(linkType === "package") {
 		// NPM package name and link 
@@ -269,6 +272,16 @@ export const ResourceLinkContent = ({data, linkType=["package", "repository", "g
 	else if (linkType === "guidelines") {
 		// guidelines site name and link 
 		packageName = packageJson?.componentGuidelinesName ?? undefined;
+
+		 // TODO: This may not be a sustainable approach to targeting specific nested components. For example, text area is sort of nested under text field, but we don't surface text area as a separate component, like meter or form. We should probably refactor this to either support nested components more dynamically or potentially un-nest components.
+		if (nestedComponent === "form") {
+			packageName = undefined;
+		}
+
+		if (nestedComponent === "meter") {
+			packageName = nestedComponent;
+		}
+
 		packageLink = (packageName && typeof packageName !== "undefined") ? `https://spectrum.adobe.com/page/${packageName}` : false;
 
 		// internal contributions/beta guidelines name and link
diff --git a/components/fieldlabel/package.json b/components/fieldlabel/package.json
index a4bd1f3e74d..f42a33e9157 100644
--- a/components/fieldlabel/package.json
+++ b/components/fieldlabel/package.json
@@ -49,5 +49,6 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"componentGuidelinesName": "field-label"
+	"componentGuidelinesName": "field-label",
+	"nestedComponentName": "form"
 }
diff --git a/components/progressbar/package.json b/components/progressbar/package.json
index 5aaf2bb6c7a..ae7dc06a0df 100644
--- a/components/progressbar/package.json
+++ b/components/progressbar/package.json
@@ -54,5 +54,6 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"componentGuidelinesName": "progress-bar"
+	"componentGuidelinesName": "progress-bar",
+	"nestedComponentName": "meter"
 }