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>
+      )}
+    />
+  )
+}

packages/design-system/lib/components/Form/TextArea/input.ts

@@ -0,0 +1,9 @@
+import type { RegisterOptions } from 'react-hook-form'
+
+export interface TextAreaProps
+  extends React.InputHTMLAttributes<HTMLTextAreaElement> {
+  helpText?: string
+  label: string
+  name: string
+  registerOptions?: RegisterOptions
+}

packages/design-system/lib/components/Form/TextArea/textarea.module.css

@@ -0,0 +1,72 @@
+.helpText {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--Spacing-x-half);
+}
+
+.error {
+  align-items: center;
+  color: var(--Scandic-Red-60);
+  display: flex;
+  gap: var(--Spacing-x-half);
+  margin: var(--Spacing-x1) 0 0;
+}
+
+.container {
+  background-color: var(--Main-Grey-White);
+  border-color: var(--Scandic-Beige-40);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--Corner-radius-md);
+  display: grid;
+  min-width: 0; /* allow shrinkage */
+  grid-template-rows: auto 1fr;
+  height: 138px;
+  padding: var(--Spacing-x3) var(--Spacing-x2) 0 var(--Spacing-x2);
+  transition: border-color 200ms ease;
+}
+
+.container:has(.textarea:active, .textarea:focus) {
+  border-color: var(--Scandic-Blue-90);
+}
+
+.container:has(.textarea:disabled) {
+  background-color: var(--Main-Grey-10);
+  border: none;
+  color: var(--Main-Grey-40);
+}
+
+.container:has(.textarea[data-invalid='true'], .textarea[aria-invalid='true']) {
+  border-color: var(--Scandic-Red-60);
+}
+
+.textarea {
+  background: none;
+  border: none;
+  color: var(--Main-Grey-100);
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  order: 2;
+  overflow: visible;
+  padding: 0;
+  resize: none;
+}
+
+.textarea:not(:active, :focus):placeholder-shown {
+  height: 88px;
+  transition: height 150ms ease;
+}
+
+.textarea:focus,
+.textarea:focus:placeholder-shown,
+.textarea:active,
+.textarea:active:placeholder-shown {
+  height: 94px;
+  transition: height 150ms ease;
+  outline: none;
+}
+
+.textarea:disabled {
+  color: var(--Main-Grey-40);
+}

packages/design-system/package.json

@@ -32,6 +32,7 @@
     "./Form/ErrorMessage": "./lib/components/Form/ErrorMessage/index.tsx",
     "./Form/Phone": "./lib/components/Form/Phone/index.tsx",
     "./Form/RadioCard": "./lib/components/Form/RadioCard/index.tsx",
+    "./Form/TextArea": "./lib/components/Form/TextArea/index.tsx",
     "./HotelInfoCard": "./lib/components/HotelInfoCard/index.tsx",
     "./HotelCard": "./lib/components/HotelCard/index.tsx",
     "./HotelCard/HotelCardDialogImage": "./lib/components/HotelCard/HotelCardDialogImage/index.tsx",