docs(textarea): add figma assets to design tab (#3327)

* docs(textarea): add figma assets to design tab

---------

Co-authored-by: castastrophe <castastrophe@users.noreply.github.com>
Co-authored-by: Patrick Fulton <pfulton@adobe.com>
Co-authored-by: Cory Dransfeldt <cdransfeldt@adobe.com>
Co-authored-by: Aziz Ramos <azizramos@Azizs-MBP.lan>
Co-authored-by: Josh Winn <965114+jawinn@users.noreply.github.com>
Co-authored-by: Rise Erpelding <rise@heysparkbox.com>
Co-authored-by: Rajdeep Chandra <rajdeepc@adobe.com>
Co-authored-by: TarunAdobe <ttomar@adobe.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: 10 people

.storybook/assets/base.css

@@ -1,4 +1,3 @@
-/* stylelint-disable selector-class-pattern -- custom storybook styles */
 /*!
  * Copyright 2024 Adobe. All rights reserved.
  *
@@ -12,6 +11,7 @@
  * 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);
@@ -27,31 +27,12 @@ body {
 	background-color: var(--spectrum-background-base-color, rgb(230, 230, 230));
 }
 
-nav.sidebar-container,
-div.sb-bar {
-	color: var(--spectrum-neutral-content-color-default);
-	background-color: var(--spectrum-background-base-color);
-}
-
-nav.sidebar-container,
-div.sb-bar {
-	color: var(--spectrum-neutral-content-color-default);
-	background-color: var(--spectrum-background-layer-2-color);
-}
-
-/* Layers around the components */
-body.spectrum,
-.docs-story {
+.spectrum {
 	color: var(--spectrum-neutral-content-color-default);
 	background-color: var(--spectrum-background-layer-1-color);
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
 }
 
-.sb-story [data-inner-container] {
-	padding: 0 !important;
-	border: none !important;
-}
-
 /* Hide the SVG elements that only include references */
 svg:has(symbol):not(:has(use)) {
 	display: none;

.storybook/assets/index.css

@@ -1,4 +1,3 @@
-/* stylelint-disable selector-class-pattern -- custom storybook styles */
 /*!
  * Copyright 2024 Adobe. All rights reserved.
  *
@@ -12,6 +11,7 @@
  * 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;
@@ -27,7 +27,7 @@ body {
 	font-style: var(--spectrum-font-style);
 
 	color: var(--spectrum-neutral-content-color-default);
-	background-color: var(--spectrum-background-base-color);
+	background-color: var(--spectrum-background-layer-2-color);
 }
 
 body:lang(ar) {
@@ -118,10 +118,4 @@ select:focus,
 	border-color: rgb(2, 101, 220) !important;
 	box-shadow: rgb(2, 101, 220) 0 0 0 1px inset !important;
 }
-
-nav.sidebar-container,
-div.sb-bar {
-	color: var(--spectrum-neutral-content-color-default) !important;
-	background-color: var(--spectrum-background-layer-2-color) !important;
-}
 /* stylelint-enable selector-class-pattern */

.storybook/decorators/utilities.js

@@ -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,45 @@ 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,
-		}
-	});
+	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",
+		"letter-spacing": ".06em",
+		"font-weight": "700",
+	};
+
+	if (size === "l") {
+		headingStyles["font-size"] = "14px";
+	}
+
+	if (semantics === "detail") {
+		headingStyles["text-transform"] = "uppercase";
+	}
+
+	if (weight === "light") {
+		headingStyles["font-weight"] = "400";
+	}
+
+	return html`
+		<span
+			class="chromatic-ignore"
+			style=${styleMap(headingStyles)}
+		>
+			${content}
+		</span>
+	`;
 };
 
 /**

components/textfield/stories/textarea.stories.js

@@ -23,6 +23,10 @@ export default {
 	parameters: {
 		packageJson,
 		metadata,
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=725-2579",
+		},
 	}
 };