docs(form): adds missing stories, controls, test cases

- adds missing stories and corresponding documentation
- adds new test cases
- adds fieldLabelAlignment control for left/right aligned field labels

Author: marissahuysentruyt

components/fieldlabel/stories/form.stories.js

@@ -1,36 +1,56 @@
+import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js";
+import { Template as Fieldgroup } from "@spectrum-css/fieldgroup/stories/template.js";
 import { Template as Picker } from "@spectrum-css/picker/stories/template.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { Template as Stepper } from "@spectrum-css/stepper/stories/template.js";
 import { Template as TextField } from "@spectrum-css/textfield/stories/template.js";
+import { Template } from "./form.template.js";
 import pkgJson from "../package.json";
 import { FormGroup } from "./form.test.js";
 
 /**
- * The form component is used for aligning multiple inputs and field groups within a form.
+ * The form component is used for aligning multiple inputs and field groups within a form. It provides structure and spacing for your form fields.
  */
 export default {
 	title: "Form",
 	component: "Form",
 	argTypes: {
-		labelsAbove: {
-			name: "Labels above",
-			type: { name: "boolean" },
+		labelPosition: {
+			name: "Label position",
+			description: "Position of the field label in relation to the input.",
+			type: { name: "string" },
 			table: {
-				type: { summary: "boolean" },
+				type: { summary: "string" },
 				category: "Component",
 			},
-			control: "boolean",
+			control: "select",
+			options: ["top", "side"],
 		},
+		fieldLabelAlignment: {
+			name: "Field label alignment",
+			type: { name: "string" },
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+			},
+			control: "select",
+			options: ["left", "right"],
+			if: { arg: "labelPosition", eq: "side" },
+		},
+		items: { table: { disable: true } },
 	},
 	args: {
 		rootClass: "spectrum-Form",
-		labelsAbove: false,
+		labelPosition: "top",
 	},
 	parameters: {
 		packageJson: pkgJson,
 	},
 };
 
+/**
+ * A stacked layout with the labels above the form fields. The class `.spectrum-Form--labelPosition` is applied to the form itself. You do not need to apply a specific class to the field label because `.spectrum-FieldLabel--left` is applied to each to each [field label](/docs/components-field-label--docs) by default.
+ */
 export const Default = FormGroup.bind({});
 Default.args = {
 	items: [
@@ -65,7 +85,26 @@ Default.args = {
 				}, context),
 			],
 		}, {
-			label: "Amount",
+			label: "Interest",
+			id: "form-example-interests",
+			content: [
+				(passthroughs, context) => Fieldgroup({
+					layout: "horizontal",
+					items: [
+						Checkbox({
+							...passthroughs,
+							label: "Kittens",
+							customClasses: ["spectrum-FieldGroup-item"],
+						}, context),
+						Checkbox({
+							...passthroughs,
+							label: "Puppies",
+							customClasses: ["spectrum-FieldGroup-item"],
+						}, context),]
+				}),
+			],
+		},{
+			label: "Age",
 			id: "form-example-amount",
 			content: [
 				(passthroughs, context) => Stepper({
@@ -76,6 +115,35 @@ Default.args = {
 	],
 };
 
+/**
+ *  A two column layout with left-aligned label text.
+ */
+export const LeftAlignedSideLabels = Template.bind({});
+LeftAlignedSideLabels.args = {
+	...Default.args,
+	labelPosition: "side",
+};
+LeftAlignedSideLabels.tags = ["!dev"];
+LeftAlignedSideLabels.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+LeftAlignedSideLabels.storyName = "Left-aligned side labels";
+
+/**
+ *  A two column layout with right-aligned label text. `.spectrum-FieldLabel--right` is applied to each to each [field label](/docs/components-field-label--docs).
+ */
+export const RightAlignedSideLabels = Template.bind({});
+RightAlignedSideLabels.args = {
+	...Default.args,
+	labelPosition: "side",
+	fieldLabelAlignment: "right",
+};
+RightAlignedSideLabels.tags = ["!dev"];
+RightAlignedSideLabels.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+RightAlignedSideLabels.storyName = "Right-aligned side labels";
+
 // ********* VRT ONLY ********* //
 export const WithForcedColors = FormGroup.bind({});
 WithForcedColors.args = Default.args;

components/fieldlabel/stories/form.template.js

@@ -11,7 +11,8 @@ import "../index.css";
 
 export const Template = ({
 	rootClass = "spectrum-Form",
-	labelsAbove = false,
+	labelPosition = "top",
+	fieldLabelAlignment = "left",
 	customClasses = [],
 	customStyles = {},
 	id = getRandomId("form"),
@@ -20,7 +21,7 @@ export const Template = ({
     <form
         class=${classMap({
             [rootClass]: true,
-            [`${rootClass}--labelsAbove`]: labelsAbove,
+            [`${rootClass}--labelsAbove`]: labelPosition === "top",
             ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
         })}
         id=${ifDefined(id)}
@@ -36,7 +37,7 @@ export const Template = ({
                     ${when(label, () => FieldLabel({
                         label,
                         forInput: item.id,
-                        alignment: labelsAbove ? undefined : "left",
+                        alignment: labelPosition === "side" ? fieldLabelAlignment : undefined,
                     }, context))}
                     <div class=${classMap({
                         [`${rootClass}-itemField`]: true,

components/fieldlabel/stories/form.test.js

@@ -4,10 +4,17 @@ import { Template } from "./form.template";
 export const FormGroup = Variants({
 	Template,
 	testData: [
-		{},
 		{
-			testHeading: "Labels above",
-			labelsAbove: true,
+			testHeading: "Default",
+		},
+		{
+			testHeading: "Side labels with left-aligned text",
+			labelPosition: "side",
+		},
+		{
+			testHeading: "Side labels with right-aligned text",
+			labelPosition: "side",
+			fieldLabelAlignment: "right",
 		}
 	],
 });