@indico-data/design-system 3.22.1 → 3.23.0-beta.1

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

@@ -0,0 +1,3 @@
+import '../../styles/_borders.scss';
+import './borders.scss';
+export declare const BorderStyles: () => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,3 @@
+import '../../styles/_borders.scss';
+import './borders.scss';
+export declare const BorderThickness: () => import("react/jsx-runtime").JSX.Element;

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

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

package/lib/src/stylesAndAnimations/borders/index.d.ts

@@ -0,0 +1,4 @@
+export { BorderColor } from './BorderColor';
+export { BorderStyles } from './BorderStyles';
+export { BorderRadius } from './BorderRadius';
+export { BorderThickness } from './BorderThickness';

package/lib/src/stylesAndAnimations/colors/Colors.d.ts

@@ -0,0 +1 @@
+export declare const Colors: () => import("react/jsx-runtime").JSX.Element;

package/lib/src/stylesAndAnimations/colors/Colors.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Colors } from './Colors';
+declare const meta: Meta<typeof Colors>;
+export default meta;
+type Story = StoryObj<typeof Colors>;
+export declare const Default: Story;

package/lib/src/stylesAndAnimations/colors/Swatch.d.ts

@@ -0,0 +1,8 @@
+import './swatches.scss';
+interface Props {
+    color: string;
+    colorValue: string;
+    shade?: number;
+}
+export declare const Swatch: ({ color, shade, colorValue }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export declare const UtilityClasses: () => import("react/jsx-runtime").JSX.Element;

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

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

package/lib/src/stylesAndAnimations/colors/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const colorList: string[];
+export declare const utilityColorList: string[];
+export declare const lightThemeColors: Record<string, any>;
+export declare const darkThemeColors: Record<string, any>;
+export declare const shades = 9;

package/lib/src/stylesAndAnimations/colors/hooks.d.ts

@@ -0,0 +1 @@
+export declare const useTheme: () => string;

package/lib/src/stylesAndAnimations/colors/index.d.ts

@@ -0,0 +1 @@
+export { Colors } from './Colors';

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

@@ -0,0 +1,2 @@
+import '../../styles/_borders.scss';
+export declare const Sizing: () => import("react/jsx-runtime").JSX.Element;

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

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

package/lib/src/stylesAndAnimations/sizing/index.d.ts

@@ -0,0 +1 @@
+export { Sizing } from './Sizing';

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

@@ -0,0 +1 @@
+export declare const Typography: () => import("react/jsx-runtime").JSX.Element;

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

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

package/lib/src/stylesAndAnimations/typography/index.d.ts

@@ -0,0 +1 @@
+export { Typography } from './Typography';

package/lib/src/types.d.ts

@@ -0,0 +1,19 @@
+export type PermafrostComponent = {
+    id?: string;
+    className?: string;
+    'data-cy'?: string;
+    'data-testid'?: string;
+};
+export type ButtonVariant = 'default' | 'primary' | 'destructive';
+export type ButtonSize = 'normal' | 'large';
+import { IconName } from '../build/generated/iconTypes';
+export type { IconName };
+import { IconSizes } from './components/icons/types';
+export type { IconSizes };
+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 };
+export type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
+import { PillColor, PillSize } from './components/pill/types';
+export type { PillColor, PillSize };

package/lib/stylesAndAnimations/colors/ColorSwatch.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ColorSwatchProps {
+    colorVar: string;
+    withBorder?: boolean;
+}
+export declare const ColorSwatch: React.FC<ColorSwatchProps>;
+export {};

package/lib/stylesAndAnimations/colors/Colors.d.ts

@@ -0,0 +1 @@
+export declare const Colors: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Colors } from './Colors';
+declare const meta: Meta<typeof Colors>;
+export default meta;
+type Story = StoryObj<typeof Colors>;
+export declare const Default: Story;

package/lib/stylesAndAnimations/colors/Swatch.d.ts

