@indico-data/design-system 3.20.0 → 3.22.0

package/src/components/pill/Pill.tsx

@@ -1,24 +1,53 @@
 import classNames from 'classnames';
 
-import { type PillProps } from './types';
+import { type PillProps, type PillSize } from './types';
+import { Icon } from '../icons/Icon';
+import { type IconSizes } from '../icons/types';
+
+const PILL_ICON_SIZE: Record<PillSize, IconSizes> = {
+  sm: 'xxs',
+  md: 'xs',
+  lg: 'xs',
+};
 
 export const Pill = ({
   children,
-  className,
   color = 'gray',
   size = 'sm',
-  shade,
+  variant = 'solid',
+  type = 'pill',
+  iconLeft,
+  iconRight,
+  dot,
+  onClose,
+  closeAriaLabel = 'Remove',
+  className,
   ...rest
 }: PillProps) => {
-  const pillClasses = classNames('pill', className, {
-    [`pill--${color}`]: color && !shade,
-    [`pill--${color}-${shade}`]: color && shade,
-    [`pill--${size}`]: size,
-  });
-
   return (
-    <div className={pillClasses} {...rest}>
+    <div
+      className={classNames(
+        'pill',
+        `pill--${type}`,
+        `pill--${size}`,
+        `pill--${variant}-${color}`,
+        className,
+        {
+          'pill--icon-only': !children && (iconLeft || iconRight),
+          'pill--closeable': !!onClose,
+        },
+      )}
+      {...rest}
+    >
+      {dot && <span className="pill__dot" />}
+      {iconLeft && <Icon name={iconLeft} size={PILL_ICON_SIZE[size]} />}
       {children}
+      {iconRight && <Icon name={iconRight} size={PILL_ICON_SIZE[size]} />}
+      {onClose && (
+        <button type="button" className="pill__close" onClick={onClose} aria-label={closeAriaLabel}>
+          <Icon name="fa-xmark" size="xs" />
+        </button>
+      )}
     </div>
   );
 };

package/src/components/pill/__tests__/Pill.test.tsx

@@ -1,61 +1,125 @@
+import { faCheck, faArrowRight } from '@fortawesome/free-solid-svg-icons';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { Pill } from '@/components/pill/Pill';
+import { registerFontAwesomeIcons } from '@/setup/setupIcons';
 
-import { type PillColor, type PillShade, type PillSize } from '../types';
+registerFontAwesomeIcons(faCheck, faArrowRight);
 
