@indico-data/design-system 3.18.0 → 3.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "3.18.0",
+  "version": "3.19.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/button/Button.tsx

@@ -79,35 +79,21 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
     >
       {/* Loading Icon on the left (default) */}
       {isLoading && !iconRight && (
-        <Icon
-          name="indico-o"
-          style={{ animation: 'spin 1s linear infinite' }}
-          ariaLabel="Loading..."
-          size={iconSize}
-        />
+        <Icon name="indico-o" style={{ animation: 'spin 1s linear infinite' }} size={iconSize} />
       )}
 
       {/* Left Icon */}
-      {iconLeft && !isLoading && (
-        <Icon name={iconLeft} ariaLabel={`${iconLeft} Icon`} size={iconSize} />
-      )}
+      {iconLeft && !isLoading && <Icon name={iconLeft} ariaLabel={iconLeft} size={iconSize} />}
 
       {/* Button children */}
       {children}
 
       {/* Right Icon */}
-      {iconRight && !isLoading && (
-        <Icon name={iconRight} ariaLabel={`${iconRight} Icon`} size={iconSize} />
-      )}
+      {iconRight && !isLoading && <Icon name={iconRight} ariaLabel={iconRight} size={iconSize} />}
 
       {/* Loading Icon on the right */}
       {isLoading && iconRight && (
-        <Icon
-          name="indico-o"
-          style={{ animation: 'spin 1s linear infinite' }}
-          ariaLabel="Loading..."
-          size={iconSize}
-        />
+        <Icon name="indico-o" style={{ animation: 'spin 1s linear infinite' }} size={iconSize} />
       )}
     </button>
   );

package/src/components/button/__tests__/Button.test.tsx

@@ -52,11 +52,10 @@ describe('Button', () => {
         </Button>,
       );
       const button = screen.getByRole('button');
-      const loadingIcon = screen.getByLabelText('Loading...');
 
       expect(button).toHaveClass('btn--loading');
       expect(button).toBeDisabled();
-      expect(loadingIcon).toBeInTheDocument();
+      expect(button).toHaveAttribute('aria-busy', 'true');
     });
 
     it('displays the loading icon on the left when isLoading and iconLeft exists and hides the iconLeft', () => {
@@ -65,9 +64,10 @@ describe('Button', () => {
           Button
         </Button>,
       );
-      const loadingIcon = screen.getByLabelText('Loading...');
-      const iconLeft = screen.queryByLabelText('check Icon');
+      const button = screen.getByRole('button');
+      const iconLeft = screen.queryByLabelText('check');
 
+      expect(button).toHaveAttribute('aria-busy', 'true');
       expect(iconLeft).not.toBeInTheDocument();
     });
 
@@ -77,19 +77,22 @@ describe('Button', () => {
           Button
         </Button>,
       );
-      const loadingIcon = screen.getByLabelText('Loading...');
-      const iconRight = screen.queryByLabelText('check Icon');
+      const button = screen.getByRole('button');
+      const iconRight = screen.queryByLabelText('check');
 
+      expect(button).toHaveAttribute('aria-busy', 'true');
       expect(iconRight).not.toBeInTheDocument();
     });
 
