Merged in chore/SW-3356-move-textarea-from-tempds-to-ds (pull request #2745)

chore(SW-3356): Moved TextArea to design system

* chore(SW-3356): Moved TextArea to design system


Approved-by: Joakim Jäderberg

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

@@ -0,0 +1,82 @@
+'use client'
+
+import {
+  Label as AriaLabel,
+  Text,
+  TextArea as AriaTextArea,
+  TextField,
+} from 'react-aria-components'
+import { Controller, useFormContext } from 'react-hook-form'
+
+import { MaterialIcon } from '../../Icons/MaterialIcon'
+import { Label } from '../../Label'
+import { Typography } from '../../Typography'
+
+import styles from './textarea.module.css'
+
+import type { TextAreaProps } from './input'
+
+export default function TextArea({
+  'aria-label': ariaLabel,
+  className = '',
+  disabled = false,
+  helpText = '',
+  label,
+  name,
+  placeholder = '',
+  readOnly = false,
+  registerOptions = {},
+}: TextAreaProps) {
+  const { control } = useFormContext()
+
+  return (
+    <Controller
+      disabled={disabled}
+      control={control}
+      name={name}
+      rules={registerOptions}
+      render={({ field, fieldState }) => (
+        <TextField
+          aria-label={ariaLabel}
+          className={className}
+          isDisabled={field.disabled}
+          isRequired={!!registerOptions.required}
+          onBlur={field.onBlur}
+          onChange={field.onChange}
+          validationBehavior="aria"
+          value={field.value}
+        >
+          <AriaLabel className={styles.container}>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <AriaTextArea
+                {...field}
+                aria-labelledby={field.name}
+                placeholder={placeholder}
+                readOnly={readOnly}
+                required={!!registerOptions.required}
+                className={styles.textarea}
+              />
+            </Typography>
+            <Label required={!!registerOptions.required}>{label}</Label>
+          </AriaLabel>
+          {helpText && !fieldState.error ? (
+            <Typography variant="Body/Supporting text (caption)/smRegular">
+              <Text className={styles.helpText} slot="description">
+                <MaterialIcon icon="check" size={30} />
+                {helpText}
+              </Text>
+            </Typography>
+          ) : null}
+          {fieldState.error ? (
+            <Typography variant="Body/Supporting text (caption)/smRegular">
+              <p className={styles.error}>
+                <MaterialIcon icon="info" color="Icon/Interactive/Accent" />
+                {fieldState.error.message}
+              </p>
+            </Typography>
+          ) : null}
+        </TextField>
+      )}
+    />
+  )
+}