@indico-data/design-system 2.10.0 → 2.11.0

package/src/components/forms/textarea/Textarea.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 import { Label } from '../subcomponents/Label';
-import { ErrorList } from '../subcomponents/ErrorList';
+import { DisplayFormError } from '../subcomponents/DisplayFormError';
 
 export interface TextareaProps {
   ref?: React.LegacyRef<HTMLTextAreaElement>;
   label: string;
   name: string;
   placeholder: string;
-  value: string;
+  value?: string | undefined;
   onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
   isRequired?: boolean;
   isDisabled?: boolean;
-  errorList?: string[];
+  errorMessage?: string | undefined;
   helpText?: string;
   hasHiddenLabel?: boolean;
   rows?: number;
@@ -21,65 +21,67 @@ export interface TextareaProps {
   form?: string;
   maxLength?: number;
   autofocus?: boolean;
+  defaultValue?: string;
 }
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
+      label,
+      name,
+      placeholder,
+      value,
+      onChange,
+      isRequired,
+      isDisabled,
+      errorMessage,
+      helpText,
+      hasHiddenLabel,
+      rows,
+      cols,
+      readonly,
+      wrap,
+      form,
+      maxLength,
+      autofocus,
+      ...rest
+    },
+    ref,
+  ) => {
+    const hasErrors = errorMessage && errorMessage.length > 0;
 
-export const Textarea = ({
-  ref,
-  label,
-  name,
-  placeholder,
-  value,
-  onChange,
-  isRequired,
-  isDisabled,
-  errorList,
-  helpText,
-  hasHiddenLabel,
-  rows,
-  cols,
-  readonly,
-  wrap,
-  form,
-  maxLength,
-  autofocus,
-  ...rest
-}: TextareaProps) => {
-  const hasErrors = errorList && errorList.length > 0;
-
-  return (
-    <div className="form-control">
-      <Label label={label} name={name} isRequired={isRequired} hasHiddenLabel={hasHiddenLabel} />
-      <div className="textarea-wrapper">
-        <textarea
-          ref={ref}
-          rows={rows}
-          cols={cols}
-          autoFocus={autofocus}
-          wrap={wrap}
-          form={form}
-          value={value}
-          maxLength={maxLength}
-          readOnly={readonly}
-          data-testid={`form-textarea-${name}`}
-          name={name}
-          disabled={isDisabled}
-          required={isRequired}
-          placeholder={placeholder}
-          onChange={onChange}
-          className={`textarea ${hasErrors ? 'error' : ''}`}
-          aria-invalid={hasErrors}
-          aria-describedby={hasErrors || helpText ? `${name}-helper` : undefined}
-          aria-required={isRequired}
-          aria-label={label}
-          {...rest}
-        />
-      </div>
-      {hasErrors && <ErrorList errorList={errorList} name={name} />}
-      {helpText && (
-        <div data-testid={`${name}-help-text`} className="help-text" id={`${name}-helper`}>
-          {helpText}
+    return (
+      <div className="form-control">
+        <Label label={label} name={name} isRequired={isRequired} hasHiddenLabel={hasHiddenLabel} />
+        <div className="textarea-wrapper">
+          <textarea
+            ref={ref}
+            rows={rows}
+            cols={cols}
+            autoFocus={autofocus}
+            wrap={wrap}
+            form={form}
+            maxLength={maxLength}
+            readOnly={readonly}
+            data-testid={`form-textarea-${name}`}
+            name={name}
+            disabled={isDisabled}
+            placeholder={placeholder}
+            onChange={onChange}
+            className={`textarea ${hasErrors ? 'error' : ''}`}
+            aria-invalid={hasErrors ? true : undefined}
+            aria-describedby={hasErrors || helpText ? `${name}-helper` : undefined}
+            aria-required={isRequired}
+            aria-label={label}
+            {...rest}
+          />
         </div>
-      )}
-    </div>
-  );
-};
+        {hasErrors && <DisplayFormError message={errorMessage} />}
+        {helpText && (
+          <div data-testid={`${name}-help-text`} className="help-text" id={`${name}-helper`}>
+            {helpText}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/forms/textarea/__tests__/Textarea.test.tsx

@@ -25,7 +25,7 @@ describe('Textarea', () => {
     render(
       <Textarea
         isRequired={true}
-        errorList={['You require a username value.']}
+        errorMessage="You require a username value."
         label="Enter your name"
         helpText="In order to submit the form, this field is required."
         name="name"

package/src/components/forms/textarea/styles/Textarea.scss

@@ -71,7 +71,7 @@
 }
 
 .form-control {
-  .error-list {
+  .form-errors {
     list-style: none;
     padding: 0;
     margin: 0;

package/src/components/forms/toggle/Toggle.tsx

@@ -9,43 +9,36 @@ export interface ToggleProps {
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   isDisabled?: boolean;
   isChecked?: boolean;
+  defaultChecked?: boolean;
 }
 
-export const Toggle = ({
-  ref,
-  id,
-  label,
-  name,
-  value,
-  onChange,
-  isDisabled,
-  isChecked,
-  ...rest
-}: ToggleProps) => {
-  return (
-    <div className="form-control">
-      <div className="toggle-wrapper">
-        <input
-          data-testid={`form-toggle-input-${name}`}
-          className="toggle-input"
-          type="checkbox"
-          id={id}
-          checked={isChecked}
-          name={name}
-          value={value}
-          disabled={isDisabled}
-          ref={ref}
-          onChange={onChange}
-          tabIndex={0}
-          aria-describedby={id}
-          aria-label={label}
-          {...rest}
-        />
-        <label htmlFor={id} className="switch"></label>
-        <label className={'toggle-label'} htmlFor={id}>
-          {label}
-        </label>
+export const Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(
+  ({ id, label, name, value, onChange, isDisabled, isChecked, ...rest }, ref) => {
+    return (
+      <div className="form-control">
+        <div className="toggle-wrapper">
+          <input
+            data-testid={`form-toggle-input-${name}`}
+            className="toggle-input"
+            type="checkbox"
+            id={id}
+            checked={isChecked}
+            name={name}
+            value={value}
+            disabled={isDisabled}
+            ref={ref}
+            onChange={onChange}
+            tabIndex={0}
+            aria-describedby={id}
+            aria-label={label}
+            {...rest}
+          />
+          <label htmlFor={id} className="switch"></label>
+          <label className={'toggle-label'} htmlFor={id}>
+            {label}
+          </label>
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  },
+);

package/src/styles/index.scss

@@ -11,6 +11,7 @@
 @import '../components/forms/checkbox/styles/Checkbox.scss';
 @import '../components/forms/textarea/styles/Textarea.scss';
 @import '../components/forms/passwordInput/styles/PasswordInput.scss';
+@import '../components/forms/form/styles/Form.scss';
 
 @import '../components/forms/toggle/styles/Toggle.scss';
 @import 'typography';

package/lib/src/components/forms/subcomponents/ErrorList.d.ts

@@ -1,6 +0,0 @@
-interface ErrorListProps {
-    name: string;
-    errorList: string[];
-}
-export declare const ErrorList: ({ errorList, name }: ErrorListProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/components/forms/subcomponents/ErrorList.tsx

@@ -1,14 +0,0 @@
-interface ErrorListProps {
-  name: string;
-  errorList: string[];
-}
-
-export const ErrorList = ({ errorList, name }: ErrorListProps) => {
-  return (
-    <ul className="error-list" id={`${name}-helper`}>
-      {(errorList ?? []).map((error, index) => (
-        <li key={index}>{error}</li>
-      ))}
-    </ul>
-  );
-};

package/src/components/forms/subcomponents/__tests__/ErrorList.test.tsx

@@ -1,16 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ErrorList } from '@/components/forms/subcomponents/ErrorList';
-
-describe('ErrorList', () => {
-  it('renders the error list', () => {
-    render(<ErrorList name="name" errorList={['error1', 'error2']} />);
-    expect(screen.getByText('error1')).toBeInTheDocument();
-    expect(screen.getByText('error2')).toBeInTheDocument();
-  });
-
-  it('does not render the error list when it is empty', () => {
-    render(<ErrorList name="name" errorList={[]} />);
-    expect(screen.queryByText('error1')).not.toBeInTheDocument();
-    expect(screen.queryByText('error2')).not.toBeInTheDocument();
-  });
-});