@indico-data/design-system 3.18.0 → 3.20.0

package/src/components/icons/Icon.tsx

@@ -1,7 +1,8 @@
-import classNames from 'classnames';
+import { type IconName as FAIconName, findIconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { IconName as FAIconName, findIconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { IconProps } from './types';
+import classNames from 'classnames';
+
+import { type IconProps } from './types';
 
 export const Icon = ({
   name,

package/src/components/icons/__tests__/Icon.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+
 import { Icon } from '@/components/icons/Icon';
 
 describe('Icon Component', () => {

package/src/components/icons/indicons.tsx

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { type IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { type ReactElement } from 'react';
 
 const indicons = {
   'indico-o-white': (
@@ -821,7 +821,7 @@ function indiconToIconDef([name, customIcon]: [string, ReactElement]): IconDefin
     throw new Error(`Monotone indicon '${name}' must have a 'd' attribute.`);
 
   if (pathElements.length === 2) {
-    let [primary, secondary] = pathElements;
+    const [primary, secondary] = pathElements;
 
     if (!primary.props.d || !secondary.props.d)
       throw new Error(`Duotone indicon '${name}' must have 'd' attributes on both paths.`);

package/src/components/icons/types.ts

@@ -1,7 +1,8 @@
-import { MouseEventHandler, CSSProperties } from 'react';
-import { PermafrostComponent } from '../../types';
-import { IconName as FAIconName, IconPrefix } from '@fortawesome/fontawesome-svg-core';
-import { indicons } from './indicons';
+import { type IconName as FAIconName, type IconPrefix } from '@fortawesome/fontawesome-svg-core';
+import { type MouseEventHandler, type CSSProperties } from 'react';
+
+import { type indicons } from './indicons';
+import { type PermafrostComponent } from '../../types';
 
 export type IconSizes = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
 

package/src/components/loading-indicators/BarSpinner/BarSpinner.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { BarSpinner } from './BarSpinner';
 import { Col, Container, Row } from '../../grid';
 

package/src/components/loading-indicators/BarSpinner/__tests__/BarSpinner.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+
 import { BarSpinner } from '../BarSpinner';
 
 describe('BarSpinner Component', () => {

package/src/components/loading-indicators/CirclePulse/CirclePulse.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { CirclePulse } from './CirclePulse';
 import { Col, Container, Row } from '../../grid';
 

package/src/components/menu/Menu.stories.tsx

@@ -1,5 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Menu, MenuProps } from './Menu';
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import { Menu, type MenuProps } from './Menu';
 import { Button } from '../button';
 
 const meta: Meta<typeof Menu> = {

package/src/components/menu/Menu.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
+
 import { Menu } from './Menu';
 import { Button } from '../button';
 

package/src/components/menu/Menu.tsx

@@ -1,5 +1,5 @@
-import React, { ReactElement } from 'react';
 import classNames from 'classnames';
+import React, { type ReactElement } from 'react';
 
 export type MenuProps = {
   children: React.ReactNode;

package/src/components/modal/ConfirmationModal.tsx

@@ -1,19 +1,27 @@
+import classNames from 'classnames';
+import { useState } from 'react';
+
+import { Modal } from './Modal';
+import { type ConfirmationModalProps, type ConfirmationModalText } from './types';
 import { Button } from '../button/Button';
-import { ButtonVariants } from '../button/types';
+import { type ButtonVariants } from '../button/types';
 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 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 +32,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 +42,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 +51,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 +84,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 +100,7 @@ export const ConfirmationModal = ({
     defaultFooter({
       onCancelRequest,
       onConfirmRequest,
-      confirmationButtonText,
-      cancelButtonText,
+      text,
       confirmationButtonVariant,
       hasDontShowAgainCheckbox,
       isChecked: dontShowAgain,
@@ -117,6 +123,7 @@ export const ConfirmationModal = ({
       overlayElement={overlayElement}
       footer={modalFooter}
       maxWidthInPixels={maxWidthInPixels}
+      text={{ closeButton: text.closeButton }}
     >
       {icon && (
         <Icon

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

@@ -1,12 +1,15 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Modal } from './Modal';
-import { Col, Container, Row } from '../grid';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { useState } from 'react';
-import { Button } from '../button';
-import { registerFontAwesomeIcons } from '@/setup/setupIcons';
+
 import { indiconDefinitions } from '@/components/icons/indicons';
-import { fas } from '@fortawesome/free-solid-svg-icons';
+import { registerFontAwesomeIcons } from '@/setup/setupIcons';
+
 import { ConfirmationModal } from './ConfirmationModal';
+import { Modal } from './Modal';
+import { Button } from '../button';
+import { Col, Container, Row } from '../grid';
+
 
 registerFontAwesomeIcons(...Object.values(fas), ...indiconDefinitions);
 
@@ -173,15 +176,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 +186,6 @@ const meta: Meta = {
         },
       },
     },
-    cancelButtonText: {
-      control: 'text',
-      table: {
-        category: 'Confirmation Modal',
-        type: {
-          summary: 'string',
-        },
-      },
-    },
     status: {
       control: 'select',
       options: ['info', 'success', 'error'],
@@ -230,6 +215,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 +316,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 +366,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 +414,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

@@ -1,8 +1,13 @@
 import classNames from 'classnames';
 import ReactModal from 'react-modal';
+
+import { type ModalProps, type ModalText } from './types';
 import { Button } from '../button/Button';
 import { Col, Row } from '../grid';
-import { ModalProps } from './types';
+
+const DEFAULT_TEXT: Required<ModalText> = {
+  closeButton: 'Close',
+};
 
 export const Modal = ({
   className = '',
@@ -25,8 +30,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 +62,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/__tests__/Modal.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen, fireEvent } from '@testing-library/react';
+
 import { Modal } from '../Modal';
 
 // Mock ReactModal's app element setting to avoid warnings

package/src/components/modal/types.ts

@@ -1,5 +1,11 @@
-import { ButtonVariants } from '../button/types';
-import { IconName } from '../icons/types';
+import { type ButtonVariants } from '../button/types';
+import { type 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 */
@@ -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

@@ -1,7 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { useEffect, useState } from 'react';
+
 import { Pagination } from './Pagination';
 import { Col, Container, Row } from '../grid';
-import { useEffect, useState } from 'react';
 
 const meta: Meta = {
   title: 'Layout/Pagination',
@@ -43,6 +44,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,29 @@
-import { useState, useEffect } from 'react';
 import classNames from 'classnames';
-import { PaginationProps } from './types';
-import { Container, Row, Col } from '../grid';
-import { Input } from '../forms/input';
+import { useState, useEffect } from 'react';
+
+import { type PaginationProps, type PaginationText } from './types';
 import { Button } from '../button';
+import { Input } from '../forms/input';
+import { Container, Row, Col } from '../grid';
+
+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 +70,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 +88,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 +113,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/__tests__/Pagination.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
+
 import { Pagination } from '../Pagination';
 
 describe('Pagination', () => {

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/pill/Pill.stories.tsx

@@ -1,8 +1,12 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Pill } from './Pill';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { Container, Row, Col } from 'react-grid-system';
-import { ChromaticColor } from '@/types';
-import { PillShade } from './types';
+
+import { type ChromaticColor } from '@/types';
+
+import { Pill } from './Pill';
+import { type PillShade } from './types';
+
+
 
 const CHROMATIC_COLORS: ChromaticColor[] = [
   'blue',
@@ -120,7 +124,7 @@ export const AllDefaultColors: Story = {
       <Container>
         <Row justify="start">
           {CHROMATIC_COLORS.map((color: ChromaticColor) => (
-            <Col xs="content" className="mb-2">
+            <Col key={color} xs="content" className="mb-2">
               <Pill color={color} size="md">
                 {color}
               </Pill>
@@ -139,7 +143,7 @@ export const AllShades: Story = {
         {CHROMATIC_COLORS.map((color: ChromaticColor) => (
           <Row key={color}>
             {SHADES.map((shade: PillShade) => (
-              <Col width={100} className="mb-2">
+              <Col key={`${color}-${shade}`} width={100} className="mb-2">
                 <Pill shade={shade} color={color} size="md">
                   {color}-{shade}
                 </Pill>

package/src/components/pill/Pill.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import { PillProps } from './types';
+
+import { type PillProps } from './types';
 
 export const Pill = ({
   children,

package/src/components/pill/__tests__/Pill.test.tsx

@@ -1,6 +1,9 @@
 import { render, screen } from '@testing-library/react';
+
 import { Pill } from '@/components/pill/Pill';
-import { PillColor, PillShade, PillSize } from '../types';
+
+import { type PillColor, type PillShade, type PillSize } from '../types';
+
 
 const sizes = ['sm', 'md', 'lg'] as PillSize[];
 const colors = [

package/src/components/pill/types.ts

@@ -1,5 +1,7 @@
-import { ChromaticColor } from '../../types';
-import React from 'react';
+import { type ChromaticColor } from '../../types';
+
+import type React from 'react';
+
 
 export type PillSize = 'sm' | 'md' | 'lg';
 export type PillColor = ChromaticColor;

package/src/components/skeleton/Skeleton.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { Skeleton } from './Skeleton';
 import { Col, Container, Row } from '../grid';
 

package/src/components/skeleton/__tests__/Skeleton.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+
 import { Skeleton } from '@/components/skeleton/Skeleton';
 
 describe('Skeleton', () => {