@indico-data/design-system 3.18.0 → 3.20.0

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

@@ -1,15 +1,17 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Stepper } from './Stepper';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { indiconDefinitions } from '@/components/icons/indicons';
 import { registerFontAwesomeIcons } from '@/setup/setupIcons';
-registerFontAwesomeIcons(...Object.values(fas), ...indiconDefinitions);
 
-// Import all example components
+import { CommonExample } from './examples/commonExample/CommonExample';
 import { MixedExample } from './examples/MixedExample';
-import { RequiredStepsExample } from './examples/RequiredStepsExample';
 import { OptionalStepsExample } from './examples/OptionalStepsExample';
-import { CommonExample } from './examples/commonExample/CommonExample';
-import { fas } from '@fortawesome/free-solid-svg-icons';
+import { RequiredStepsExample } from './examples/RequiredStepsExample';
+import { Stepper } from './Stepper';
+
+
+registerFontAwesomeIcons(...Object.values(fas), ...indiconDefinitions);
 
 const meta: Meta = {
   title: 'Components/Stepper',
@@ -146,6 +148,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

@@ -1,8 +1,15 @@
 import { useState, Children } from 'react';
-import { Legend } from './components/Legend';
+
 import { BackNavigation } from './components/BackNavigation';
+import { Legend } from './components/Legend';
 import { NextNavigation } from './components/NextNavigation';
-import { StepperProps } from './types';
+import { type StepperProps, type StepperText } from './types';
+
+const DEFAULT_TEXT: Required<StepperText> = {
+  previousStep: 'Previous Step',
+  nextStep: 'Next Step',
+  finish: 'Finish',
+};
 
 export const Stepper = ({
   currentStep: externalCurrentStep,
@@ -14,7 +21,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 +80,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/__tests__/Stepper.tests.tsx

@@ -1,11 +1,12 @@
 import { render, screen } from '@testing-library/react';
-import { Stepper } from '../Stepper';
-import { StepOne } from '../examples/commonExample/steps/StepOne';
-import { StepTwo } from '../examples/commonExample/steps/StepTwo';
-import { StepThree } from '../examples/commonExample/steps/StepThree';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
+import { StepOne } from '../examples/commonExample/steps/StepOne';
+import { StepThree } from '../examples/commonExample/steps/StepThree';
+import { StepTwo } from '../examples/commonExample/steps/StepTwo';
+import { Stepper } from '../Stepper';
+
 // NOTES ================================================
 // The core functionality of the stepper is mainly various callbacks. As a result, we are indirectly testing them through the testing conditions created in this file. For example, to check if a step is complete, we have a callback function that fires when that step is complete. You will need to test your own logic in your implementation as the conditions tested here are for the purposes of the stepper itself, not the handlers we created.
 

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/Legend.tsx

@@ -1,8 +1,9 @@
 import classNames from 'classnames';
-import { Icon } from '../../icons/Icon';
-import { Col, Row } from '../../grid/';
+
 import { Button } from '../../button';
-import { StepperLegendProps } from '../types';
+import { Col, Row } from '../../grid/';
+import { Icon } from '../../icons/Icon';
+import { type StepperLegendProps } from '../types';
 
 export const Legend = ({ currentStep, steps, onStepClick }: StepperLegendProps) => {
   const totalSteps = steps?.length || 0;

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>
       )}

package/src/components/stepper/examples/MixedExample.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
-import { Stepper } from '../Stepper';
-import { Button } from '../../button';
+import { useState } from 'react';
+
 import { MIXED_EXAMPLE_STEPS, STEP_CONTENT_DATA, INFO_BOX_STYLE } from './constants';
+import { Button } from '../../button';
+import { Stepper } from '../Stepper';
 
 export const MixedExample = () => {
   // Value of the current step.

package/src/components/stepper/examples/OptionalStepsExample.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
-import { Stepper } from '../Stepper';
-import { Button } from '../../button';
+import { useState } from 'react';
+
 import { OPTIONAL_STEPS, INFO_BOX_STYLE, STATUS_INDICATOR_STYLE } from './constants';
+import { Button } from '../../button';
+import { Stepper } from '../Stepper';
 
 export const OptionalStepsExample = () => {
   const [currentStep, setCurrentStep] = useState(0);

package/src/components/stepper/examples/RequiredStepsExample.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
-import { Stepper } from '../Stepper';
-import { Button } from '../../button';
+import { useState } from 'react';
+
 import { REQUIRED_STEPS, INFO_BOX_STYLE, STATUS_INDICATOR_STYLE } from './constants';
+import { Button } from '../../button';
+import { Stepper } from '../Stepper';
 
 export const RequiredStepsExample = () => {
   const [currentStep, setCurrentStep] = useState(0);

package/src/components/stepper/examples/commonExample/CommonExample.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
-import { Stepper } from '../../Stepper';
+import { useState } from 'react';
+
 import { StepOne } from './steps/StepOne';
-import { StepTwo } from './steps/StepTwo';
 import { StepThree } from './steps/StepThree';
+import { StepTwo } from './steps/StepTwo';
+import { Stepper } from '../../Stepper';
 
 export const CommonExample = () => {
   const exampleSteps = [

package/src/components/stepper/examples/commonExample/steps/StepOne.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Input } from '../../../..';
 import { Col, Row } from '../../../..';
 

package/src/components/stepper/examples/commonExample/steps/StepThree.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Input } from '../../../..';
 import { Col, Row } from '../../../..';
 

package/src/components/stepper/examples/commonExample/steps/StepTwo.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Input } from '../../../..';
 import { Col, Row } from '../../../..';
 

package/src/components/stepper/types.ts

@@ -1,4 +1,14 @@
-import { ReactNode } from 'react';
+import { type 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. */
@@ -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

@@ -1,10 +1,14 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Table } from './Table';
-import { columns, sampleData, SampleDataRow } from './sampleData';
-import { registerFontAwesomeIcons } from '@/setup/setupIcons';
-import { indiconDefinitions } from '@/components/icons/indicons';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
+import { indiconDefinitions } from '@/components/icons/indicons';
+import { registerFontAwesomeIcons } from '@/setup/setupIcons';
+
+import { columns, sampleData, type SampleDataRow } from './sampleData';
+import { Table } from './Table';
+
+
+
 registerFontAwesomeIcons(...Object.values(indiconDefinitions));
 
 const meta: Meta = {
@@ -494,6 +498,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

@@ -1,12 +1,19 @@
 import classNames from 'classnames';
 import DataTable, {
-  Direction as RDTDirection,
-  Alignment as RDTAlignment,
+  type Direction as RDTDirection,
+  type Alignment as RDTAlignment,
 } from 'react-data-table-component';
-import { LoadingComponent } from './LoadingComponent';
-import { TableProps } from './types';
+
 import { TablePagination } from './components/TablePagination';
 import { usePinnedColumnsManager } from './hooks/usePinnedColumnsManager';
+import { LoadingComponent } from './LoadingComponent';
+import { type TableProps, type TableText } from './types';
+
+const DEFAULT_TEXT: Required<TableText> = {
+  loading: 'Loading...',
+  unpinColumn: 'Unpin column',
+  pinColumn: 'Pin column',
+};
 
 export const Table = <T,>(props: TableProps<T>) => {
   const {
@@ -26,14 +33,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 +70,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/__tests__/Table.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
-import { Table } from '../Table';
+
 import { sampleData, columns } from '../sampleData';
+import { Table } from '../Table';
 
 describe('Table', () => {
   it('renders the total entries text', () => {

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

@@ -1,10 +1,18 @@
 import { useEffect } from 'react';
-import { Button } from '../../button/Button';
+
 import {
   getPreviousHeadersWidth,
   applyStickyStylesToTableHeader,
   clearStickyStyles,
 } from './helpers';
+import { Button } from '../../button/Button';
+import { type HorizontalStickyHeaderText } from '../types';
+
+const DEFAULT_TEXT: Required<HorizontalStickyHeaderText> = {
+  unpinColumn: 'Unpin column',
+  pinColumn: 'Pin column',
+};
+
 interface HorizontalStickyHeaderProps {
   children: React.ReactNode;
   position: number;
@@ -12,6 +20,8 @@ interface HorizontalStickyHeaderProps {
   isPinned?: boolean;
   forceUpdate?: number;
   pinnedColumnIds: string[];
+  /** Customizable display text. */
+  text?: HorizontalStickyHeaderText;
 }
 
 const HorizontalStickyHeader = ({
@@ -20,7 +30,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 +58,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/components/TablePagination.tsx

@@ -1,5 +1,5 @@
-import { Pagination as PaginationComponent } from '../../pagination';
 import { Row, Col } from '../../grid';
+import { Pagination as PaginationComponent } from '../../pagination';
 interface TablePaginationProps {
   rowsPerPage: number;
   rowCount: number;

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

@@ -1,9 +1,9 @@
 import { render, screen, fireEvent } from '@testing-library/react';
-import HorizontalStickyHeader from '../HorizontalStickyHeader';
+
 import { sampleData } from '../../sampleData';
-import { Table } from '../../Table';
 import { columns } from '../../sampleData';
-import userEvent from '@testing-library/user-event';
+import { Table } from '../../Table';
+import HorizontalStickyHeader from '../HorizontalStickyHeader';
 
 // Add ResizeObserver mock before tests
 class ResizeObserverMock {

package/src/components/table/components/__tests__/TablePagination.test.tsx

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

package/src/components/table/components/helpers.ts

@@ -1,4 +1,4 @@
-import { CSSObject } from 'styled-components';
+import { type CSSObject } from 'styled-components';
 
 // Gets the width of the previous pinned columns
 export const getPreviousHeadersWidth = (position: number, pinnedColumnIds: string[]): number => {

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

@@ -1,6 +1,7 @@
 import { useEffect, useCallback, useMemo } from 'react';
-import { TableColumn } from '../types';
+
 import { sortPinnedColumns, getPreviousHeadersWidth } from '../components/helpers';
+import { type TableColumn, type HorizontalStickyHeaderText } from '../types';
 import { processColumns } from '../utils/processColumns';
 
 /**
@@ -11,6 +12,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 +139,10 @@ 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/sampleData.tsx

@@ -1,6 +1,4 @@
-import { TableColumn } from './types';
-import { useState } from 'react';
-import { Table } from './Table';
+import { type TableColumn } from './types';
 
 export interface SampleDataRow {
   name: string;

package/src/components/table/types.ts

@@ -1,11 +1,10 @@
 import {
-  TableProps as RDTTableProps,
-  Direction as RDTDirection,
-  Alignment as RDTAlignment,
-  TableColumn as RDTTableColumn,
-  IDataTableProps,
+  type Direction as RDTDirection,
+  type Alignment as RDTAlignment,
+  type TableColumn as RDTTableColumn,
+  type IDataTableProps,
 } from 'react-data-table-component';
-import { CSSObject } from 'styled-components';
+import { type CSSObject } from 'styled-components';
 
 export type Direction = `${RDTDirection}`;
 export type Alignment = `${RDTAlignment}`;
@@ -19,6 +18,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 +56,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,11 +1,12 @@
-import { TableColumn } from '../types';
-import HorizontalStickyHeader from '../components/HorizontalStickyHeader';
 import { getPinnedColumnStyles } from '../components/helpers';
+import HorizontalStickyHeader from '../components/HorizontalStickyHeader';
+import { type TableColumn, type HorizontalStickyHeaderText } from '../types';
 
 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,4 +1,22 @@
-import { Row, ColumnDef, SortingState } from '@tanstack/react-table';
+import { type Row, type ColumnDef, type 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. */
@@ -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;