@indico-data/design-system 3.18.0 → 3.19.0

package/src/components/stepper/types.ts

@@ -1,5 +1,15 @@
 import { ReactNode } from 'react';
 
+/** Customizable text for Stepper. */
+export interface StepperText {
+  /** Label for the "Previous Step" button. Default: "Previous Step" */
+  previousStep?: string;
+  /** Label for the "Next Step" button. Default: "Next Step" */
+  nextStep?: string;
+  /** Label for the "Finish" button. Default: "Finish" */
+  finish?: string;
+}
+
 export interface StepperProps {
   /** An array of step objects that define the stepper navigation. */
   steps: Step[];
@@ -18,6 +28,8 @@ export interface StepperProps {
   children: React.ReactNode;
   /** The function to call when a step is clicked ont he legend. */
   onStepClick: (step: number) => void;
+  /** Customizable display text. */
+  text?: StepperText;
 }
 
 export interface StepperLegendProps {

package/src/components/table/LoadingComponent.tsx

@@ -1,3 +1,7 @@
-export const LoadingComponent = () => {
-  return <div className="table-loading">Loading...</div>;
+interface LoadingComponentProps {
+  loadingText: string;
+}
+
+export const LoadingComponent = ({ loadingText }: LoadingComponentProps) => {
+  return <div className="table-loading">{loadingText}</div>;
 };

package/src/components/table/Table.stories.tsx

@@ -494,6 +494,16 @@ const meta: Meta = {
         disable: true,
       },
     },
+    text: {
+      control: 'object',
+      description: 'Customizable text.',
+      table: {
+        category: 'i18n Text',
+        type: {
+          summary: '{ loading?: string; unpinColumn?: string; pinColumn?: string }',
+        },
+      },
+    },
   },
 };
 

package/src/components/table/Table.tsx

@@ -4,10 +4,16 @@ import DataTable, {
   Alignment as RDTAlignment,
 } from 'react-data-table-component';
 import { LoadingComponent } from './LoadingComponent';
-import { TableProps } from './types';
+import { TableProps, TableText } from './types';
 import { TablePagination } from './components/TablePagination';
 import { usePinnedColumnsManager } from './hooks/usePinnedColumnsManager';
 
