chore(contextualhelp,datepicker,fieldgroup): remove MDX files

components/contextualhelp/stories/contextualhelp.stories.js

@@ -107,10 +107,18 @@ export default {
 	},
 };
 
+/**
+ * The default contextual help component uses an info icon to signify that it represents in-line information, and does not incorporate a link in its content. Specific, brief, and contextual guidance is best for this component's supplemental or nice-to-know content. The default placement of the popover is `bottom-start`.
+ */
 export const Default = ContextualHelpGroup.bind({});
 Default.args = {};
 
 // ********* DOCS ONLY ********* //
+/**
+ * If using a standalone [link](/docs/components-link--docs), do not add punctuation to the end of the link text. Make sure that the landing experience is intuitive, helpful, and naturally builds upon the information being introduced in this component. For example, don’t link to an external sales website unless the information there is directly related to a user being able to do something within the product.
+ * 
+ * A generic “Learn more” can be acceptable, but it’s more helpful, particularly for screen reader users, to include another word or two in the link text that gives more context about the link's destination.
+ */
 export const WithLink = Template.bind({});
 WithLink.tags = ["!dev"];
 WithLink.args = {
@@ -122,7 +130,11 @@ WithLink.args = {
 WithLink.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+WithLink.storyName = "Default - info icon with link";
 
+/**
+ * This is an example of the contextual help component within a popover with a placement of `top`. Read more about the 22 available placement positions in the [popover documentation](/docs/components-popover--docs).
+ */
 export const TopPopover = Template.bind({});
 TopPopover.tags = ["!dev"];
 TopPopover.args = {
@@ -142,7 +154,11 @@ TopPopover.parameters = {
 		},
 	},
 };
+TopPopover.storyName = "Default - top popover";
 
+/**
+ * When displaying help or resources to learn more, the contextual help should use the help icon. The content in this variant provides more detailed, in-depth guidance about a task, UI element, tool or keyboard shortcuts.
+ */
 export const HelpDefault = Template.bind({});
 HelpDefault.tags = ["!dev"];
 HelpDefault.args = {
@@ -151,6 +167,7 @@ HelpDefault.args = {
 HelpDefault.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+HelpDefault.storyName = "Help icon";
 
 export const HelpWithLink = Template.bind({});
 HelpWithLink.tags = ["!dev"];
@@ -164,6 +181,7 @@ HelpWithLink.args = {
 HelpWithLink.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+HelpWithLink.storyName = "Help icon - with link";
 
 export const HelpTopPopover = Template.bind({});
 HelpTopPopover.tags = ["!dev"];
@@ -185,6 +203,7 @@ HelpTopPopover.parameters = {
 		},
 	},
 };
+HelpTopPopover.storyName = "Help icon - top popover";
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = ContextualHelpGroup.bind({});

components/contextualhelp/stories/contextualhelp.test.js

@@ -22,5 +22,13 @@ export const ContextualHelpGroup = Variants({
 				url: "#",
 			},
 		},
+		{
+			testHeading: "Help",
+			iconName: "Help",
+			customStyles: {
+				"inline-size": "275px",
+				"margin-bottom": "170px",
+			},
+		},
 	],
 });

components/datepicker/stories/datepicker.stories.js

