adobe · pfulton · Oct 18, 2024 · Sep 16, 2024 · Sep 18, 2024 · Sep 19, 2024
diff --git a/.storybook/assets/images/adobe_logo.svg b/.storybook/assets/images/adobe_logo.svg
diff --git a/.storybook/assets/images/github_logo.svg b/.storybook/assets/images/github_logo.svg
diff --git a/.storybook/assets/images/npm_logo.svg b/.storybook/assets/images/npm_logo.svg
diff --git a/.storybook/blocks/ComponentDetails.jsx b/.storybook/blocks/ComponentDetails.jsx
@@ -2,7 +2,10 @@ import { useOf } from '@storybook/blocks';
 import { ResetWrapper } from "@storybook/components";
 import { styled } from "@storybook/theming";
 import React, { useEffect, useState } from "react";
-import { Code } from "./Typography.jsx";
+import AdobeSVG from "../assets/images/adobe_logo.svg?raw";
+import GitHubSVG from "../assets/images/github_logo.svg?raw";
+import NpmSVG from "../assets/images/npm_logo.svg?raw";
+import { Body, Code, Heading } from "./Typography.jsx";
 import { fetchToken } from "./utilities.js";
 
 export const DList = styled.dl`
@@ -97,6 +100,45 @@ 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: rgba(248, 248, 248);
+	padding: 12px;
+	display: flex;
+	inline-size: 40px;
+	block-size: 40px;
+`;
+
+export const ResourceTextWrapper = styled.div`
+	margin-inline: 16px;
+`;
+
 const VersionDetails = ({ tag, data = {}, isDeprecated = false, skipDate = false, skipLink = false }) => {
 	let statusType = "notice";
 	let statusMessage = "Not yet available on the npm registry.";
@@ -264,13 +306,104 @@ function fetchNpmData(packageName, setnpmData, setIsLoading) {
 	}, [cache, setCache, packageName, setnpmData, setIsLoading]);
 }
 