+const DEFAULT_TEXT: Required<TableText> = {
+  loading: 'Loading...',
+  unpinColumn: 'Unpin column',
+  pinColumn: 'Pin column',
+};
+
 export const Table = <T,>(props: TableProps<T>) => {
   const {
     responsive = true,
@@ -26,14 +32,18 @@ export const Table = <T,>(props: TableProps<T>) => {
     columns: initialColumns,
     canPinColumns = false,
     onPinnedColumnsChange,
+    text: textProp,
     ...rest
   } = props;
 
+  const text = { ...DEFAULT_TEXT, ...textProp };
+
   // Turns on/off column pinning.
   const { columnsWithPinning } = usePinnedColumnsManager(
     initialColumns,
     canPinColumns,
     onPinnedColumnsChange,
+    { unpinColumn: text.unpinColumn, pinColumn: text.pinColumn },
   );
 
   const combinedClassName = classNames(className, {
@@ -59,7 +69,7 @@ export const Table = <T,>(props: TableProps<T>) => {
         disabled={isDisabled}
         noDataComponent={noDataComponent}
         progressPending={isLoading}
-        progressComponent={<LoadingComponent />}
+        progressComponent={<LoadingComponent loadingText={text.loading} />}
         pagination
         paginationComponent={(props) => (
           <TablePagination {...props} totalEntriesText={totalEntriesText} />

package/src/components/table/components/HorizontalStickyHeader.tsx

@@ -5,6 +5,13 @@ import {
   applyStickyStylesToTableHeader,
   clearStickyStyles,
 } from './helpers';
+import { HorizontalStickyHeaderText } from '../types';
+
+const DEFAULT_TEXT: Required<HorizontalStickyHeaderText> = {
+  unpinColumn: 'Unpin column',
+  pinColumn: 'Pin column',
+};
+
 interface HorizontalStickyHeaderProps {
   children: React.ReactNode;
   position: number;
@@ -12,6 +19,8 @@ interface HorizontalStickyHeaderProps {
   isPinned?: boolean;
   forceUpdate?: number;
   pinnedColumnIds: string[];
+  /** Customizable display text. */
+  text?: HorizontalStickyHeaderText;
 }
 
 const HorizontalStickyHeader = ({
@@ -20,7 +29,9 @@ const HorizontalStickyHeader = ({
   onPinColumn,
   isPinned = false,
   pinnedColumnIds,
+  text: textProp,
 }: HorizontalStickyHeaderProps) => {
+  const text = { ...DEFAULT_TEXT, ...textProp };
   useEffect(() => {
     const calculateWidth = async () => {
       await new Promise((resolve) => setTimeout(resolve, 0));
@@ -46,7 +57,7 @@ const HorizontalStickyHeader = ({
         size="sm"
         iconLeft="pin"
         onClick={() => onPinColumn?.(`sticky-column-${position}`)}
-        ariaLabel={isPinned ? 'Unpin column' : 'Pin column'}
+        ariaLabel={isPinned ? text.unpinColumn : text.pinColumn}
         className={`table__column--${isPinned ? 'is-pinned' : 'is-not-pinned'} table__column__pin-action`}
       />
       <div className="table__header-content">{children}</div>

package/src/components/table/hooks/usePinnedColumnsManager.ts

@@ -1,5 +1,5 @@
 import { useEffect, useCallback, useMemo } from 'react';
-import { TableColumn } from '../types';
+import { TableColumn, HorizontalStickyHeaderText } from '../types';
 import { sortPinnedColumns, getPreviousHeadersWidth } from '../components/helpers';
 import { processColumns } from '../utils/processColumns';
 
@@ -11,6 +11,7 @@ export const usePinnedColumnsManager = <T>(
   columns: TableColumn<T>[],
   canPinColumns: boolean,
   onPinnedColumnsChange?: (pinnedColumnIds: string[]) => void,
+  text?: HorizontalStickyHeaderText,
 ) => {
   const pinnedColumnIds = columns.filter((column) => column.isPinned).map((column) => column.id);
 
@@ -137,7 +138,7 @@ export const usePinnedColumnsManager = <T>(
 
   // Process columns for rendering with pin state
   const columnsWithPinning = canPinColumns
-    ? sortPinnedColumns(processColumns(columns, dataColumnIds, togglePinnedColumn), dataColumnIds)
+    ? sortPinnedColumns(processColumns(columns, dataColumnIds, togglePinnedColumn, text), dataColumnIds)
     : columns;
 
   return {

package/src/components/table/types.ts

@@ -19,6 +19,24 @@ export interface PinnableColumn<T> extends RDTTableColumn<T> {
 
 export type TableColumn<T> = PinnableColumn<T>;
 
+/** Customizable text for Table. */
+export interface TableText {
+  /** Text to display while loading. Default: "Loading..." */
+  loading?: string;
+  /** Aria label for unpinning a column. Default: "Unpin column" */
+  unpinColumn?: string;
+  /** Aria label for pinning a column. Default: "Pin column" */
+  pinColumn?: string;
+}
+
+/** Customizable text for HorizontalStickyHeader. */
+export interface HorizontalStickyHeaderText {
+  /** Aria label for unpinning a column. Default: "Unpin column" */
+  unpinColumn?: string;
+  /** Aria label for pinning a column. Default: "Pin column" */
+  pinColumn?: string;
+}
+
 export interface TableProps<T>
   extends Omit<IDataTableProps<T>, 'paginationComponent' | 'direction' | 'subHeaderAlign'> {
   /** The columns to display in the table. All columns require a unique id property. For pinned columns, please see the pinned example below. */
@@ -39,4 +57,6 @@ export interface TableProps<T>
   canPinColumns?: boolean;
   /** Callback that receives the IDs of the pinned columns when they change. */
   onPinnedColumnsChange?: (pinnedColumnIds: any[]) => void;
+  /** Customizable display text. */
+  text?: TableText;
 }

package/src/components/table/utils/processColumns.tsx

@@ -1,4 +1,4 @@
-import { TableColumn } from '../types';
+import { TableColumn, HorizontalStickyHeaderText } from '../types';
 import HorizontalStickyHeader from '../components/HorizontalStickyHeader';
 import { getPinnedColumnStyles } from '../components/helpers';
 
@@ -6,6 +6,7 @@ export const processColumns = <T,>(
   columns: TableColumn<T>[],
   pinnedColumnIds: string[],
   togglePinnedColumn: (id: string) => void,
+  text?: HorizontalStickyHeaderText,
 ): TableColumn<T>[] => {
   return columns.map((column, index) => {
     const dataColumnId = `sticky-column-${index}`;
@@ -18,6 +19,7 @@ export const processColumns = <T,>(
           isPinned={isPinned}
           onPinColumn={() => togglePinnedColumn(column.id)}
           pinnedColumnIds={pinnedColumnIds}
+          text={text}
         >
           {column.name}
         </HorizontalStickyHeader>

package/src/components/tanstackTable/TankstackTable.types.ts

@@ -1,5 +1,23 @@
 import { Row, ColumnDef, SortingState } from '@tanstack/react-table';
 
+/** Customizable text for TanstackTable. */
+export interface TanstackTableText {
+  /** Message while table is loading. Default: "Table is loading..." */
+  loading?: string;
+  /** Message when no results found. Default: "No results found." */
+  noResults?: string;
+  /** Message when there's an error loading data. Default: "There was an error loading the data." */
+  error?: string;
+  /** Text for reset filters button. Default: "Reset filters" */
+  resetFilters?: string;
+  /** Singular entry text. Default: "entry" */
+  entry?: string;
+  /** Plural entries text. Default: "entries" */
+  entries?: string;
+  /** "of" text in pagination (e.g., "5 of 10 entries"). Default: "of" */
+  of?: string;
+}
+
 export type WithPaginationProps = {
   /** Number of rows to display per pagination page. */
   rowsPerPage: number;
@@ -51,8 +69,6 @@ export type Props<T extends object> = {
   hasFilters?: boolean;
   /** When this is true, the table is considered to be in a loading state. */
   isLoading?: boolean;
-  /** Message to display when the table is loading. */
-  isLoadingMessage?: string;
   /** Columns that are pinned by default. */
   defaultPinnedColumns?: string[];
   /** Callback when a row is clicked. */
@@ -69,4 +85,6 @@ export type Props<T extends object> = {
   onSelectAllChange?: (isSelected: boolean) => void;
   /** You may pass a default sorting state to the table. This will be used to sort the table by default. This is useful if you want to sort the table by a column by default. */
   defaultSorting?: SortingState;
+  /** Customizable display text. */
+  text?: TanstackTableText;
 } & PaginationProps;

package/src/components/tanstackTable/TanstackTable.stories.tsx

@@ -19,7 +19,6 @@ const meta: Meta = {
     clearFilters: () => {},
     hasFilters: false,
     isLoading: false,
-    isLoadingMessage: 'Table is loading...',
     enableRowSelection: true,
     showPagination: false,
     onClickRow: null,
@@ -116,12 +115,15 @@ const meta: Meta = {
         defaultValue: { summary: 'false' },
       },
     },
-    isLoadingMessage: {
-      control: { type: 'text' },
+    text: {
+      control: 'object',
+      description: 'Customizable text.',
       table: {
-        category: 'Props',
-        type: { summary: 'string' },
-        defaultValue: { summary: 'Table is loading...' },
+        category: 'i18n Text',
+        type: {
+          summary:
+            '{ loading?: string; noResults?: string; error?: string; resetFilters?: string; entry?: string; entries?: string; of?: string }',
+        },
       },
     },
     defaultPinnedColumns: {

package/src/components/tanstackTable/TanstackTable.tsx

@@ -12,12 +12,22 @@ import { ActionBar } from './components/ActionBar';
 import { NoResults } from './components/NoResults';
 import { isNil } from 'lodash';
 import { TablePagination } from './components/TablePagination';
-import { Props } from './TankstackTable.types';
+import { Props, TanstackTableText } from './TankstackTable.types';
 import { useTanstackTable } from './useTanstackTable';
 import { TableHeader } from './components/TableHeader';
 import { TableBody } from './components/TableBody';
 import { TableLoading } from './components/TableLoading/TableLoading';
 
+const DEFAULT_TEXT: Required<TanstackTableText> = {
+  loading: 'Table is loading...',
+  noResults: 'No results found.',
+  error: 'There was an error loading the data.',
+  resetFilters: 'Reset filters',
+  entry: 'entry',
+  entries: 'entries',
+  of: 'of',
+};
+
 export function TanstackTable<T extends object>({
   columns: defaultColumns,
   data,
@@ -34,15 +44,16 @@ export function TanstackTable<T extends object>({
   hasFilters,
   showPagination = true,
   isLoading = false,
-  isLoadingMessage = 'Table is loading...',
   defaultPinnedColumns,
   onRowClick,
   activeRows = [],
   isStriped = true,
   actionBarClassName,
   defaultSorting,
+  text: textProp,
   ...rest
 }: Props<T & { id: string }>) {
+  const text = { ...DEFAULT_TEXT, ...textProp };
   const {
     columns,
     defaultData,
@@ -120,11 +131,8 @@ export function TanstackTable<T extends object>({
             <NoResults
               clearFilters={clearFilters}
               hasFilters={hasFilters}
-              message={
-                hasErrorAndIsNotLoading
-                  ? error?.errorMessage ?? 'There was an error isLoading the data.'
-                  : 'No results found.'
-              }
+              resetFiltersText={text.resetFilters}
+              message={hasErrorAndIsNotLoading ? error?.errorMessage ?? text.error : text.noResults}
             />
           </td>
         </tr>
@@ -132,7 +140,7 @@ export function TanstackTable<T extends object>({
     }
 
     if (isLoading) {
-      return <TableLoading columns={columns} message={isLoadingMessage} />;
+      return <TableLoading columns={columns} message={text.loading} />;
     }
 
     return (
@@ -169,10 +177,12 @@ export function TanstackTable<T extends object>({
           onChangePage={onChangePage}
           rowsPerPage={rowsPerPage}
           totalEntriesText={
-            totalEntriesText ?? rowCount === 1
-              ? '1 entry'
-              : `${totalRowsOnPage} of ${rowCount} entries`
+            totalEntriesText ??
+            (rowCount === 1
+              ? `1 ${text.entry}`
+              : `${totalRowsOnPage} ${text.of} ${rowCount} ${text.entries}`)
           }
+          text={{ of: text.of }}
         />
       ) : null}
     </div>

package/src/components/tanstackTable/components/NoResults/NoResults.tsx

@@ -4,16 +4,22 @@ type Props = {
   clearFilters?: () => void;
   hasFilters?: boolean;
   message: string;
+  resetFiltersText?: string;
 };
 
-export function NoResults({ clearFilters, hasFilters, message }: Props) {
+export function NoResults({
+  clearFilters,
+  hasFilters,
+  message,
+  resetFiltersText = 'Reset filters',
+}: Props) {
   return (
     <div className="tanstack-table__no-results" data-testid="tanstack-table-no-results">
       <p className="tanstack-table__no-results__text">{message}</p>
       {hasFilters && (
         <p className="tanstack-table__no-results__text">
-          <Button ariaLabel="Reset filters" variant="link" onClick={clearFilters}>
-            Reset filters
+          <Button ariaLabel={resetFiltersText} variant="link" onClick={clearFilters}>
+            {resetFiltersText}
           </Button>
         </p>
       )}

package/src/components/tanstackTable/components/TablePagination/TablePagination.tsx

@@ -1,4 +1,4 @@
-import { Pagination as PaginationComponent } from '../../../pagination';
+import { Pagination as PaginationComponent, PaginationText } from '../../../pagination';
 import { Row, Col } from '../../../grid';
 
 interface TablePaginationProps {
@@ -7,6 +7,7 @@ interface TablePaginationProps {
   onChangePage: (page: number) => void;
   currentPage: number;
   totalEntriesText?: string;
+  text?: PaginationText;
 }
 
 export const TablePagination = ({
@@ -15,6 +16,7 @@ export const TablePagination = ({
   onChangePage,
   currentPage,
   totalEntriesText,
+  text,
 }: TablePaginationProps) => {
   const totalPages = Math.ceil(rowCount / rowsPerPage);
 
@@ -37,6 +39,7 @@ export const TablePagination = ({
             totalPages={totalPages}
             currentPage={currentPage}
             onChange={(page) => onChangePage(page)}
+            text={text}
           />
         </Col>
       </Row>

package/src/index.ts

@@ -51,7 +51,7 @@ export type {
   SortingFn,
 } from '@tanstack/react-table';
 export type { DateRange } from 'react-day-picker';
-export type { SelectOption } from './components/forms/select/types';
+export type { SelectOption, SelectText } from './components/forms/select/types';
 
 // Functions
 export {

package/src/storybook/formArgTypes.ts

@@ -46,6 +46,16 @@ const labelArgTypes: ArgTypes = {
       },
     },
   },
+  text: {
+    control: 'object',
+    description: 'Customizable text.',
+    table: {
+      category: 'i18n Text',
+      type: {
+        summary: '{ required?: string }',
+      },
+    },
+  },
 };
 
 const baseInputArgTypes: ArgTypes = {

package/src/storybookDocs/Permafrost.mdx

@@ -62,6 +62,14 @@ import { Icon } from '@indico-data/design-system';
 <Icon name="indico-o" />;
 ```
 
+### The `text` Prop
+
+Components expose generic UI strings via a `text` prop to enable i18n. These are strings that are the same regardless of context (like "Loading...", "Close", "Next Page"). All have English defaults, pass custom values to override:
+
+```tsx
+<Select text={{ placeholder: 'Choisir...', noOptions: 'Aucune option' }} />
+```
+
 ### Utility Classes
 
 Utility classes are pre-defined CSS classes that provide quick and easy styling options for common design patterns. They help maintain consistency and speed up development by offering ready-to-use styles for margins, typography, and more. For a complete list of available utility classes and their usage, see our [Utility Classes documentation](/docs/utility-classes-overview--docs).