From 1b98211d74801b4f523447e16b2b5677fdf99063 Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt
<69602589+marissahuysentruyt@users.noreply.github.com>
Date: Wed, 18 Dec 2024 10:22:35 -0500
Subject: [PATCH] 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
---
components/accordion/stories/accordion.mdx | 50 ------------------
.../accordion/stories/accordion.stories.js | 28 +++++++++-
components/actionbar/stories/actionbar.mdx | 52 -------------------
.../actionbar/stories/actionbar.stories.js | 26 ++++++++--
components/actionbar/stories/template.js | 31 +++++++++++
components/asset/stories/asset.mdx | 48 -----------------
components/asset/stories/asset.stories.js | 1 -
7 files changed, 79 insertions(+), 157 deletions(-)
delete mode 100644 components/accordion/stories/accordion.mdx
delete mode 100644 components/actionbar/stories/actionbar.mdx
delete mode 100644 components/asset/stories/asset.mdx
diff --git a/components/accordion/stories/accordion.mdx b/components/accordion/stories/accordion.mdx
deleted file mode 100644
index f3307ff25b2..00000000000
--- a/components/accordion/stories/accordion.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
-import {
- Canvas,
- ArgTypes,
- Meta,
- Description,
- Title,
- Subtitle,
-} from "@storybook/blocks";
-import {
- ComponentDetails,
- TaggedReleases,
- PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-import * as AccordionStories from "./accordion.stories";
-
-
-
-
-
-
-
-
-
-## Density options
-
-Accordion has three density options and requires that you specify one of the density types: compact, regular, or spacious.
-
-### Regular
-
-
-
-### Compact
-
-
-
-### Spacious
-
-
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-
-
-
-
-## Tagged releases
-
-
diff --git a/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js
index 3306f70390d..510ab108593 100644
--- a/components/accordion/stories/accordion.stories.js
+++ b/components/accordion/stories/accordion.stories.js
@@ -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,6 +186,10 @@ Compact.args = {
items: content,
density: "compact",
};
+Compact.parameters = {
+ chromatic: { disableSnapshot: true },
+};
+Compact.storyName = "Density - Compact";
export const Spacious = Template.bind({});
Spacious.tags = ["!dev"];
@@ -189,3 +197,19 @@ 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 },
+};
diff --git a/components/actionbar/stories/actionbar.mdx b/components/actionbar/stories/actionbar.mdx
deleted file mode 100644
index 0f0fc646866..00000000000
--- a/components/actionbar/stories/actionbar.mdx
+++ /dev/null
@@ -1,52 +0,0 @@
-import {
- Canvas,
- ArgTypes,
- Meta,
- Description,
- Title,
- Subtitle,
-} from "@storybook/blocks";
-import {
- ComponentDetails,
- TaggedReleases,
- PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-import * as ActionBarStories from "./actionbar.stories";
-
-
-
-
-
-
-
-
-
-## Standard
-
-
-
-## 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
-
-The component accepts the following inputs (properties):
-
-
-
-
-
-## Tagged releases
-
-
diff --git a/components/actionbar/stories/actionbar.stories.js b/components/actionbar/stories/actionbar.stories.js
index 5df9e440280..f8216ce6bdd 100644
--- a/components/actionbar/stories/actionbar.stories.js
+++ b/components/actionbar/stories/actionbar.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,7 +91,8 @@ 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,
@@ -96,3 +100,17 @@ Emphasized.args = {
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";
diff --git a/components/actionbar/stories/template.js b/components/actionbar/stories/template.js
index d83a95ab8c5..8b134157bd2 100644
--- a/components/actionbar/stories/template.js
+++ b/components/actionbar/stories/template.js
@@ -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 = ({
`;
};
+
+/* 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)]
+ })}
+ `
+});
diff --git a/components/asset/stories/asset.mdx b/components/asset/stories/asset.mdx
deleted file mode 100644
index 455cef7842a..00000000000
--- a/components/asset/stories/asset.mdx
+++ /dev/null
@@ -1,48 +0,0 @@
-import {
- ArgTypes,
- Canvas,
- Meta,
- Description,
- Title,
- Subtitle,
-} from "@storybook/blocks";
-import {
- ComponentDetails,
- TaggedReleases,
- PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-import * as AssetStories from "./asset.stories";
-
-
-
-
-
-
-
-
-
-## Variants
-
-### Image
-
-
-
-### File
-
-
-
-### Folder
-
-
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-
-
-
-
-## Tagged releases
-
-
diff --git a/components/asset/stories/asset.stories.js b/components/asset/stories/asset.stories.js
index d38c9eb6821..15745fe1527 100644
--- a/components/asset/stories/asset.stories.js
+++ b/components/asset/stories/asset.stories.js
@@ -39,7 +39,6 @@ export default {
packageJson,
metadata,
},
- tags: ["!autodocs"],
};
export const Default = AssetGroup.bind({});