@indico-data/design-system 3.18.0 → 3.20.0

package/lib/setup/setupIcons.d.ts

@@ -1,2 +1,2 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { type IconDefinition } from '@fortawesome/fontawesome-svg-core';
 export declare const registerFontAwesomeIcons: (...icons: IconDefinition[]) => void;

package/lib/storybook/formArgTypes.d.ts

@@ -1,4 +1,4 @@
-import { ArgTypes } from '@storybook/react';
+import { type ArgTypes } from '@storybook/react';
 declare const labelArgTypes: ArgTypes;
 declare const baseInputArgTypes: ArgTypes;
 declare const inputArgTypes: ArgTypes;

package/lib/stylesAndAnimations/borders/BorderColor.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { BorderColor } from './BorderColor';
 declare const meta: Meta<typeof BorderColor>;
 export default meta;

package/lib/stylesAndAnimations/borders/BorderRadius.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { BorderRadius } from './BorderRadius';
 declare const meta: Meta<typeof BorderRadius>;
 export default meta;

package/lib/stylesAndAnimations/borders/BorderStyles.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { BorderStyles } from './BorderStyles';
 declare const meta: Meta<typeof BorderStyles>;
 export default meta;

package/lib/stylesAndAnimations/borders/BorderThickness.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { BorderThickness } from './BorderThickness';
 declare const meta: Meta<typeof BorderThickness>;
 export default meta;

package/lib/stylesAndAnimations/colors/UtilityClasses.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { UtilityClasses } from './UtilityClasses';
 declare const meta: Meta<typeof UtilityClasses>;
 export default meta;

package/lib/stylesAndAnimations/sizing/Sizing.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { Sizing } from './Sizing';
 declare const meta: Meta<typeof Sizing>;
 export default meta;

package/lib/stylesAndAnimations/typography/Typography.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { Typography } from './Typography';
 declare const meta: Meta<typeof Typography>;
 export default meta;

package/lib/stylesAndAnimations/utilityClasses/UtilityClassesTable.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { UtilityClassesTable } from './UtilityClassesTable';
 declare const meta: Meta<typeof UtilityClassesTable>;
 export default meta;

package/lib/types.d.ts

@@ -1,17 +1,17 @@
+import { type SelectOption } from './components/forms/select/types';
+import { type IconSizes, type IconName } from './components/icons/types';
+import { type PillColor, type PillSize } from './components/pill/types';
+import { type TableProps, type TableColumn, type Direction, type Alignment } from './components/table/types';
 export type PermafrostComponent = {
     id?: string;
     className?: string;
     'data-cy'?: string;
     'data-testid'?: string;
 };
-import { IconSizes, IconName } from './components/icons/types';
 export type { IconSizes, IconName };
 export type ChromaticColor = 'blue' | 'purple' | 'red' | 'yellow' | 'gray' | 'green' | 'pink' | 'orange' | 'teal';
 export type Color = ChromaticColor | 'black' | 'white';
 export type SemanticColor = 'neutral' | 'info' | 'warning' | 'error' | 'success' | 'pending';
-import { SelectOption } from './components/forms/select/types';
 export type { SelectOption };
-import { TableProps, TableColumn, Direction, Alignment } from './components/table/types';
 export type { TableProps, TableColumn, Direction, Alignment };
