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

adobe · Nov 1, 2024 · 5eea58b · 5eea58b
1 parent 38adbe1
commit 5eea58b
Show file tree

Hide file tree

Showing 63 changed files with 191 additions and 65 deletions.
diff --git a/.storybook/assets/base.css b/.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 */
diff --git a/.storybook/assets/images/wc_logo.svg b/.storybook/assets/images/wc_logo.svg
diff --git a/.storybook/assets/index.css b/.storybook/assets/index.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-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 */
diff --git a/.storybook/blocks/ComponentDetails.jsx b/.storybook/blocks/ComponentDetails.jsx
@@ -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"

diff --git a/components/accordion/package.json b/components/accordion/package.json
@@ -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/"
 		}
 	]
 }
diff --git a/components/actionbar/package.json b/components/actionbar/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/"
 		}
 	]
 }
diff --git a/components/actionbutton/package.json b/components/actionbutton/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/"
 		}
 	]
 }
diff --git a/components/actiongroup/package.json b/components/actiongroup/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/"
 		}
 	]
 }
diff --git a/components/actionmenu/package.json b/components/actionmenu/package.json
@@ -54,5 +54,10 @@
 	],
 	"publishConfig": {
 		"access": "public"
-	}
+	},
+	"spectrum": [
+		{
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/action-menu/"
+		}
+	]
 }
diff --git a/components/alertbanner/package.json b/components/alertbanner/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/"
 		}
 	]
 }
diff --git a/components/alertdialog/package.json b/components/alertdialog/package.json
@@ -68,7 +68,8 @@
 	"spectrum": [
 		{
 			"guidelines": "https://spectrum.adobe.com/page/alert-dialog",
-			"rootClass": "spectrum-AlertDialog"
+			"rootClass": "spectrum-AlertDialog",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/alert-dialog/"
 		}
 	]
 }
diff --git a/components/asset/package.json b/components/asset/package.json
@@ -49,7 +49,8 @@
 	},
 	"spectrum": [
 		{
-			"rootClass": "spectrum-Asset"
+			"rootClass": "spectrum-Asset",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/asset/"
 		}
 	]
 }
diff --git a/components/avatar/package.json b/components/avatar/package.json
@@ -50,7 +50,8 @@
 	"spectrum": [
 		{
 			"guidelines": "https://spectrum.adobe.com/page/avatar",
-			"rootClass": "spectrum-Avatar"
+			"rootClass": "spectrum-Avatar",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/avatar/"
 		}
 	]
 }
diff --git a/components/badge/package.json b/components/badge/package.json
@@ -57,7 +57,8 @@
 	"spectrum": [
 		{
 			"guidelines": "https://spectrum.adobe.com/page/badge",
-			"rootClass": "spectrum-Badge"
+			"rootClass": "spectrum-Badge",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/badge/"
 		}
 	]
 }
diff --git a/components/breadcrumb/package.json b/components/breadcrumb/package.json
@@ -62,7 +62,8 @@
 	"spectrum": [
 		{
 			"guidelines": "https://spectrum.adobe.com/page/breadcrumbs",
-			"rootClass": "spectrum-Breadcrumbs"
+			"rootClass": "spectrum-Breadcrumbs",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/"
 		}
 	]
 }
diff --git a/components/button/package.json b/components/button/package.json
@@ -63,7 +63,8 @@
 	"spectrum": [
 		{
 			"guidelines": "https://spectrum.adobe.com/page/button",
-			"rootClass": "spectrum-Button"
+			"rootClass": "spectrum-Button",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/button/"
 		}
 	]
 }
diff --git a/components/buttongroup/package.json b/components/buttongroup/package.json
@@ -52,7 +52,8 @@
 	"spectrum": [
 		{
 			"guidelines": "https://spectrum.adobe.com/page/button-group",
-			"rootClass": "spectrum-ButtonGroup"
+			"rootClass": "spectrum-ButtonGroup",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/button-group/"
 		}
 	]
 }
