docs(fieldlabel): form - add stories

Add stories for the "Form" component that exists as its own entry in the
docs (the CSS actually exists within the fieldlabel component).

Author: jawinn

components/fieldlabel/stories/form-template.js

@@ -0,0 +1,96 @@
+import { html } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
+import { Template as TextField } from "@spectrum-css/textfield/stories/template.js";
+import { Template as Picker } from "@spectrum-css/picker/stories/template.js";
+import { Template as Stepper } from "@spectrum-css/stepper/stories/template.js";
+
+import "../index.css";
+
+export const Template = ({
+	rootClass = "spectrum-Form",
+    labelsAbove,
+	customClasses = [],
+	id,
+	...globals
+}) => {
+	const { express } = globals;
+
+	try {
+		if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
+		else import(/* webpackPrefetch: true */ "../themes/express.css");
+	} catch (e) {
+		console.warn(e);
+	}
+
+	return html`
+		<form
+			class=${classMap({
+				[rootClass]: true,
+                [`${rootClass}--labelsAbove`]: labelsAbove,
+				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+			})}
+			id=${ifDefined(id)}
+		>
+            <div class="spectrum-Form-item">
+                ${FieldLabel({
+                    label: 'Company Title',
+                    forInput: 'form-example-company',
+                    alignment: 'left',
+                })}
+                <div class="spectrum-Form-itemField">
+                    ${TextField({  
+                        multiline: true,
+                        placeholder: 'Enter your company name',
+                        name: 'field',
+                        id: 'form-example-company',
+                    })}
+                </div>
+            </div>
+            <div class="spectrum-Form-item">
+                ${FieldLabel({
+                    label: 'Email Address',
+                    forInput: 'form-example-email',
+                    alignment: labelsAbove ? undefined : 'left',
+                })}
+                <div class="spectrum-Form-itemField">
+                    ${TextField({  
+                        placeholder: 'Enter your email address',
+                        name: 'email',
+                        type: 'email',
+                        id: 'form-example-email',
+                    })}
+                </div>
+            </div>
+            <div class="spectrum-Form-item">
+                ${FieldLabel({
+                    label: 'Country',
+                    forInput: 'form-example-country',
+                    alignment: labelsAbove ? undefined : 'left',
+                })}
+                <div class="spectrum-Form-itemField">
+                    ${Picker({
+                        placeholder: 'Select a Country',
+                        name: 'country',
+                        id: 'form-example-country',
+                    })}
+                </div>
+            </div>
+            <div class="spectrum-Form-item">
+                ${FieldLabel({
+                    label: 'Amount',
+                    forInput: 'form-example-amount',
+                    alignment: labelsAbove ? undefined : 'left',
+                })}
+                <div class="spectrum-Form-itemField">
+                    ${Stepper({
+                        id: 'form-example-amount'
+                    })}
+                </div>
+            </div>
+		</form>
+	`;
+};

components/fieldlabel/stories/form.stories.js

@@ -0,0 +1,42 @@
+import { Template } from "./form-template";
+
+export default {
+	title: "Components/Form",
+	description: "The Form component is used for aligning multiple inputs and field groups within a form.",
+	component: "Form",
+	argTypes: {
+		labelsAbove: {
+			name: "Labels Above",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "State",
+			},
+			control: "boolean",
+		},
+	},
+	args: {
+		rootClass: "spectrum-Form",
+		labelsAbove: false,
+	},
+	parameters: {
+		actions: {
+			handles: [],
+		},
+		status: {
+			type: process.env.MIGRATED_PACKAGES.includes("fieldlabel")
+				? "migrated"
+				: undefined,
+		},
+	},
+};
+
+export const Standard = Template.bind({});
+Standard.args = {
+	labelsAbove: false,
+};
+
+export const LabelsAbove = Template.bind({});
+LabelsAbove.args = {
+	labelsAbove: true,
+};