@@ -4,7 +4,7 @@ import { isDisabled, isInvalid, isOpen, isQuiet, isReadOnly, isRequired, isValid
 import metadata from "../metadata/metadata.json";
 import packageJson from "../package.json";
 import { DatePickerGroup } from "./datepicker.test.js";
-import { Template } from "./template.js";
+import { OpenClosedTemplate, Template } from "./template.js";
 
 /**
  * A date picker displays a text field input with a button next to it, and can display two text fields next to each other for choosing a date range.
@@ -28,7 +28,7 @@ export default {
 			if: { arg: "isInvalid", truthy: false },
 		},
 		isDateTimeRange: {
-			name: "Date and Time styling",
+			name: "Date and time styling",
 			type: { name: "boolean" },
 			table: {
 				type: { summary: "boolean" },
@@ -81,16 +81,31 @@ export default {
 
 export const Default = DatePickerGroup.bind({});
 Default.args = {};
-Default.parameters = {
+Default.tags = ["!autodocs"];
+
+// ********* DOCS ONLY ********* //
+/** 
+ * Default styling for date pickers display a visible field button. This style works best in a dense array of controls where the field button helps separate the dropdown from its surroundings.
+ * 
+ * The standard implementation for a date picker incorporates the display of a [calendar](/docs/components-calendar--docs) within a [popover component](/docs/components-popover--docs).
+ */
+export const DefaultGroup = OpenClosedTemplate.bind({});
+DefaultGroup.args = {};
+DefaultGroup.tags = [ "!dev"];
+DefaultGroup.storyName = "Default";
+DefaultGroup.parameters = {
 	docs: {
 		story: {
-			height: "300px"
+			height: "350px",
 		}
 	},
+	chromatic: { disableSnapshot: true },
 };
 
-// ********* DOCS ONLY ********* //
-export const Quiet = Template.bind({});
+/**
+ * The quiet style works best when a clear layout (vertical stack, table, grid) makes it easy to parse.
+ */
+export const Quiet = OpenClosedTemplate.bind({});
 Quiet.tags = ["!dev"];
 Quiet.args = {
 	isQuiet: true,
@@ -99,11 +114,14 @@ Quiet.parameters = {
 	chromatic: { disableSnapshot: true },
 	docs: {
 		story: {
-			height: "300px"
+			height: "350px",
 		}
 	},
 };
 
+/**
+ * Date pickers can be used to select a date range (a start date and an end date).
+ */
 export const Range = Template.bind({});
 Range.args = {
 	lastDay: 3,
@@ -125,7 +143,11 @@ QuietRange.args = {
 QuietRange.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+QuietRange.storyName = "Range, quiet";
 
+/**
+ * A date picker can be marked as having an error to show that a value needs to be entered in order to move forward, or that an entered value is invalid.
+ */
 export const Invalid = Template.bind({});
 Invalid.tags = ["!dev"];
 Invalid.args = {
@@ -146,6 +168,7 @@ QuietInvalid.args = {
 QuietInvalid.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+QuietInvalid.storyName = "Invalid, quiet";
 
 export const ReadOnly = Template.bind({});
 ReadOnly.tags = ["!dev"];
@@ -155,6 +178,7 @@ ReadOnly.args = {
 ReadOnly.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+ReadOnly.storyName = "Read-only";
 
 export const Disabled = Template.bind({});
 Disabled.tags = ["!dev"];
@@ -174,6 +198,7 @@ QuietDisabled.args = {
 QuietDisabled.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+QuietDisabled.storyName = "Disabled, quiet";
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = DatePickerGroup.bind({});

components/datepicker/stories/template.js

@@ -1,7 +1,7 @@
 import { Template as Calendar } from "@spectrum-css/calendar/stories/template.js";
 import { Template as PickerButton } from "@spectrum-css/pickerbutton/stories/template.js";
 import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
-import { getRandomId } from "@spectrum-css/preview/decorators";
+import { Container, getRandomId } from "@spectrum-css/preview/decorators";
 import { Template as TextField } from "@spectrum-css/textfield/stories/template.js";
 import { html } from "lit";
 import { when } from "lit-html/directives/when.js";
@@ -135,3 +135,22 @@ export const Template = ({
 		}, context)}
 	`;
 };
+
+
+/* Displays open and closed date pickers. */
+export const OpenClosedTemplate = (args, context) => Container({
+	withBorder: false,
+	wrapperStyles: { "column-gap": "56px", },
+	content: html`
+		${Container({
+			withBorder: false,
+			heading: "Open",
+			content: Template(args, context),
+		})}
+		${Container({
+			withBorder: false,
+			heading: "Closed",
+			content: Template({...args, isOpen: false}, context),
+		})}
+	`
+});