diff --git a/components/card/package.json b/components/card/package.json
@@ -82,7 +82,8 @@
 	"spectrum": [
 		{
 			"guidelines": "https://spectrum.adobe.com/page/cards",
-			"rootClass": "spectrum-Card"
+			"rootClass": "spectrum-Card",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/card/"
 		}
 	]
 }
diff --git a/components/checkbox/package.json b/components/checkbox/package.json
@@ -52,7 +52,8 @@
 	"spectrum": [
 		{
 			"guidelines": "https://spectrum.adobe.com/page/checkbox",
-			"rootClass": "spectrum-Checkbox"
+			"rootClass": "spectrum-Checkbox",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/checkbox/"
 		}
 	]
 }
diff --git a/components/coachindicator/package.json b/components/coachindicator/package.json
@@ -50,7 +50,8 @@
 	"spectrum": [
 		{
 			"guidelines": "https://spectrum-contributions.corp.adobe.com/page/coach-indicator-beta",
-			"rootClass": "spectrum-CoachIndicator"
+			"rootClass": "spectrum-CoachIndicator",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/coach-indicator/"
 		}
 	]
 }
diff --git a/components/coachmark/package.json b/components/coachmark/package.json
@@ -67,7 +67,8 @@
 	"spectrum": [
 		{
 			"guidelines": "https://spectrum.adobe.com/page/coach-mark",
-			"rootClass": "spectrum-CoachMark"
+			"rootClass": "spectrum-CoachMark",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/coachmark/"
 		}
 	]
 }
diff --git a/components/colorarea/package.json b/components/colorarea/package.json
@@ -52,7 +52,8 @@
 	"spectrum": [
 		{
 			"guidelines": "https://spectrum.adobe.com/page/color-area",
-			"rootClass": "spectrum-ColorArea"
+			"rootClass": "spectrum-ColorArea",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/color-area/"
 		}
 	]
 }
diff --git a/components/colorhandle/package.json b/components/colorhandle/package.json
@@ -58,7 +58,8 @@
 	},
 	"spectrum": [
 		{
-			"rootClass": "spectrum-ColorHandle"
+			"rootClass": "spectrum-ColorHandle",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/color-handle/"
 		}
 	]
 }
diff --git a/components/colorloupe/package.json b/components/colorloupe/package.json
@@ -50,7 +50,8 @@
 	"spectrum": [
 		{
 			"guidelines": "https://spectrum.adobe.com/page/color-loupe",
-			"rootClass": "spectrum-ColorLoupe"
+			"rootClass": "spectrum-ColorLoupe",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/color-loupe/"
 		}
 	]
 }
diff --git a/components/colorslider/package.json b/components/colorslider/package.json
@@ -54,7 +54,8 @@
 	"spectrum": [
 		{
 			"guidelines": "https://spectrum.adobe.com/page/color-slider",
-			"rootClass": "spectrum-ColorSlider"
+			"rootClass": "spectrum-ColorSlider",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/color-slider/"
 		}
 	]
 }
diff --git a/components/colorwheel/package.json b/components/colorwheel/package.json
@@ -64,7 +64,8 @@
 	"spectrum": [
 		{
 			"guidelines": "https://spectrum.adobe.com/page/color-wheel",
-			"rootClass": "spectrum-ColorWheel"
+			"rootClass": "spectrum-ColorWheel",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/color-wheel/"
 		}
 	]
 }
diff --git a/components/combobox/package.json b/components/combobox/package.json
@@ -65,7 +65,8 @@
 	"spectrum": [
 		{
 			"guidelines": "https://spectrum.adobe.com/page/combo-box",
-			"rootClass": "spectrum-Combobox"
+			"rootClass": "spectrum-Combobox",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/combobox/"
 		}
 	]
 }
diff --git a/components/contextualhelp/package.json b/components/contextualhelp/package.json
@@ -61,7 +61,8 @@
 	"spectrum": [
 		{
 			"guidelines": "https://spectrum.adobe.com/page/contextual-help",
-			"rootClass": "spectrum-ContextualHelp"
+			"rootClass": "spectrum-ContextualHelp",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/contextual-help/"
 		}
 	]
 }