@indico-data/design-system 3.22.1 → 3.23.0

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",
   "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';

package/src/components/alert/styles/Alert.scss

@@ -0,0 +1,139 @@
+$alert-types: 'warning', 'info', 'success', 'error';
+
+.alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--pf-spacing-md);
+  padding: var(--pf-spacing-2xl);
+  border-radius: var(--pf-border-radius-md);
+  background-color: var(--pf-semantic-background-secondary);
+  font-family: var(--pf-font-family);
+  box-shadow:
+    0 4px 6px -4px var(--pf-semantic-elevation-1),
+    0 10px 15px -3px var(--pf-semantic-elevation-1);
+
+  // ------- Size: small (compact inline) -------
+  &--small {
+    padding: var(--pf-spacing-sm);
+    align-items: center;
+    box-shadow: none;
+  }
+
+  // ------- Variant: bordered -------
+  &--bordered {
+    border: 1px solid var(--alert-border-color);
+  }
+
+  // ------- Type-specific icon colors (soft uses semantic utility tokens) -------
+  &--soft-warning > .icon {
+    color: var(--pf-semantic-utility-warning-default);
+  }
+  &--soft-info > .icon {
+    color: var(--pf-semantic-utility-info-default);
+  }
+  &--soft-success > .icon {
+    color: var(--pf-semantic-utility-success-default);
+  }
+  &--soft-error > .icon {
+    color: var(--pf-semantic-utility-error-default);
+  }
+
+  // ------- Type-specific bordered colors (from component tokens) -------
+  @each $type in $alert-types {
+    &--bordered-#{$type} {
+      --alert-border-color: var(--pf-alert-bordered-#{$type}-border);
+
+      > .icon {
+        color: var(--pf-alert-bordered-#{$type}-icon);
+      }
+
+      .alert__title {
+        color: var(--pf-alert-bordered-#{$type}-text);
+      }
+    }
+
+    &--tinted#{&}--bordered-#{$type} {
+      background-color: var(--pf-alert-bordered-#{$type}-bg);
+    }
+  }
+
+  // ------- Sub-elements -------
+  > .icon {
+    flex-shrink: 0;
+  }
+
+  &__body {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__title {
+    font-size: var(--pf-font-size-md);
+    font-weight: var(--pf-font-weight-semibold);
+    line-height: 20px;
+    color: var(--pf-semantic-font-regular);
+    margin-bottom: var(--pf-spacing-xxs);
+  }
+
+  &__message {
+    font-size: var(--pf-font-size-md);
+    font-weight: var(--pf-font-weight-regular);
+    line-height: 20px;
+    color: var(--pf-semantic-font-regular);
+
+    a {
+      color: var(--pf-semantic-font-link);
+      text-decoration: underline;
+    }
+  }
+
+  &--has-title .alert__message {
+    color: var(--pf-semantic-font-soft);
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--pf-spacing-sm);
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
+  &__action {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-family: var(--pf-font-family);
+    font-size: var(--pf-font-size-md);
+    font-weight: var(--pf-font-weight-medium);
+    line-height: 20px;
+    color: var(--pf-semantic-font-link);
+    padding: 0;
+    white-space: nowrap;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    padding: var(--pf-spacing-xxs);
+    border-radius: var(--pf-border-radius-xs);
+    color: var(--pf-semantic-font-soft);
+    line-height: 1;
+    transition:
+      color 0.15s ease,
+      background-color 0.15s ease;
+
+    &:hover {
+      color: var(--pf-semantic-font-regular);
+    }
+  }
+}

package/src/components/alert/styles/_tokens.scss

@@ -0,0 +1,71 @@
+// ============================================================================
+// ALERT COMPONENT TOKENS (internal)
+// ============================================================================
+// These CSS custom properties are implementation details of the Alert component.
+// They provide light/dark theme values for the bordered variant's per-type
+// accent colors (border, title text, icon). The soft variant uses semantic
+// utility tokens directly and doesn't need component-level overrides.
+//
+// Consumers should style alerts through the component props, not by
+// overriding these variables.
+//
+// Aligned with Figma's "Alert" variable group.
+
+// ============================================================================
+// Bordered variant - Light Theme
+// ============================================================================
+:root,
+:root [data-theme='light'] {
+  // Bordered / Warning
+  --pf-alert-bordered-warning-bg: var(--pf-yellow-color-150);
+  --pf-alert-bordered-warning-border: var(--pf-yellow-color-400);
+  --pf-alert-bordered-warning-text: var(--pf-yellow-color-600);
+  --pf-alert-bordered-warning-icon: var(--pf-yellow-color-400);
+
+  // Bordered / Info
+  --pf-alert-bordered-info-bg: var(--pf-blue-color-150);
+  --pf-alert-bordered-info-border: var(--pf-secondary-color-400);
+  --pf-alert-bordered-info-text: var(--pf-secondary-color-500);
+  --pf-alert-bordered-info-icon: var(--pf-secondary-color-400);
+
+  // Bordered / Success
+  --pf-alert-bordered-success-bg: var(--pf-green-color-150);
+  --pf-alert-bordered-success-border: var(--pf-green-color-450);
+  --pf-alert-bordered-success-text: var(--pf-green-color-600);
+  --pf-alert-bordered-success-icon: var(--pf-green-color-500);
+
+  // Bordered / Error
+  --pf-alert-bordered-error-bg: var(--pf-red-color-150);
+  --pf-alert-bordered-error-border: var(--pf-red-color-250);
+  --pf-alert-bordered-error-text: var(--pf-red-color-500);
+  --pf-alert-bordered-error-icon: var(--pf-red-color-450);
+}
+
+// ============================================================================
+// Bordered variant - Dark Theme
+// ============================================================================
+:root [data-theme='dark'] {
+  // Bordered / Warning
+  --pf-alert-bordered-warning-bg: var(--pf-yellow-color-800);
+  --pf-alert-bordered-warning-border: var(--pf-yellow-color-500);
+  --pf-alert-bordered-warning-text: var(--pf-yellow-color-300);
+  --pf-alert-bordered-warning-icon: var(--pf-yellow-color-300);
+
+  // Bordered / Info
+  --pf-alert-bordered-info-bg: var(--pf-blue-color-700);
+  --pf-alert-bordered-info-border: var(--pf-secondary-color-500);
+  --pf-alert-bordered-info-text: var(--pf-secondary-color-250);
+  --pf-alert-bordered-info-icon: var(--pf-secondary-color-250);
+
+  // Bordered / Success
+  --pf-alert-bordered-success-bg: var(--pf-green-color-800);
+  --pf-alert-bordered-success-border: var(--pf-green-color-600);
+  --pf-alert-bordered-success-text: var(--pf-green-color-300);
+  --pf-alert-bordered-success-icon: var(--pf-green-color-300);
+
+  // Bordered / Error
+  --pf-alert-bordered-error-bg: var(--pf-red-color-700);
+  --pf-alert-bordered-error-border: var(--pf-red-color-500);
+  --pf-alert-bordered-error-text: var(--pf-red-color-300);
+  --pf-alert-bordered-error-icon: var(--pf-red-color-300);
+}

package/src/components/alert/types.ts

@@ -0,0 +1,28 @@
+import type React from 'react';
+
+export type AlertType = 'warning' | 'info' | 'success' | 'error';
+export type AlertVariant = 'soft' | 'bordered';
+export type AlertSize = 'small' | 'large';
+
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Semantic type — controls the icon and accent color */
+  type: AlertType;
+  /** Visual style: soft (subtle bg) or bordered (colored border) */
+  variant?: AlertVariant;
+  /** Size: large (banner) or small (compact inline) */
+  size?: AlertSize;
+  /** When true, the bordered variant uses a type-specific tinted background instead of surface-secondary */
+  tinted?: boolean;
+  /** Optional title — when provided, renders above the message */
+  title?: string;
+  /** Alert body / message content */
+  children: React.ReactNode;
+  /** Optional action button label */
+  actionText?: string;
+  /** Called when the action button is clicked */
+  onAction?: () => void;
+  /** Called when the close button is clicked — omit to hide the close button */
+  onClose?: () => void;
+  /** Accessible label for the close button (for i18n) */
+  closeAriaLabel?: string;
+}

package/src/components/index.ts

@@ -21,6 +21,7 @@ export { InputDateRangePicker } from './forms/date/inputDateRangePicker';
 export { Modal, ConfirmationModal } from './modal';
 export { Badge } from './badge';
 export { Pill } from './pill';
+export { Alert } from './alert';
 export { Pagination } from './pagination';
 export { TanstackTable } from './tanstackTable';
 export { Tooltip } from './tooltip';

package/src/components/pill/Pill.mdx

@@ -68,6 +68,33 @@ Multiple features can be combined freely.
 
 <Canvas of={Pill.Combined} />
 
+## Shading
+
+Use `shade` and `shadeCount` to visually differentiate pills within a single color.
+The middle shade renders the base color; shades below the midpoint blend toward white
+(up to 30% lighter), shades above blend toward black (up to 30% darker). Text and icons
+stay at full strength throughout.
+
+Pass both props together — `shade` is the 1-based index of this pill, `shadeCount` is
+the total number of pills in the group. When either prop is omitted the pill renders
+at full color as usual.
+
+<Canvas of={Pill.Shaded} />
+
+<Controls of={Pill.Shaded} />
+
+### Spectrum across colors
+
+Every chromatic color works with shading, in both solid and outline variants.
+
+<Canvas of={Pill.ShadedSpectrum} />
+
+### Dynamic shade counts
+
+The distribution adapts to any group size — no fixed token set required.
+
+<Canvas of={Pill.ShadedDynamicCount} />
+
 ## Full Color × Variant Matrix
 
 <Canvas of={Pill.FullMatrix} />