chore(storybook): link to swc on docs pages (#3356)

Author: castastrophe

.storybook/assets/base.css

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-class-pattern -- Targeting pre-defined Storybook classes */
+
 /*!
  * Copyright 2024 Adobe. All rights reserved.
  *
@@ -11,7 +13,6 @@
  * governing permissions and limitations under the License.
  */
 
-/* stylelint-disable selector-class-pattern */
 body {
 	--spectrum-font-family: var(--spectrum-sans-font-family-stack);
 	--spectrum-font-style: var(--spectrum-default-font-style);
@@ -67,4 +68,5 @@ svg:has(symbol):not(:has(use)) {
 	story view), due to Storybook's inline style that sets overflow: auto */
 	overflow: visible !important;
 }
+
 /* stylelint-enable selector-class-pattern */

.storybook/assets/images/wc_logo.svg

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-class-pattern -- Targeting pre-defined Storybook classes */
+
 /*!
  * Copyright 2024 Adobe. All rights reserved.
  *
@@ -11,7 +13,6 @@
  * governing permissions and limitations under the License.
  */
 
-/* stylelint-disable selector-class-pattern */
 body {
 	--spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
 	--spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
@@ -66,6 +67,15 @@ nav .spectrum-Site-logo {
 	padding: 20px !important;
 }
 
+/* Hide that first divider line in the top navigation */
+div.sb-bar > div > div > span:first-child {
+	display: none;
+}
+
+div.sb-bar > div > div > div > button {
+	background-color: white !important;
+}
+
 .docblock-argstable-body tr td {
 	letter-spacing: unset;
 	font-size: 11px;
@@ -118,4 +128,5 @@ select:focus,
 	border-color: rgb(2, 101, 220) !important;
 	box-shadow: rgb(2, 101, 220) 0 0 0 1px inset !important;
 }
+
 /* stylelint-enable selector-class-pattern */

.storybook/assets/index.css

@@ -5,6 +5,7 @@ import React, { useEffect, useState } from "react";
 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 WCSVG from "../assets/images/wc_logo.svg?raw";
 import { Body, Code, Heading } from "./Typography.jsx";
 import { fetchToken } from "./utilities.js";
 
@@ -121,6 +122,7 @@ export const ResourceLink = styled.a`
 	border-color: rgb(230, 230, 230);
 	overflow: hidden;
 	color: rgb(0, 0, 0);
+	background-color: rgba(255 255 255 / 80%);
 
 	&:hover {
 		border-color: rgb(213, 213, 213);
@@ -314,6 +316,8 @@ const fetchLogo = (brand) => {
 			return GitHubSVG;
 		case "Adobe":
 			return AdobeSVG;
+		case "WC":
+			return WCSVG;
 	}
 
 	return;
@@ -361,23 +365,35 @@ export const ResourceLinkContent = ({ heading, alt, logo, href }) => {
 export const ResourceListDetails = ({ packageName, spectrumData = [], rootClassName, isDeprecated }) => {
 	if (!packageName) return;
 
-	let href;
+	let swc, href;
 
 	for(let i = 0; i < spectrumData?.length; i++) {
-		if (spectrumData[i]?.guidelines && spectrumData[i]?.rootClass === rootClassName) {
+		const thisComponent = !spectrumData[i]?.rootClass || spectrumData[i]?.rootClass === rootClassName;
+		if (spectrumData[i]?.guidelines && thisComponent) {
 			href = spectrumData[i]?.guidelines;
 		}
+
+		if (spectrumData[i]?.swc && thisComponent) {
+			swc = spectrumData[i]?.swc;
+		}
 	}
 
 	return (
 		<ResourceSection className="sb-unstyled">
 			{href ?
 				<ResourceLinkContent
 					className="doc-block-resource-cards"
-					heading="View guidelines"
+					heading="Design guidelines"
 					alt="Spectrum website"
 					logo="Adobe"
 					href={href}/> : ""}
+			{swc ?
+				<ResourceLinkContent
+					className="doc-block-resource-cards"
+					heading="Web components"
+					alt="Spectrum web components"
+					logo="WC"
+					href={swc}/> : ""}
 				<ResourceLinkContent
 					className="doc-block-resource-cards"
 					heading="View package"

.storybook/blocks/ComponentDetails.jsx

@@ -52,7 +52,8 @@
 	"spectrum": [
 		{
 			"guidelines": "https://spectrum-contributions.corp.adobe.com/page/accordion-beta",
-			"rootClass": "spectrum-Accordion"
+			"rootClass": "spectrum-Accordion",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/accordion/"
 		}
 	]
 }

components/accordion/package.json

@@ -58,7 +58,8 @@
 	"spectrum": [
 		{
 			"guidelines": "https://spectrum.adobe.com/page/action-bar",
-			"rootClass": "spectrum-ActionBar"
+			"rootClass": "spectrum-ActionBar",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/action-bar/"
 		}
 	]
 }

components/actionbar/package.json

@@ -58,7 +58,8 @@
 	"spectrum": [
 		{
 			"guidelines": "https://spectrum.adobe.com/page/action-button",
-			"rootClass": "spectrum-ActionButton"
+			"rootClass": "spectrum-ActionButton",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/action-button/"
 		}
 	]
 }

components/actionbutton/package.json

@@ -53,7 +53,8 @@
 	"spectrum": [
 		{
 			"guidelines": "https://spectrum.adobe.com/page/action-group",
-			"rootClass": "spectrum-ActionGroup"
+			"rootClass": "spectrum-ActionGroup",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/action-group/"
 		}
 	]
 }

components/actiongroup/package.json

@@ -54,5 +54,10 @@
 	],
 	"publishConfig": {
 		"access": "public"
-	}
+	},
+	"spectrum": [
+		{
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/action-menu/"
+		}
+	]
 }

components/actionmenu/package.json

@@ -63,7 +63,8 @@
 	"spectrum": [
 		{
 			"guidelines": "https://spectrum.adobe.com/page/alert-banner",
-			"rootClass": "spectrum-AlertBanner"
+			"rootClass": "spectrum-AlertBanner",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/alert-banner/"
 		}
 	]
 }