feat: add inputRequired property to React Textarea

nl-design-system · Oct 12, 2024 · 4c0f337 · 4c0f337
1 parent a26f139
commit 4c0f337
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 6 deletions.
diff --git a/.changeset/rotten-crews-brake.md b/.changeset/rotten-crews-brake.md
@@ -0,0 +1,5 @@
+---
+"@utrecht/component-library-react": minor
+---
+
+Add `inputRequired` property to React `Textarea`.
diff --git a/packages/component-library-react/src/Textarea.test.tsx b/packages/component-library-react/src/Textarea.test.tsx
@@ -133,7 +133,7 @@ describe('Textarea', () => {
 
     it('can have a invalid state in CSS', () => {
       const handleChange = () => {};
-      const { container } = render(<Textarea required onChange={handleChange} />);
+      const { container } = render(<Textarea inputRequired onChange={handleChange} />);
 
       const textarea = container.querySelector(':invalid');
 
@@ -222,12 +222,41 @@ describe('Textarea', () => {
       expect(textarea).not.toHaveAttribute('required');
     });
 
-    it('can have a required state in CSS', () => {
+    it('does not have a required state in CSS', () => {
       const { container } = render(<Textarea required />);
 
       const textarea = container.querySelector(':required');
 
-      expect(textarea).toBeInTheDocument();
+      expect(textarea).not.toBeInTheDocument();
+    });
+  });
+
+  describe('inputRequired variant', () => {
+    it('can have a required state', () => {
+      render(<Textarea inputRequired />);
+      const textbox = screen.getByRole('textbox');
+      expect(textbox).toBeRequired();
+    });
+    it('is not required by default', () => {
+      render(<Textarea />);
+      const textbox = screen.getByRole('textbox');
+      expect(textbox).not.toBeRequired();
+    });
+    it('renders a design system BEM modifier class name', () => {
+      const { container } = render(<Textarea inputRequired />);
+      const textbox = container.querySelector('.utrecht-textarea');
+      expect(textbox).toHaveClass('utrecht-textarea--required');
+    });
+    it('omits non-essential required attributes when not required', () => {
+      render(<Textarea inputRequired={false} />);
+      const textbox = screen.getByRole('textbox');
+      expect(textbox).not.toHaveAttribute('aria-required');
+      expect(textbox).not.toHaveAttribute('required');
+    });
+    it('can have a required state in CSS', () => {
+      const { container } = render(<Textarea inputRequired />);
+      const textbox = container.querySelector(':required');
+      expect(textbox).toBeInTheDocument();
     });
   });
 

diff --git a/packages/component-library-react/src/Textarea.tsx b/packages/component-library-react/src/Textarea.tsx
@@ -2,12 +2,13 @@ import clsx from 'clsx';
 import { ForwardedRef, forwardRef, TextareaHTMLAttributes } from 'react';
 
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  inputRequired?: boolean;
   invalid?: boolean;
 }
 
 export const Textarea = forwardRef(
   (
-    { dir, disabled, invalid, readOnly, required, className, ...restProps }: TextareaProps,
+    { dir, disabled, inputRequired, invalid, readOnly, required, className, ...restProps }: TextareaProps,
     ref: ForwardedRef<HTMLTextAreaElement>,
   ) => (
     <textarea
@@ -19,13 +20,14 @@ export const Textarea = forwardRef(
         disabled && 'utrecht-textarea--disabled',
         invalid && 'utrecht-textarea--invalid',
         readOnly && 'utrecht-textarea--readonly',
-        required && 'utrecht-textarea--required',
+        (required || inputRequired) && 'utrecht-textarea--required',
         className,
       )}
       dir={dir ?? 'auto'}
       disabled={disabled}
       readOnly={readOnly}
-      required={required}
+      aria-required={required ? required : undefined}
+      required={inputRequired}
       aria-invalid={invalid || undefined}
     />
   ),