@indico-data/design-system 3.18.0 → 3.20.0

package/src/components/forms/input/Input.stories.tsx

@@ -1,8 +1,11 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Input, InputProps } from './Input';
-import { SetStateAction, useEffect, useState } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type SetStateAction, useEffect, useState } from 'react';
+
 import { inputArgTypes, labelArgTypes } from '@/storybook/formArgTypes';
 
+import { Input, type InputProps } from './Input';
+
+
 const meta: Meta = {
   title: 'Forms/Input',
   component: Input,

package/src/components/forms/input/Input.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
 
 import { Icon } from '../../../components/icons/Icon';
-import { IconName } from '../../../components/icons/types';
-import { withLabel, LabelProps } from '../subcomponents/Label';
+import { type IconName } from '../../../components/icons/types';
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
+import { withLabel, type LabelProps } from '../subcomponents/Label';
 
 export interface BaseInputProps {
   id?: string;
@@ -46,6 +46,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       onBlur,
       onKeyDown,
       className,
+      text: _text,
       ...rest
     },
     ref,

package/src/components/forms/input/__tests__/Input.test.tsx

@@ -1,7 +1,9 @@
-import { render, screen, act } from '@testing-library/react';
-import { Input } from '@/components/forms/input/Input';
-import { ChangeEvent } from 'react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { type ChangeEvent } from 'react';
+
+import { Input } from '@/components/forms/input/Input';
+
 
 const handleOnChange = jest.fn();
 

package/src/components/forms/numberInput/NumberInput.stories.tsx

@@ -1,8 +1,11 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { NumberInput, NumberInputProps } from './NumberInput';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { useEffect, useState } from 'react';
+
 import { labelArgTypes, inputArgTypes } from '@/storybook/formArgTypes';
 
+import { NumberInput, type NumberInputProps } from './NumberInput';
+
+
 const meta: Meta = {
   title: 'Forms/Number Input',
   component: NumberInput,

package/src/components/forms/numberInput/NumberInput.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
 
 import { Icon } from '@/components/icons/Icon';
-import { LabelProps, withLabel } from '../subcomponents/Label';
+
+import { type BaseInputProps } from '../input/Input';
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
-import { BaseInputProps } from '../input/Input';
+import { type LabelProps, withLabel } from '../subcomponents/Label';
+
 
 export interface NumberInputProps extends Omit<BaseInputProps, 'value'>, LabelProps {
   /** The value for the input field */
@@ -31,6 +33,7 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
       helpText,
       iconName,
       className,
+      text: _text,
       ...rest
     },
     ref,

package/src/components/forms/numberInput/__tests__/NumberInput.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { NumberInput, NumberInputProps } from '../NumberInput';
+
+import { NumberInput, type NumberInputProps } from '../NumberInput';
 
 const handleOnChange = jest.fn();
 

package/src/components/forms/passwordInput/PasswordInput.stories.tsx

@@ -1,8 +1,11 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { PasswordInput, PasswordInputProps } from './PasswordInput';
-import { SetStateAction, useEffect, useState } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type SetStateAction, useEffect, useState } from 'react';
+
 import { baseInputArgTypes, labelArgTypes } from '@/storybook/formArgTypes';
 
+import { PasswordInput, type PasswordInputProps } from './PasswordInput';
+
+
 const meta: Meta = {
   title: 'Forms/PasswordInput',
   component: PasswordInput,

package/src/components/forms/passwordInput/PasswordInput.tsx

@@ -1,8 +1,11 @@
+import classNames from 'classnames';
 import React, { useState } from 'react';
+
 import { Icon } from '@/components/icons/Icon';
-import { withLabel, LabelProps } from '../subcomponents/Label';
+
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
-import classNames from 'classnames';
+import { withLabel, type LabelProps } from '../subcomponents/Label';
+
 
 export interface PasswordInputProps extends LabelProps {
   ref?: React.LegacyRef<HTMLInputElement>;
@@ -32,6 +35,7 @@ const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
       errorMessage,
       helpText,
       hasShowPassword = true,
+      text: _text,
       ...rest
     },
     ref,
@@ -55,7 +59,12 @@ const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
     return (
       <>
         <div className="password-input-wrapper">
-          <Icon name="lock" data-testid={`${name}-embedded-icon`} className="embedded-icon" size="sm" />
+          <Icon
+            name="lock"
+            data-testid={`${name}-embedded-icon`}
+            className="embedded-icon"
+            size="sm"
+          />
           <input
             ref={ref}
             data-testid={`form-password-input-${name}`}

package/src/components/forms/passwordInput/__tests__/PasswordInput.test.tsx

@@ -1,10 +1,9 @@
-import { render, screen, act } from '@testing-library/react';
-import { PasswordInput } from '@/components/forms/passwordInput/PasswordInput';
-import { ChangeEvent } from 'react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { PasswordInput } from '@/components/forms/passwordInput/PasswordInput';
+
 const handleOnChange = jest.fn();
-const handleShowPassword = jest.fn();
 
 describe('Input', () => {
   it('renders the input field', () => {

package/src/components/forms/radio/Radio.stories.tsx

@@ -1,7 +1,10 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Radio } from './Radio';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { Col, Row } from '@/components/grid';
 
+import { Radio } from './Radio';
+
+
 const meta: Meta = {
   title: 'Forms/Radio',
   component: Radio,

package/src/components/forms/radio/__tests__/Radio.test.tsx

@@ -1,7 +1,8 @@
-import { render, screen, act } from '@testing-library/react';
-import { Radio } from '@/components/forms/radio/Radio';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { Radio } from '@/components/forms/radio/Radio';
+
 const handleOnChange = jest.fn();
 
 describe('radio', () => {

package/src/components/forms/select/Select.stories.tsx

@@ -1,7 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Select, SelectProps } from './Select';
-import { SelectOption } from './types';
-import { LabelProps } from '../subcomponents/Label';
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import { Select, type SelectProps } from './Select';
+import { type SelectOption } from './types';
+import { type LabelProps } from '../subcomponents/Label';
 
 const meta: Meta<SelectProps<SelectOption> & LabelProps> = {
   title: 'Forms/Select',
@@ -87,15 +88,16 @@ const meta: Meta<SelectProps<SelectOption> & LabelProps> = {
       },
       defaultValue: { summary: 'true' },
     },
-    placeholder: {
-      control: 'text',
+    text: {
+      control: 'object',
+      description: 'Customizable text.',
       table: {
-        category: 'Props',
+        category: 'i18n Text',
         type: {
-          summary: 'string',
+          summary:
+            '{ placeholder?: string; noOptions?: string; loading?: string; required?: string }',
         },
       },
-      defaultValue: { summary: 'Select an option...' },
     },
     className: {
       control: 'text',

package/src/components/forms/select/Select.tsx

@@ -1,9 +1,17 @@
-import React from 'react';
 import classNames from 'classnames';
-import ReactSelect, { Props as ReactSelectProps, components, OptionProps } from 'react-select';
-import { SelectOption } from './types';
+import React from 'react';
+import ReactSelect, { type Props as ReactSelectProps, components, type OptionProps } from 'react-select';
+
+import { type SelectOption, type SelectText } from './types';
 import { withLabel } from '../subcomponents/Label';
 
+const DEFAULT_TEXT: Required<SelectText> = {
+  placeholder: 'Select...',
+  noOptions: 'No options',
+  loading: 'Loading...',
+  required: '(required)',
+};
+
 export interface SelectProps<OptionType extends SelectOption> extends ReactSelectProps<OptionType> {
   /** Options for the select component */
   options: OptionType[];
@@ -19,6 +27,8 @@ export interface SelectProps<OptionType extends SelectOption> extends ReactSelec
   classNamePrefix?: string;
   /** Event handler for when the selected value changes */
   onChange?: (newValue: any, actionMeta: any) => void;
+  /** Customizable display text. */
+  text?: SelectText;
 }
 
 const OptionComponent = <OptionType extends SelectOption>({
@@ -40,13 +50,15 @@ const Select = React.forwardRef(
       classNamePrefix = 'select',
       className,
       components: customComponents,
-      label,
-      hasHiddenLabel,
-      name,
+      label: _label,
+      hasHiddenLabel: _hasHiddenLabel,
+      name: _name,
+      text: textProp,
       ...props
     }: SelectProps<OptionType>,
     ref: React.Ref<any>,
   ) => {
+    const text = { ...DEFAULT_TEXT, ...textProp };
     const defaultComponents = {
       Option: OptionComponent as React.ComponentType<OptionProps<OptionType>>,
     };
@@ -59,6 +71,9 @@ const Select = React.forwardRef(
         classNamePrefix={classNamePrefix}
         className={classNames('select-wrapper', className)}
         components={mergedComponents}
+        placeholder={text.placeholder}
+        noOptionsMessage={() => text.noOptions}
+        loadingMessage={() => text.loading}
         {...props}
       />
     );

package/src/components/forms/select/__tests__/Select.test.tsx

@@ -1,8 +1,8 @@
 import { render, screen, fireEvent } from '@testing-library/react';
+import { type OptionProps } from 'react-select';
 
 import { Select } from '../Select';
-import { SelectOption } from '../types';
-import { OptionProps, components } from 'react-select';
+import { type SelectOption } from '../types';
 
 const options: SelectOption[] = [
   { value: 'option1', label: 'Option 1' },

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

@@ -1,4 +1,6 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
+
+import { type FormLabelText } from '../subcomponents/Label';
 
 export type SelectOption = {
   label: string;
@@ -6,3 +8,13 @@ export type SelectOption = {
   detail?: ReactNode;
   [key: string]: any; // Allow for additional properties
 };
+
+/** Customizable text for Select. Extends FormLabelText for label-related text. */
+export interface SelectText extends FormLabelText {
+  /** Placeholder text when no option is selected. Default: "Select..." */
+  placeholder?: string;
+  /** Text when there are no options. Default: "No options" */
+  noOptions?: string;
+  /** Text while loading options. Default: "Loading..." */
+  loading?: string;
+}

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

@@ -1,10 +1,22 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
+
+import { type FormLabelText } from './types';
+
+import type React from 'react';
+
+export type { FormLabelText } from './types';
+
+const DEFAULT_TEXT: Required<FormLabelText> = {
+  required: '(required)',
+};
 
 export interface LabelProps {
   label?: string;
   name: string;
   isRequired?: boolean;
   hasHiddenLabel?: boolean;
+  /** Customizable display text. */
+  text?: FormLabelText;
 }
 
 export const Label = ({ label, name, isRequired }: LabelProps) => {
@@ -21,17 +33,25 @@ export const Label = ({ label, name, isRequired }: LabelProps) => {
 // HOC to add common label functionality to components
 export function withLabel<P extends object>(WrappedComponent: React.ComponentType<P>) {
   const WithLabelComponent = (
-    { label, hasHiddenLabel = false, name, isRequired, ...rest }: P & LabelProps,
+    { label, hasHiddenLabel = false, name, isRequired, text: textProp, ...rest }: P & LabelProps,
     ref: React.Ref<any>,
   ) => {
+    const text = { ...DEFAULT_TEXT, ...textProp };
     const ariaLabel = hasHiddenLabel
-      ? { 'aria-label': isRequired ? `${label} (required)` : label }
+      ? { 'aria-label': isRequired ? `${label} ${text.required}` : label }
       : {};
 
     return (
       <div className="form-control">
         {!hasHiddenLabel && <Label label={label} name={name} isRequired={isRequired} />}
-        <WrappedComponent {...(rest as P)} id={name} name={name} {...ariaLabel} ref={ref} />
+        <WrappedComponent
+          {...(rest as P)}
+          id={name}
+          name={name}
+          {...ariaLabel}
+          text={textProp}
+          ref={ref}
+        />
       </div>
     );
   };

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

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+
 import { Label, withLabel } from '@/components/forms/subcomponents/Label';
 
 // Mock component to wrap with HOC

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

@@ -0,0 +1,5 @@
+/** Customizable text for form Label. */
+export interface FormLabelText {
+  /** Text appended to aria-label for required fields. Default: "(required)" */
+  required?: string;
+}

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

@@ -1,8 +1,11 @@
+import { type Meta, type StoryObj } from '@storybook/react';
 import { useEffect, useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { labelArgTypes, inputArgTypes, baseInputArgTypes } from '@/storybook/formArgTypes';
+
+import { labelArgTypes, baseInputArgTypes } from '@/storybook/formArgTypes';
+
 import { Textarea } from './Textarea';
 
+
 const meta: Meta = {
   title: 'Forms/Textarea',
   component: Textarea,

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

@@ -1,8 +1,8 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
 
-import { withLabel, LabelProps } from '../subcomponents/Label';
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
+import { withLabel, type LabelProps } from '../subcomponents/Label';
 
 export interface TextareaProps extends LabelProps {
   ref?: React.LegacyRef<HTMLTextAreaElement>;
@@ -33,7 +33,7 @@ export interface TextareaProps extends LabelProps {
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   (
     {
-      label,
+      label: _label,
       name,
       placeholder,
       value,
@@ -43,7 +43,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       isDisabled,
       errorMessage,
       helpText,
-      hasHiddenLabel,
+      hasHiddenLabel: _hasHiddenLabel,
       rows,
       cols,
       readonly,
@@ -53,6 +53,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       autofocus,
       defaultValue,
       tabIndex,
+      text: _text,
       ...rest
     },
     ref,

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

@@ -1,8 +1,8 @@
-import { render, screen, act } from '@testing-library/react';
-import { Textarea } from '@/components/forms/textarea/Textarea';
-import { ChangeEvent } from 'react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { Textarea } from '@/components/forms/textarea/Textarea';
+
 const handleOnChange = jest.fn();
 
 describe('Textarea', () => {

package/src/components/forms/timePicker/TimePicker.stories.tsx

@@ -1,8 +1,10 @@
-import { TimePicker } from './TimePicker';
-import type { Meta, StoryObj } from '@storybook/react';
 import { useArgs } from '@storybook/preview-api';
+
+import { TimePicker } from './TimePicker';
 import { Col, Row } from '../../grid';
 
+import type { Meta, StoryObj } from '@storybook/react';
+
 const meta: Meta<typeof TimePicker> = {
   title: 'Forms/TimePicker',
   component: TimePicker,
@@ -44,6 +46,16 @@ const meta: Meta<typeof TimePicker> = {
       control: 'text',
       defaultValue: 'Time Picker',
     },
+    text: {
+      control: 'object',
+      description: 'Customizable text.',
+      table: {
+        category: 'i18n Text',
+        type: {
+          summary: '{ validationError?: string }',
+        },
+      },
+    },
   },
   decorators: [
     (Story: React.ComponentType) => (

package/src/components/forms/timePicker/TimePicker.tsx

@@ -1,8 +1,14 @@
-import { ChangeEvent, useState, FocusEvent } from 'react';
-import { Input } from '../input/Input';
-import { FloatUI } from '../../floatUI/FloatUI';
-import { formatTimeValue, validateInputValue } from './helpers';
 import { offset, flip, shift } from '@floating-ui/react';
+import { type ChangeEvent, useState, type FocusEvent } from 'react';
+
+import { formatTimeValue, validateInputValue } from './helpers';
+import { type TimePickerText } from './types';
+import { FloatUI } from '../../floatUI/FloatUI';
+import { Input } from '../input/Input';
+
+const DEFAULT_TEXT: Required<TimePickerText> = {
+  validationError: 'Time validation error',
+};
 
 interface TimePickerProps {
   ref?: React.LegacyRef<HTMLInputElement>;
@@ -20,6 +26,8 @@ interface TimePickerProps {
   isReadOnly?: boolean;
   isDisabled?: boolean;
   tabIndex?: number;
+  /** Customizable display text. */
+  text?: TimePickerText;
   [key: string]: unknown;
 }
 
@@ -34,8 +42,10 @@ export const TimePicker = ({
   isDisabled,
   isReadOnly,
   tabIndex,
+  text: textProp,
   ...rest
 }: TimePickerProps) => {
+  const text = { ...DEFAULT_TEXT, ...textProp };
   const [validationError, setValidationError] = useState('');
   const [inputValue, setInputValue] = useState(timeValue);
 
@@ -82,7 +92,7 @@ export const TimePicker = ({
       />
       {/* This is a temporary work around to address  a validation issue in cenote*/}
       <FloatUI
-        ariaLabel="Time validation error"
+        ariaLabel={text.validationError}
         isOpen={!!validationError}
         setIsOpen={() => {}} // Prevent click-to-open behavior
         isPortal

package/src/components/forms/timePicker/__tests__/TimePicker.test.tsx

@@ -1,7 +1,8 @@
 import { render, screen } from '@testing-library/react';
-import { TimePicker } from '@/components/forms/timePicker/TimePicker';
 import userEvent from '@testing-library/user-event';
 
+import { TimePicker } from '@/components/forms/timePicker/TimePicker';
+
 describe('TimePicker', () => {
   // TODO -- fix this when we decide on a validation strategy
 

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

@@ -0,0 +1,5 @@
+/** Customizable text for TimePicker. */
+export interface TimePickerText {
+  /** Aria label for the validation error tooltip. Default: "Time validation error" */
+  validationError?: string;
+}

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

@@ -1,7 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Toggle } from './Toggle';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
+import { Toggle } from './Toggle';
+
 const meta: Meta = {
   title: 'Forms/Toggle',
   component: Toggle,

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

@@ -1,7 +1,8 @@
-import { render, screen, act } from '@testing-library/react';
-import { Toggle } from '@/components/forms/toggle/Toggle';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { Toggle } from '@/components/forms/toggle/Toggle';
+
 const handleOnChange = jest.fn();
 
 describe('Toggle', () => {

package/src/components/grid/col/Col.stories.tsx

@@ -1,5 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { Container, Row } from 'react-grid-system';
+
 import { Col } from '@/components';
 
 const meta: Meta = {

package/src/components/grid/col/Col.tsx

@@ -1,4 +1,4 @@
-import { Col as RgsCol, ColProps } from 'react-grid-system';
+import { Col as RgsCol, type ColProps } from 'react-grid-system';
 
 export const Col = ({ ref: _ref, ...rest }: ColProps) => {
   return <RgsCol {...rest} />;

package/src/components/grid/container/Container.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { Container, Row, Col } from '@/components';
 
 const meta: Meta = {

package/src/components/grid/container/Container.tsx

@@ -1,4 +1,4 @@
-import { Container as RgsContainer, ContainerProps } from 'react-grid-system';
+import { Container as RgsContainer, type ContainerProps } from 'react-grid-system';
 
 export const Container = ({ ref: _ref, ...rest }: ContainerProps) => {
   return <RgsContainer {...rest} />;

package/src/components/grid/row/Row.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { Row, Col, Container } from '@/components';
 
 const meta: Meta = {

package/src/components/grid/row/Row.tsx

@@ -1,4 +1,4 @@
-import { Row as RgsRow, RowProps } from 'react-grid-system';
+import { Row as RgsRow, type RowProps } from 'react-grid-system';
 
 export const Row = ({ ref: _ref, ...rest }: RowProps) => {
   return <RgsRow {...rest} />;

package/src/components/icons/Icon.stories.tsx

@@ -1,11 +1,18 @@
-import React, { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { Icon, Row, Col, Button } from '@/components';
-import { IconName, IconProps, IconSizes } from './types';
 import { fas } from '@fortawesome/free-solid-svg-icons';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { Icon, Row, Col, Button } from '@/components';
 import { registerFontAwesomeIcons } from '@/index';
 import { fontAwesomeIconNames, iconNames, indiconIconNames } from '@/storybook/iconNames';
+
 import { indiconDefinitions } from './indicons';
+import { type IconName, type IconProps, type IconSizes } from './types';
+
+import type React from 'react';
+
+
+
 
 registerFontAwesomeIcons(...Object.values(fas), ...indiconDefinitions);