@indico-data/design-system 3.20.0 → 3.22.0

package/lib/types.d.ts

@@ -1,6 +1,6 @@
 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 PillColor, type PillSize, type PillVariant, type PillType } from './components/pill/types';
 import { type TableProps, type TableColumn, type Direction, type Alignment } from './components/table/types';
 export type PermafrostComponent = {
     id?: string;
@@ -14,4 +14,4 @@ export type Color = ChromaticColor | 'black' | 'white';
 export type SemanticColor = 'neutral' | 'info' | 'warning' | 'error' | 'success' | 'pending';
 export type { SelectOption };
 export type { TableProps, TableColumn, Direction, Alignment };
-export type { PillColor, PillSize };
+export type { PillColor, PillSize, PillVariant, PillType };

package/package.json

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

package/src/components/forms/form/styles/Form.scss

@@ -26,7 +26,7 @@ form {
     }
 
     &:hover {
-      border-color: var(--pf-semantic-border-hover);
+      border-color: var(--pf-semantic-border-quaternary);
     }
     &:focus {
       border-color: var(--pf-semantic-border-accent);

package/src/components/forms/select/styles/Select.scss

@@ -7,7 +7,7 @@
       box-shadow: none;
 
       &:hover:not(:focus) {
-        border-color: var(--pf-semantic-border-hover);
+        border-color: var(--pf-semantic-border-quaternary);
       }
 
       &:focus,

package/src/components/index.ts

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

package/src/components/pill/Pill.mdx

@@ -1,11 +1,20 @@
 import { Canvas, Meta, Controls, Story } from '@storybook/blocks';
 import * as Pill from './Pill.stories';
 
-<Meta title="Layout/Pill" name="Pill" of={Pill} />
+<Meta title="Components/Pill" name="Pill" of={Pill} />
 
 # Pill
 
-Pills are used to display information in a compact way. They are often used to display tags, categories, or statuses.
+A visual indicator for a value or status descriptor for UI elements.
+Pills help highlight important information such as notifications, statuses, or
+categories. They're primarily used for communicating secondary or additional
+information alongside text.
+
+Use `color` and `variant` (solid/outline) to control appearance, `type` to choose
+between pill (fully rounded, default) or badge (rounded corners), and `size` for sm/md/lg.
+Add `dot`, `iconLeft`, `iconRight`, or `onClose` to extend functionality as needed.
+
+[Figma source](https://www.figma.com/design/FTAaDRrAYaBCKoUvlbx2BD/Indico---Design-System?node-id=1766-27393&m=dev)
 
 <Canvas of={Pill.Default} />
 
@@ -13,12 +22,62 @@ Pills are used to display information in a compact way. They are often used to d
 
 ## Sizes
 
-<Story of={Pill.AllSizes} />
+<Canvas of={Pill.AllSizes} />
+
+## Solid Colors
+
+<Canvas of={Pill.SolidColors} />
+
+## Outline Colors
+
+<Canvas of={Pill.OutlineColors} />
+
+## Badge vs Pill
+
+Badge uses a small border-radius; Pill is fully rounded.
+
+<Canvas of={Pill.BadgeVsPill} />
+
+## With Icon Left
+
+<Canvas of={Pill.WithIconLeft} />
+
+## With Icon Right
+
+<Canvas of={Pill.WithIconRight} />
+
+## With Dot
+
+<Canvas of={Pill.WithDot} />
+
+## Icon Only
+
+Omit `children` to render an icon-only pill.
+
+<Canvas of={Pill.IconOnly} />
+
+## Closeable
+
+Pass `onClose` to render a dismiss button.
+
+<Canvas of={Pill.Closeable} />
+
+## Combined
+
+Multiple features can be combined freely.
+
+<Canvas of={Pill.Combined} />
+
+## Full Color × Variant Matrix
+
+<Canvas of={Pill.FullMatrix} />
+
+## Closeable Matrix
 
-## Default Colors
+<Canvas of={Pill.CloseableMatrix} />
 
-<Story of={Pill.AllDefaultColors} />
+## Figma Matrix
 
-# Shades
+Complete matrix matching the [Figma design spec](https://www.figma.com/design/FTAaDRrAYaBCKoUvlbx2BD/Indico---Design-System?node-id=1766-27393&m=dev).
 
-<Story of={Pill.AllShades} />
+<Canvas of={Pill.FigmaMatrix} />

package/src/components/pill/Pill.stories.tsx

@@ -1,82 +1,72 @@
+import {
+  faCheck,
+  faCircleExclamation,
+  faTriangleExclamation,
+  faXmark,
+  faArrowRight,
+  faArrowUp,
+} from '@fortawesome/free-solid-svg-icons';
 import { type Meta, type StoryObj } from '@storybook/react';
-import { Container, Row, Col } from 'react-grid-system';
+import { fn } from '@storybook/test';
 
-import { type ChromaticColor } from '@/types';
+import { registerFontAwesomeIcons } from '@/setup/setupIcons';
 
 import { Pill } from './Pill';
-import { type PillShade } from './types';
+import { type PillColor, type PillVariant, type PillType } from './types';
 
+registerFontAwesomeIcons(
+  faCheck,
+  faCircleExclamation,
+  faTriangleExclamation,
+  faXmark,
+  faArrowRight,
+  faArrowUp,
+);
 
+const SIZES = ['sm', 'md', 'lg'] as const;
+const SIZE_LABELS: Record<(typeof SIZES)[number], string> = {
+  sm: 'Small',
+  md: 'Medium',
+  lg: 'Large',
+};
 
-const CHROMATIC_COLORS: ChromaticColor[] = [
-  'blue',
-  'purple',
+const COLORS: PillColor[] = [
   'red',
+  'purple',
   'yellow',
-  'gray',
+  'blue',
   'green',
+  'gray',
   'pink',
   'orange',
   'teal',
+  'soft',
 ];
 
-const SHADES: PillShade[] = [1, 2, 3, 4, 5];
+const VARIANTS: PillVariant[] = ['solid', 'outline'];
+const TYPES: PillType[] = ['pill', 'badge'];
 
-const meta: Meta = {
+const row: React.CSSProperties = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: 8,
+  alignItems: 'center',
+};
+const section: React.CSSProperties = { marginBottom: 16 };
+
+const meta: Meta<typeof Pill> = {
   title: 'Components/Pill',
   component: Pill,
   argTypes: {
-    className: {
-      control: false,
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'css class name',
-        },
-      },
-    },
-    children: {
-      control: 'text',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'React.ReactNode',
-        },
-      },
-    },
-    color: {
-      control: 'select',
-      options: [
-        'success',
-        'warning',
-        'error',
-        'teal',
-        'neutral',
-        'purple',
-        'info',
-        'pending',
-        'orange',
-      ],
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'success | warning | error | teal | neutral | purple | info | pending | orange',
-        },
-      },
-    },
-
-    size: {
-      control: {
-        type: 'select',
-        options: ['sm', 'md', 'lg'],
-      },
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'sm | md | lg',
-        },
-      },
-    },
+    color: { control: 'select', options: COLORS },
+    size: { control: 'select', options: SIZES },
+    variant: { control: 'select', options: VARIANTS },
+    type: { control: 'select', options: TYPES },
+    iconLeft: { control: 'text' },
+    iconRight: { control: 'text' },
+    dot: { control: 'boolean' },
+    onClose: { control: false },
+    children: { control: 'text' },
   },
 };
 
