test(storybook): add stories for FormControl, HelpText, and InputValidationMessage (#264)

Author: nathanyoung

packages/components/src/components/FormControl/FormControl.stories.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect } from 'storybook/test';
+import { FormControl } from './FormControl';
+
+const meta = {
+  component: FormControl,
+  tags: ['ai-generated'],
+} satisfies Meta<typeof FormControl>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    id: 'first-name',
+    label: 'First name',
+  },
+  render: (args) => (
+    <FormControl {...args}>
+      <input id={args.id} type="text" />
+    </FormControl>
+  ),
+  play: async ({ canvas }) => {
+    // Proves the FormLabel htmlFor/input id wiring, not just that it mounted.
+    await expect(canvas.getByLabelText('First name')).toBeVisible();
+  },
+};
+
+export const WithHelpText: Story = {
+  args: {
+    id: 'email',
+    label: 'Email address',
+    helpText: 'We will never share your email.',
+  },
+  render: (args) => (
+    <FormControl {...args}>
+      <input id={args.id} type="email" />
+    </FormControl>
+  ),
+};
+
+export const WithError: Story = {
+  args: {
+    id: 'password',
+    label: 'Password',
+    error: 'Password must be at least 8 characters.',
+  },
+  render: (args) => (
+    <FormControl {...args}>
+      <input id={args.id} type="password" />
+    </FormControl>
+  ),
+  play: async ({ canvas }) => {
+    // The error prop renders as an InputValidationMessage below the input.
+    await expect(
+      canvas.getByText('Password must be at least 8 characters.')
+    ).toBeVisible();
+  },
+};
+
+export const Required: Story = {
+  args: {
+    id: 'username',
+    label: 'Username',
+    isRequired: true,
+  },
+  render: (args) => (
+    <FormControl {...args}>
+      <input id={args.id} type="text" required />
+    </FormControl>
+  ),
+};
+
+export const HiddenLabel: Story = {
+  args: {
+    id: 'search',
+    label: 'Search',
+    hideLabel: true,
+  },
+  render: (args) => (
+    <FormControl {...args}>
+      <input id={args.id} type="search" aria-label={args.label} />
+    </FormControl>
+  ),
+  play: async ({ canvas }) => {
+    // hideLabel suppresses the visible FormLabel entirely.
+    await expect(canvas.queryByText('Search')).not.toBeInTheDocument();
+    // The input must still be accessible via its aria-label.
+    await expect(canvas.getByLabelText('Search')).toBeVisible();
+  },
+};

packages/components/src/components/HelpText/HelpText.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { HelpText } from './HelpText';
+import { Box } from '../Box/Box';
+
+const meta = {
+  component: HelpText,
+  tags: ['ai-generated'],
+} satisfies Meta<typeof HelpText>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Additional clarifying text to help describe the input.',
+  },
+};
+
+export const BelowAnInput: Story = {
+  render: () => (
+    <Box gap="2xs">
+      <label htmlFor="help-text-example">Email address</label>
+      <input
+        id="help-text-example"
+        type="email"
+        aria-describedby="help-text-example-hint"
+      />
+      {/* HelpText doesn't forward an id, so associate via a wrapper. */}
+      <div id="help-text-example-hint">
+        <HelpText>We will only use this to send your receipt.</HelpText>
+      </div>
+    </Box>
+  ),
+};
+
+export const WithRichContent: Story = {
+  args: {
+    children: (
+      <>
+        Must contain at least <strong>8 characters</strong>.
+      </>
+    ),
+  },
+};

packages/components/src/components/InputValidationMessage/InputValidationMessage.stories.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect } from 'storybook/test';
+import { InputValidationMessage } from './InputValidationMessage';
+import { Box } from '../Box/Box';
+
+const meta = {
+  component: InputValidationMessage,
+  tags: ['ai-generated'],
+} satisfies Meta<typeof InputValidationMessage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'This field is required.',
+  },
+};
+
+export const Sizes: Story = {
+  args: {
+    children: 'This field is required.',
+  },
+  render: () => (
+    <Box gap="sm">
+      <InputValidationMessage size="xs">
+        Extra small validation message
+      </InputValidationMessage>
+      <InputValidationMessage size="sm">
+        Small validation message
+      </InputValidationMessage>
+      <InputValidationMessage size="md">
+        Medium validation message
+      </InputValidationMessage>
+    </Box>
+  ),
+};
+
+export const CssCheck: Story = {
+  args: {
+    children: 'This field is required.',
+  },
+  play: async ({ canvas }) => {
+    const message = canvas.getByText('This field is required.');
+    // font-color-danger resolves to --color-font-danger (#dc2626 in the light
+    // theme) — fails if the design-token CSS did not load in the preview.
+    await expect(getComputedStyle(message).color).toBe('rgb(220, 38, 38)');
+  },
+};