@indico-data/design-system 2.47.3 → 2.49.0

package/src/components/table/sampleData.tsx

@@ -0,0 +1,436 @@
+import { TableColumn } from './types';
+import { useState } from 'react';
+import { Table } from './Table';
+
+export interface SampleDataRow {
+  name: string;
+  class: string;
+  age: number;
+  weapon: string;
+  backstory: string;
+  favoriteMeal: string;
+  homeland: string;
+  alignment: string;
+  specialAbility: string;
+  test: string;
+}
+
+export const sampleData: SampleDataRow[] = [
+  {
+    name: 'Thalion',
+    class: 'Ranger',
+    age: 120,
+    weapon: 'Longbow',
+    backstory: 'Raised by wolves in the deep forests.',
+    favoriteMeal: 'Venison stew',
+    homeland: 'Silverleaf Forest',
+    alignment: 'Neutral Good',
+    specialAbility: 'Beast Speech',
+    test: 'test',
+  },
+  {
+    name: 'Brom',
+    class: 'Fighter',
+    age: 35,
+    weapon: 'Greatsword',
+    backstory: 'A former soldier seeking redemption.',
+    favoriteMeal: 'Roasted boar',
+    homeland: 'Kingdom of Valorhaven',
+    alignment: 'Lawful Good',
+    specialAbility: 'Battle Master',
+    test: 'test',
+  },
+  {
+    name: 'Elysia',
+    class: 'Cleric',
+    age: 60,
+    weapon: 'Mace',
+    backstory: 'A devoted follower of the goddess of life.',
+    favoriteMeal: 'Vegetable soup',
+    homeland: 'Temple of Dawn',
+    alignment: 'Lawful Good',
+    specialAbility: 'Divine Healing',
+    test: 'test',
+  },
+  {
+    name: 'Faelar',
+    class: 'Rogue',
+    age: 80,
+    weapon: 'Dagger',
+    backstory: 'Grew up on the streets of a bustling city.',
+    favoriteMeal: 'Bread and cheese',
+    homeland: 'Shadowport City',
+    alignment: 'Chaotic Neutral',
+    specialAbility: 'Shadow Step',
+    test: 'test',
+  },
+  {
+    name: 'Maelis',
+    class: 'Wizard',
+    age: 200,
+    weapon: 'Staff',
+    backstory: 'A scholar obsessed with ancient magic.',
+    favoriteMeal: 'Mushroom stew',
+    homeland: 'Crystal Spire Academy',
+    alignment: 'Neutral',
+    specialAbility: 'Time Manipulation',
+    test: 'test',
+  },
+  {
+    name: 'Grimm',
+    class: 'Barbarian',
+    age: 40,
+    weapon: 'Battleaxe',
+    backstory: 'Hails from a tribe in the frozen north.',
+    favoriteMeal: 'Grilled salmon',
+    homeland: 'Frostpeak Mountains',
+    alignment: 'Chaotic Good',
+    specialAbility: 'Berserker Rage',
+    test: 'test',
+  },
+  {
+    name: 'Seraphina',
+    class: 'Bard',
+    age: 25,
+    weapon: 'Rapier',
+    backstory: 'A wandering minstrel with a mysterious past.',
+    favoriteMeal: 'Apple pie',
+    homeland: 'Wandering Roads',
+    alignment: 'Chaotic Good',
+    specialAbility: 'Enchanting Voice',
+    test: 'test',
+  },
+  {
+    name: 'Kael',
+    class: 'Druid',
+    age: 75,
+    weapon: 'Scimitar',
+    backstory: 'A guardian of the natural world.',
+    favoriteMeal: 'Berry tart',
+    homeland: 'Emerald Grove',
+    alignment: 'True Neutral',
+    specialAbility: 'Wild Shape',
+    test: 'test',
+  },
+  {
+    name: 'Aria',
+    class: 'Paladin',
+    age: 30,
+    weapon: 'Longsword',
+    backstory: 'A knight on a divine mission.',
+    favoriteMeal: 'Roasted chicken',
+    homeland: 'Radiant Citadel',
+    alignment: 'Lawful Good',
+    specialAbility: 'Holy Smite',
+    test: 'test',
+  },
+  {
+    name: 'Xan',
+    class: 'Warlock',
+    age: 45,
+    weapon: 'Pact Blade',
+    backstory: 'Made a pact with a powerful entity for magic.',
+    favoriteMeal: 'Stuffed peppers',
+    homeland: 'Shadowfell Gate',
+    alignment: 'Lawful Evil',
+    specialAbility: 'Eldritch Blast',
+    test: 'test',
+  },
+  {
+    name: 'Lyra',
+    class: 'Sorcerer',
+    age: 28,
+    weapon: 'Dagger',
+    backstory: 'Born with innate magical abilities.',
+    favoriteMeal: 'Pancakes with syrup',
+    homeland: 'Storm Peaks',
+    alignment: 'Chaotic Neutral',
+    specialAbility: 'Wild Magic',
+    test: 'test',
+  },
+  {
+    name: 'Thorn',
+    class: 'Monk',
+    age: 50,
+    weapon: 'Quarterstaff',
+    backstory: 'A hermit who seeks enlightenment.',
+    favoriteMeal: 'Rice and vegetables',
+    homeland: 'Mountain Sanctuary',
+    alignment: 'Lawful Neutral',
+    specialAbility: 'Ki Mastery',
+    test: 'test',
+  },
+  {
+    name: 'Cassia',
+    class: 'Ranger',
+    age: 32,
+    weapon: 'Shortbow',
+    backstory: 'A hunter with a keen eye.',
+    favoriteMeal: 'Roasted pheasant',
+    homeland: 'Misty Vale',
+    alignment: 'Neutral Good',
+    specialAbility: 'Eagle Eye',
+    test: 'test',
+  },
+  {
+    name: 'Darius',
+    class: 'Fighter',
+    age: 36,
+    weapon: 'Longsword',
+    backstory: 'A mercenary with a heart of gold.',
+    favoriteMeal: 'Beef stew',
+    homeland: 'Free Cities',
+    alignment: 'Neutral Good',
+    specialAbility: 'Second Wind',
+    test: 'test',
+  },
+  {
+    name: 'Iris',
+    class: 'Cleric',
+    age: 60,
+    weapon: 'Warhammer',
+    backstory: 'A healer devoted to the god of light.',
+    favoriteMeal: 'Fresh bread and soup',
+    homeland: 'Sun Temple',
+    alignment: 'Lawful Good',
+    specialAbility: 'Turn Undead',
+    test: 'test',
+  },
+  {
+    name: 'Fenrir',
+    class: 'Barbarian',
+    age: 42,
+    weapon: 'Greataxe',
+    backstory: 'A warrior from a distant land.',
+    favoriteMeal: 'Grilled steak',
+    homeland: 'Northern Wastes',
+    alignment: 'Chaotic Neutral',
+    specialAbility: 'Primal Strike',
+    test: 'test',
+  },
+  {
+    name: 'Luna',
+    class: 'Druid',
+    age: 70,
+    weapon: 'Sickle',
+    backstory: 'A protector of the natural world.',
+    favoriteMeal: 'Fruit salad',
+    homeland: 'Moongrove Forest',
+    alignment: 'Neutral Good',
+    specialAbility: 'Natures Blessing',
+    test: 'test',
+  },
+  {
+    name: 'Orion',
+    class: 'Paladin',
+    age: 33,
+    weapon: 'Halberd',
+    backstory: 'A knight on a holy quest.',
+    favoriteMeal: 'Roasted lamb',
+    homeland: 'Golden Spires',
+    alignment: 'Lawful Good',
+    specialAbility: 'Divine Shield',
+    test: 'test',
+  },
+  {
+    name: 'Astra',
+    class: 'Bard',
+    age: 26,
+    weapon: 'Lute',
+    backstory: 'A musician with a magical voice.',
+    favoriteMeal: 'Honey cake',
+    homeland: 'Singing Valleys',
+    alignment: 'Chaotic Good',
+    specialAbility: 'Sonic Wave',
+    test: 'test',
+  },
+  {
+    name: 'Zephyr',
+    class: 'Rogue',
+    age: 29,
+    weapon: 'Shortsword',
+    backstory: 'A thief with a quick hand.',
+    favoriteMeal: 'Fish and chips',
+    homeland: 'Port Haven',
+    alignment: 'Chaotic Neutral',
+    specialAbility: 'Quick Strike',
+    test: 'test',
+  },
+  {
+    name: 'Thalia',
+    class: 'Wizard',
+    age: 150,
+    weapon: 'Crystal Staff',
+    backstory: 'An archivist of forbidden knowledge.',
+    favoriteMeal: 'Spiced wine and cheese',
+    homeland: 'Arcane Archives',
+    alignment: 'Neutral',
+    specialAbility: 'Spell Mastery',
+    test: 'test',
+  },
+  {
+    name: 'Ragnar',
+    class: 'Fighter',
+    age: 45,
+    weapon: 'War Hammer',
+    backstory: 'A dwarven smith turned adventurer.',
+    favoriteMeal: 'Mead and roasted mutton',
+    homeland: 'Iron Mountains',
+    alignment: 'Lawful Neutral',
+    specialAbility: 'Master Smith',
+    test: 'test',
+  },
+  {
+    name: 'Sylvana',
+    class: 'Ranger',
+    age: 95,
+    weapon: 'Elven Bow',
+    backstory: 'Guardian of the enchanted forest.',
+    favoriteMeal: 'Elvish waybread',
+    homeland: 'Eternal Woods',
+    alignment: 'Neutral Good',
+    specialAbility: 'Forest Walker',
+    test: 'test',
+  },
+  {
+    name: 'Magnus',
+    class: 'Warlock',
+    age: 38,
+    weapon: 'Cursed Dagger',
+    backstory: 'Made a deal with a demon for revenge.',
+    favoriteMeal: 'Blood oranges',
+    homeland: 'Cursed Lands',
+    alignment: 'Neutral Evil',
+    specialAbility: 'Dark Pact',
+    test: 'test',
+  },
+  {
+    name: 'Echo',
+    class: 'Bard',
+    age: 23,
+    weapon: 'Enchanted Violin',
+    backstory: 'Can mimic any sound perfectly.',
+    favoriteMeal: 'Sweet rolls',
+    homeland: 'Harmony Hall',
+    alignment: 'Chaotic Good',
+    specialAbility: 'Perfect Pitch',
+    test: 'test',
+  },
+  {
+    name: 'Korg',
+    class: 'Barbarian',
+    age: 32,
+    weapon: 'Stone Maul',
+    backstory: 'Last survivor of a petrified tribe.',
+    favoriteMeal: 'Raw meat',
+    homeland: 'Stone Peaks',
+    alignment: 'Neutral',
+    specialAbility: 'Stone Skin',
+    test: 'test',
+  },
+  {
+    name: 'Celeste',
+    class: 'Sorcerer',
+    age: 19,
+    weapon: 'Starlight Wand',
+    backstory: 'Born during a celestial convergence.',
+    favoriteMeal: 'Moon cakes',
+    homeland: 'Star Tower',
+    alignment: 'Chaotic Good',
+    specialAbility: 'Celestial Power',
+    test: 'test',
+  },
+  {
+    name: 'Raven',
+    class: 'Rogue',
+    age: 27,
+    weapon: 'Shadow Blade',
+    backstory: 'Professional assassin seeking redemption.',
+    favoriteMeal: 'Whatever their mark is having',
+    homeland: 'Night City',
+    alignment: 'True Neutral',
+    specialAbility: 'Death Strike',
+    test: 'test',
+  },
+  {
+    name: 'Terra',
+    class: 'Druid',
+    age: 156,
+    weapon: 'Living Wood Staff',
+    backstory: 'Speaks with ancient trees.',
+    favoriteMeal: 'Wild mushrooms',
+    homeland: 'Ancient Grove',
+    alignment: 'Neutral Good',
+    specialAbility: 'Tree Speech',
+    test: 'test',
+  },
+  {
+    name: 'Ash',
+    class: 'Monk',
+    age: 29,
+    weapon: 'Flame Fists',
+    backstory: 'Raised by phoenix monks in a volcano.',
+    favoriteMeal: 'Spicy noodles',
+    homeland: 'Phoenix Monastery',
+    alignment: 'Lawful Neutral',
+    specialAbility: 'Fire Fist',
+    test: 'test',
+  },
+];
+
+export const columns: TableColumn<SampleDataRow>[] = [
+  {
+    name: 'Name',
+    selector: (row: SampleDataRow) => row.name,
+    id: 'name',
+    width: '150px',
+  },
+  {
+    name: 'Class',
+    selector: (row) => row.class,
+    id: 'class',
+    width: '150px',
+  },
+  {
+    name: 'Age',
+    selector: (row) => row.age,
+    id: 'age',
+    width: '150px',
+  },
+  {
+    name: 'Weapon',
+    selector: (row) => row.weapon,
+    id: 'weapon',
+    width: '150px',
+  },
+  {
+    name: 'Backstory',
+    selector: (row) => row.backstory,
+    id: 'backstory',
+    width: '150px',
+  },
+  {
+    name: 'Favorite Meal',
+    selector: (row) => row.favoriteMeal,
+    id: 'favoriteMeal',
+    width: '200px',
+  },
+  {
+    name: 'Homeland',
+    selector: (row) => row.homeland,
+    id: 'homeland',
+    width: '200px',
+  },
+  {
+    name: 'Alignment',
+    selector: (row) => row.alignment,
+    id: 'alignment',
+    width: '200px',
+  },
+  {
+    name: 'Special Ability',
+    selector: (row) => row.specialAbility,
+    id: 'specialAbility',
+    width: '200px',
+  },
+];

