chore(accordion,actionbar,asset): remove mdx files (#3407)

* docs(accordion): remove MDX file

- adds accordion sizing story
- migrates documentation in MDX to stories.js instead

* docs(actionbar): remove MDX file

- adds actionbar flexible and sticky variants to default/emphasized
stories
- migrates documentation in MDX to stories.js instead
- updates references to mods tables

* docs(asset): remove MDX file

Author: marissahuysentruyt

components/accordion/stories/accordion.mdx

@@ -1,5 +1,6 @@
-import { Template as Link } from "@spectrum-css/link/stories/template.js";
+import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
+import { Template as Link } from "@spectrum-css/link/stories/template.js";
 import { size } from "@spectrum-css/preview/types";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 import metadata from "../metadata/metadata.json";
@@ -9,6 +10,10 @@ import { Template } from "./template.js";
 
 /**
  * The accordion element contains a list of items that can be expanded or collapsed to reveal additional content or information associated with each item. There can be zero expanded items, exactly one expanded item, or more than one item expanded at a time, depending on the configuration. This list of items is defined by child accordion item elements.
+ *
+ * ## Density options
+ *
+ * Accordion has three density options and requires that you specify one of the density types: compact, regular, or spacious.
  */
 export default {
 	title: "Accordion",
@@ -64,7 +69,6 @@ export default {
 		packageJson,
 		metadata,
 	},
-	tags: ["!autodocs"],
 };
 
 /* Content sourced from: https://www.adobe.com/products/catalog.html#:~:text=Frequently%20asked%20questions. */
@@ -182,10 +186,30 @@ Compact.args = {
 	items: content,
 	density: "compact",
 };
+Compact.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+Compact.storyName = "Density - Compact";
 
 export const Spacious = Template.bind({});
 Spacious.tags = ["!dev"];
 Spacious.args = {
 	items: content,
 	density: "spacious",
 };
+Spacious.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+Spacious.storyName = "Density - Spacious";
+
+export const Sizing = (args, context) => Sizes({
+	Template,
+	withBorder: false,
+	withHeading: false,
+	items: content,
+	...args,
+}, context);
+Sizing.tags = ["!dev"];
+Sizing.parameters = {
+	chromatic: { disableSnapshot: true },
+};

components/accordion/stories/accordion.stories.js

@@ -6,10 +6,13 @@ import { isEmphasized, isOpen } from "@spectrum-css/preview/types";
 import metadata from "../metadata/metadata.json";
 import packageJson from "../package.json";
 import { ActionBarGroup } from "./actionbar.test.js";
-import { Template } from "./template.js";
+import { BehavioralTemplate } from "./template.js";
 
 /**
- * The action bar component is a floating full width bar that appears upon selection.
+ * The action bar component is a floating full width bar that appears upon selection. Action bars are used for single and bulk selection patterns, when a user needs to perform actions on either a single or multiple items at the same time.
+ *
+ * ## Popover dependency
+ * Action bar requires popover, which is nested within the action bar. Action bar background, border, and corner radius are applied to the nested popover component and can be overridden by using action bar's `--mod-*` prefixed custom properties. A [list of the properties](#modifiable-properties) can be found below.
  */
 export default {
 	title: "Action bar",
@@ -70,11 +73,11 @@ export default {
 		packageJson,
 		metadata,
 	},
-	tags: ["!autodocs"],
 };
 
 export const Default = ActionBarGroup.bind({});
 Default.args = {};
+Default.tags = ["!autodocs"];
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = ActionBarGroup.bind({});
@@ -88,11 +91,26 @@ WithForcedColors.parameters = {
 };
 
 // ********* DOCS ONLY ********* //
-export const Emphasized = Template.bind({});
+/**The emphasized action bar has a blue background that adds visual emphasis on the actions and selection. Use this for when the bar should call attention (e.g., floating in a table). */
+export const Emphasized = BehavioralTemplate.bind({});
 Emphasized.tags = ["!dev"];
 Emphasized.args = {
 	isEmphasized: true,
 };
 Emphasized.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+
+/** By default, action bars fill the width of their container. Below are example of the other behavioral variants available.
+ *
+ * - Standard action bars fill the width of their container.
+ * - Flexible action bars fit the width of their content.
+ * - Sticky action bars will sit on top of content until dismissed. Scroll down on this example to view how the sticky action bar behaves within a scrollable element.
+ *
+*/
+export const Standard = BehavioralTemplate.bind({});
+Standard.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+Standard.tags = ["!dev"];
+Standard.storyName = "Default";

components/actionbar/stories/actionbar.mdx

@@ -1,3 +1,4 @@
+import { Container } from "@spectrum-css/preview/decorators";
 import { Template as ActionGroup } from "@spectrum-css/actiongroup/stories/template.js";
 import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js";
 import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
@@ -76,3 +77,33 @@ export const Template = ({
 		</div>
 	`;
 };
+
+/* This template shows standard, flexible, and sticky action bars in one story. */
+/* The fixed behavior works best in an iframe, so is not represented in this template. */
+export const BehavioralTemplate = (args, context) => Container({
+	withBorder: false,
+	withHeading: false,
+	direction: "column",
+	content: html`
+		${Container({
+			withBorder: false,
+			heading: "Standard",
+			content: Template({...args, customPopoverStyles: {"transform": "unset"}}, context)
+		})}
+		${Container({
+			withBorder: false,
+			heading: "Flexible",
+			content: Template({...args, isFlexible: true,}, context)
+		})}
+		${Container({
+			withBorder: false,
+			heading: "Sticky",
+			containerStyles: {
+				"max-block-size": "100px",
+				"max-inline-size": " 550px",
+				"overflow": "auto",
+			},
+			content: ["Scroll down to view sticky behavior. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", Template({...args, isSticky: true,}, context)]
+		})}
+	`
+});

components/actionbar/stories/actionbar.stories.js

@@ -39,7 +39,6 @@ export default {
 		packageJson,
 		metadata,
 	},
-	tags: ["!autodocs"],
 };
 
 export const Default = AssetGroup.bind({});