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

* docs(contextualhelp): remove MDX file

- adds some additional documentation regarding stories/variants
- migrates documentation in MDX to stories.js instead

* docs(fieldgroup): remove MDX file

- creates additional templates to showcase variants in a single story on
the docs page
- additional documentation to give context to stories
- corrects sentence-casing in story names
- removes duplicate control for label text
- migrates documentation in MDX to stories.js instead

* chore(fieldgroup,contextualhelp): cleans up test files

- fieldgroup: we don't really need to change the label text or help text
between test cases, so some of the test-specific changes were removed
- contextualhelp: add help icon test case

* docs(datepicker): remove MDX file

- adds missing date picker docs
- migrates documentation in MDX to stories.js instead
- creates OpenClosedTemplate to display both states in a single story on
the docs page
- adds Range variant to the sidebar since that control isn't in the table

Author: marissahuysentruyt

components/contextualhelp/stories/contextualhelp.mdx

@@ -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.stories.js

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

components/contextualhelp/stories/contextualhelp.test.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/datepicker.mdx

@@ -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),
+		})}
+	`
+});