package/src/components/table/styles/Table.scss

@@ -12,7 +12,7 @@
 
 .table {
   border-radius: var(--pf-rounded);
-  border: var(--pf-border-sm) solid var(--pf-table-border-color);
+  background-color: var(--pf-table-background-color);
 
   &--full-height {
     height: 100%;
@@ -26,17 +26,59 @@
     color: var(--pf-table-font-color);
     border-radius: var(--pf-rounded) !important;
     border: var(--pf-border-sm) solid var(--pf-table-border-color);
+    height: 100%;
+
+    // Webkit scrollbar styles
+    &::-webkit-scrollbar {
+      width: var(--pf-size-2);
+      height: var(--pf-size-2);
+      cursor: pointer;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: var(--pf-table-background-color);
+      border-radius: var(--pf-rounded);
+      cursor: pointer;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--pf-table-border-color);
+      border-radius: var(--pf-rounded);
+      cursor: pointer;
+      &:hover {
+        background: var(--pf-primary-color);
+      }
+    }
+
+    // Firefox scrollbar styles
+    scrollbar-width: thin;
+    scrollbar-color: var(--pf-table-border-color) var(--pf-table-background-color);
+  } // body
+
+  // Pinned Columns
+  .table__column__pin-action {
+    padding: 0;
+    padding-right: var(--pf-padding-1);
+  }
+  .table__column--is-pinned {
+    opacity: 1;
   }
 