-import { PillColor, PillSize } from './components/pill/types';
 export type { PillColor, PillSize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "3.18.0",
+  "version": "3.20.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",
@@ -20,9 +20,11 @@
     "test": "DEBUG_PRINT_LIMIT=10000 jest",
     "test:watch": "DEBUG_PRINT_LIMIT=10000 jest --watch",
     "all-releases": "npm view @indico-data/design-system versions",
-    "latest-release": "npm dist-tags ls @indico-data/design-system"
+    "latest-release": "npm dist-tags ls @indico-data/design-system",
+    "prepare": "husky"
   },
   "lint-staged": {
+    "*.{ts,tsx}": "eslint --max-warnings 0",
     "**/*": "prettier --write --ignore-unknown"
   },
   "dependencies": {
@@ -73,6 +75,7 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
+    "@sanity/eslint-plugin-i18n": "^1.1.0",
     "@storybook/addon-a11y": "^8.0.8",
     "@storybook/addon-docs": "^8.0.8",
     "@storybook/addon-essentials": "^8.0.8",
@@ -114,9 +117,12 @@
     "babel-preset-react-app": "^10.0.1",
     "css-loader": "5.2.6",
     "eslint": "^8.56.0",
+    "eslint-plugin-i18next": "^6.1.3",
+    "eslint-plugin-import": "2.29.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "html-webpack-plugin": "^5.6.5",
+    "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

package/src/components/badge/Badge.stories.tsx

@@ -1,9 +1,10 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { Badge } from './Badge';
-import { Col, Container, Row } from '../grid';
 import { FloatUI } from '../floatUI';
-import { Menu } from '../menu';
+import { Col, Container, Row } from '../grid';
 import { Icon } from '../icons';
+import { Menu } from '../menu';
 
 const meta: Meta = {
   title: 'Components/Badge',

package/src/components/badge/Badge.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import { BadgeProps } from './types';
+
+import { type BadgeProps } from './types';
 
 export const Badge = ({ className = '', children, size = 'md', string, ...rest }: BadgeProps) => {
   const badgeClasses = classNames(

package/src/components/badge/__tests__/Badge.test.tsx

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

package/src/components/button/Button.stories.tsx

@@ -1,9 +1,10 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Button, Col, Row } from '@/components';
-import { iconNames } from '@/storybook/iconNames';
 import { fas } from '@fortawesome/free-solid-svg-icons';
-import { registerFontAwesomeIcons } from '@/setup/setupIcons';
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import { Button, Col, Row } from '@/components';
 import { indiconDefinitions } from '@/components/icons/indicons';
+import { registerFontAwesomeIcons } from '@/setup/setupIcons';
+import { iconNames } from '@/storybook/iconNames';
 
 registerFontAwesomeIcons(...Object.values(fas), ...indiconDefinitions);
 

package/src/components/button/Button.tsx

@@ -1,9 +1,12 @@
-import React, { forwardRef } from 'react';
 import classNames from 'classnames';
+import { forwardRef } from 'react';
+
+import { type ButtonProps } from './types';
 import { Icon } from '../icons/Icon';
-import { IconSizes } from '../icons/types';
+import { type IconSizes } from '../icons/types';
+
+import type React from 'react';
 
-import { ButtonProps } from './types';
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
@@ -20,7 +23,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
     size = 'md',
     onMouseExit,
     className,
-    href,
+    // Destructure unused prop to prevent leaking to DOM
+    href: _href,
     ...rest
   } = props;
 
@@ -79,35 +83,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

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+
 import { Button } from '@/components/button';
 
 const onClick = jest.fn();
@@ -52,11 +53,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 +65,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 +78,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 +103,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 +126,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 +136,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 +150,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 +162,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 +174,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 +190,7 @@ describe('Button', () => {
           Button
         </Button>,
       );
-      const icon = screen.getByLabelText('check Icon');
+      const icon = screen.getByLabelText('check');
       expect(icon).toHaveClass('icon--xs');
     });
 
@@ -197,7 +200,7 @@ describe('Button', () => {
           Button
         </Button>,
       );
-      const icon = screen.getByLabelText('check Icon');
+      const icon = screen.getByLabelText('check');
       expect(icon).toHaveClass('icon--sm');
     });
 
@@ -207,7 +210,7 @@ describe('Button', () => {
           Button
         </Button>,
       );
-      const icon = screen.getByLabelText('check Icon');
+      const icon = screen.getByLabelText('check');
       expect(icon).toHaveClass('icon--md');
     });
 
@@ -217,7 +220,7 @@ describe('Button', () => {
           Button
         </Button>,
       );
-      const icon = screen.getByLabelText('check Icon');
+      const icon = screen.getByLabelText('check');
       expect(icon).toHaveClass('icon--md');
     });
 
@@ -227,18 +230,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/button/types.ts

@@ -1,4 +1,4 @@
-import { IconName } from '../../types';
+import { type IconName } from '../../types';
 
 export type ButtonVariants = 'solid' | 'outline' | 'link' | 'action' | 'destructive' | 'soft';
 

