From 8867d50d54507e172dff06b76f83668fb8409be7 Mon Sep 17 00:00:00 2001
From: Prejita Deepak <122247584+preji89@users.noreply.github.com>
Date: Thu, 9 Jul 2026 13:41:19 +0530
Subject: [PATCH] docs(Field): add Storybook stories

Field is exported publicly and used internally by Input, Select,
Textarea and other form components, but had no Storybook coverage.
Adds Default, Stacked, Error, Success, Caution and Required stories
following the existing Input.stories.tsx conventions.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/components/Field/Field.stories.tsx | 159 +++++++++++++++++++++++++
 1 file changed, 159 insertions(+)
 create mode 100644 src/components/Field/Field.stories.tsx

diff --git a/src/components/Field/Field.stories.tsx b/src/components/Field/Field.stories.tsx
new file mode 100644
index 00000000..9c9b7566
--- /dev/null
+++ b/src/components/Field/Field.stories.tsx
@@ -0,0 +1,159 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+
+import Field from "./Field";
+
+const meta: Meta<typeof Field> = {
+  component: Field,
+  tags: ["autodocs"],
+
+  argTypes: {
+    caution: {
+      control: {
+        type: "text",
+      },
+    },
+
+    error: {
+      control: {
+        type: "text",
+      },
+    },
+
+    help: {
+      control: {
+        type: "text",
+      },
+    },
+
+    label: {
+      control: {
+        type: "text",
+      },
+    },
+
+    success: {
+      control: {
+        type: "text",
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Field>;
+
+export const Default: Story = {
+  render: () => (
+    <Field
+      forId="exampleField1"
+      label="Email address"
+      help="Additional description for the field"
+    >
+      <input
+        className="p-form-validation__input"
+        type="text"
+        id="exampleField1"
+        placeholder="example@canonical.com"
+      />
+    </Field>
+  ),
+
+  name: "Default",
+};
+
+export const Stacked: Story = {
+  render: () => (
+    <Field forId="exampleField2" label="Email address" stacked>
+      <input
+        className="p-form-validation__input"
+        type="text"
+        id="exampleField2"
+        placeholder="example@canonical.com"
+      />
+    </Field>
+  ),
+
+  name: "Stacked",
+};
+
+export const Error: Story = {
+  render: () => (
+    <Field
+      forId="exampleField3"
+      label="Email address"
+      error="This field is required."
+      validationId="exampleField3-error"
+    >
+      <input
+        className="p-form-validation__input"
+        type="text"
+        id="exampleField3"
+        placeholder="example@canonical.com"
+        aria-errormessage="exampleField3-error"
+        aria-invalid="true"
+      />
+    </Field>
+  ),
+
+  name: "Error",
+};
+
+export const Success: Story = {
+  render: () => (
+    <Field
+      forId="exampleField4"
+      label="Email address"
+      success="Verified."
+      validationId="exampleField4-success"
+    >
+      <input
+        className="p-form-validation__input"
+        type="text"
+        id="exampleField4"
+        placeholder="example@canonical.com"
+        aria-describedby="exampleField4-success"
+      />
+    </Field>
+  ),
+
+  name: "Success",
+};
+
+export const Caution: Story = {
+  render: () => (
+    <Field
+      forId="exampleField5"
+      label="Email address"
+      caution="No validation is performed in preview mode."
+      validationId="exampleField5-caution"
+    >
+      <input
+        className="p-form-validation__input"
+        type="text"
+        id="exampleField5"
+        placeholder="example@canonical.com"
+        aria-errormessage="exampleField5-caution"
+        aria-invalid="true"
+      />
+    </Field>
+  ),
+
+  name: "Caution",
+};
+
+export const Required: Story = {
+  render: () => (
+    <Field forId="exampleField6" label="Email address" required>
+      <input
+        className="p-form-validation__input"
+        type="text"
+        id="exampleField6"
+        placeholder="example@canonical.com"
+      />
+    </Field>
+  ),
+
+  name: "Required",
+};