feat: ResourceListDetails doc block

.storybook/assets/AdobeSVG.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+export const AdobeSVG = () => {
+  return (
+    <svg
+      viewBox="0 0 36 36"
+      focusable="false"
+      aria-hidden="true"
+      aria-label="AdobeLogo">
+      <path 
+        fill="rgb(250, 15, 0)"
+        d="M22.175 4H34v28L22.175 4zm-8.336 0H2v28L13.839 4zm4.165 10.317l7.538 17.682h-4.939l-2.258-5.632h-5.517l5.176-12.05z">
+      </path>
+    </svg>
+  )
+};

.storybook/assets/GitHubSVG.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+export const GitHubSVG = () => {
+  return (
+    <svg
+      focusable="false"
+      aria-hidden="true"
+      aria-label="GitHub"
+      viewBox="0 0 36 36">
+      <path
+        fill="rgb(0, 0, 0)"
+        d="M17.988 2a16.291 16.291 0 0 0-5.147 31.747c.814.149 1.111-.354 1.111-.786 0-.386-.014-1.411-.022-2.77-4.531.984-5.487-2.184-5.487-2.184a4.32 4.32 0 0 0-1.809-2.383c-1.479-1.01.112-.99.112-.99a3.42 3.42 0 0 1 2.495 1.679 3.468 3.468 0 0 0 4.741 1.353 3.482 3.482 0 0 1 1.034-2.177C11.4 25.078 7.6 23.68 7.6 17.438a6.3 6.3 0 0 1 1.677-4.371 5.863 5.863 0 0 1 .16-4.311s1.368-.438 4.479 1.67a15.451 15.451 0 0 1 8.157 0c3.109-2.108 4.475-1.67 4.475-1.67a5.857 5.857 0 0 1 .162 4.311 6.286 6.286 0 0 1 1.674 4.371c0 6.258-3.808 7.635-7.437 8.038a3.888 3.888 0 0 1 1.106 3.017c0 2.177-.02 3.934-.02 4.468 0 .436.293.943 1.12.784A16.292 16.292 0 0 0 17.988 2z">
+      </path>
+    </svg>
+  )
+};

.storybook/assets/NpmSVG.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+export const NpmSVG = () => {
+  return (
+    <svg
+      viewBox="0 0 18 7"
+      focusable="false"
+      aria-hidden="true"
+      aria-label="npm">
+      <path
+        fill="#CB3837"
+        d="M0,0h18v6H9v1H5V6H0V0z M1,5h2V2h1v3h1V1H1V5z M6,1v5h2V5h2V1H6z M8,2h1v2H8V2z M11,1v4h2V2h1v3h1V2h1v3h1V1H11z">
+      </path>
+      <polygon
+        fill="#FFFFFF"
+        points="1,5 3,5 3,2 4,2 4,5 5,5 5,1 1,1 ">
+      </polygon>
+      <path
+        fill="#FFFFFF"
+        d="M6,1v5h2V5h2V1H6z M9,4H8V2h1V4z">
+      </path>
+      <polygon
+        fill="#FFFFFF"
+        points="11,1 11,5 13,5 13,2 14,2 14,5 15,5 15,2 16,2 16,5 17,5 17,1 ">
+      </polygon>
+    </svg>
+  )
+};

.storybook/blocks/ComponentDetails.jsx

@@ -4,6 +4,9 @@ import { styled } from "@storybook/theming";
 import React, { useEffect, useState } from "react";
 import { Code } from "./Typography.jsx";
 import { fetchToken } from "./utilities.js";