+  .table__column--is-not-pinned {
+    opacity: 0.3;
+  }
+
+  .table__header-cell {
+    display: flex;
+    align-items: center;
+  }
+
+  // End Pinned Columns
+
   & > *:nth-child(3) {
     margin-top: auto;
     background-color: transparent;
     border: none;
-
-    .rdt_Pagination {
-      background-color: transparent;
-      border: none;
-    }
   }
   .rdt_Table,
   .rdt_TableRow,
@@ -48,8 +90,7 @@
   .rdt_TableHead,
   .rdt_TableHeadRow,
   .rdt_TableBody,
-  .rdt_ExpanderRow,
-  .rdt_Pagination {
+  .rdt_ExpanderRow {
     background-color: var(--pf-table-background-color);
     color: var(--pf-table-font-color);
   }
@@ -66,32 +107,26 @@
     }
   }
 
-  .rdt_TableHeader {
-    border-radius: var(--pf-rounded) 0;
-    border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
+  .rdt_TableHead {
+    z-index: 3;
   }
 
-  .rdt_TableHeadRow,
-  .rdt_TableRow {
-    & > :first-child {
-      padding-left: var(--pf-padding-4);
-      min-width: 60px;
-      justify-content: left;
-    }
+  .rdt_TableHeader {
+    border-radius: var(--pf-rounded) 0;
+    border: var(--pf-border-sm) solid var(--pf-table-border-color);
+    border-bottom: none;
   }
 
   .rdt_TableRow {
     border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
     border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
     &:hover {
-      .rdt_TableCell {
-        background-color: var(--pf-table-hover-color) !important;
-      }
-    }
+      border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
+      border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
+      outline-color: var(--pf-table-border-color);
 
-    &:first-child {
       .rdt_TableCell {
-        border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
+        background-color: var(--pf-table-hover-color) !important;
       }
     }
   }
@@ -103,6 +138,10 @@
     &:not(:first-child) {
       border-left: var(--pf-border-sm) solid var(--pf-table-border-color);
     }
+
+    &:not(:last-of-type) {
+      border-bottom-width: 0;
+    }
   }
 
   /* Striped: alternating background */
@@ -127,3 +166,12 @@
     }
   }
 }
