@indico-data/design-system 2.9.0 → 2.11.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/components/index.ts

@@ -6,3 +6,5 @@ export { Input } from './forms/input';
 export { Radio } from './forms/radio';
 export { Checkbox } from './forms/checkbox';
 export { Toggle } from './forms/toggle';
+export { Textarea } from './forms/textarea';
+export { PasswordInput } from './forms/passwordInput';

package/src/index.ts

@@ -65,3 +65,5 @@ export { Input } from './components/forms/input';
 export { Radio as RadioInput } from './components/forms/radio';
 export { Checkbox } from './components/forms/checkbox';
 export { Toggle as ToggleInput } from './components/forms/toggle';
+export { Textarea } from './components/forms/textarea';
+export { PasswordInput } from './components/forms/passwordInput';

package/src/styles/index.scss

@@ -10,6 +10,8 @@
 @import '../components/forms/radio/styles/Radio.scss';
 @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();
-  });
-});