docs(accordion,actionbar,actionmenu,alertdialog): site docs to storyb…

…ook (#2770)

* docs(accordion, actionbar, actionmenu, alertdialog): docs site details now in storybook

Action menu doesn't require it's own MDX page since
the DocumentationTemplate already covers the only variant.
This is just an update to the description to include
some additional details.

.storybook/guides/develop.mdx

@@ -384,6 +384,20 @@ Default.args = {};
 
 Ideally you should have a single story file for each component with multiple variations and states represented in the "Kitchen sink" grouping that only renders in Chromatic. To preview the groups locally, there is a global toolbar setting with a beaker icon called "Show testing preview" that will activate the Chromatic view.
 
+In the event that you don't want a story to be tested in Chromatic, you can use the `disabledSnapshot` paramter:
+
+```
+Default.parameters = {
+	chromatic: { disableSnapshot: true },
+}
+```
+
+Similarly, if a story is only for documentation purposes and shouldn't be shown in the sidebar, you can use the custom `docs-only` tag:
+
+```
+Default.tags = ["docs-only"];
+```
+
 ### Getting started
 
 Check that you have a local `.env` file in your `.storybook` folder with a `CHROMATIC_PROJECT_TOKEN` variable defined. Get this token from the project maintainer. You should not be committing this `.env` file to the repo as it contains sensitive login information.

.storybook/manager.js

@@ -50,7 +50,7 @@ addons.setConfig({
 	sidebar: {
 		showRoots: false,
 		filters: {
-			patterns: (item) => !item.id.includes('forced-colors'),
+			patterns: (item) => !item.id.includes('forced-colors') && !item.tags.includes('docs-only'),
 		}
 	},
 });

components/accordion/stories/accordion.mdx

@@ -0,0 +1,28 @@
+import { Canvas, ArgTypes, Meta, Description, Title } from '@storybook/blocks';
+
+import * as AccordionStories from './accordion.stories';
+
+<Meta of={AccordionStories} title="Docs" />
+
+<Title of={AccordionStories} />
+<Description of={AccordionStories} />
+
+## Density options
+
+Accordion has three density options and requires that you specify one of the density types: compact, regular, or spacious.
+
+### Regular
+
+<Canvas of={AccordionStories.Regular} />
+
+### Compact
+
+<Canvas of={AccordionStories.Compact} />
+
+### Spacious
+
+<Canvas of={AccordionStories.Spacious} />
+
+## Properties
+
+<ArgTypes />

components/accordion/stories/accordion.stories.js

@@ -171,3 +171,34 @@ const AccordionGroup = (args) => html`
 
 export const Default = AccordionGroup.bind({});
 Default.args = {};
+
+/**
+ * Stories for the MDX "Docs" only.
+ * Based off of the base `Template` which does not have conditional Chromatic-only markup.
+ */
+export const Regular = Template.bind({});
+Regular.tags = ["docs-only"];
+Regular.args = {
+	density: "regular",
+};
+Regular.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+export const Compact = Template.bind({});
+Compact.tags = ["docs-only"];
+Compact.args = {
+	density: "compact",
+};
+Compact.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+export const Spacious = Template.bind({});
+Spacious.tags = ["docs-only"];
+Spacious.args = {
+	density: "spacious",
+};
+Spacious.parameters = {
+	chromatic: { disableSnapshot: true },
+};

components/actionbar/stories/actionbar.mdx

@@ -0,0 +1,29 @@
+import { Canvas, ArgTypes, Meta, Description, Title } from '@storybook/blocks';
+
+import * as ActionBarStories from './actionbar.stories';
+
+<Meta of={ActionBarStories} title="Docs" />
+
+<Title of={ActionBarStories} />
+<Description of={ActionBarStories} />
+
+## Standard
+
+<Canvas of={ActionBarStories.Default} />
+
+## Emphasized
+
+<Canvas of={ActionBarStories.Emphasized} />
+
+## Behavioral variants
+
+- 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.
+
+## Popover Dependency
+Action bar requires Popover, which is nested within Action bar. Action bar background, border, and corner radius are applied to the nested Popover component and can be overriden by Action bar using `--mod-*` prefixed custom properties. A [list of the properties](https://github.com/adobe/spectrum-css/blob/main/components/actionbar/metadata/mods.md) can be found in the repo.
+
+## Properties
+
+<ArgTypes />

components/actionbar/stories/actionbar.stories.js

@@ -86,3 +86,15 @@ export default {
 
 export const Default = Template.bind({});
 Default.args = {};
+
+/**
+ * Stories for the MDX "Docs" only.
+ */
+export const Emphasized = Template.bind({});
+Emphasized.tags = ["docs-only"];
+Emphasized.args = {
+	isEmphasized: true,
+};
+Emphasized.parameters = {
+	chromatic: { disableSnapshot: true },
+};

components/actionmenu/stories/actionmenu.stories.js

@@ -9,7 +9,7 @@ import { default as Menu } from "@spectrum-css/menu/stories/menu.stories.js";
 import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js";
 
 /**
- * The action menu component is an action button with a popover.
+ * The action menu component is an action button with a popover. The `is-selected` class should be applied to the button when the menu is open. Note that the accessibility roles are different for an action menu compared to a normal menu.
  */
 export default {
 	title: "Components/Action menu",
@@ -89,3 +89,11 @@ export default {
 
 export const Default = Template.bind({});
 Default.args = {};
+Default.parameters = {
+	docs: {
+		story: {
+			inline: false,
+			iframeHeight: 250,
+		},
+	},
+};

components/alertdialog/stories/alertdialog.mdx

@@ -0,0 +1,43 @@
+import { Canvas, ArgTypes, Meta, Description, Title } from '@storybook/blocks';
+
+import * as AlertDialogStories from './alertdialog.stories';
+
+<Meta of={AlertDialogStories} title="Docs" />
+
+<Title of={AlertDialogStories} />
+<Description of={AlertDialogStories} />
+
+## Confirmation
+This is the default variant for alert dialogs. Use a confirmation variant for asking a user to confirm a choice.
+
+<Canvas of={AlertDialogStories.Default} />
+
+## Information
+Information alert dialogs communicate important information that a user needs to acknowledge. Before using this kind of alert dialog, make sure it’s the appropriate communication channel for the message instead of a toast or a more lightweight messaging option.
+
+Note that an alert dialog can have a total of 3 buttons if the secondary outline button label is defined.
+
+<Canvas of={AlertDialogStories.Information} />
+
+## Warning
+Warning alert dialogs communicate important information to users in relation to an issue that needs to be acknowledged, but does not block the user from moving forward.
+
+<Canvas of={AlertDialogStories.Warning} />
+
+## Error
+Error alert dialogs communicate critical information about an issue that a user needs to acknowledge.
+
+<Canvas of={AlertDialogStories.Error} />
+
+## Destructive
+Destructive alert dialogs are for when a user needs to confirm an action that will impact their data or experience in a potentially negative way, such as deleting files or contacts.
+
+<Canvas of={AlertDialogStories.Destructive} />
+
+## Scroll
+
+<Canvas of={AlertDialogStories.Scroll} />
+
+## Properties
+
+<ArgTypes />

components/alertdialog/stories/alertdialog.stories.js

@@ -141,3 +141,30 @@ Destructive.args = {
 	}],
 	content: "Are you sure you want to delete the 3 selected documents?",
 };
+
+
+/**
+ * Stories for the MDX "Docs" only.
+ */
+export const Scroll = Template.bind({});
+Scroll.tags = ["docs-only"];
+Scroll.args = {
+	variant: "confirmation",
+	heading: "Enable Smart Filters?",
+	buttons: [{
+		variant: "secondary",
+		treatment: "outline",
+		label: "Remind me later"
+	}, {
+		treatment: "fill",
+		label: "Enable",
+		variant: "accent"
+	}],
+	content: "Smart filters are nondestructive and will preserve your original images. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices est eu lacus interdum, vitae volutpat tortor laoreet. Phasellus consectetur erat quis massa congue, vel placerat ipsum hendrerit. Aenean eleifend augue quam, quis blandit lacus pretium eget. Aliquam aliquam fermentum nunc, sed dictum metus varius in. Suspendisse in nisl libero. Nulla egestas massa eget lectus ullamcorper placerat. Vivamus cursus, nunc quis pharetra auctor, eros mi tempus elit, sit amet placerat ipsum velit ut dolor. Nam sit amet eleifend erat. Duis sollicitudin orci sit amet tellus tincidunt, vel lobortis risus pellentesque. Integer viverra urna elementum metus dignissim placerat. Nulla posuere eros ipsum. Pellentesque viverra urna justo, eu ultricies nisl fermentum et. Vivamus tristique porttitor dictum.",
+	customStyles: {
+		"max-block-size": "275px",
+	}
+};
+Scroll.parameters = {
+	chromatic: { disableSnapshot: true },
+};

components/alertdialog/stories/template.js

@@ -2,6 +2,7 @@ import { useArgs } from "@storybook/preview-api";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import { Template as Button } from "@spectrum-css/button/stories/template.js";
@@ -23,6 +24,7 @@ export const Template = ({
 	variant,
 	icon = false,
 	id,
+	customStyles = {},
 	...globals
 }) => {
 	const [, updateArgs] = useArgs();
@@ -39,6 +41,7 @@ export const Template = ({
       tabindex="-1"
       aria-modal="true"
       aria-labelledby="dialog_label"
+      style=${ifDefined(styleMap(customStyles))}
     >
       <div class="${rootClass}-grid">
       <div class="spectrum-AlertDialog-header">