+
+.table__pagination {
+  padding-bottom: var(--pf-padding-4);
+  padding-top: var(--pf-padding-4);
+  background-color: var(--pf-table-pagination-background-color);
+  padding-left: var(
+    --pf-padding-4
+  ); // buttons have a visual illusion of having a gap, so we add padding to adjust the left side when the total results exist
+}

package/src/components/table/styles/_variables.scss

@@ -27,4 +27,7 @@
   --pf-table-highlighted-color: var(--pf-primary-color);
   --pf-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3);
   --pf-table-font-size: var(--pf-font-size-body2);
+  --pf-table-pagination-background-color: var(--pf-primary-color-700);
+  --pf-table-pinned-column-border-color: var(--pf-primary-color-100);
+  --pf-table-pinned-column-background-color: var(--pf-table-background-color);
 }

package/src/components/table/types.ts

@@ -3,19 +3,31 @@ import {
   Direction as RDTDirection,
   Alignment as RDTAlignment,
   TableColumn as RDTTableColumn,
+  IDataTableProps,
 } from 'react-data-table-component';
+import { CSSObject } from 'styled-components';
 
 export type Direction = `${RDTDirection}`;
 export type Alignment = `${RDTAlignment}`;
-export type TableColumn<T> = RDTTableColumn<T>;
 