+const fetchLogo = (brand) => {
+	switch(brand) {
+		case "npm":
+			return NpmSVG;
+		case "GitHub":
+			return GitHubSVG;
+		case "Adobe":
+			return AdobeSVG;
+	}
+
+	return;
+}
+
+/**
+ * Displays a resource card containing text and an image that links to a particular resource.
+ *
+ * @param {string} heading - heading of the resource card
+ * @param {string} alt - additional description of the resource card
+ * @param {string} image - the SVG image
+ * @param {string} href - optional link to the resource, found in packageJson?.spectrum?.guidelines
+ * @returns {string}
+ */
+export const ResourceLinkContent = ({ heading, alt, logo, href }) => {
+	if (!href) return;
+
+	return (
+		<ResourceLink href={href} className="sb-unstyled" title={alt}>
+			<ResourceIconWrapper dangerouslySetInnerHTML={{ __html: fetchLogo(logo) }} />
+			<ResourceTextWrapper>
+				{heading ? <Heading size="xs">{heading}</Heading> : ""}
+				{alt ? <Body size="s">{alt}</Body> : ""}
+			</ResourceTextWrapper>
+		</ResourceLink>
+	);
+};
+
+/**
+ * Displays the list of relevant component links (to NPM, repo, guidelines, etc).
+ *
+ * The rootClassName is read from the story's default args, found in the story's metadata.
+ *
+ * The for loop is particularly helpful to match guidelines links for any nested components
+ * (i.e. meter, form). We need to check that the rootClassName matches the rootClass found
+ * in the packageJson.spectrum, to link to the correct guidelines page.
+ *
+ * Deprecated components should not show a GitHub resource card.
+ *
+ * @param {string} packageName - packageName sourced from packageJson?.name
+ * @param {string[]} spectrumData - an array of objects sourced from packageJson?.spectrum
+ * @param {string} rootClassName - a component's default rootClass arg
+ * @returns {string}
+ */
+export const ResourceListDetails = ({ packageName, spectrumData = [], rootClassName, isDeprecated }) => {
+	if (!packageName) return;
+
+	let href;
+
+	for(let i = 0; i < spectrumData?.length; i++) {
+		if (spectrumData[i]?.guidelines && spectrumData[i]?.rootClass === rootClassName) {
+			href = spectrumData[i]?.guidelines;
+		}
+	}
+
+	return (
+		<ResourceSection className="sb-unstyled">
+			{href ?
+				<ResourceLinkContent
+					className="doc-block-resource-cards"
+					heading="View guidelines"
+					alt="Spectrum website"
+					logo="Adobe"
+					href={href}/> : ""}
+				<ResourceLinkContent
+					className="doc-block-resource-cards"
+					heading="View package"
+					alt="npm"
+					logo="npm"
+					href={`https://npmjs.com/${packageName}`}/>
+			{!isDeprecated ?
+				<ResourceLinkContent
+					className="doc-block-resource-cards"
+					heading="View repository"
+					alt="GitHub"
+					logo="GitHub"
+					href={`https://github.com/adobe/spectrum-css/tree/main/components/${packageName.split('/').pop()}`}/> : ""}
+		</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 />
  */
@@ -279,8 +412,16 @@ export const ComponentDetails = () => {
 
 	const isDeprecated = storyMeta?.csfFile?.meta?.parameters?.status?.type == "deprecated";
 	const packageJson = storyMeta?.csfFile?.meta?.parameters?.packageJson ?? {};
+	const rootClassName = storyMeta?.csfFile?.meta?.args?.rootClass ?? "";
+
+	const packageName = packageJson?.name;
+
+	if (!packageName) return;
 
-	if (!packageJson?.name) return;
+	let spectrumData = packageJson?.spectrum;
+	if (typeof spectrumData === "string") {
+		spectrumData = [spectrumData];
+	}
 
 	const [isLoading, setIsLoading] = useState(true);
 	const [npmData, setnpmData] = useState({});
@@ -291,26 +432,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 packageName={packageName} spectrumData={spectrumData} rootClassName={rootClassName} isDeprecated={isDeprecated}/>
+				</>
 			: ""}
 		</ResetWrapper>
 	);

diff --git a/.storybook/blocks/Typography.jsx b/.storybook/blocks/Typography.jsx
@@ -5,8 +5,9 @@ export const Heading = styled.h3`
     font-family: ${({ theme }) => theme.typography.fontFamily};
     font-weight: ${({ theme }) => theme.typography.weight.bold};
     color: inherit;
-    font-size: ${({ size }) => fetchToken(`font-size-${size === "s" ? 300 : size === "l" ? 700 : size === "xl" ? 900 : 500}`, 22)};
+    font-size: ${({ size }) => fetchToken(`font-size-${size === "xs" ? 200 : size === "s" ? 300 : size === "l" ? 700 : size === "xl" ? 900 : 500}`, 22)};
     -webkit-font-smoothing: antialiased;
+    margin: 0;
 
     > strong {
         font-weight: 900;

diff --git a/.storybook/deprecated/quickaction/quickaction.stories.js b/.storybook/deprecated/quickaction/quickaction.stories.js
@@ -72,7 +72,15 @@ export default {
 		status: {
 			type: "deprecated"
 		},
-		packageJson,
+		packageJson: {
+			...packageJson,
+			"spectrum": [
+				{
+					"guidelines": "https://spectrum.adobe.com/page/quick-actions/",
+					"rootClass": "spectrum-QuickActions",
+				}
+			]
+		}
 	},
 };
 

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -17,7 +17,7 @@ export default {
 		},
 	],
 	rootDir: "../",
-	staticDirs: ["../assets"],
+	staticDirs: ["../assets", "./assets/images"],
 	addons: [
 		{
 			name: "@storybook/addon-essentials",

diff --git a/components/accordion/package.json b/components/accordion/package.json
@@ -48,5 +48,11 @@
 	],
 	"publishConfig": {
 		"access": "public"
-	}
+	},
+	"spectrum": [
+		{
+			"guidelines": "https://spectrum-contributions.corp.adobe.com/page/accordion-beta",
+			"rootClass": "spectrum-Accordion"
+		}
+	]
 }
diff --git a/components/actionbar/package.json b/components/actionbar/package.json
@@ -54,5 +54,11 @@
 	],
 	"publishConfig": {
 		"access": "public"
-	}
+	},
+	"spectrum": [
+		{
+			"guidelines": "https://spectrum.adobe.com/page/action-bar",
+			"rootClass": "spectrum-ActionBar"
+		}
+	]
 }
diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json
@@ -54,5 +54,11 @@
 	],
 	"publishConfig": {
 		"access": "public"
-	}
+	},
+	"spectrum": [
+		{
+			"guidelines": "https://spectrum.adobe.com/page/action-button",
+			"rootClass": "spectrum-ActionButton"
+		}
+	]
 }
diff --git a/components/actiongroup/package.json b/components/actiongroup/package.json
@@ -49,5 +49,11 @@
 	],
 	"publishConfig": {
 		"access": "public"
-	}
+	},
+	"spectrum": [
+		{
+			"guidelines": "https://spectrum.adobe.com/page/action-group",
+			"rootClass": "spectrum-ActionGroup"
+		}
+	]
 }
diff --git a/components/actionmenu/package.json b/components/actionmenu/package.json
@@ -32,12 +32,6 @@
 		"stories/*",
 		"metadata/*"
 	],
-	"keywords": [
-		"spectrum",
-		"css",
-		"design system",
-		"adobe"
-	],
 	"peerDependencies": {
 		"@spectrum-css/actionbutton": ">=6",
 		"@spectrum-css/icon": ">=7",
@@ -52,6 +46,12 @@
 		"@spectrum-css/popover": "workspace:^",
 		"@spectrum-css/tokens": "workspace:^"
 	},
+	"keywords": [
+		"spectrum",
+		"css",
+		"design system",
+		"adobe"
+	],
 	"publishConfig": {
 		"access": "public"
 	}

diff --git a/components/alertbanner/package.json b/components/alertbanner/package.json
@@ -59,5 +59,11 @@
 	],
 	"publishConfig": {
 		"access": "public"
-	}
+	},
+	"spectrum": [
+		{
+			"guidelines": "https://spectrum.adobe.com/page/alert-banner",
+			"rootClass": "spectrum-AlertBanner"
+		}
+	]
 }
diff --git a/components/alertdialog/package.json b/components/alertdialog/package.json
@@ -64,5 +64,11 @@
 	],
 	"publishConfig": {
 		"access": "public"
-	}
+	},
+	"spectrum": [
+		{
+			"guidelines": "https://spectrum.adobe.com/page/alert-dialog",
+			"rootClass": "spectrum-AlertDialog"
+		}
+	]
 }