docs(asset,assetcard,avatar,badge): site docs to storybook (#2782)

* docs(asset): site docs to storybook

* docs(assetcard): site docs to storybook

* docs(avatar): site docs to storybook

* docs(badge): site docs to storybook

* docs: show argtypes instead of controls on docs page

* docs(avatar): different example avatar

components/asset/stories/asset.mdx

@@ -0,0 +1,26 @@
+import { ArgTypes, Canvas, Meta, Description, Title } from '@storybook/blocks';
+
+import * as AssetStories from './asset.stories';
+
+<Meta of={AssetStories} title="Docs" />
+
+<Title of={AssetStories} />
+<Description of={AssetStories} />
+
+## Variants
+
+### Image
+
+<Canvas of={AssetStories.Default} />
+
+### File
+
+<Canvas of={AssetStories.File} />
+
+### Folder
+
+<Canvas of={AssetStories.Folder} />
+
+## Properties
+
+<ArgTypes />

components/asset/stories/asset.stories.js

@@ -69,3 +69,24 @@ const AssetGroup = (args) => html`
 `;
 
 export const Default = AssetGroup.bind({});
+
+/**
+ * Stories for the MDX "Docs" only.
+ */
+export const File = Template.bind({});
+File.tags = ["docs-only"];
+File.args = {
+	preset: "file",
+};
+File.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+export const Folder = Template.bind({});
+Folder.tags = ["docs-only"];
+Folder.args = {
+	preset: "folder",
+};
+Folder.parameters = {
+	chromatic: { disableSnapshot: true },
+};

components/assetcard/stories/assetcard.mdx

@@ -0,0 +1,44 @@
+import { ArgTypes, Canvas, Meta, Description, Title } from '@storybook/blocks';
+
+import * as AssetCardStories from './assetcard.stories';
+
+<Meta of={AssetCardStories} title="Docs" />
+
+<Title of={AssetCardStories} />
+<Description of={AssetCardStories} />
+
+## Portrait
+
+<Canvas of={AssetCardStories.Portrait} />
+
+## Landscape
+
+<Canvas of={AssetCardStories.Landscape} />
+
+## Square
+
+<Canvas of={AssetCardStories.Square} />
+
+## Optional Content
+
+<Canvas of={AssetCardStories.OptionalContent} />
+
+## Highlight Selection
+
+<Canvas of={AssetCardStories.HighlightSelection} />
+
+## Checkbox Selection
+
+<Canvas of={AssetCardStories.CheckboxSelection} />
+
+## Ordered Selection
+
+<Canvas of={AssetCardStories.OrderedSelection} />
+
+## Drop Target
+
+<Canvas of={AssetCardStories.DropTarget} />
+
+## Properties
+
+<ArgTypes />

components/avatar/stories/avatar.mdx

@@ -0,0 +1,42 @@
+import { ArgTypes, Canvas, Meta, Description, Title } from '@storybook/blocks';
+
+import * as AvatarStories from './avatar.stories';
+
+<Meta of={AvatarStories} title="Docs" />
+
+<Title of={AvatarStories} />
+<Description of={AvatarStories} />
+
+<Canvas of={AvatarStories.Default} />
+
+## Sizes
+
+Avatar is available in many sizes using the required `.spectrum-Avatar--size<number>` class. The available size classes are:
+
+- `spectrum-Avatar--size50`
+- `spectrum-Avatar--size75`
+- `spectrum-Avatar--size100`
+- `spectrum-Avatar--size200`
+- `spectrum-Avatar--size300`
+- `spectrum-Avatar--size400`
+- `spectrum-Avatar--size500`
+- `spectrum-Avatar--size600`
+- `spectrum-Avatar--size700`
+
+<Canvas of={AvatarStories.SizeOptions} />
+
+## No Link
+
+An avatar image is wrapped in a link that uses the `.spectrum-Avatar-link` class by default, however, an avatar may also be used without a link.
+
+<Canvas of={AvatarStories.NoLink} />
+
+## Disabled
+
+When disabled, the avatar should only be used without a link.
+
+<Canvas of={AvatarStories.Disabled} />
+
+## Properties
+
+<ArgTypes />

components/avatar/stories/avatar.stories.js

@@ -1,7 +1,18 @@
+import { html } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+
+import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 import { Template } from "./template";
 
+const sizeOptions = ["50", "75", "100", "200", "300", "400", "500", "600", "700"];
+
 /**
- * An image representing a user.
+ * An image representing a user. Note that a div wrapper is required for avatar:
+ * ```
+ * <div class="spectrum-Avatar spectrum-Avatar--size50">
+ *   <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
+ * </div>
+ * ```
  */
 export default {
 	title: "Components/Avatar",
@@ -15,7 +26,7 @@ export default {
 				type: { summary: "string" },
 				category: "Component",
 			},
-			options: ["50", "75", "100", "200", "300", "400", "500", "600", "700"],
+			options: sizeOptions,
 			control: "select",
 		},
 		image: {
@@ -59,7 +70,7 @@ export default {
 	args: {
 		rootClass: "spectrum-Avatar",
 		size: "700",
-		image: "example-ava.png",
+		image: "example-ava@2x.png",
 		altText: "Avatar",
 		isDisabled: false,
 		hasLink: true,
@@ -73,3 +84,58 @@ export default {
 
 export const Default = Template.bind({});
 Default.args = {};
+
+/**
+ * Stories for the MDX "Docs" only.
+ */
+const AvatarSizes = (args) => html`
+	<div
+		style=${styleMap({
+			"display": "flex",
+			"gap": "16px",
+		})}
+	>
+		${sizeOptions.map((size) => (html`
+			<div
+				style=${styleMap({
+					"display": "flex",
+					"gap": "16px",
+					"flex-direction": "column",
+					"align-items": "center",
+				})}
+			>
+				${Template({...args, size})}
+				${Typography({
+					semantics: "detail",
+					size: "s",
+					content: [size],
+				})}
+			</div>
+		`))}
+	</div>
+`;
+
+export const SizeOptions = AvatarSizes.bind({});
+SizeOptions.tags = ["docs-only"];
+SizeOptions.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+export const NoLink = Template.bind({});
+NoLink.tags = ["docs-only"];
+NoLink.args = {
+	hasLink: false,
+};
+NoLink.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+export const Disabled = Template.bind({});
+Disabled.tags = ["docs-only"];
+Disabled.args = {
+	hasLink: false,
+	isDisabled: true,
+};
+Disabled.parameters = {
+	chromatic: { disableSnapshot: true },
+};

components/badge/stories/badge.mdx

@@ -0,0 +1,32 @@
+import { ArgTypes, Canvas, Meta, Description, Title } from '@storybook/blocks';
+
+import * as BadgeStories from './badge.stories';
+
+<Meta of={BadgeStories} title="Docs" />
+
+<Title of={BadgeStories} />
+<Description of={BadgeStories} />
+
+## Default
+
+Badges can contain label, icon, or label and icon. Text wrapping is also included when a `max-width` is applied to the badge.
+
+<Canvas of={BadgeStories.Default} />
+
+## Semantic
+
+<Canvas of={BadgeStories.SemanticVariants} />
+
+## Non-semantic
+
+<Canvas of={BadgeStories.NonSemanticVariants} />
+
+## Fixed edge
+
+The border radius is 0 along the fixed edge of the component. The actual component position is not represented on this page.
+
+<Canvas of={BadgeStories.FixedVariants} />
+
+## Properties
+
+<ArgTypes />

components/badge/stories/badge.stories.js

@@ -1,10 +1,19 @@
 import { html } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+
 import { Template } from "./template";
 
 import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
 
+const semanticOptions = ["neutral", "accent", "informative", "positive", "negative"];
+const nonSemanticOptions = ["gray", "red", "orange", "yellow", "chartreuse", "celery", "green", "seafoam", "cyan", "blue", "indigo", "purple", "fuchsia", "magenta"];
+const fixedOptions = ["none", "fixed-inline-start", "fixed-inline-end", "fixed-block-start", "fixed-block-end"];
 /**
- * A badge element displays a small amount of color-categorized metadata; ideal for getting a user's attention.
+ * A badge element displays a small amount of color-categorized metadata; ideal for getting a user's attention. Some notes about badge:
+ * - Badge t-shirt sizes correspond to icon sizes
+ * - Label and icon elements must be nested inside a parent container of class .spectrum-Badge in order to achieve the correct layout and wrapping behavior.
+ * - Layout of Badge is applied with a display of `inline-flex`, allowing badge to display as inline while the child elements for the label and icon utilize flexbox for layout.
+ * - Fixed positioning impacts the border radius of the badge component
  */
 export default {
 	title: "Components/Badge",
@@ -50,13 +59,7 @@ export default {
 				type: { summary: "string" },
 				category: "Advanced",
 			},
-			options: [
-				"none",
-				"fixed-inline-start",
-				"fixed-inline-end",
-				"fixed-block-start",
-				"fixed-block-end",
-			],
+			options: fixedOptions,
 			control: "select",
 		},
 	},
@@ -94,9 +97,58 @@ const BadgeGroup = (args) => html`
 	${Template({
 		...args,
 		label: "24 days left in trial",
-		customStyles: { "max-inline-size": "100px" },
+		customStyles: { "max-inline-size": "120px" },
 	})}
 `;
 
 export const Default = BadgeGroup.bind({});
 Default.args = {};
+
+
+/**
+ * Stories for the MDX "Docs" only.
+ */
+const Variants = (args, variants) => html`
+	<div
+		style=${styleMap({
+			"display": "flex",
+			"gap": "16px",
+			"flex-wrap": "wrap"
+		})}
+	>
+		${variants.map((variant) => {
+			const capitalizeFirstLetter = (string) => string.charAt(0).toUpperCase() + string.slice(1);
+			const label = capitalizeFirstLetter(variant);
+			return ( html`
+				<div
+					style=${styleMap({
+						"display": "flex",
+						"gap": "16px",
+						"flex-direction": "column",
+						"align-items": "center",
+					})}
+				>
+					${Template({...args, variant, label})}
+				</div>
+			`);
+	})}
+	</div>
+`;
+
+export const SemanticVariants = (args) => Variants(args, semanticOptions);
+SemanticVariants.tags = ["docs-only"];
+SemanticVariants.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+export const NonSemanticVariants = (args) => Variants(args, nonSemanticOptions);
+NonSemanticVariants.tags = ["docs-only"];
+NonSemanticVariants.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+export const FixedVariants = (args) => Variants(args, fixedOptions);
+FixedVariants.tags = ["docs-only"];
+FixedVariants.parameters = {
+	chromatic: { disableSnapshot: true },
+};