-    it('does not apply a margin to the loading icon when no children are present', () => {
-      render(<Button isLoading iconLeft="check" onClick={onClick} ariaLabel="btn" />);
-      const loadingIcon = screen.getByLabelText('Loading...');
-      expect(loadingIcon).toBeInTheDocument();
+    it('sets aria-busy when loading with no children', () => {
+      const { rerender } = render(
+        <Button isLoading iconLeft="check" onClick={onClick} ariaLabel="btn" />,
+      );
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-busy', 'true');
 
-      render(<Button isLoading iconRight="check" onClick={onClick} ariaLabel="btn" />);
-      expect(loadingIcon).toBeInTheDocument();
+      rerender(<Button isLoading iconRight="check" onClick={onClick} ariaLabel="btn" />);
+      expect(button).toHaveAttribute('aria-busy', 'true');
     });
 
     it('does not apply the loading class when not loading', () => {
@@ -99,11 +102,10 @@ describe('Button', () => {
         </Button>,
       );
       const button = screen.getByRole('button');
-      const loadingIcon = screen.queryByLabelText('Loading...');
 
       expect(button).not.toHaveClass('btn--loading');
       expect(button).toBeEnabled();
-      expect(loadingIcon).not.toBeInTheDocument();
+      expect(button).toHaveAttribute('aria-busy', 'false');
     });
 
     it('disables the button when disabled prop is true', () => {
@@ -123,7 +125,7 @@ describe('Button', () => {
   describe('button with icons', () => {
     it('renders an icon-only button when only iconLeft is provided', () => {
       render(<Button iconLeft="check" ariaLabel="icon button" />);
-      const icon = screen.getByLabelText('check Icon');
+      const icon = screen.getByLabelText('check');
       const button = screen.getByRole('button');
 
       expect(icon).toBeInTheDocument();
@@ -133,7 +135,7 @@ describe('Button', () => {
 
     it('renders an icon-only button when only iconRight is provided', () => {
       render(<Button iconRight="check" ariaLabel="icon button" />);
-      const icon = screen.getByLabelText('check Icon');
+      const icon = screen.getByLabelText('check');
       const button = screen.getByRole('button');
 
       expect(icon).toBeInTheDocument();
@@ -147,7 +149,7 @@ describe('Button', () => {
           Button
         </Button>,
       );
-      const icon = screen.getByLabelText('check Icon');
+      const icon = screen.getByLabelText('check');
       const button = screen.getByRole('button');
 
       expect(button).toContainElement(icon);
@@ -159,7 +161,7 @@ describe('Button', () => {
           Button
         </Button>,
       );
-      const icon = screen.getByLabelText('check Icon');
+      const icon = screen.getByLabelText('check');
       const button = screen.getByRole('button');
 
       expect(button).toContainElement(icon);
@@ -171,8 +173,8 @@ describe('Button', () => {
           Button
         </Button>,
       );
-      const leftIcon = screen.getByLabelText('check Icon');
-      const rightIcon = screen.getByLabelText('time Icon');
+      const leftIcon = screen.getByLabelText('check');
+      const rightIcon = screen.getByLabelText('time');
       const button = screen.getByRole('button');
 
       expect(button).toContainElement(leftIcon);
@@ -187,7 +189,7 @@ describe('Button', () => {
           Button
         </Button>,
       );
-      const icon = screen.getByLabelText('check Icon');
+      const icon = screen.getByLabelText('check');
       expect(icon).toHaveClass('icon--xs');
     });
 
@@ -197,7 +199,7 @@ describe('Button', () => {
           Button
         </Button>,
       );
-      const icon = screen.getByLabelText('check Icon');
+      const icon = screen.getByLabelText('check');
       expect(icon).toHaveClass('icon--sm');
     });
 
@@ -207,7 +209,7 @@ describe('Button', () => {
           Button
         </Button>,
       );
-      const icon = screen.getByLabelText('check Icon');
+      const icon = screen.getByLabelText('check');
       expect(icon).toHaveClass('icon--md');
     });
 
@@ -217,7 +219,7 @@ describe('Button', () => {
           Button
         </Button>,
       );
-      const icon = screen.getByLabelText('check Icon');
+      const icon = screen.getByLabelText('check');
       expect(icon).toHaveClass('icon--md');
     });
 
@@ -227,18 +229,18 @@ describe('Button', () => {
           Button
         </Button>,
       );
-      const icon = screen.getByLabelText('check Icon');
+      const icon = screen.getByLabelText('check');
       expect(icon).toHaveClass('icon--lg');
     });
 
-    it('applies correct icon size to loading icon based on button size', () => {
+    it('sets aria-busy when loading regardless of button size', () => {
       render(
         <Button size="sm" isLoading ariaLabel="loading button">
           Button
         </Button>,
       );
-      const loadingIcon = screen.getByLabelText('Loading...');
-      expect(loadingIcon).toHaveClass('icon--sm');
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-busy', 'true');
     });
   });
 });

package/src/components/forms/date/datePicker/DatePicker.stories.tsx

@@ -240,6 +240,16 @@ const meta: Meta = {
         },
       },
     },
+    text: {
+      control: 'object',
+      description: 'Customizable text.',
+      table: {
+        category: 'i18n Text',
+        type: {
+          summary: '{ selectTime?: string }',
+        },
+      },
+    },
   },
 };
 

package/src/components/forms/date/datePicker/DatePicker.tsx

@@ -1,11 +1,15 @@
 import { DateRange, DayPicker, Mode, OnSelectHandler } from 'react-day-picker';
 import 'react-day-picker/style.css';
-import { DatePickerProps } from './types';
+import { DatePickerProps, DatePickerText } from './types';
 import { getCommonProps } from './contants';
 import { TimePicker } from '../../timePicker/TimePicker';
 import { Col, Row } from '../../../grid';
 import { useEffect, useRef } from 'react';
 
+const DEFAULT_TEXT: Required<DatePickerText> = {
+  selectTime: 'Select Time',
+};
+
 export const DatePicker = (props: DatePickerProps) => {
   const {
     mode = 'single',
@@ -39,9 +43,12 @@ export const DatePicker = (props: DatePickerProps) => {
     ref,
     timeTabIndex,
     dateTabIndex,
+    text: textProp,
     ...rest
   } = props;
 
+  const text = { ...DEFAULT_TEXT, ...textProp };
+
   const futureDateByYear = (year: number) => new Date(new Date().getFullYear() + year, 11, 31);
   const endMonthDefault = endMonth ?? futureDateByYear(5);
 
@@ -116,7 +123,7 @@ export const DatePicker = (props: DatePickerProps) => {
         <div className="time-picker-wrapper">
           <Row align="center">
             <Col xs="content">
-              <p className="ma-0">Select Time</p>
+              <p className="ma-0">{text.selectTime}</p>
             </Col>
             <Col>
               <TimePicker

package/src/components/forms/date/datePicker/types.ts

@@ -9,6 +9,12 @@ import {
   OnSelectHandler,
 } from 'react-day-picker';
 
+/** Customizable text for DatePicker. */
+export interface DatePickerText {
+  /** Label for "Select Time" text. Default: "Select Time" */
+  selectTime?: string;
+}
+
 export interface DatePickerProps {
   ref?: React.LegacyRef<HTMLInputElement>;
   /** The selected day(s). */
@@ -51,6 +57,8 @@ export interface DatePickerProps {
   isReadOnly?: boolean;
   timeTabIndex?: number;
   dateTabIndex?: number;
+  /** Customizable display text. */
+  text?: DatePickerText;
 }
 
 export interface CommonProps {

package/src/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.stories.tsx

@@ -175,6 +175,16 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
       },
       action: 'onSelect',
     },
+    text: {
+      control: 'object',
+      description: 'Customizable text.',
+      table: {
+        category: 'i18n Text',
+        type: {
+          summary: '{ triggerIcon?: string }',
+        },
+      },
+    },
   },
 };
 

package/src/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.tsx

@@ -6,6 +6,12 @@ import { DatePicker } from '../datePicker/DatePicker';
 import { Icon } from '../../../icons/Icon';
 import { UseFloatingOptions } from '@floating-ui/react-dom';
 import { PortalOptions } from '../datePicker/types';
+import { IconTriggerDatePickerText } from './types';
+
+const DEFAULT_TEXT: Required<IconTriggerDatePickerText> = {
+  triggerIcon: 'Open date picker',
+};
+
 interface Props {
   /** Allows you to select a single day, a range of days, or multiple days. */
   mode?: Mode;
@@ -42,6 +48,8 @@ interface Props {
   isPortal?: boolean;
   /** The floating options for the date picker. Follows floating-ui options. */
   floatingOptions?: UseFloatingOptions;
+  /** Customizable display text. */
+  text?: IconTriggerDatePickerText;
 }
 
 export const IconTriggerDatePicker = (props: Props) => {
@@ -64,9 +72,12 @@ export const IconTriggerDatePicker = (props: Props) => {
     portalOptions,
     floatingOptions,
     isPortal,
+    text: textProp,
     ...rest
   } = props;
 
+  const text = { ...DEFAULT_TEXT, ...textProp };
+
   const [localMonth, setLocalMonth] = useState<Date>(initialMonth ?? new Date());
 
   const handleSelect: OnSelectHandler<Date> = (date) => {
@@ -93,7 +104,7 @@ export const IconTriggerDatePicker = (props: Props) => {
       floatingOptions={floatingOptions}
     >
       <Icon
-        aria-label="Open date picker"
+        aria-label={text.triggerIcon}
         name={triggerIcon}
         size={triggerIconSize}
         className="date__picker__trigger"

package/src/components/forms/date/iconTriggerDatePicker/types.ts

@@ -0,0 +1,5 @@
+/** Customizable text for IconTriggerDatePicker. */
+export interface IconTriggerDatePickerText {
+  /** Aria label for the trigger icon. Default: "Open date picker" */
+  triggerIcon?: string;
+}

package/src/components/forms/date/inputDatePicker/SingleInputDatePicker.tsx

@@ -16,7 +16,8 @@ export interface SingleInputDatePickerProps {
   /** The layout of the caption. Enables you to add or remove the dropdown navigation for months/years */
   captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
   id?: string;
-  label?: string;
+  /** The label for the input field. */
+  label: string;
   onSelect: (selected: Date | undefined) => void;
   initialMonth?: Date;
   selected?: Date;
@@ -131,9 +132,9 @@ export function SingleInputDatePicker(props: SingleInputDatePickerProps) {
         isClearable={isClearable}
         onChange={handleInputChange}
         errorMessage={errorMessage}
-        label={'Single Date Picker'}
+        label={label}
         tabIndex={tabIndex}
-        name={'Date Picker'}
+        name={label}
         ref={ref}
         readonly={isReadOnly}
       />

package/src/components/forms/date/inputDatePicker/__tests__/SingleInputDatePicker.test.tsx

@@ -30,6 +30,7 @@ describe('SingleInputDatePicker', () => {
     render(
       <SingleInputDatePicker
         ariaLabel="Single Input Date Picker"
+        label="Date Picker"
         data-testid="datepicker-testid"
         captionLayout="label"
         onSelect={mockOnSelect}
@@ -70,6 +71,7 @@ describe('SingleInputDatePicker', () => {
     render(
       <SingleInputDatePicker
         ariaLabel="Single Input Date Picker"
+        label="Date Picker"
         captionLayout="label"
         data-testid="datepicker-testid"
         onSelect={mockOnSelect}

package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.stories.tsx

@@ -261,6 +261,16 @@ const meta: Meta<typeof InputDateRangePicker> = {
         disable: true,
       },
     },
+    text: {
+      control: 'object',
+      description: 'Customizable text.',
+      table: {
+        category: 'i18n Text',
+        type: {
+          summary: '{ fromDate?: string; toDate?: string }',
+        },
+      },
+    },
   },
 };
 

package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.tsx

@@ -10,6 +10,13 @@ import { formatDateAsString } from '../inputDatePicker/helpers';
 import { Button } from '../../../button';
 import { UseFloatingOptions } from '@floating-ui/react-dom';
 import { PortalOptions } from '../datePicker/types';
+import { InputDateRangePickerText } from './types';
+
+const DEFAULT_TEXT: Required<InputDateRangePickerText> = {
+  fromDate: 'From Date',
+  toDate: 'To Date',
+};
+
 interface InputDateRangePickerProps {
   /** A label for assistive technologies. */
   ariaLabel: string;
@@ -51,6 +58,8 @@ interface InputDateRangePickerProps {
   floatingOptions?: UseFloatingOptions;
   /** Whether the date picker is a portal. */
   isPortal?: boolean;
+  /** Customizable display text. */
+  text?: InputDateRangePickerText;
 }
 
 export function InputDateRangePicker(props: InputDateRangePickerProps) {
@@ -85,9 +94,12 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
     portalOptions,
     floatingOptions,
     isPortal,
+    text: textProp,
     ...rest
   } = props;
 
+  const text = { ...DEFAULT_TEXT, ...textProp };
+
   const inputId = useId();
 
   // Hold the input values in state
@@ -183,7 +195,7 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
             onChange={(e) => handleInputChange(e, 'from')}
             errorMessage={fromErrorMessage}
             label={fromLabel}
-            name={'From Date'}
+            name={text.fromDate}
             data-testid="date-picker-from"
             hasHiddenLabel={hasHiddenLabel}
             ref={ref}
@@ -201,7 +213,7 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
             onChange={(e) => handleInputChange(e, 'to')}
             errorMessage={toErrorMessage}
             label={toLabel}
-            name={'To Date'}
+            name={text.toDate}
             data-testid="date-picker-to"
             hasHiddenLabel={hasHiddenLabel}
             ref={ref}

package/src/components/forms/date/inputDateRangePicker/types.ts

@@ -0,0 +1,7 @@
+/** Customizable text for InputDateRangePicker. */
+export interface InputDateRangePickerText {
+  /** Label for the "from" date input. Default: "From Date" */
+  fromDate?: string;
+  /** Label for the "to" date input. Default: "To Date" */
+  toDate?: string;
+}

package/src/components/forms/date/inputDateTimePicker/SingleInputDateTimePicker.tsx

@@ -18,7 +18,8 @@ export interface SingleInputDateTimePickerProps {
   isDisabled?: boolean;
   captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
   id?: string;
-  label?: string;
+  /** The label for the date input field. */
+  label: string;
   onSelect: (selected: Date | undefined) => void;
   initialMonth?: Date;
   selected?: Date;
@@ -153,7 +154,7 @@ export function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps)
             onChange={handleInputChange}
             errorMessage={errorMessage}
             hasHiddenLabel={hasHiddenLabel}
-            label={'Single Date Picker'}
+            label={label}
             name={`${id}-date-picker`}
             tabIndex={dateTabIndex}
           />

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

@@ -46,6 +46,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       onBlur,
       onKeyDown,
       className,
+      text: _text,
       ...rest
     },
     ref,

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

@@ -31,6 +31,7 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
       helpText,
       iconName,
       className,
+      text: _text,
       ...rest
     },
     ref,

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

@@ -32,6 +32,7 @@ const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
       errorMessage,
       helpText,
       hasShowPassword = true,
+      text: _text,
       ...rest
     },
     ref,
@@ -55,7 +56,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/select/Select.stories.tsx

@@ -87,15 +87,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,16 @@
 import React from 'react';
 import classNames from 'classnames';
 import ReactSelect, { Props as ReactSelectProps, components, OptionProps } from 'react-select';
-import { SelectOption } from './types';
+import { SelectOption, 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 +26,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>({
@@ -43,10 +52,12 @@ const Select = React.forwardRef(
       label,
       hasHiddenLabel,
       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 +70,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/types.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { FormLabelText } from '../subcomponents/Label';
 
 export type SelectOption = {
   label: string;
@@ -6,3 +7,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;
+}