Merge branch 'main' into aramos-adobe/css868-combobox-readonly

Author: aramos-adobe

.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

@@ -1,4 +1,3 @@
-import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 import { html, nothing } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
@@ -11,26 +10,58 @@ import { capitalize } from "lodash-es";
  * @param {string} props.content - The content to render in the heading or code block.
  * @param {string} props.size - The size of the heading to render.
  * @param {string} props.weight - The weight of the heading to render.
- * @param {string[]} props.customClasses - Additional classes to apply to the heading or code block.
  */
 const Heading = ({
 	semantics = "heading",
 	content,
 	size = "l",
 	weight,
-	customClasses = [],
-} = {}) => {
-	return Typography({
-		semantics,
-		size,
-		weight,
-		content,
-		skipLineBreak: true,
-		customClasses: ["chromatic-ignore", ...customClasses],
-		customStyles: {
-			"color": semantics === "detail" ? "var(--spectrum-heading-color)" : undefined,
+} = {}, context = {}) => {
+	if (!content) return nothing;
+
+	const headingStyles = {
+		"display": "block",
+		"color": "black",
+		"font-family": 'adobe-clean, "adobe clean", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif',
+		"font-size": "11px",
+		"line-height": "1.3",
+		"font-weight": "700",
+	};
+
+	if ((size === "xxs" && semantics === "heading") || size === "l") {
+		headingStyles["font-size"] = "14px";
+	}
+
+	if (semantics === "detail") {
+		headingStyles["letter-spacing"] = ".06em";
+		headingStyles["text-transform"] = "uppercase";
+	}
+
+	if (weight === "light") {
+		if (semantics === "heading") {
+			headingStyles["font-weight"] = "300";
+		}
+		else {
+			headingStyles["font-weight"] = "400";
 		}
-	});
+	}
+
+	if (context.globals?.color.startsWith("dark")) {
+		headingStyles["color"] = context?.args?.staticColor ?? "white";
+	}
+	else if (typeof context?.args?.staticColor !== "undefined") {
+		headingStyles["color"] = context?.args?.staticColor;
+	}
+
+
+	return html`
+		<span
+			class="chromatic-ignore"
+			style=${styleMap(headingStyles)}
+		>
+			${content}
+		</span>
+	`;
 };
 
 /**
@@ -54,7 +85,8 @@ export const Container = ({
 	withBorder = true,
 	containerStyles = {},
 	wrapperStyles = {},
-} = {}) => {
+} = {}, context = {}) => {
+	const isDocs = context?.viewMode === "docs";
 	const headingConfig = { size: "l", semantics: type };
 	let gap = 40;
 
@@ -100,6 +132,13 @@ export const Container = ({
 			${when(heading, () => Heading({
 				...headingConfig,
 				content: heading
+			}, {
+				...context,
+				globals: {
+					...context.globals ?? {},
+					// If the level is 1 and we are not in docs view, use the light color theme for the heading
+					color: level === 1 && !isDocs ? "light" : context.globals?.color,
+				}
 			}))}
 			<div
 				data-inner-container
@@ -117,7 +156,7 @@ export const Container = ({
 					...wrapperStyles,
 				})}
 			>
-				${renderContent(content)}
+				${renderContent(content, { context })}
 			</div>
 		</div>
 	`;
@@ -173,6 +212,15 @@ export const States = ({
 				return nothing
 			}
 
+			context = {
+				...context,
+				args: {
+					...context.args,
+					...args,
+					...item,
+				}
+			};
+
 			return Container({
 				heading: stateData.some(({ testHeading }) => testHeading) ? testHeading : "",
 				level: 3,
@@ -182,9 +230,9 @@ export const States = ({
 					...stateWrapperStyles,
 				},
 				content: Template({ ...args, ...item }, context),
-			});
+			}, context);
 		})
-	});
+	}, context);
 };
 
 /**
@@ -264,8 +312,8 @@ export const ArgGrid = ({
 				...(typeof args?.name !== "undefined" ? {name: `${args.name}-${argKey}-${index}`} : {}),
 				...(typeof args?.id !== "undefined" ? {id: `${args.id}-${argKey}-${index}`} : {}),
 			}, context)
-		})),
-	});
+		}, context)),
+	}, context);
 };
 
 /**
@@ -450,7 +498,7 @@ export const Variants = ({
 									() => AltTemplate(data, context)
 								)}
 							`,
-						});
+						}, context);
 					}
 				)}
 

.storybook/decorators/utilities.js

@@ -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

@@ -158,7 +158,7 @@ export const ActionButtonsWithIconOptions = (args, context) => Container({
 			hasPopup: "true",
 		}, context)}
 	`
-});
+}, context);
 
 export const IconOnlyOption = (args, context) => Container({
 	withBorder: false,
@@ -179,7 +179,7 @@ export const IconOnlyOption = (args, context) => Container({
 			hasPopup: "true",
 		}, context)}
 	`
-});
+}, context);
 
 export const TreatmentTemplate = (args, context) => Container({
 	withBorder: false,
@@ -200,5 +200,5 @@ export const TreatmentTemplate = (args, context) => Container({
 			isSelected,
 			isDisabled,
 		})
-	}, context ))}`,
-});
+	}, context))}`,
+}, context);

components/actionbutton/stories/template.js

@@ -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/"
 		}
 	]
 }