@@ -0,0 +1,8 @@
+import './swatches.scss';
+interface Props {
+    color: string;
+    colorValue: string;
+    shade?: number;
+}
+export declare const Swatch: ({ color, shade, colorValue }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/stylesAndAnimations/colors/constants.d.ts

@@ -0,0 +1,23 @@
+interface ColorPalette {
+    base: string;
+    50: string;
+    100: string;
+    150: string;
+    200: string;
+    250: string;
+    300: string;
+    400: string;
+    450: string;
+    500: string;
+    550?: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+}
+interface ThemeColors {
+    [key: string]: ColorPalette;
+}
+export declare const colorList: readonly ["primary", "secondary", "tertiary", "blue", "gray", "green", "orange", "pink", "purple", "red", "teal", "yellow"];
+export declare const themeColors: ThemeColors;
+export {};

package/lib/stylesAndAnimations/colors/index.d.ts

@@ -0,0 +1 @@
+export { Colors } from './Colors';

package/lib/types.d.ts

@@ -1,3 +1,4 @@
+import { type AlertType, type AlertSize, type AlertVariant } from './components/alert/types';
 import { type SelectOption } from './components/forms/select/types';
 import { type IconSizes, type IconName } from './components/icons/types';
 import { type PillColor, type PillSize, type PillVariant, type PillType } from './components/pill/types';
@@ -15,3 +16,4 @@ export type SemanticColor = 'neutral' | 'info' | 'warning' | 'error' | 'success'
 export type { SelectOption };
 export type { TableProps, TableColumn, Direction, Alignment };
 export type { PillColor, PillSize, PillVariant, PillType };
+export type { AlertType, AlertSize, AlertVariant };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "3.22.1",
+  "version": "3.23.0-beta.1",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/alert/Alert.mdx

@@ -0,0 +1,65 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks';
+import * as Alert from './Alert.stories';
+
+<Meta title="Components/Alert" name="Alert" of={Alert} />
+
+# Alert
+
+Inline alerts notify users of a status or action result. They appear at the top
+of a content area or near the item that needs attention.
+
+Use `type` to set the semantic meaning (warning, info, success, error) — the
+icon and accent color are chosen automatically. `variant` controls the visual
+style: **soft** (subtle background) or **bordered** (colored border).
+
+`size` controls density: **large** (default, banner-style) or **small**
+(compact inline). When `tinted` is true on a **bordered** alert, the background
+swaps from neutral to a type-specific tinted color.
+
+Pass `title` to add a heading above the message. Add `actionText` + `onAction`
+for an inline action button, and `onClose` to make it dismissable.
+
+<Canvas of={Alert.Default} />
+
+<Controls of={Alert.Default} />
+
+## Types
+
+<Canvas of={Alert.Types} />
+
+## Variants
+
+<Canvas of={Alert.Variants} />
+
+## Small Bordered
+
+Compact inline alerts without tinted backgrounds.
+
+<Canvas of={Alert.SmallBordered} />
+
+## Small Bordered Tinted
+
+Compact inline alerts with type-specific tinted backgrounds — useful when
+alerts sit alongside content and need stronger visual distinction.
+
+<Canvas of={Alert.SmallBorderedTinted} />
+
+## Small Tinted with Close
+
+<Canvas of={Alert.SmallTintedWithClose} />
+
+## With Title
+
+<Canvas of={Alert.WithTitle} />
+
+## With Action
+
+<Canvas of={Alert.WithAction} />
+
+## Closeable
+
+<Canvas of={Alert.Closeable} />
+
+## Combined
+
+<Canvas of={Alert.Combined} />

package/src/components/alert/Alert.stories.tsx

@@ -0,0 +1,162 @@
+import {
+  faTriangleExclamation,
+  faCircleInfo,
+  faCircleCheck,
+  faCircleExclamation,
+  faXmark,
+} from '@fortawesome/free-solid-svg-icons';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { registerFontAwesomeIcons } from '@/setup/setupIcons';
+
+import { Alert } from './Alert';
+import { type AlertSize, type AlertType, type AlertVariant } from './types';
+
+registerFontAwesomeIcons(
+  faTriangleExclamation,
+  faCircleInfo,
+  faCircleCheck,
+  faCircleExclamation,
+  faXmark,
+);
+
+const TYPES: AlertType[] = ['warning', 'info', 'success', 'error'];
+const VARIANTS: AlertVariant[] = ['soft', 'bordered'];
+const SIZES: AlertSize[] = ['large', 'small'];
+
+const meta: Meta<typeof Alert> = {
+  title: 'Components/Alert',
+  component: Alert,
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 700 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    type: { control: 'select', options: TYPES },
+    variant: { control: 'select', options: VARIANTS },
+    size: { control: 'select', options: SIZES },
+    tinted: { control: 'boolean' },
+    title: { control: 'text' },
+    actionText: { control: 'text' },
+    onAction: { control: false },
+    onClose: { control: false },
+    children: { control: 'text' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Alert>;
+
+export const Default: Story = {
+  args: {
+    type: 'warning',
+    variant: 'soft',
+    children:
+      'This preset may incur additional charges depending on your submission size and usage.',
+  },
+};
+
+export const Types: Story = {
+  render: () => (
+    <>
+      {TYPES.map((type) => (
+        <Alert key={type} type={type}>
+          This is a {type} alert.
+        </Alert>
+      ))}
+    </>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <>
+      {VARIANTS.map((variant) => (
+        <Alert key={variant} type="info" variant={variant}>
+          This is the {variant} variant.
+        </Alert>
+      ))}
+    </>
+  ),
+};
+
+export const WithTitle: Story = {
+  args: {
+    type: 'info',
+    title: 'Info Title',
+    children: (
+      <>
+        An amazing message giving more context. A <a href="#">link</a> can be used in this content.
+      </>
+    ),
+  },
+};
+
+export const WithAction: Story = {
+  args: {
+    type: 'warning',
+    actionText: 'Action',
+    onAction: fn(),
+    children: 'This preset may incur additional charges.',
+  },
+};
+
+export const Closeable: Story = {
+  args: {
+    type: 'success',
+    onClose: fn(),
+    children: 'Your changes have been saved.',
+  },
+};
+
+export const Combined: Story = {
+  args: {
+    type: 'error',
+    variant: 'bordered',
+    title: 'Upload Failed',
+    actionText: 'Retry',
+    onAction: fn(),
+    onClose: fn(),
+    children: 'The file could not be uploaded. Please check your connection and try again.',
+  },
+};
+
+export const SmallBordered: Story = {
+  render: () => (
+    <>
+      {TYPES.map((type) => (
+        <Alert key={type} type={type} variant="bordered" size="small">
+          This is a small bordered {type} alert.
+        </Alert>
+      ))}
+    </>
+  ),
+};
+
+export const SmallBorderedTinted: Story = {
+  render: () => (
+    <>
+      {TYPES.map((type) => (
+        <Alert key={type} type={type} variant="bordered" size="small" tinted>
+          This is a small bordered tinted {type} alert.
+        </Alert>
+      ))}
+    </>
+  ),
+};
+
+export const SmallTintedWithClose: Story = {
+  args: {
+    type: 'info',
+    variant: 'bordered',
+    size: 'small',
+    tinted: true,
+    onClose: fn(),
+    children: 'New correspondence has been added',
+  },
+};

package/src/components/alert/Alert.tsx

@@ -0,0 +1,68 @@
+import classNames from 'classnames';
+
+import { type AlertProps, type AlertType } from './types';
+import { Icon } from '../icons/Icon';
+import { type IconName } from '../icons/types';
+
+const ALERT_ICON: Record<AlertType, IconName> = {
+  warning: 'fa-triangle-exclamation',
+  info: 'fa-circle-info',
+  success: 'fa-circle-check',
+  error: 'fa-circle-exclamation',
+};
+
+export const Alert = ({
+  type,
+  variant = 'soft',
+  size = 'large',
+  tinted = false,
+  title,
+  children,
+  actionText,
+  onAction,
+  onClose,
+  closeAriaLabel = 'Dismiss',
+  className,
+  ...rest
+}: AlertProps) => {
+  return (
+    <div
+      role="alert"
+      className={classNames(
+        'alert',
+        `alert--${variant}`,
+        `alert--${variant}-${type}`,
+        { 'alert--small': size === 'small', 'alert--tinted': tinted, 'alert--has-title': !!title },
+        className,
+      )}
+      {...rest}
+    >
+      <Icon name={ALERT_ICON[type]} size="sm" />
+
+      <div className="alert__body">
+        {title && <div className="alert__title">{title}</div>}
+        <div className="alert__message">{children}</div>
+      </div>
+
+      {((actionText && onAction) || onClose) && (
+        <div className="alert__actions">
+          {actionText && onAction && (
+            <button type="button" className="alert__action" onClick={onAction}>
+              {actionText}
+            </button>
+          )}
+          {onClose && (
+            <button
+              type="button"
+              className="alert__close"
+              onClick={onClose}
+              aria-label={closeAriaLabel}
+            >
+              <Icon name="fa-xmark" size="xs" />
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/alert/__tests__/Alert.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Alert } from '@/components/alert/Alert';
+
+describe('Alert', () => {
+  describe('action button', () => {
+    it('renders action button and calls onAction when clicked', async () => {
+      const user = userEvent.setup();
+      const handleAction = jest.fn();
+      render(
+        <Alert type="info" actionText="Retry" onAction={handleAction}>
+          Something failed
+        </Alert>,
+      );
+      await user.click(screen.getByRole('button', { name: 'Retry' }));
+      expect(handleAction).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not render action button when actionText is provided without onAction', () => {
+      render(
+        <Alert type="info" actionText="Orphan">
+          msg
+        </Alert>,
+      );
+      expect(screen.queryByRole('button', { name: 'Orphan' })).not.toBeInTheDocument();
+    });
+  });
+
+  describe('close button', () => {
+    it('calls onClose when close button is clicked', async () => {
+      const user = userEvent.setup();
+      const handleClose = jest.fn();
+      render(
+        <Alert type="warning" onClose={handleClose}>
+          dismissable
+        </Alert>,
+      );
+      await user.click(screen.getByRole('button', { name: 'Dismiss' }));
+      expect(handleClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('uses custom closeAriaLabel', () => {
+      render(
+        <Alert type="info" onClose={() => {}} closeAriaLabel="Fermer">
+          msg
+        </Alert>,
+      );
+      expect(screen.getByRole('button', { name: 'Fermer' })).toBeInTheDocument();
+    });
+  });
+});

package/src/components/alert/index.ts

@@ -0,0 +1,2 @@
+export { Alert } from './Alert';
+export type { AlertProps, AlertType, AlertVariant, AlertSize } from './types';