75a377b59e
chore(SW-3145): Move Body component to design-system * Move Body component to design-system Approved-by: Joakim Jäderberg
82 lines
2.3 KiB
TypeScript
82 lines
2.3 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
Label as AriaLabel,
|
|
Text,
|
|
TextArea as AriaTextArea,
|
|
TextField,
|
|
} from "react-aria-components"
|
|
import { Controller, useFormContext } from "react-hook-form"
|
|
|
|
import Body from "@scandic-hotels/design-system/Body"
|
|
import Caption from "@scandic-hotels/design-system/Caption"
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import { Label } from "@scandic-hotels/design-system/Label"
|
|
|
|
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}>
|
|
<Body asChild fontOnly>
|
|
<AriaTextArea
|
|
{...field}
|
|
aria-labelledby={field.name}
|
|
placeholder={placeholder}
|
|
readOnly={readOnly}
|
|
required={!!registerOptions.required}
|
|
className={styles.textarea}
|
|
/>
|
|
</Body>
|
|
<Label required={!!registerOptions.required}>{label}</Label>
|
|
</AriaLabel>
|
|
{helpText && !fieldState.error ? (
|
|
<Caption asChild color="black">
|
|
<Text className={styles.helpText} slot="description">
|
|
<MaterialIcon icon="check" size={30} />
|
|
{helpText}
|
|
</Text>
|
|
</Caption>
|
|
) : null}
|
|
{fieldState.error ? (
|
|
<Caption className={styles.error} fontOnly>
|
|
<MaterialIcon icon="info" color="Icon/Interactive/Accent" />
|
|
{fieldState.error.message}
|
|
</Caption>
|
|
) : null}
|
|
</TextField>
|
|
)}
|
|
/>
|
|
)
|
|
}
|