From 4c0f337cd1e31a09a8561bc1f0ebd1570675edfc Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Mon, 7 Oct 2024 14:58:54 +0200
Subject: [PATCH] feat: add inputRequired property to React Textarea

---
 .changeset/rotten-crews-brake.md              |  5 +++
 .../src/Textarea.test.tsx                     | 35 +++++++++++++++++--
 .../component-library-react/src/Textarea.tsx  |  8 +++--
 3 files changed, 42 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/rotten-crews-brake.md

diff --git a/.changeset/rotten-crews-brake.md b/.changeset/rotten-crews-brake.md
new file mode 100644
index 00000000000..7484562d745
--- /dev/null
+++ 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
index 2669929df3b..3eeb280e1ab 100644
--- 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
index 1a32f5fcb9f..58de2a69551 100644
--- 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}
     />
   ),