Merge pull request #230 from MetroStar/form-control-enhancements

Form Control Enhancements

eslint.config.js

@@ -1,7 +1,7 @@
 import globals from 'globals';
 import pluginJs from '@eslint/js';
-import stylisticTs from '@stylistic/eslint-plugin-ts';
 import tseslint from 'typescript-eslint';
+import prettierRecommended from 'eslint-plugin-prettier/recommended';
 import reactPlugin from 'eslint-plugin-react';
 
 export default [
@@ -20,23 +20,28 @@ export default [
         },
       },
     },
-    plugins: {
-      '@stylistic/ts': stylisticTs,
-    },
   },
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
   reactPlugin.configs.flat.recommended,
+  prettierRecommended,
   {
     rules: {
       // Base Warnings
       'no-console': 'warn',
 
-      // Stylistic Issues
-      '@stylistic/ts/quotes': ['error', 'single'],
-      '@stylistic/ts/indent': ['error', 2],
-      '@stylistic/ts/semi': ['error', 'always'],
-      '@stylistic/ts/comma-dangle': ['error', 'always-multiline'],
+      // Formatting
+      'prettier/prettier': [
+        'error',
+        {
+          semi: true,
+          tabWidth: 2,
+          singleQuote: true,
+          trailingComma: 'all',
+          bracketSpacing: true,
+          useTabs: false,
+        },
+      ],
 
       // TypeScript
       '@typescript-eslint/no-unused-vars': 'error',

package.json

@@ -34,7 +34,6 @@
     "@storybook/react": "^8.2.1",
     "@storybook/react-vite": "^8.2.1",
     "@storybook/test": "^8.2.1",
-    "@stylistic/eslint-plugin-ts": "^2.6.2",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "16.0.0",
@@ -45,6 +44,8 @@
     "@vitejs/plugin-react": "^4.3.1",
     "@vitest/coverage-v8": "^2.0.5",
     "eslint": "^9.9.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.35.0",
     "jest-axe": "^9.0.0",
     "postcss": "^8.4.41",

packages/comet-uswds/src/components/error-messages/error-messages.test.tsx

@@ -15,6 +15,12 @@ describe('ErrorMessage', () => {
     expect(baseElement).toBeTruthy();
   });
 
+  test('should render an error message as a string successfully', () => {
+    const { baseElement } = render(<ErrorMessages errors="error" />);
+    const errorMessages = baseElement.querySelectorAll('.usa-error-message');
+    expect(errorMessages).toHaveLength(1);
+  });
+
   test('should render an error message successfully', () => {
     const errors: string[] = ['error1'];
     const { baseElement } = render(<ErrorMessages errors={errors} />);

packages/comet-uswds/src/components/error-messages/error-messages.tsx

@@ -8,7 +8,7 @@ export interface ErrorMessagesProps {
   /**
    * An array of error strings to display
    */
-  errors?: string[];
+  errors?: string | string[];
   /**
    * ReactNode components to display as children
    */
@@ -28,6 +28,10 @@ export const ErrorMessages = ({
     return <></>;
   }
 
+  if (typeof errors === 'string') {
+    errors = [errors];
+  }
+
   return (
     <>
       {children ??

packages/comet-uswds/src/components/form-group/form-group.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { FormGroup, FormGroupProps } from './form-group';
-import { TextInput, Label } from '../..';
+import { TextInput, Label, HelperText, ErrorMessages } from '../..';
 
 const meta: Meta<typeof FormGroup> = {
   title: 'USWDS/Forms/Form Group',
@@ -13,6 +13,8 @@ const Template: StoryFn<typeof FormGroup> = (args: FormGroupProps) => (
   <div className="padding-left-1">
     <FormGroup id={args.id} errors={args.errors}>
       <Label htmlFor="input1">Name</Label>
+      <HelperText>Enter your full name</HelperText>
+      <ErrorMessages errors={args.errors} />
       <TextInput id="input1" name="input1" />
     </FormGroup>
   </div>
@@ -21,11 +23,10 @@ const Template: StoryFn<typeof FormGroup> = (args: FormGroupProps) => (
 export const Standard = Template.bind({});
 Standard.args = {
   id: 'form-group-1',
-  errors: [],
 };
 
 export const WithErrors = Template.bind({});
 WithErrors.args = {
   id: 'form-group-2',
-  errors: ['some error'],
+  errors: 'some error',
 };

packages/comet-uswds/src/components/form-group/form-group.test.tsx

@@ -1,6 +1,7 @@
 import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 import FormGroup from './form-group';
+import TextInput from '../text-input';
 
 describe('FormGroup', () => {
   test('should render with no accessibility violations', async () => {
@@ -19,6 +20,39 @@ describe('FormGroup', () => {
     expect(formGroup).toBeTruthy();
   });
 
+  test('should render a form group for a fieldContol', () => {
+    const { baseElement } = render(<FormGroup fieldControl={<></>} />);
+    const formGroup = baseElement.querySelector('.usa-form-group');
+    expect(formGroup).toBeTruthy();
+  });
+
+  test('should render empty when invalid fieldElement', () => {
+    const { baseElement } = render(<FormGroup fieldControl={3} />);
+    expect(baseElement).toBeTruthy();
+  });
+
+  test('should not render form group when no children or fieldControls provided', () => {
+    const { baseElement } = render(<FormGroup />);
+    const formGroup = baseElement.querySelector('.usa-form-group');
+    expect(formGroup).toBeFalsy();
+  });
+
+  test('should render with form group props', () => {
+    const { baseElement } = render(
+      <FormGroup
+        id="form-group-1"
+        fieldControl={<TextInput id="text-input-1" name="text-input-1" />}
+        required
+        label="label"
+        helperText="helper text"
+        errors="errors"
+        validationStatus="error"
+      />,
+    );
+    const formGroup = baseElement.querySelector('.usa-form-group');
+    expect(formGroup).toBeTruthy();
+  });
+
   test('should render multiple form groups successfully', () => {
     const { baseElement } = render(
       <>