+import { AdobeSVG } from "../assets/AdobeSVG.jsx";
+import { GitHubSVG } from "../assets/GitHubSVG.jsx";
+import { NpmSVG } from "../assets/NpmSVG.jsx";
 
 export const DList = styled.dl`
 	display: grid;
@@ -97,6 +100,57 @@ export const StatusLight = styled.span(({ variant = "positive", ...props }) => `
 	margin-block-end: 1px;
 `);
 
+export const ResourceSection = styled.section`
+	display: flex;
+	flex-flow: row wrap;
+	align-items: center;
+`;
+
+export const ResourceLink = styled.a`
+	position: relative;
+	display: inline-flex;
+	flex-direction: row;
+	align-items: center;
+	margin-block-end: 16px;
+	margin-inline-end: 16px;
+	box-sizing: border-box;
+	text-decoration: none;
+	min-inline-size: 100px;
+	border: 1px solid transparent;
+	border-radius: 5px;
+	border-color: rgb(230, 230, 230);
+	overflow: hidden;
+	color: rgb(0, 0, 0);
+
+	&:hover {
+		border-color: rgb(213, 213, 213);
+	}
+`;
+
+export const ResourceIconWrapper = styled.div`
+	background-color: ${props => props.backgroundColor ?? "rgba(248, 248, 248)"};
+	padding: 12px;
+	display: flex;
+	inline-size: 40px;
+	block-size: 40px;
+`;
+
+export const ResourceTextWrapper = styled.div`
+	margin-inline: 16px;
+
+	& > .spectrum-Heading {
+		font-weight: 700;
+		line-height: 1.3;
+	 	font-family: adobe-clean, "adobe-clean", "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+	}
+
+	& > .spectrum-Body {
+		font-size: 14px;
+		line-height: 1.5;
+		font-family: adobe-clean, "adobe-clean", "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+	}
+`;
+
 const VersionDetails = ({ tag, data = {}, isDeprecated = false, skipDate = false, skipLink = false }) => {
 	let statusType = "notice";
 	let statusMessage = "Not yet available on the npm registry.";
@@ -267,12 +321,131 @@ function fetchNpmData(packageName, setnpmData, setIsLoading) {
 	}, [cache, setCache, packageName, setnpmData, setIsLoading]);
 }
 
+/**
+ * Determines which logo SVG to use based on the resource link
+ */
+const iconSvgs = (linkType) => {
+	let svgAsset;
+	let resourceWrapperProps;
+
+	switch(linkType) {
+		case "package": 
+			svgAsset = <NpmSVG />
+			resourceWrapperProps = "rgba(203, 56, 55, 0.1)";
+			break;
+			case "repository": 
+			svgAsset = <GitHubSVG />
+			resourceWrapperProps = "rgba(0, 0, 0, 0.1)"
+			break;
+		case "guidelines": 
+			svgAsset = <AdobeSVG />
+			break;
+		default: 
+			break;
+	}
+
+	return (
+		<ResourceIconWrapper backgroundColor={resourceWrapperProps}>
+			{ svgAsset }
+		</ResourceIconWrapper>
+	)
+};
+
+/**
+ * Converts the linkType to the subtitle text
+ */
+const convertLinkTypeText = (linkType) => {
+	switch(linkType) {
+		case "package": 
+			linkType = "npm"
+			break;
+		case "repository": 
+			linkType = "GitHub"
+			break;
+		case "guidelines": 
+			linkType = "Spectrum website"
+			break;
+		default: 
+			break;
+	}
+	return linkType;
+};
+
+export const ResourceLinkContent = ({data, linkType=["package", "repository", "guidelines"]}) => {
+	const packageJson = data;
+
+	// componentGuidelinesName
+	let packageName = "";
+	let packageLink = "";
+
+	if (linkType === "package") {
+		// NPM package name and link 
+		packageName = packageJson?.name ?? undefined;
+		packageLink = (packageName && typeof packageName !== "undefined") ? `https://npmjs.com/${packageName}` : false;
+	}
+
+	else if (linkType === "repository") {
+		// repo name and link 
+		packageName = packageJson?.name ? packageJson?.name.split('/').pop() : undefined;
+		packageLink = (packageName && typeof packageName !== "undefined") ? `https://github.com/adobe/spectrum-css/tree/main/components/${packageName}` : false;
+	}
+
+	else if (linkType === "guidelines") {
+		// checks if the any nested component name is included in the page URL
+		for(let i = 0; i < packageJson?.spectrum?.length; i++) {
+			if (window.location.href.includes(packageJson?.spectrum[i]?.componentName)) {
+
+				// guidelines site name and link
+				packageName = packageJson?.spectrum[i]?.componentName ?? undefined;
+				packageLink = (packageName && typeof packageName !== "undefined") ? packageJson?.spectrum[i]?.guidelinesLink : false;
+				break;
+			} 
+			packageName = packageJson?.spectrum[i]?.componentName ?? undefined;
+			packageLink = (packageName && typeof packageName !== "undefined") ? packageJson?.spectrum[i]?.guidelinesLink : false;
+		}
+	}
+
+	else {
+		console.warn(`Are you sure you mean "${linkType}"? Please use a valid link type instead: "package", "repository", "guidelines"`);
+	}
+
+	return (
+		<>
+			{packageLink ? <>
+					<ResourceLink href={packageLink} rel="noopener" className="sb-unstyled">
+						{iconSvgs(linkType)}
+						<ResourceTextWrapper>
+							<div className="spectrum-Heading spectrum-Heading--sizeXS">View {linkType}</div>
+							<div className="spectrum-Body spectrum-Body--sizeS">{convertLinkTypeText(linkType)}</div>
+						</ResourceTextWrapper>
+					</ResourceLink>
+				</>
+				: ""
+			}
+		</>
+	)
+};
+
+export const ResourceListDetails = ({data}) => {
+	const packageJson = data;
+
+	return (
+		<ResourceSection skipBorder={true} className="sb-unstyled">
+			<ResourceLinkContent className="doc-block-links" linkType="guidelines" data={packageJson}/>
+			<ResourceLinkContent className="doc-block-links" linkType="repository" data={packageJson}/>
+			<ResourceLinkContent className="doc-block-links" linkType="package" data={packageJson}/>
+		</ResourceSection>
+	)
+};
+
 /**
  * Displays the current version number of the component. The version is read from
  * the component's parameters, where it was sourced from the package.json file.
  *
- * Also displays a component status of "deprecated" if it is set in the story's
+ * Displays a component status of "deprecated" if it is set in the story's
  * parameters.
+ * 
+ * Displays the list of relevant component links (to NPM, repo, guidelines, etc). 
  *
  * Usage of this doc block within MDX template(s):
  *  <ComponentDetails />
@@ -294,26 +467,28 @@ export const ComponentDetails = () => {
 
 	return (
 		<ResetWrapper>
-			{ !isLoading ?
-				<DList className="docblock-metadata sb-unstyled">
-					{ isDeprecated
-						?	<>
-								<DTerm key={'status'}>Status:</DTerm>
-								<DDefinition key={'status-data'}>Deprecated</DDefinition>
-							</>
-						: ""
-					}
-					{ showLocalVersion
-						?	<>
-								<DTerm key={'version-label'}>Local version:</DTerm>
-								<DDefinition key={'version'}><VersionDetails tag={"local"} data={allVersions && allVersions.find(([tag]) => tag === "local")?.[1]} isDeprecated={isDeprecated} /></DDefinition>
+			{ !isLoading ? <>
+					<DList className="docblock-metadata sb-unstyled">
+						{ isDeprecated
+							?	<>
+									<DTerm key={'status'}>Status:</DTerm>
+									<DDefinition key={'status-data'}>Deprecated</DDefinition>
+								</>
+							: ""
+						}
+						{ showLocalVersion
+							?	<>
+									<DTerm key={'version-label'}>Local version:</DTerm>
+									<DDefinition key={'version'}><VersionDetails tag={"local"} data={allVersions && allVersions.find(([tag]) => tag === "local")?.[1]} isDeprecated={isDeprecated} /></DDefinition>
+								</>
+							: <>
+								<DTerm key={'version-label'}>Latest version:</DTerm>
+								<DDefinition key={'version'}><VersionDetails tag={"latest"} data={allVersions && allVersions.find(([tag]) => tag === "latest")?.[1]} isDeprecated={isDeprecated} skipLink={true} /></DDefinition>
 							</>
-						: <>
-							<DTerm key={'version-label'}>Latest version:</DTerm>
-							<DDefinition key={'version'}><VersionDetails tag={"latest"} data={allVersions && allVersions.find(([tag]) => tag === "latest")?.[1]} isDeprecated={isDeprecated} skipLink={true} /></DDefinition>
-						</>
-					}
-				</DList>
+						}
+					</DList>
+					<ResourceListDetails data={packageJson} />
+				</>
 			: ""}
 		</ResetWrapper>
 	);

components/accordion/package.json

@@ -48,5 +48,10 @@
 	],
 	"publishConfig": {
 		"access": "public"
-	}
+	},
+	"spectrum": [{
+		"componentName": "accordion-beta",
+		"guidelinesLink": "https://spectrum-contributions.corp.adobe.com/page/accordion-beta",
+		"rootClass": "spectrum-Accordion"
+	}]
 }

components/actionbar/package.json

@@ -54,5 +54,10 @@
 	],
 	"publishConfig": {
 		"access": "public"
-	}
+	},
+	"spectrum": [{
+		"componentName": "action-bar",
+		"guidelinesLink": "https://spectrum.adobe.com/page/action-bar",
+		"rootClass": "spectrum-ActionBar"
+	}]
 }

components/actionbutton/package.json

@@ -54,5 +54,10 @@
 	],
 	"publishConfig": {
 		"access": "public"
-	}
+	},
+	"spectrum":[{
+		"componentName": "action-button",
+		"guidelinesLink": "https://spectrum.adobe.com/page/action-button",
+		"rootClass": "spectrum-ActionButton"
+	}]
 }

components/actiongroup/package.json

@@ -49,5 +49,10 @@
 	],
 	"publishConfig": {
 		"access": "public"
-	}
+	},
+	"spectrum": [{
+		"componentName": "action-group",
+		"guidelinesLink": "https://spectrum.adobe.com/page/action-group",
+		"rootClass": "spectrum-ActionGroup"
+	}]
 }

components/actionmenu/package.json

@@ -54,5 +54,10 @@
 	},
 	"publishConfig": {
 		"access": "public"
-	}
+	},
+	"spectrum": [{
+		"componentName": "",
+		"guidelinesLink": "",
+		"rootClass": ""
+	}]
 }

components/alertbanner/package.json

@@ -59,5 +59,10 @@
 	],
 	"publishConfig": {
 		"access": "public"
-	}
+	},
+	"spectrum": [{
+		"componentName": "alert-banner",
+		"guidelinesLink": "https://spectrum.adobe.com/page/alert-banner",
+		"rootClass": "spectrum-AlertBanner"
+	}]
 }

components/alertdialog/package.json

@@ -64,5 +64,10 @@
 	],
 	"publishConfig": {
 		"access": "public"
-	}
+	},
+	"spectrum": [{
+		"componentName": "alert-dialog",
+		"guidelinesLink": "https://spectrum.adobe.com/page/alert-dialog",
+		"rootClass": "spectrum-AlertDialog"
+	}]
 }