chore(assetcard,avatar,badge): remove mdx files (#3408)

* docs(assetcard): remove MDX file

- adds some missing documentation regarding stories, classes and custom
properties
- corrects sentence-casing of story names

* docs(avatar): remove MDX file

- adds some missing documentation regarding stories
- reorganizes some information to sit with appropriate story/variant
- migrates documentation from MDX file to the stories file instead

* chore(avatar): fix disabled test arguments

* docs(badge): remove MDX file

- adds notice badge variants to semantic story
- adds sizing story to docs page
- migrates documentation in MDX to stories.js instead

* docs(badge): pr fixes

- remove empty doc block line
- remove html wrapper in favor of content array
- add notice badge to test coverage

Author: marissahuysentruyt

components/assetcard/stories/assetcard.mdx

@@ -8,6 +8,10 @@ import { Template } from "./template.js";
 
 /**
  * The asset card component allows users to select and manage assets and their metadata in a grid.
+ *
+ * ## Usage notes
+ * Set the `--spectrum-assetcard-asset-size` custom property to the size at which you want to display the asset.
+ *
  */
 export default {
 	title: "Asset card",
@@ -89,7 +93,6 @@ export default {
 		packageJson,
 		metadata,
 	},
-	tags: ["!autodocs"],
 };
 
 export const Default = AssetCardGroup.bind({});
@@ -98,8 +101,13 @@ Default.args = {
 	exampleImage: "portrait",
 	content: ["Image"],
 };
+Default.tags = ["!autodocs"];
 
 // ********* DOCS ONLY ********* //
+/**
+ * Inside the tile, an asset card displays the preview of the item it represents. The preview has different styles, depending on the type of item.
+ *
+ * The default asset card is also referred to as "portrait." */
 export const Portrait = Template.bind({});
 Portrait.args = {
 	title: "Portrait asset",
@@ -110,6 +118,7 @@ Portrait.tags = ["!dev"];
 Portrait.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+Portrait.storyName = "Default";
 
 export const Landscape = Template.bind({});
 Landscape.args = {
@@ -131,6 +140,9 @@ Square.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
+/**
+ * Asset cards have two optional content areas for extra information: `.spectrum-AssetCard-content` and `.spectrum-AssetCard-headerContent`. These content areas can include time stamps, non-interactive rating indicators, colored labels, badges, and more.
+ */
 export const OptionalContent = Template.bind({});
 OptionalContent.args = {
 	title: "MVI_0123.mp4",
@@ -141,7 +153,11 @@ OptionalContent.tags = ["!dev"];
 OptionalContent.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+OptionalContent.storyName = "Optional content";
 
+/**
+ * Sometimes it may not make sense to use checkboxes to indicate selection. In those rare cases, show a highlighted state when a user is inspecting one or more cards.
+ */
 export const HighlightSelection = Template.bind({});
 HighlightSelection.args = {
 	title: "Highlight selection",
@@ -153,7 +169,11 @@ HighlightSelection.tags = ["!dev"];
 HighlightSelection.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+HighlightSelection.storyName = "Selection - highlight";
 
+/**
+ * Some cards allow selection, on which the user can take an action. Both single-select and multi-select cards have checkboxes on the top left of the card (or in the top right for RTL languages).
+ */
 export const CheckboxSelection = Template.bind({});
 CheckboxSelection.args = {
 	title: "Checkbox selection",
@@ -165,7 +185,11 @@ CheckboxSelection.tags = ["!dev"];
 CheckboxSelection.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+CheckboxSelection.storyName = "Selection - checkbox";
 
+/**
+ * In cases where it’s important for users to know the order in which they have selected multiple cards — for example, to add video clips to a sequence — use ordered selection. Ordered selection must be multi-selectable.
+ */
 export const OrderedSelection = Template.bind({});
 OrderedSelection.args = {
 	title: "Ordered selection",
@@ -177,6 +201,7 @@ OrderedSelection.tags = ["!dev"];
 OrderedSelection.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+OrderedSelection.storyName = "Selection - ordered";
 
 export const DropTarget = Template.bind({});
 DropTarget.args = {
@@ -190,6 +215,7 @@ DropTarget.tags = ["!dev"];
 DropTarget.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+DropTarget.storyName = "Drop target";
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = AssetCardGroup.bind({});

components/assetcard/stories/assetcard.stories.js

@@ -7,12 +7,7 @@ import { AvatarGroup } from "./avatar.test.js";
 import { Template } from "./template.js";
 
 /**
- * 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>
- * ```
+ * An image representing a user.
  */
 export default {
 	title: "Avatar",
@@ -65,25 +60,49 @@ export default {
 		packageJson,
 		metadata,
 	},
-	tags: ["!autodocs"],
 };
 
+/**
+ * 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 const Default = AvatarGroup.bind({});
 Default.args = {};
 
 // ********* DOCS ONLY ********* //
-export const SizeOptions = (args, context) => Sizes({
+/** Avatar sizes scale exponentially, based on the Spectrum type scale. These range from size-50 to size-700, with the default size for an avatar being `100`. An avatar can also be customized to fit appropriately for your context.
+ *
+ * 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`
+*/
+export const Sizing = (args, context) => Sizes({
 	Template,
 	withHeading: false,
 	withBorder: false,
 	...args
 }, context);
-SizeOptions.tags = ["!dev"];
-SizeOptions.args = Default.args;
-SizeOptions.parameters = {
+Sizing.tags = ["!dev"];
+Sizing.args = Default.args;
+Sizing.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
+/**
+ * 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.
+ */
 export const NoLink = Template.bind({});
 NoLink.tags = ["!dev"];
 NoLink.args = {
@@ -94,7 +113,10 @@ NoLink.args = {
 NoLink.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+NoLink.storyName = "No link";
 
+/**
+ * When disabled, the avatar should only be used without a link.*/
 export const Disabled = Template.bind({});
 Disabled.tags = ["!dev"];
 Disabled.args = {

components/avatar/stories/avatar.mdx

@@ -10,6 +10,7 @@ export const AvatarGroup = Variants({
 	}, {
 		testHeading: "Disabled",
 		isDisabled: true,
+		hasLink: false,
 	}, {
 		testHeading: "Focused",
 		isFocused: true,