chore: add deprecation notes to storybook docs; support mdx assets fo…

…r components (#2729)

.storybook/deprecated/cyclebutton/cyclebutton.stories.js

@@ -7,10 +7,13 @@ import { html } from "lit";
 import "@spectrum-css/cyclebutton/dist/index-vars.css";
 import "@spectrum-css/cyclebutton/dist/vars.css";
 
+/**
+ * **This component is deprecated.** Please use the quiet variant of action button with the appropriate icon(s) instead. Any icon swapping that happens on-click/on-key should be handled by the implementation.
+ *
+ * The cycle button component is an action button that cycles through two different icons, a play that then changes to a pause, for example.
+ */
 export default {
 	title: "Deprecated/Cycle button",
-	description:
-		"The Cycle button component is an action button that cycles through two different icons, a play that then changes to a pause, for example.",
 	component: "CycleButton",
 	argTypes: {
 		size: ActionButtonStories?.argTypes?.size ?? {},
@@ -49,13 +52,14 @@ export const Default = (({
 	rootClass = "spectrum-CycleButton",
 	customClasses = [],
 	size = "m",
-	initialIcon = "Play",
-	selectedIcon = "Pause",
 	isDisabled = false,
 	onclick,
 	...globals
 }) => {
-	const [{ selectedIcon: icon }, updateArgs] = useArgs();
+	const [{
+		selectedIcon = "Pause",
+		initialIcon = "Play"
+	}, updateArgs] = useArgs();
 
 	return html`
 		<!-- Note: These dimensions don't change in express theme -->
@@ -65,18 +69,21 @@ export const Default = (({
 		</style>
 		${ActionButton({
 			...globals,
-			customClasses: [rootClass],
+			customClasses: [rootClass, ...customClasses],
 			isQuiet: true,
 			isDisabled,
 			size,
 			iconName: initialIcon,
+			iconSet: "workflow",
 			onclick:
 				onclick ??
 				function () {
 					if (isDisabled) return;
 
-					updateArgs({ initialIcon: selectedIcon });
-					updateArgs({ selectedIcon: icon });
+					updateArgs({
+						initialIcon: selectedIcon,
+						selectedIcon: initialIcon
+					});
 				},
 		})}
 	`;

.storybook/deprecated/quickaction/quickaction.stories.js

@@ -7,6 +7,9 @@ import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/tem
 import "@spectrum-css/quickaction/dist/index-vars.css";
 import "@spectrum-css/quickaction/dist/vars.css";
 
+/**
+ * **This component is deprecated.** Please use an action bar to allow users to perform actions on either a single or multiple items at the same time, instead.
+ */
 export default {
 	title: "Deprecated/Quick actions",
 	component: "QuickAction",

.storybook/deprecated/searchwithin/searchwithin.stories.js

@@ -13,6 +13,9 @@ import { Template as Menu } from "@spectrum-css/menu/stories/template.js";
 import "@spectrum-css/searchwithin/dist/index-vars.css";
 import "@spectrum-css/searchwithin/dist/vars.css";
 
+/**
+ * **This component is deprecated.** Please use a search field with a separate control to filter the search instead.
+ */
 export default {
 	title: "Deprecated/Search within",
 	component: "SearchWithin",

.storybook/deprecated/splitbutton/splitbutton.stories.js

@@ -6,10 +6,13 @@ import { Template as Button } from "@spectrum-css/button/stories/template.js";
 import "@spectrum-css/splitbutton/dist/index-vars.css";
 import "@spectrum-css/splitbutton/dist/vars.css";
 
+/**
+ * **This component is deprecated.** Please use a button group to show any additional actions related to the most critical action. Reference [Spectrum documentation](https://spectrum.corp.adobe.com/page/button-group/#Use-a-button-group-to-show-additional-actions) for more information.
+ *
+ * A split button surfaces an immediately invokable action via it's main button, as well as a list of alternative actions in its toggle-able menu overlay.
+ */
 export default {
 	title: "Deprecated/Split button",
-	description:
-		"A split button surfaces an immediately invokable action via it's main button, as well as a list of alternative actions in its toggle-able menu overlay.",
 	component: "SplitButton",
 	argTypes: {
 		size: {

.storybook/main.js

@@ -11,8 +11,10 @@ const componentPkgs = readdirSync(componentsPath, {
 module.exports = {
 	stories: [
 		"../components/*/stories/*.stories.js",
+		"../components/*/stories/*.mdx",
 		"./guides/*.mdx",
 		"./deprecated/*/*.stories.js",
+		"./deprecated/*/*.mdx",
 	],
 	rootDir: "../",
 	staticDirs: ["../assets"],
@@ -21,13 +23,14 @@ module.exports = {
 			name: "@storybook/addon-essentials",
 			// Supported booleans: actions, controls, docs, toolbars, measure, outline.
 			options: {
-				viewport: false,
 				// Don't need viewports b/c the medium/large contexts are used to support scaling.
-				backgrounds: false,
+				viewport: false,
 				// Don't need backgrounds b/c this is handled by the color contexts.
-				configureJSX: true,
+				backgrounds: false,
 				// Enables JSX support in MDX for projects that aren't configured to handle the format.
-				transcludeMarkdown: true, // Support markdown in MDX files.
+				configureJSX: true,
+				// Support markdown in MDX files.
+				transcludeMarkdown: true,
 			},
 		},
 		// https://github.com/storybookjs/storybook/tree/next/code/addons/a11y

.storybook/preview.js

@@ -191,7 +191,7 @@ export const parameters = {
 	options: {
 		storySort: {
 			method: "alphabetical",
-			order: ['Guides', ['Contributing', '*', 'Adobe Code of Conduct', 'Changelog'], 'Components', ['Docs', 'Default', '*'], '*'],
+			order: ["Guides", ["Contributing", "*", "Adobe Code of Conduct", "Changelog"], "Components", ["*", ["Docs", "Default", "*"]], "*"],
 			includeNames: true,
 		},
 	},