package/src/components/card/Card.stories.tsx

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

package/src/components/card/Card.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
 import classNames from 'classnames';
 
+import type React from 'react';
+
 type Props = {
   /** Additional classes for the card component */
   className?: string;

package/src/components/card/__tests__/Card.test.tsx

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

package/src/components/floatUI/FloatUI.stories.tsx

@@ -1,9 +1,10 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { useState } from 'react';
+
 import { FloatUI } from './FloatUI';
+import { type FloatUIProps } from './types';
 import { Button } from '../button';
 import { Menu } from '../menu';
-import { FloatUIProps } from './types';
 
 const meta: Meta<typeof FloatUI> = {
   title: 'Components/FloatUI',

package/src/components/floatUI/FloatUI.tsx

@@ -1,21 +1,20 @@
-import React, { useRef, isValidElement, useState } from 'react';
 import {
   FloatingPortal,
   useClick,
   useHover,
   useFloating,
   useInteractions,
-  UseFloatingOptions,
+  type UseFloatingOptions,
   offset,
   flip,
   shift,
-  Placement,
+  type Placement,
   useDismiss,
-  ReferenceType,
-  VirtualElement,
   autoUpdate,
 } from '@floating-ui/react';
-import { FloatUIProps } from './types';
+import React, { useRef, isValidElement, useState } from 'react';
+
+import { type FloatUIProps } from './types';
 
 const defaultOptions: UseFloatingOptions = {
   placement: 'bottom-start' as Placement,
@@ -69,7 +68,7 @@ export function FloatUI({
     },
     whileElementsMounted: disableAutoUpdate
       ? undefined
-      : (floatingOptions.whileElementsMounted ?? autoUpdate),
+      : floatingOptions.whileElementsMounted ?? autoUpdate,
     elements: {
       reference: referenceElement as Element | null,
     },

package/src/components/floatUI/__tests__/FloatUI.test.tsx

@@ -1,9 +1,11 @@
 import { render, screen, fireEvent } from '@testing-library/react';
-import { FloatUI } from '../FloatUI';
-import { Menu } from '../../menu';
-import { Button } from '../../button';
 import userEvent from '@testing-library/user-event';
 
+import { Button } from '../../button';
+import { Menu } from '../../menu';
+import { FloatUI } from '../FloatUI';
+
+
 describe('FloatUI Component', () => {
   it('does not display FloatUI content initially when rendered in uncontrolled mode', () => {
     render(

package/src/components/floatUI/types.ts

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { UseFloatingOptions } from '@floating-ui/react-dom';
+import { type UseFloatingOptions } from '@floating-ui/react-dom';
+import { type ReactElement } from 'react';
 
 export type FloatUIProps = {
   /** An array of exactly two elements: the first element is the trigger that opens the FloatUI, and the second element is the content displayed within the FloatUI. */

package/src/components/forms/checkbox/Checkbox.stories.tsx

@@ -1,7 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Checkbox } from './Checkbox';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
+import { Checkbox } from './Checkbox';
+
 const meta: Meta = {
   title: 'Forms/Checkbox',
   component: Checkbox,

package/src/components/forms/checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
 
 export interface CheckboxProps {
   ref?: React.LegacyRef<HTMLInputElement>;

package/src/components/forms/checkbox/__tests__/Checkbox.test.tsx

@@ -1,7 +1,8 @@
 import { render, screen } from '@testing-library/react';
-import { Checkbox } from '@/components/forms/checkbox/Checkbox';
 import userEvent from '@testing-library/user-event';
 
+import { Checkbox } from '@/components/forms/checkbox/Checkbox';
+
 const handleOnChange = jest.fn();
 
 describe('checkbox', () => {

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

@@ -1,5 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { useArgs } from '@storybook/preview-api';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { DatePicker } from './DatePicker';
 
 const meta: Meta = {
@@ -240,6 +241,16 @@ const meta: Meta = {
         },
       },
     },
+    text: {
+      control: 'object',
+      description: 'Customizable text.',
+      table: {
+        category: 'i18n Text',
+        type: {
+          summary: '{ selectTime?: string }',
+        },
+      },
+    },
   },
 };