@indico-data/design-system 3.18.0 → 3.19.0

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

@@ -1,10 +1,19 @@
 import React, { forwardRef } from 'react';
+import { FormLabelText } from './types';
+
+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 +30,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/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.tsx

@@ -53,6 +53,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       autofocus,
       defaultValue,
       tabIndex,
+      text: _text,
       ...rest
     },
     ref,

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

@@ -44,6 +44,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

@@ -3,6 +3,11 @@ import { Input } from '../input/Input';
 import { FloatUI } from '../../floatUI/FloatUI';
 import { formatTimeValue, validateInputValue } from './helpers';
 import { offset, flip, shift } from '@floating-ui/react';
+import { TimePickerText } from './types';
+
+const DEFAULT_TEXT: Required<TimePickerText> = {
+  validationError: 'Time validation error',
+};
 
 interface TimePickerProps {
   ref?: React.LegacyRef<HTMLInputElement>;
@@ -20,6 +25,8 @@ interface TimePickerProps {
   isReadOnly?: boolean;
   isDisabled?: boolean;
   tabIndex?: number;
+  /** Customizable display text. */
+  text?: TimePickerText;
   [key: string]: unknown;
 }
 
@@ -34,8 +41,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 +91,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/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/modal/ConfirmationModal.tsx

@@ -4,16 +4,22 @@ import { Checkbox } from '../forms/checkbox/Checkbox';
 import { Col, Row } from '../grid';
 import { Icon } from '../icons/Icon';
 import { Modal } from './Modal';
-import { ConfirmationModalProps } from './types';
+import { ConfirmationModalProps, ConfirmationModalText } from './types';
 import classNames from 'classnames';
 import { useState } from 'react';
 
+const DEFAULT_TEXT: Required<ConfirmationModalText> = {
+  closeButton: 'Close',
+  dontShowAgain: "Don't display this again.",
+  confirm: 'Confirm',
+  cancel: 'Cancel',
+};
+
 const defaultFooter = ({
   onCancelRequest,
   onConfirmRequest,
-  confirmationButtonText,
+  text,
   confirmationButtonVariant,
-  cancelButtonText,
   hasDontShowAgainCheckbox,
   isChecked,
   onDontShowAgainChange,
@@ -24,9 +30,8 @@ const defaultFooter = ({
   }: {
     dontShowAgain?: boolean;
   }) => void | Promise<void> | Promise<boolean>;
-  confirmationButtonText?: string;
+  text: Required<ConfirmationModalText>;
   confirmationButtonVariant?: ButtonVariants;
-  cancelButtonText?: string;
   hasDontShowAgainCheckbox?: boolean;
   isChecked?: boolean;
   onDontShowAgainChange?: (checked: boolean) => void;
@@ -35,7 +40,7 @@ const defaultFooter = ({
     {hasDontShowAgainCheckbox && (
       <Col>
         <Checkbox
-          label="Don't display this again."
+          label={text.dontShowAgain}
           onChange={(e) => onDontShowAgainChange?.(e.target.checked)}
           isChecked={isChecked}
           id="dont-show-again"
@@ -44,17 +49,17 @@ const defaultFooter = ({
       </Col>
     )}
     <Col xs="content">
-      <Button onClick={onCancelRequest} ariaLabel={cancelButtonText || 'Cancel'} variant="outline">
-        {cancelButtonText}
+      <Button onClick={onCancelRequest} ariaLabel={text.cancel} variant="outline">
+        {text.cancel}
       </Button>
     </Col>
     <Col xs="content">
       <Button
         onClick={() => onConfirmRequest?.({ dontShowAgain: isChecked })}
-        ariaLabel={confirmationButtonText || 'Confirm'}
+        ariaLabel={text.confirm}
         variant={confirmationButtonVariant}
       >
-        {confirmationButtonText}
+        {text.confirm}
       </Button>
     </Col>
   </Row>
@@ -77,15 +82,15 @@ export const ConfirmationModal = ({
   children,
   onConfirmRequest,
   onCancelRequest,
-  confirmationButtonText = 'Confirm',
-  cancelButtonText = 'Cancel',
   confirmationButtonVariant = 'solid',
   icon,
   title,
   status = 'info',
   maxWidthInPixels,
   hasDontShowAgainCheckbox,
+  text: textProp,
 }: ConfirmationModalProps) => {
+  const text = { ...DEFAULT_TEXT, ...textProp };
   const [dontShowAgain, setDontShowAgain] = useState(false);
 
   const modalFooter =
@@ -93,8 +98,7 @@ export const ConfirmationModal = ({
     defaultFooter({
       onCancelRequest,
       onConfirmRequest,
-      confirmationButtonText,
-      cancelButtonText,
+      text,
       confirmationButtonVariant,
       hasDontShowAgainCheckbox,
       isChecked: dontShowAgain,
@@ -117,6 +121,7 @@ export const ConfirmationModal = ({
       overlayElement={overlayElement}
       footer={modalFooter}
       maxWidthInPixels={maxWidthInPixels}
+      text={{ closeButton: text.closeButton }}
     >
       {icon && (
         <Icon

package/src/components/modal/Modal.stories.tsx

@@ -173,15 +173,6 @@ const meta: Meta = {
         },
       },
     },
-    confirmationButtonText: {
-      control: 'text',
-      table: {
-        category: 'Confirmation Modal',
-        type: {
-          summary: 'string',
-        },
-      },
-    },
     confirmationButtonVariant: {
       control: 'select',
       options: ['solid', 'outline', 'link', 'action', 'destructive', 'soft'],
@@ -192,15 +183,6 @@ const meta: Meta = {
         },
       },
     },
-    cancelButtonText: {
-      control: 'text',
-      table: {
-        category: 'Confirmation Modal',
-        type: {
-          summary: 'string',
-        },
-      },
-    },
     status: {
       control: 'select',
       options: ['info', 'success', 'error'],
@@ -230,6 +212,17 @@ const meta: Meta = {
         },
       },
     },
+    text: {
+      control: 'object',
+      table: {
+        category: 'i18n Text',
+        type: {
+          summary:
+            '{ closeButton?: string; dontShowAgain?: string; confirm?: string; cancel?: string }',
+        },
+      },
+      description: 'Customizable text.',
+    },
   },
 };
 
@@ -320,9 +313,8 @@ export const ConfirmationModalStory: StoryObj<typeof ConfirmationModal> = {
       console.log('closed');
     },
     title: 'Disable User',
-    confirmationButtonText: 'Delete',
     confirmationButtonVariant: 'destructive',
-    cancelButtonText: 'Cancel',
+    text: { confirm: 'Delete', cancel: 'Cancel' },
     shouldCloseOnOverlayClick: true,
     subtitle: '',
     icon: 'trash',
@@ -371,9 +363,8 @@ export const ConfirmationModalStoryWithCheckbox: StoryObj<typeof ConfirmationMod
       console.log('closed');
     },
     title: 'Disable User',
-    confirmationButtonText: 'Delete',
     confirmationButtonVariant: 'destructive',
-    cancelButtonText: 'Cancel',
+    text: { confirm: 'Delete', cancel: 'Cancel' },
     shouldCloseOnOverlayClick: true,
     icon: 'trash',
     status: 'error',
@@ -420,3 +411,43 @@ export const ConfirmationModalStoryWithCheckbox: StoryObj<typeof ConfirmationMod
     );
   },
 };
+
+/**
+ * Use the `text` prop to customize displayed text.
+ */
+export const WithText: StoryObj<typeof ConfirmationModal> = {
+  args: {
+    title: 'Désactiver utilisateur',
+    confirmationButtonVariant: 'destructive',
+    icon: 'trash',
+    status: 'error',
+    maxWidthInPixels: 600,
+    hasDontShowAgainCheckbox: true,
+    parentSelector: () => document.body,
+    text: {
+      confirm: 'Supprimer',
+      cancel: 'Annuler',
+      closeButton: 'Fermer',
+      dontShowAgain: 'Ne plus afficher ce message',
+    },
+  },
+
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    return (
+      <Container>
+        <Row>
+          <Col sm={4}>
+            <ConfirmationModal {...args} isOpen={isOpen} onRequestClose={() => setIsOpen(false)}>
+              <p>French example with custom text.</p>
+            </ConfirmationModal>
+            <Button ariaLabel="open modal" onClick={() => setIsOpen(true)}>
+              Open French Modal
+            </Button>
+          </Col>
+        </Row>
+      </Container>
+    );
+  },
+};

package/src/components/modal/Modal.tsx

@@ -2,7 +2,11 @@ import classNames from 'classnames';
 import ReactModal from 'react-modal';
 import { Button } from '../button/Button';
 import { Col, Row } from '../grid';
-import { ModalProps } from './types';
+import { ModalProps, ModalText } from './types';
+
+const DEFAULT_TEXT: Required<ModalText> = {
+  closeButton: 'Close',
+};
 
 export const Modal = ({
   className = '',
@@ -25,8 +29,10 @@ export const Modal = ({
   subtitle,
   footer,
   maxWidthInPixels,
+  text: textProp,
   ...rest
 }: ModalProps) => {
+  const text = { ...DEFAULT_TEXT, ...textProp };
   const modalClasses = classNames('modal', `modal--${position}`, className);
   const overlayClasses = classNames('modal-overlay', overlayClassName);
 
@@ -55,7 +61,7 @@ export const Modal = ({
           variant="link"
           size="md"
           iconLeft="x-close"
-          ariaLabel="Close"
+          ariaLabel={text.closeButton}
         />
         {hasHeader && (
           <div className="modal-header">

package/src/components/modal/types.ts

@@ -1,6 +1,12 @@
 import { ButtonVariants } from '../button/types';
 import { IconName } from '../icons/types';
 
+/** Customizable text for Modal. */
+export interface ModalText {
+  /** Aria label for the close button. Default: "Close" */
+  closeButton?: string;
+}
+
 export interface ModalProps {
   /** Additional classes for the badge component */
   className?: string;
@@ -36,9 +42,21 @@ export interface ModalProps {
   footer?: React.ReactNode;
   /** The maximum width of the modal in pixels */
   maxWidthInPixels?: number;
+  /** Customizable display text. */
+  text?: ModalText;
+}
+
+/** Customizable text for ConfirmationModal. Extends ModalText. */
+export interface ConfirmationModalText extends ModalText {
+  /** Label for the "Don't show again" checkbox. Default: "Don't display this again." */
+  dontShowAgain?: string;
+  /** Text for the confirm button. Default: "Confirm" */
+  confirm?: string;
+  /** Text for the cancel button. Default: "Cancel" */
+  cancel?: string;
 }
 
-export interface ConfirmationModalProps extends ModalProps {
+export interface ConfirmationModalProps extends Omit<ModalProps, 'text'> {
   onConfirmRequest?: ({
     dontShowAgain,
   }: {
@@ -49,12 +67,10 @@ export interface ConfirmationModalProps extends ModalProps {
   hasDontShowAgainCheckbox?: boolean;
   /** The variant of the confirmation button. */
   confirmationButtonVariant?: ButtonVariants;
-  /** The text of the confirmation button */
-  confirmationButtonText?: string;
-  /** The text of the cancel button */
-  cancelButtonText?: string;
   /** The icon of the modal */
   icon?: IconName;
   /** The status of the modal. This will determine the color of the icon. */
   status?: 'info' | 'success' | 'error';
+  /** Customizable display text. */
+  text?: ConfirmationModalText;
 }

package/src/components/pagination/Pagination.stories.tsx

@@ -43,6 +43,17 @@ const meta: Meta = {
         },
       },
     },
+    text: {
+      control: 'object',
+      description: 'Customizable text.',
+      table: {
+        category: 'i18n Text',
+        type: {
+          summary:
+            '{ previousPage?: string; nextPage?: string; currentPage?: string; of?: string }',
+        },
+      },
+    },
   },
 };
 

package/src/components/pagination/Pagination.tsx

@@ -1,19 +1,28 @@
 import { useState, useEffect } from 'react';
 import classNames from 'classnames';
-import { PaginationProps } from './types';
+import { PaginationProps, PaginationText } from './types';
 import { Container, Row, Col } from '../grid';
 import { Input } from '../forms/input';
 import { Button } from '../button';
 
+const DEFAULT_TEXT: Required<PaginationText> = {
+  previousPage: 'Previous Page',
+  nextPage: 'Next Page',
+  currentPage: 'Current Page',
+  of: 'of',
+};
+
 export const Pagination = ({
   totalPages,
   currentPage = 1,
   onChange,
   className,
+  text: textProp,
   ...rest
 }: PaginationProps) => {
+  const text = { ...DEFAULT_TEXT, ...textProp };
   const [inputValue, setInputValue] = useState(currentPage.toString());
-  const totalPagesText = `of ${totalPages}`;
+  const totalPagesText = `${text.of} ${totalPages}`;
   const classes = classNames('pagination', className);
 
   useEffect(() => {
@@ -60,7 +69,7 @@ export const Pagination = ({
             <div className="pagination__previous">
               <Button
                 data-testid="pagination-previous-button"
-                ariaLabel="Previous Page"
+                ariaLabel={text.previousPage}
                 variant="link"
                 onClick={handlePreviousPage}
                 iconLeft="chevron-left"
@@ -78,7 +87,7 @@ export const Pagination = ({
                 })}
                 value={totalPages === 0 ? '0' : inputValue}
                 name="currentPage"
-                label="Current Page"
+                label={text.currentPage}
                 hasHiddenLabel
                 onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
                   if (e.key === 'Enter') {
@@ -103,7 +112,7 @@ export const Pagination = ({
             <div className="pagination__next">
               <Button
                 data-testid="pagination-next-button"
-                ariaLabel="Next Page"
+                ariaLabel={text.nextPage}
                 variant="link"
                 onClick={handleNextPage}
                 iconLeft="chevron-right"

package/src/components/pagination/index.ts

@@ -1 +1,2 @@
 export { Pagination } from './Pagination';
+export type { PaginationText } from './types';

package/src/components/pagination/types.ts

@@ -1,3 +1,15 @@
+/** Customizable text for Pagination. */
+export interface PaginationText {
+  /** Aria label for previous page button. Default: "Previous Page" */
+  previousPage?: string;
+  /** Aria label for next page button. Default: "Next Page" */
+  nextPage?: string;
+  /** Label for current page input. Default: "Current Page" */
+  currentPage?: string;
+  /** Text between current page and total (e.g., "of"). Default: "of" */
+  of?: string;
+}
+
 export interface PaginationProps {
   /** The total number of pages to be displayed */
   totalPages: number;
@@ -7,4 +19,6 @@ export interface PaginationProps {
   className?: string;
   /** The callback function that is called when the page changes. */
   onChange?: (value: number) => void;
+  /** Customizable display text. */
+  text?: PaginationText;
 }

package/src/components/stepper/Stepper.stories.tsx

@@ -146,6 +146,17 @@ const meta: Meta = {
         },
       },
     },
+    text: {
+      control: 'object',
+      description: 'Customizable text.',
+      table: {
+        category: 'i18n Text',
+        type: {
+          summary:
+            '{ previousStep?: string; previousStepAriaLabel?: string; nextStep?: string; nextStepAriaLabel?: string; finish?: string; finishAriaLabel?: string }',
+        },
+      },
+    },
   },
 };
 

package/src/components/stepper/Stepper.tsx

@@ -2,7 +2,13 @@ import { useState, Children } from 'react';
 import { Legend } from './components/Legend';
 import { BackNavigation } from './components/BackNavigation';
 import { NextNavigation } from './components/NextNavigation';
-import { StepperProps } from './types';
+import { StepperProps, StepperText } from './types';
+
+const DEFAULT_TEXT: Required<StepperText> = {
+  previousStep: 'Previous Step',
+  nextStep: 'Next Step',
+  finish: 'Finish',
+};
 
 export const Stepper = ({
   currentStep: externalCurrentStep,
@@ -14,7 +20,9 @@ export const Stepper = ({
   onFinishClick,
   children,
   onStepClick,
+  text: textProp,
 }: StepperProps) => {
+  const text = { ...DEFAULT_TEXT, ...textProp };
   const [internalCurrentStep, setInternalCurrentStep] = useState(0);
 
   const currentStep = externalCurrentStep !== undefined ? externalCurrentStep : internalCurrentStep;
@@ -71,12 +79,18 @@ export const Stepper = ({
           <div className="stepper-steps">{childrenArray[currentStep]}</div>
         </div>
         <div className="stepper-actions">
-          <BackNavigation isDisabled={isFirstStep} onBackClick={handleBackClick} />
+          <BackNavigation
+            isDisabled={isFirstStep}
+            onBackClick={handleBackClick}
+            label={text.previousStep}
+          />
           <NextNavigation
             isLastStep={isLastStep}
             onNextClick={handleNextClick}
             onFinishClick={handleFinishClick}
             isDisabled={disableNextButton(currentStep)}
+            nextLabel={text.nextStep}
+            finishLabel={text.finish}
           />
         </div>
       </div>

package/src/components/stepper/components/BackNavigation.tsx

@@ -1,21 +1,23 @@
 import { Button } from '../../button';
+
 type Props = {
   isDisabled: boolean;
   onBackClick: () => void;
+  label: string;
 };
 
-export const BackNavigation = ({ isDisabled, onBackClick }: Props) => {
+export const BackNavigation = ({ isDisabled, onBackClick, label }: Props) => {
   return (
     <div className="stepper-navigation-back">
       <Button
         data-testid="stepper-back-button"
-        ariaLabel="Previous Step"
+        ariaLabel={label}
         iconLeft="fa-arrow-left"
         onClick={onBackClick}
         variant="outline"
         isDisabled={isDisabled}
       >
-        Previous Step
+        {label}
       </Button>
     </div>
   );

package/src/components/stepper/components/NextNavigation.tsx

@@ -1,12 +1,22 @@
 import { Button } from '../../button';
+
 type Props = {
   isLastStep: boolean;
   onNextClick: () => void;
   onFinishClick: () => void;
   isDisabled: boolean;
+  nextLabel: string;
+  finishLabel: string;
 };
 
-export const NextNavigation = ({ isLastStep, onNextClick, onFinishClick, isDisabled }: Props) => {
+export const NextNavigation = ({
+  isLastStep,
+  onNextClick,
+  onFinishClick,
+  isDisabled,
+  nextLabel,
+  finishLabel,
+}: Props) => {
   return (
     <div className="stepper-navigation">
       {!isLastStep ? (
@@ -14,22 +24,22 @@ export const NextNavigation = ({ isLastStep, onNextClick, onFinishClick, isDisab
           <Button
             data-testid="stepper-next-button"
             iconRight="fa-arrow-right"
-            ariaLabel="Next Step"
+            ariaLabel={nextLabel}
             onClick={onNextClick}
             isDisabled={isDisabled}
           >
-            Next Step
+            {nextLabel}
           </Button>
         </div>
       ) : (
         <div className="stepper-navigation-finish">
           <Button
             data-testid="stepper-finish-button"
-            ariaLabel="Finish"
+            ariaLabel={finishLabel}
             onClick={onFinishClick}
             isDisabled={isDisabled}
           >
-            Finish
+            {finishLabel}
           </Button>
         </div>
       )}