docs(contextualhelp): expand documentation (#3560)

* docs(contextualhelp): add docs for top-popoover and max-width

* docs(contextualhelp): add max-width popover test case

Author: marissahuysentruyt

components/contextualhelp/stories/contextualhelp.stories.js

@@ -130,6 +130,9 @@ WithLink.parameters = {
 };
 WithLink.storyName = "Default - info icon with link";
 
+/**
+ * In order to further customize the contextual help popover, implementations can set `--mod-spectrum-contextual-help-popover-maximum-width` to their desired max width.
+ */
 export const MaxWidthPopover = Template.bind({});
 MaxWidthPopover.tags = ["!dev"];
 MaxWidthPopover.args = {
@@ -149,6 +152,9 @@ MaxWidthPopover.parameters = {
 };
 MaxWidthPopover.storyName = "Default - max width popover";
 
+/**
+ * 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 = {

components/contextualhelp/stories/contextualhelp.test.js

@@ -11,6 +11,14 @@ export const ContextualHelpGroup = Variants({
 				"margin-bottom": "170px",
 			},
 		},
+		{
+			testHeading: "Max-width popover",
+			customStyles: {
+				"inline-size": "275px",
+				"margin-bottom": "275px",
+				"--mod-spectrum-contextual-help-popover-maximum-width": "150px",
+			},
+		},
 		{
 			testHeading: "With link",
 			customStyles: {