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/badge/stories/badge.stories.js

@@ -1,3 +1,4 @@
+import { Sizes } from "@spectrum-css/preview/decorators/utilities.js";
 import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
 import { ArgGrid } from "@spectrum-css/preview/decorators";
 import { Sizes } from "@spectrum-css/preview/decorators/utilities.js";
@@ -40,7 +41,7 @@ export default {
 				type: { summary: "string" },
 				category: "Component",
 			},
-			options: ["neutral", "accent", "informative", "positive", "negative", "gray", "red", "orange", "yellow", "chartreuse", "celery", "green", "seafoam", "cyan", "blue", "indigo", "purple", "fuchsia", "magenta"],
+			options: ["neutral", "accent", "informative", "positive", "negative", "notice", "gray", "red", "orange", "yellow", "chartreuse", "celery", "green", "seafoam", "cyan", "blue", "indigo", "purple", "fuchsia", "magenta"],
 			control: "select",
 		},
 		fixed: {
@@ -84,7 +85,7 @@ Default.args = {
 export const SemanticVariants = (args, context) => ArgGrid({
 	Template,
 	argKey: "variant",
-	options: ["neutral", "accent", "informative", "positive", "negative"],
+	options: ["neutral", "accent", "informative", "positive", "negative", "notice"],
 	withBorder: false,
 	...args,
 }, context);

components/badge/stories/badge.test.js

@@ -17,7 +17,7 @@ export const BadgeGroup = Variants({
 	Template: Badges,
 	sizeDirection: "row",
 	testData: [
-		...["neutral", "accent", "informative", "positive", "negative"].map((variant) =>
+		...["neutral", "accent", "informative", "positive", "negative", "notice"].map((variant) =>
 			({
 				testHeading: capitalize(variant),
 				wrapperStyles: {

components/badge/stories/template.js

@@ -1,3 +1,4 @@
+import { Container } from "@spectrum-css/preview/decorators";
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 import { Container, getRandomId } from "@spectrum-css/preview/decorators";
 import { html } from "lit";