-export type TableProps<T> = Omit<
-  RDTTableProps<T>,
-  'disabled' | 'progressPending' | 'direction' | 'subHeaderAlign'
-> & {
+export interface PinnableColumn<T> extends RDTTableColumn<T> {
+  id: string;
+  isPinned?: boolean;
+  style?: CSSObject;
+  position?: number;
+}
+
+export type TableColumn<T> = PinnableColumn<T>;
+
+export interface TableProps<T>
+  extends Omit<IDataTableProps<T>, 'paginationComponent' | 'direction' | 'subHeaderAlign'> {
+  columns: TableColumn<T>[];
   isDisabled?: boolean;
   isLoading?: boolean;
   direction?: Direction;
-  subHeaderAlign?: Alignment;
+  subHeaderAlign?: 'left' | 'right' | 'center';
   isFullHeight?: boolean;
-};
+  totalEntriesText?: string;
+  canPinColumns?: boolean;
+  onPinnedColumnsChange?: (pinnedColumnIds: any[]) => void;
+}

package/src/components/table/utils/processColumns.tsx

@@ -0,0 +1,35 @@
+import { TableColumn } from '../types';
+import HorizontalStickyHeader from '../components/HorizontalStickyHeader';
+import { getPinnedColumnStyles } from '../components/helpers';
+
+export const processColumns = <T,>(
+  columns: TableColumn<T>[],
+  pinnedColumnIds: string[],
+  togglePinnedColumn: (id: string) => void,
+): TableColumn<T>[] => {
+  return columns.map((column, index) => {
+    const dataColumnId = `sticky-column-${index}`;
+    const isPinned = pinnedColumnIds.includes(dataColumnId);
+
+    const headerContent =
+      column.isPinned !== undefined ? (
+        <HorizontalStickyHeader
+          position={index}
+          isPinned={isPinned}
+          onPinColumn={() => togglePinnedColumn(column.id)}
+          pinnedColumnIds={pinnedColumnIds}
+        >
+          {column.name}
+        </HorizontalStickyHeader>
+      ) : (
+        <>{column.name}</>
+      );
+
+    return {
+      ...column,
+      name: headerContent,
+      id: dataColumnId,
+      style: getPinnedColumnStyles(isPinned, index, pinnedColumnIds),
+    };
+  });
+};

package/src/setup/setupIcons.ts

@@ -23,6 +23,8 @@ import {
   faQuestionCircle,
   faCopy,
   faXmark,
+  faChevronLeft,
+  faChevronRight,
 } from '@fortawesome/free-solid-svg-icons';
 import { indiconDefinitions } from '@/components/icons/indicons';
 
@@ -54,6 +56,8 @@ registerFontAwesomeIcons(
   faQuestionCircle,
   faCopy,
   faXmark,
+  faChevronLeft,
+  faChevronRight,
   // backwards compat, don't require registration of custom indicons
   // might want to consider doing so in the future
   ...indiconDefinitions,

package/src/setup/setupTests.ts

@@ -3,3 +3,11 @@ import { configure } from '@testing-library/react';
 import './setupIcons';
 
 configure({ testIdAttribute: 'data-testid' });
+
+class ResizeObserverMock {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+global.ResizeObserver = ResizeObserverMock;

package/src/styles/index.scss

@@ -23,6 +23,7 @@
 @import '../components/forms/date/datePicker/styles/DatePicker.scss';
 @import '../components/badge/styles/Badge.scss';
 @import '../components/modal/styles/Modal.scss';
+@import '../components/pagination/styles/Pagination.scss';
 
 @import '../components/pill/styles/Pill.scss';
 @import 'sheets'; // Port to an sheets component when we build it