@indico-data/design-system 2.10.0 → 2.12.0

package/src/components/forms/select/styles/Select.scss

@@ -0,0 +1,120 @@
+// Common Variables
+:root,
+:root [data-theme='light'] {
+  --pf-select-background-color: var(--pf-white-color);
+  --pf-select-border-color: var(--pf-gray-color);
+  --pf-select-text-color: var(--pf-gray-color);
+  --pf-select-indicator-color: var(--pf-gray-color);
+  --pf-select-placeholder-text-color: var(--pf-gray-color);
+  --pf-select-hover-color: var(--pf-gray-color);
+  --pf-select-option-selected-color: var(--pf-primary-color-200);
+  --pf-select-option-text-color: var(--pf-gray-color);
+  --pf-select-option-hover-color: var(--pf-primary-color-100);
+
+  // Disabled
+  --pf-select-disabled-background-color: var(--pf-gray-color-100);
+  --pf-select-disabled-color: var(--pf-gray-color-400);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'] {
+  --pf-select-background-color: var(--pf-primary-color);
+  --pf-select-border-color: var(--pf-gray-color-100);
+  --pf-select-text-color: var(--pf-gray-color-100);
+  --pf-select-indicator-color: var(--pf-gray-color-100);
+  --pf-select-placeholder-text-color: var(--pf-gray-color-100);
+  --pf-select-hover-color: var(--pf-gray-color-100);
+  --pf-select-option-selected-color: var(--pf-primary-color-200);
+  --pf-select-option-text-color: var(--pf-gray-color-100);
+  --pf-select-option-hover-color: var(--pf-primary-color-300);
+
+  // Disabled
+  --pf-select-disabled-background-color: var(--pf-primary-color-200);
+  --pf-select-disabled-color: var(--pf-gray-color-400);
+}
+
+.select-wrapper {
+  .select__ {
+    &control {
+      background-color: var(--pf-select-background-color);
+      border: 1px solid var(--pf-select-border-color);
+      color: var(--pf-select-text-color);
+      box-shadow: none;
+
+      &:hover,
+      &:focus,
+      &--is-focused {
+        border: 1px solid var(--pf-select-hover-color);
+      }
+
+      &--is-disabled {
+        background-color: var(--pf-select-disabled-background-color);
+        color: var(--pf-select-disabled-color);
+      }
+    }
+
+    &placeholder {
+      color: var(--pf-select-placeholder-text-color);
+    }
+
+    &value-container {
+      cursor: text;
+    }
+
+    &input-container {
+      color: var(--pf-select-text-color);
+    }
+
+    &menu {
+      border: 1px solid var(--pf-select-border-color);
+      box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4);
+      margin: 4px 0px;
+      background-color: var(--pf-select-background-color);
+    }
+
+    &menu-notice {
+      color: var(--pf-select-text-color);
+    }
+
+    &indicator-separator {
+      background-color: var(--pf-select-indicator-color);
+    }
+
+    &indicator {
+      cursor: pointer;
+      color: var(--pf-select-indicator-color);
+
+      &:hover,
+      &:focus {
+        color: var(--pf-select-hover-color);
+      }
+    }
+
+    &items {
+      display: flex;
+      align-items: center;
+    }
+
+    &item-detail {
+      margin-left: auto;
+    }
+
+    &option {
+      cursor: pointer;
+      overflow-wrap: break-word;
+      color: var(--pf-select-option-text-color);
+      &--is-focused,
+      &:active {
+        background: var(--pf-select-option-hover-color);
+      }
+
+      &--is-selected {
+        background: var(--pf-select-option-selected-color);
+      }
+    }
+
+    &single-value {
+      color: var(--pf-select-option-text-color);
+    }
+  }
+}

package/src/components/forms/select/types.ts

@@ -0,0 +1,6 @@
+export type SelectOption = {
+  label: string;
+  value: string;
+  detail?: string;
+  [key: string]: any; // Allow for additional properties
+};

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

@@ -0,0 +1,7 @@
+interface DisplayFormErrorProps {
+  message: string | undefined;
+}
+
+export const DisplayFormError = ({ message }: DisplayFormErrorProps) => {
+  return <p className="form-errors">{message}</p>;
+};

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

@@ -83,7 +83,7 @@ const meta: Meta = {
       },
       defaultValue: { summary: 'false' },
     },
-    errorList: {
+    errorMessage: {
       control: false,
       description: 'An array of error messages',
       table: {
@@ -214,8 +214,7 @@ export const Default: Story = {
     placeholder: 'Please enter a value',
     hasHiddenLabel: false,
     isDisabled: false,
-    errorList: [],
-    value: '',
+    errorMessage: '',
     readonly: false,
     cols: 0,
     rows: 0,
@@ -228,10 +227,10 @@ export const Default: Story = {
     const [value, setValue] = useState(args.value);
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
-    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       setValue(e.target.value);
     };
 
@@ -247,17 +246,16 @@ export const Errors: Story = {
     placeholder: 'Please enter a value',
     hasHiddenLabel: false,
     isDisabled: false,
-    errorList: ['This Is An Error', 'This Is Another Error'],
-    value: '',
+    errorMessage: 'This Is An Error',
   },
   render: (args) => {
     const [value, setValue] = useState(args.value);
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
-    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       setValue(e.target.value);
     };
 
@@ -273,16 +271,15 @@ export const HiddenLabel: Story = {
     placeholder: 'Please enter a value',
     hasHiddenLabel: true,
     isDisabled: false,
-    value: '',
   },
   render: (args) => {
     const [value, setValue] = useState(args.value);
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
-    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       setValue(e.target.value);
     };
 
@@ -297,16 +294,15 @@ export const HelpText: Story = {
     name: 'textarea',
     placeholder: 'Please enter a value',
     isDisabled: false,
-    value: '',
   },
   render: (args) => {
     const [value, setValue] = useState(args.value);
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
-    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       setValue(e.target.value);
     };
 
@@ -321,16 +317,15 @@ export const Disabled: Story = {
     name: 'textarea',
     placeholder: 'Please enter a value',
     isDisabled: true,
-    value: '',
   },
   render: (args) => {
     const [value, setValue] = useState(args.value);
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
-    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       setValue(e.target.value);
     };
 
@@ -344,17 +339,16 @@ export const Readonly: Story = {
     label: 'Label Name',
     name: 'textarea',
     placeholder: 'Please enter a value',
-    value: '',
     readonly: true,
   },
   render: (args) => {
     const [value, setValue] = useState(args.value);
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
-    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       setValue(e.target.value);
     };
 

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/components/index.ts

@@ -8,3 +8,5 @@ export { Checkbox } from './forms/checkbox';
 export { Toggle } from './forms/toggle';
 export { Textarea } from './forms/textarea';
 export { PasswordInput } from './forms/passwordInput';
+export { Select } from './forms/select';
+export { Form } from './forms/form';

package/src/index.ts

@@ -67,3 +67,5 @@ 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';
+export { Select as SelectInput } from './components/forms/select';
+export { Form } from './components/forms/form';

package/src/styles/index.scss

@@ -11,8 +11,10 @@
 @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/select/styles/Select.scss';
 @import '../components/forms/toggle/styles/Toggle.scss';
+
 @import 'typography';
 @import 'colors';
 @import 'borders';

package/src/types.ts

@@ -13,3 +13,6 @@ export type { IconName };
 
 import { IconSizes } from './components/icons/types';
 export type { IconSizes };
+
+import { SelectOption } from './components/forms/select/types';
+export type { SelectOption };

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();
-  });
-});