@@ -86,72 +76,350 @@ type Story = StoryObj<typeof Pill>;
 
 export const Default: Story = {
   args: {
-    children: 'Green',
-    color: 'green',
-  },
-  render: (args) => {
-    return (
-      <Pill color={args.color} size={args.size}>
-        {args.children}
-      </Pill>
-    );
+    children: 'Status',
+    color: 'blue',
+    size: 'md',
+    variant: 'solid',
+    type: 'pill',
   },
 };
 
 export const AllSizes: Story = {
-  render: () => {
-    return (
-      <Container>
-        <Row>
-          <Col>
-            <Pill size="lg">Large (lg)</Pill>
-          </Col>
-          <Col>
-            <Pill size="md">Medium (md)</Pill>
-          </Col>
-          <Col>
-            <Pill size="sm">Small (sm)</Pill>
-          </Col>
-        </Row>
-      </Container>
-    );
-  },
+  render: () => (
+    <div style={row}>
+      <Pill size="sm" color="blue" variant="solid">
+        Small
+      </Pill>
+      <Pill size="md" color="blue" variant="solid">
+        Medium
+      </Pill>
+      <Pill size="lg" color="blue" variant="solid">
+        Large
+      </Pill>
+    </div>
+  ),
+};
+
+export const SolidColors: Story = {
+  render: () => (
+    <div style={row}>
+      {COLORS.map((color) => (
+        <Pill key={color} color={color} variant="solid" size="md">
+          {color}
+        </Pill>
+      ))}
+    </div>
+  ),
+};
+
+export const OutlineColors: Story = {
+  render: () => (
+    <div style={row}>
+      {COLORS.map((color) => (
+        <Pill key={color} color={color} variant="outline" size="md">
+          {color}
+        </Pill>
+      ))}
+    </div>
+  ),
 };
 