+describe('Pill', () => {
+  it('renders children', () => {
+    render(<Pill>Hello</Pill>);
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+  });
 
-const sizes = ['sm', 'md', 'lg'] as PillSize[];
-const colors = [
-  'blue',
-  'purple',
-  'red',
-  'yellow',
-  'gray',
-  'green',
-  'pink',
-  'orange',
-  'teal',
-] as PillColor[];
+  it('applies default classes (gray, sm, solid, pill)', () => {
+    const { container } = render(<Pill>Default</Pill>);
+    const el = container.firstChild as HTMLElement;
+    expect(el).toHaveClass('pill', 'pill--pill', 'pill--sm', 'pill--solid-gray');
+  });
 
-const shades = [1, 2, 3, 4, 5] as PillShade[];
+  it('applies size class for non-default size', () => {
+    const { container } = render(<Pill size="lg">Large</Pill>);
+    expect(container.firstChild).toHaveClass('pill--lg');
+  });
 
-describe('Pill', () => {
-  sizes.forEach((size) => {
-    it(`checks that the proper size class is applied when size is ${size}`, () => {
-      render(
-        <Pill color="blue" size={size} data-testid={`pill-${size}`}>
-          Success
+  it('applies badge type class', () => {
+    const { container } = render(<Pill type="badge">Badge</Pill>);
+    expect(container.firstChild).toHaveClass('pill--badge');
+  });
+
+  describe('colors x variants', () => {
+    it('applies solid color class', () => {
+      const { container } = render(
+        <Pill color="blue" variant="solid">
+          Status
         </Pill>,
       );
-      const pill = screen.getByTestId(`pill-${size}`);
-      expect(pill).toHaveClass(`pill pill--blue pill--${size}`);
+      expect(container.firstChild).toHaveClass('pill--solid-blue');
     });
-  });
 
-  colors.forEach((color) => {
-    it(`checks that the proper style class has been applied when color is ${color}`, () => {
-      render(
-        <Pill color={color} size="md" data-testid={`pill-${color}`}>
+    it('applies outline color class', () => {
+      const { container } = render(
+        <Pill color="red" variant="outline">
+          Status
+        </Pill>,
+      );
+      expect(container.firstChild).toHaveClass('pill--outline-red');
+    });
+
+    it('applies soft color class', () => {
+      const { container } = render(
+        <Pill color="soft" variant="solid">
           Status
         </Pill>,
       );
-      const pill = screen.getByTestId(`pill-${color}`);
-      expect(pill).toHaveClass(`pill pill--${color} pill--md`);
+      expect(container.firstChild).toHaveClass('pill--solid-soft');
     });
   });
 
-  colors.forEach((color) => {
-    shades.forEach((shade) => {
-      it(`checks that the proper style class has been applied when color is ${color} and shade is ${shade}`, () => {
-        render(
-          <Pill color={color} size="md" shade={shade} data-testid={`pill-${color}-${shade}`}>
-            Status
-          </Pill>,
-        );
-        const pill = screen.getByTestId(`pill-${color}-${shade}`);
-        expect(pill).toHaveClass(`pill pill--${color}-${shade} pill--md`);
-      });
+  it('renders a leading icon and sizes it based on pill size', () => {
+    const { container } = render(
+      <Pill iconLeft="fa-check" size="md">
+        With Icon
+      </Pill>,
+    );
+    expect(container.querySelector('.icon--xs')).toBeInTheDocument();
+  });
+
+  it('renders both leading and trailing icons', () => {
+    const { container } = render(
+      <Pill iconLeft="fa-check" iconRight="fa-arrow-right">
+        Both
+      </Pill>,
+    );
+    expect(container.querySelectorAll('.icon')).toHaveLength(2);
+  });
+
+  it('renders a dot element when dot is true', () => {
+    const { container } = render(<Pill dot>Dotted</Pill>);
+    expect(container.querySelector('.pill__dot')).toBeInTheDocument();
+  });
+
+  it('applies pill--icon-only when no children and icon is provided', () => {
+    const { container } = render(<Pill iconLeft="fa-check" />);
+    expect(container.firstChild).toHaveClass('pill--icon-only');
+  });
+
+  describe('onClose', () => {
+    it('renders close button and applies closeable class', () => {
+      const { container } = render(<Pill onClose={() => {}}>Closeable</Pill>);
+      expect(container.querySelector('.pill__close')).toBeInTheDocument();
+      expect(container.firstChild).toHaveClass('pill--closeable');
+    });
+
+    it('calls onClose when close button is clicked', async () => {
+      const user = userEvent.setup();
+      const handleClose = jest.fn();
+      render(<Pill onClose={handleClose}>Close Me</Pill>);
+      await user.click(screen.getByRole('button', { name: 'Remove' }));
+      expect(handleClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('uses custom closeAriaLabel when provided', () => {
+      render(
+        <Pill onClose={() => {}} closeAriaLabel="Supprimer">
+          Close Me
+        </Pill>,
+      );
+      expect(screen.getByRole('button', { name: 'Supprimer' })).toBeInTheDocument();
     });
   });
+
+  it('renders dot + iconLeft + close together', () => {
+    const { container } = render(
+      <Pill dot iconLeft="fa-check" onClose={() => {}}>
+        All Features
+      </Pill>,
+    );
+    expect(container.querySelector('.pill__dot')).toBeInTheDocument();
+    expect(container.querySelector('.icon')).toBeInTheDocument();
+    expect(container.querySelector('.pill__close')).toBeInTheDocument();
+    expect(screen.getByText('All Features')).toBeInTheDocument();
+  });
 });

package/src/components/pill/styles/Pill.scss

@@ -1,41 +1,138 @@
-@import '../../../styles/_colors.scss';
+$pill-colors: 'red', 'purple', 'yellow', 'blue', 'green', 'gray', 'pink', 'orange', 'teal', 'soft';
+$pill-variants: 'solid', 'outline';
 
 .pill {
-  display: inline-block;
-  border-radius: var(--pf-border-radius-xs);
-  padding: var(--pf-spacing-xxs) var(--pf-spacing-sm);
-  font-size: var(--pf-font-size-overline);
-  font-weight: var(--pf-font-weight-medium);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   white-space: nowrap;
-  line-height: 1;
-  color: var(--pf-gray-color-50);
+  border: none;
+  font-family: var(--pf-font-family);
 
+  // ------- Types (border-radius) -------
+  &--badge {
+    border-radius: var(--pf-border-radius-sm);
+  }
+
+  &--pill {
+    border-radius: var(--pf-border-radius-full);
+  }
+
+  // ------- Sizes -------
   &--sm {
     padding: var(--pf-spacing-xxs) var(--pf-spacing-sm);
-    font-size: var(--pf-font-size-overline);
+    font-size: var(--pf-font-size-sm);
+    font-weight: var(--pf-font-weight-semibold);
+    line-height: 16px;
+    gap: var(--pf-spacing-xxs);
   }
 
   &--md {
-    padding: var(--pf-spacing-sm) var(--pf-spacing-lg);
-    font-size: var(--pf-font-size-body);
+    padding: var(--pf-spacing-xxs) var(--pf-spacing-md);
+    font-size: var(--pf-font-size-md);
+    font-weight: var(--pf-font-weight-medium);
+    line-height: 20px;
+    gap: var(--pf-spacing-xs);
   }
 
   &--lg {
-    padding: var(--pf-spacing-lg) var(--pf-spacing-2xl);
-    font-size: var(--pf-font-size-h2);
+    padding: var(--pf-spacing-xs) var(--pf-spacing-lg);
+    font-size: var(--pf-font-size-md);
+    font-weight: var(--pf-font-weight-medium);
+    line-height: 20px;
+    gap: var(--pf-spacing-xs);
+  }
+
+  // LG badge uses border-md (8px) instead of border-sm (6px)
+  &--lg#{&}--badge {
+    border-radius: var(--pf-border-radius-md);
+  }
+
+  // ------- Icon-only (special padding) -------
+  &--icon-only {
+    &.pill--sm {
+      padding: var(--pf-spacing-xxs);
+    }
+
+    &.pill--md {
+      padding: var(--pf-spacing-xs);
+    }
+
+    &.pill--lg {
+      padding: var(--pf-spacing-sm);
+    }
   }
 
-  @each $color in $chromatic-color-names {
-    &--#{$color} {
-      background-color: var(--pf-item-#{$color}-color);
-      border-color: var(--pf-item-#{$color}-color);
+  // ------- Closeable (asymmetric padding) -------
+  &--closeable {
+    &.pill--sm {
+      padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-sm);
     }
 
-    @each $shade, $color-number in $item-shades-to-color-number {
-      &--#{$color}-#{$shade} {
-        background-color: var(--pf-item-#{$color}-#{$shade}-color);
-        border-color: var(--pf-item-#{$color}-#{$shade}-color);
+    &.pill--md {
+      padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-md);
+      gap: var(--pf-spacing-xxs);
+    }
+
+    &.pill--lg {
+      padding: var(--pf-spacing-xs) var(--pf-spacing-sm) var(--pf-spacing-xs) var(--pf-spacing-lg);
+      gap: var(--pf-spacing-xxs);
+    }
+  }
+
+  // ------- Color × Variant  -------
+  @each $variant in $pill-variants {
+    @each $color in $pill-colors {
+      &--#{$variant}-#{$color} {
+        background-color: var(--pf-pill-#{$variant}-#{$color}-bg);
+        color: var(--pf-pill-#{$variant}-#{$color}-text);
+
+        @if $variant == 'outline' {
+          box-shadow: inset 0 0 0 1px var(--pf-pill-#{$variant}-#{$color}-border);
+        }
+
+        > .icon {
+          color: var(--pf-pill-#{$variant}-#{$color}-icon);
+        }
+
+        .pill__dot {
+          background-color: var(--pf-pill-#{$variant}-#{$color}-dot);
+        }
+
+        .pill__close {
+          color: var(--pf-pill-#{$variant}-#{$color}-close);
+
+          &:hover {
+            color: var(--pf-pill-#{$variant}-#{$color}-close-hover);
+            background-color: var(--pf-pill-#{$variant}-#{$color}-close-hover-bg);
+          }
+        }
       }
     }
   }
+
+  // ------- Sub-elements -------
+  &__dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  &__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    padding: var(--pf-spacing-micro);
+    border-radius: var(--pf-border-radius-xs);
+    line-height: 1;
+    aspect-ratio: 1;
+    transition:
+      color 0.15s ease,
+      background-color 0.15s ease;
+  }
 }