docs(helptext): storybook fixes and addition

Clears up a couple issues:
- An arg called "treatment" was named "variant" in the actual template
  and its usage. This has been renamed, so this control now works.
- Icon is now hidden for the neutral Help text, to conform with the
  component guidelines. An issue originally noticed in Field group where
  neutral help text was showing an invalid icon when it shouldn't be
  allowing that combination.

Adds a new story, so both negative and neutral variants are represented
in VRTs. Also includes wrapping text as part of the new story.

Author: jawinn

components/helptext/stories/helptext.stories.js

@@ -18,8 +18,8 @@ export default {
 			},
 			control: { type: "text" },
 		},
-		treatment: {
-			name: "Treatment",
+		variant: {
+			name: "Variant",
 			type: { name: "string" },
 			table: {
 				type: { summary: "string" },
@@ -28,17 +28,27 @@ export default {
 			options: ["neutral", "negative"],
 			control: "inline-radio",
 		},
+		size: {
+			name: "Size",
+			type: { name: "string", required: true },
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+			},
+			options: ["s", "m", "l", "xl"],
+			control: "select",
+		},
 		hideIcon: {
 			name: "Hide icon",
 			type: { name: "boolean" },
-			description: "Only applicable if treatment is negative.",
+			description: "Help text using the negative variant can have an optional icon.",
 			table: {
 				type: { summary: "boolean" },
 				disable: false,
-				category: "Advanced",
+				category: "Component",
 			},
 			control: "boolean",
-			if: { arg: "treatment", eq: "negative" },
+			if: { arg: "variant", eq: "negative" },
 		},
 		isDisabled: {
 			name: "Disabled",
@@ -49,13 +59,23 @@ export default {
 			},
 			control: "boolean",
 		},
+		customStyles: {
+			name: "Custom styles",
+			description: "Storybook only styles for testing the story, applied to the parent element.",
+			table: {
+				type: { summary: "object" },
+				category: "Advanced",
+			},
+			if: { arg: 'customStyles' }
+		}
 	},
 	args: {
 		rootClass: "spectrum-HelpText",
 		text: "Create a password with at least 8 characters.",
-		treatment: "neutral",
+		variant: "neutral",
 		hideIcon: false,
 		isDisabled: false,
+		size: "m",
 	},
 	parameters: {
 		actions: {
@@ -70,4 +90,13 @@ export default {
 };
 
 export const Default = Template.bind({});
+Default.storyName = "Neutral";
 Default.args = {};
+
+export const Negative = Template.bind({});
+Negative.storyName = "Negative";
+Negative.args = {
+	variant: "negative",
+	text: "This is an example with wrapping text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+	customStyles: {'max-width': '350px'},
+};

components/helptext/stories/template.js

@@ -1,6 +1,7 @@
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
 
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 
@@ -16,6 +17,7 @@ export const Template = ({
 	variant,
 	id,
 	customClasses = [],
+	customStyles = {},
 	...globals
 }) => {
 	const { express } = globals;
@@ -37,13 +39,14 @@ export const Template = ({
 				[`${rootClass}--${variant}`]: typeof variant !== "undefined",
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
+			style=${styleMap(customStyles)}
 			id=${ifDefined(id)}
 		>
-			${!hideIcon
+			${!hideIcon && variant == "negative"
 				? Icon({
-						iconName: "Alert",
-						size,
-						customClasses: [`${rootClass}-validationIcon`],
+					iconName: "Alert",
+					size,
+					customClasses: [`${rootClass}-validationIcon`],
 				  })
 				: ""}
 			<div class=${`${rootClass}-text`}>${text}</div>