-export const AllDefaultColors: Story = {
-  render: () => {
-    return (
-      <Container>
-        <Row justify="start">
-          {CHROMATIC_COLORS.map((color: ChromaticColor) => (
-            <Col key={color} xs="content" className="mb-2">
-              <Pill color={color} size="md">
+export const BadgeVsPill: Story = {
+  render: () => (
+    <div style={row}>
+      {TYPES.map((t) => (
+        <Pill key={t} color="blue" variant="solid" size="md" type={t}>
+          {t}
+        </Pill>
+      ))}
+    </div>
+  ),
+};
+
+export const WithIconLeft: Story = {
+  render: () => (
+    <div style={row}>
+      <Pill color="green" variant="solid" size="sm" iconLeft="fa-check">
+        Approved
+      </Pill>
+      <Pill color="red" variant="outline" size="md" iconLeft="fa-circle-exclamation">
+        Error
+      </Pill>
+      <Pill color="yellow" variant="outline" size="lg" iconLeft="fa-triangle-exclamation">
+        Warning
+      </Pill>
+    </div>
+  ),
+};
+
+export const WithIconRight: Story = {
+  render: () => (
+    <div style={row}>
+      <Pill color="blue" variant="solid" size="sm" iconRight="fa-arrow-right">
+        Next
+      </Pill>
+      <Pill color="purple" variant="outline" size="md" iconRight="fa-arrow-right">
+        Continue
+      </Pill>
+      <Pill color="teal" variant="solid" size="lg" iconRight="fa-arrow-right">
+        Proceed
+      </Pill>
+    </div>
+  ),
+};
+
+export const WithDot: Story = {
+  render: () => (
+    <>
+      {VARIANTS.map((variant) => (
+        <div key={variant} style={section}>
+          <h4 style={{ marginBottom: 8, textTransform: 'capitalize' }}>{variant} + Dot</h4>
+          <div style={row}>
+            {COLORS.map((color) => (
+              <Pill key={`${variant}-${color}`} color={color} variant={variant} size="md" dot>
                 {color}
               </Pill>
-            </Col>
-          ))}
-        </Row>
-      </Container>
-    );
-  },
+            ))}
+          </div>
+        </div>
+      ))}
+    </>
+  ),
 };
 
-export const AllShades: Story = {
-  render: () => {
-    return (
-      <Container>
-        {CHROMATIC_COLORS.map((color: ChromaticColor) => (
-          <Row key={color}>
-            {SHADES.map((shade: PillShade) => (
-              <Col key={`${color}-${shade}`} width={100} className="mb-2">
-                <Pill shade={shade} color={color} size="md">
-                  {color}-{shade}
-                </Pill>
-              </Col>
+export const IconOnly: Story = {
+  render: () => (
+    <div style={row}>
+      <Pill color="green" variant="solid" size="sm" iconLeft="fa-check" />
+      <Pill color="red" variant="outline" size="md" iconLeft="fa-circle-exclamation" />
+      <Pill color="yellow" variant="solid" size="lg" iconLeft="fa-triangle-exclamation" />
+    </div>
+  ),
+};
+
+export const Closeable: Story = {
+  render: () => (
+    <div style={row}>
+      <Pill color="blue" variant="outline" type="pill" size="md" onClose={fn()}>
+        Filter: Active
+      </Pill>
+    </div>
+  ),
+};
+
+export const Combined: Story = {
+  render: () => (
+    <div style={row}>
+      <Pill
+        color="red"
+        variant="outline"
+        size="md"
+        dot
+        iconLeft="fa-circle-exclamation"
+        onClose={fn()}
+      >
+        Critical
+      </Pill>
+      <Pill color="green" variant="solid" size="md" dot iconLeft="fa-check">
+        Complete
+      </Pill>
+      <Pill color="blue" variant="outline" size="md" iconLeft="fa-check" iconRight="fa-arrow-right">
+        Both Icons
+      </Pill>
+    </div>
+  ),
+};
+
+export const FullMatrix: Story = {
+  render: () => (
+    <>
+      {VARIANTS.map((variant) => (
+        <div key={variant} style={section}>
+          <h4 style={{ marginBottom: 8, textTransform: 'capitalize' }}>{variant}</h4>
+          <div style={row}>
+            {COLORS.map((color) => (
+              <Pill key={`${variant}-${color}`} color={color} variant={variant} size="md">
+                {color}
+              </Pill>
             ))}
-          </Row>
-        ))}
-      </Container>
-    );
+          </div>
+        </div>
+      ))}
+    </>
+  ),
+};
+
+export const CloseableMatrix: Story = {
+  render: () => (
+    <>
+      {VARIANTS.map((variant) => (
+        <div key={variant} style={section}>
+          <h4 style={{ marginBottom: 8, textTransform: 'capitalize' }}>{variant} + Close</h4>
+          <div style={row}>
+            {COLORS.map((color) => (
+              <Pill
+                key={`${variant}-${color}`}
+                color={color}
+                variant={variant}
+                size="md"
+                onClose={fn()}
+              >
+                {color}
+              </Pill>
+            ))}
+          </div>
+        </div>
+      ))}
+    </>
+  ),
+};
+
+const th: React.CSSProperties = {
+  padding: '6px 10px',
+  fontSize: 11,
+  fontWeight: 500,
+  textAlign: 'center',
+  borderBottom: '1px solid #ddd',
+  whiteSpace: 'nowrap',
+};
+
+const groupTh: React.CSSProperties = {
+  ...th,
+  borderBottom: '2px solid #ccc',
+  paddingBottom: 4,
+};
+
+const td: React.CSSProperties = {
+  padding: '10px 8px',
+  textAlign: 'center',
+  verticalAlign: 'middle',
+};
+
+const groupSep: React.CSSProperties = {
+  ...td,
+  borderLeft: '1px solid #e8e8e8',
+};
+
+const typeLabel: React.CSSProperties = {
+  writingMode: 'vertical-rl',
+  textOrientation: 'mixed',
+  transform: 'rotate(180deg)',
+  fontSize: 12,
+  fontWeight: 600,
+  padding: '8px 4px',
+  textAlign: 'center',
+  verticalAlign: 'middle',
+};
+
+const colorLabel: React.CSSProperties = {
+  ...td,
+  fontSize: 11,
+  fontWeight: 500,
+  textTransform: 'capitalize',
+  textAlign: 'right',
+  paddingRight: 12,
+};
+
+const FEATURE_GROUPS = [
+  {
+    label: 'False',
+    render: (color: PillColor, size: (typeof SIZES)[number], pillType: PillType) => (
+      <Pill color={color} variant="solid" size={size} type={pillType}>
+        Label
+      </Pill>
+    ),
   },
+  {
+    label: 'Dot',
+    render: (color: PillColor, size: (typeof SIZES)[number], pillType: PillType) => (
+      <Pill color={color} variant="solid" size={size} type={pillType} dot>
+        Label
+      </Pill>
+    ),
+  },
+  {
+    label: 'x-close',
+    render: (color: PillColor, size: (typeof SIZES)[number], pillType: PillType) => (
+      <Pill color={color} variant="solid" size={size} type={pillType} onClose={fn()}>
+        Label
+      </Pill>
+    ),
+  },
+  {
+    label: 'Icons',
+    render: (color: PillColor, size: (typeof SIZES)[number], pillType: PillType) => (
+      <Pill
+        color={color}
+        variant="solid"
+        size={size}
+        type={pillType}
+        iconLeft="fa-arrow-up"
+        iconRight="fa-arrow-up"
+      >
+        Label
+      </Pill>
+    ),
+  },
+  {
+    label: 'Only',
+    render: (color: PillColor, size: (typeof SIZES)[number], pillType: PillType) => (
+      <Pill color={color} variant="solid" size={size} type={pillType} iconLeft="fa-arrow-up" />
+    ),
+  },
+] as const;
+
+export const FigmaMatrix: Story = {
+  render: () => (
+    <table style={{ borderCollapse: 'collapse', fontSize: 13 }}>
+      <thead>
+        <tr>
+          <th style={th} />
+          <th style={th} />
+          {FEATURE_GROUPS.map((g) => (
+            <th key={g.label} style={groupTh} colSpan={3}>
+              {g.label}
+            </th>
+          ))}
+        </tr>
+        <tr>
+          <th style={th} />
+          <th style={th} />
+          {FEATURE_GROUPS.map((g) =>
+            SIZES.map((s, si) => (
+              <th
+                key={`${g.label}-${s}`}
+                style={si === 0 ? { ...th, borderLeft: '1px solid #e8e8e8' } : th}
+              >
+                {SIZE_LABELS[s]}
+              </th>
+            )),
+          )}
+        </tr>
+      </thead>
+      <tbody>
+        {TYPES.map((pillType) =>
+          COLORS.map((color, ci) => (
+            <tr
+              key={`${pillType}-${color}`}
+              style={ci === COLORS.length - 1 ? { borderBottom: '2px solid #ddd' } : undefined}
+            >
+              {ci === 0 && (
+                <td style={typeLabel} rowSpan={COLORS.length}>
+                  {pillType}
+                </td>
+              )}
+              <td style={colorLabel}>{color}</td>
+              {FEATURE_GROUPS.map((g) =>
+                SIZES.map((s, si) => (
+                  <td key={`${g.label}-${s}`} style={si === 0 ? groupSep : td}>
+                    {g.render(color, s, pillType)}
+                  </td>
+                )),
+              )}
+            </tr>
+          )),
+        )}
+      </tbody>
+    </table>
+  ),
 };