Merged in feat/3685-new-textarea-component (pull request #3392)

feat(SW-3685): Add new TextArea and FormTextArea components

* Add new TextArea and FormTextArea components

* Update example form with description

* Merge branch 'master' into feat/3685-new-textarea-component

* Formatting new files with new prettier config

* Added custom controls for the text area story


Approved-by: Linus Flood

packages/design-system/lib/components/TextArea/TextArea.tsx

@@ -0,0 +1,43 @@
+import { cx } from "class-variance-authority"
+import { forwardRef, type ForwardedRef, useId } from "react"
+import { TextArea as AriaTextArea } from "react-aria-components"
+
+import { InputLabel } from "../InputLabel"
+import { Typography } from "../Typography"
+
+import styles from "./textarea.module.css"
+import type { TextAreaProps } from "./types"
+
+const TextAreaComponent = forwardRef(function TextAreaComponent(
+  { label, placeholder, id, required, ...props }: TextAreaProps,
+  ref: ForwardedRef<HTMLTextAreaElement>
+) {
+  const generatedId = useId()
+  const textareaId = id || generatedId
+
+  return (
+    <>
+      {label && (
+        <InputLabel required={required} className={styles.labelAbove}>
+          {label}
+        </InputLabel>
+      )}
+      <label className={styles.container} htmlFor={textareaId}>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <AriaTextArea
+            {...props}
+            id={textareaId}
+            required={required}
+            placeholder={placeholder ?? ""}
+            className={cx(styles.textarea, props.className)}
+            ref={ref}
+          />
+        </Typography>
+      </label>
+    </>
+  )
+})
+
+export const TextArea = TextAreaComponent as React.ForwardRefExoticComponent<
+  TextAreaProps & React.RefAttributes<HTMLTextAreaElement>
+>