@indico-data/design-system 2.47.2 → 2.48.0

package/src/components/table/sampleData.ts

@@ -1,3 +1,5 @@
+import { TableColumn } from './types';
+
 export interface SampleDataRow {
   name: string;
   class: string;
@@ -168,4 +170,112 @@ export const sampleData: SampleDataRow[] = [
     backstory: 'A thief with a quick hand.',
     favoriteMeal: 'Fish and chips',
   },
+  {
+    name: 'Thalia',
+    class: 'Wizard',
+    age: 150,
+    weapon: 'Crystal Staff',
+    backstory: 'An archivist of forbidden knowledge.',
+    favoriteMeal: 'Spiced wine and cheese',
+  },
+  {
+    name: 'Ragnar',
+    class: 'Fighter',
+    age: 45,
+    weapon: 'War Hammer',
+    backstory: 'A dwarven smith turned adventurer.',
+    favoriteMeal: 'Mead and roasted mutton',
+  },
+  {
+    name: 'Sylvana',
+    class: 'Ranger',
+    age: 95,
+    weapon: 'Elven Bow',
+    backstory: 'Guardian of the enchanted forest.',
+    favoriteMeal: 'Elvish waybread',
+  },
+  {
+    name: 'Magnus',
+    class: 'Warlock',
+    age: 38,
+    weapon: 'Cursed Dagger',
+    backstory: 'Made a deal with a demon for revenge.',
+    favoriteMeal: 'Blood oranges',
+  },
+  {
+    name: 'Echo',
+    class: 'Bard',
+    age: 23,
+    weapon: 'Enchanted Violin',
+    backstory: 'Can mimic any sound perfectly.',
+    favoriteMeal: 'Sweet rolls',
+  },
+  {
+    name: 'Korg',
+    class: 'Barbarian',
+    age: 32,
+    weapon: 'Stone Maul',
+    backstory: 'Last survivor of a petrified tribe.',
+    favoriteMeal: 'Raw meat',
+  },
+  {
+    name: 'Celeste',
+    class: 'Sorcerer',
+    age: 19,
+    weapon: 'Starlight Wand',
+    backstory: 'Born during a celestial convergence.',
+    favoriteMeal: 'Moon cakes',
+  },
+  {
+    name: 'Raven',
+    class: 'Rogue',
+    age: 27,
+    weapon: 'Shadow Blade',
+    backstory: 'Professional assassin seeking redemption.',
+    favoriteMeal: 'Whatever their mark is having',
+  },
+  {
+    name: 'Terra',
+    class: 'Druid',
+    age: 156,
+    weapon: 'Living Wood Staff',
+    backstory: 'Speaks with ancient trees.',
+    favoriteMeal: 'Wild mushrooms',
+  },
+  {
+    name: 'Ash',
+    class: 'Monk',
+    age: 29,
+    weapon: 'Flame Fists',
+    backstory: 'Raised by phoenix monks in a volcano.',
+    favoriteMeal: 'Spicy noodles',
+  },
+];
+
+export const columns: TableColumn<SampleDataRow>[] = [
+  {
+    name: 'Name',
+    selector: (row: SampleDataRow) => row.name,
+  },
+  {
+    name: 'Class',
+    selector: (row) => row.class,
+  },
+  {
+    name: 'Age',
+    selector: (row) => row.age,
+    sortable: true,
+  },
+  {
+    name: 'Weapon',
+    selector: (row) => row.weapon,
+  },
+  {
+    name: 'Backstory',
+    selector: (row) => row.backstory,
+  },
+  {
+    name: 'Favorite Meal',
+    selector: (row) => row.favoriteMeal,
+  },
 ];

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,39 @@
     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);
   }
 
   & > *:nth-child(3) {
     margin-top: auto;
     background-color: transparent;
     border: none;
-
-    .rdt_Pagination {
-      background-color: transparent;
-      border: none;
-    }
   }
   .rdt_Table,
   .rdt_TableRow,
@@ -48,8 +70,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);
   }
@@ -68,7 +89,8 @@
 
   .rdt_TableHeader {
     border-radius: var(--pf-rounded) 0;
-    border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
+    border: var(--pf-border-sm) solid var(--pf-table-border-color);
+    border-bottom: none;
   }
 
   .rdt_TableHeadRow,
@@ -127,3 +149,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,5 @@
   --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);
 }

package/src/components/table/types.ts

@@ -3,19 +3,19 @@ import {
   Direction as RDTDirection,
   Alignment as RDTAlignment,
   TableColumn as RDTTableColumn,
+  IDataTableProps,
 } from 'react-data-table-component';
 
 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 TableProps<T>
+  extends Omit<IDataTableProps<T>, 'paginationComponent' | 'direction' | 'subHeaderAlign'> {
   isDisabled?: boolean;
   isLoading?: boolean;
   direction?: Direction;
-  subHeaderAlign?: Alignment;
+  subHeaderAlign?: 'left' | 'right' | 'center';
   isFullHeight?: boolean;
-};
+  totalEntriesText?: string;
+}

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/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

package/src/styles/variables/themes/dark.scss

@@ -69,12 +69,14 @@
   --pf-red-color-100: #fae9e9;
   --pf-red-color-200: #f4d7d8;
   --pf-red-color-300: #ebb6b8;
-  --pf-red-color-400: #df8d91;
+  --pf-red-color-350: #f39bb9;
+  --pf-red-color-400: #ef76a0;
   --pf-red-color-500: #ce6068;
   --pf-red-color-600: #b94553;
   --pf-red-color-700: #9b3544;
   --pf-red-color-800: #822f3e;
-  --pf-red-color-900: #702b39;
+  --pf-red-color-850: #702b39;
+  --pf-red-color-900: #510e2b;
   --pf-red-color-950: #3e131b;
 
   //Orange color
@@ -135,7 +137,7 @@
   --pf-purple-color-700: #7a4eb3;
   --pf-purple-color-800: #664196;
   --pf-purple-color-900: #55377b;
-  --pf-purple-color-950: #352253;
+  --pf-purple-color-950: #291a40;
 
   // White color
   --pf-white-color: #ffffff;
@@ -161,6 +163,7 @@
   --pf-neutral-color: var(--pf-gray-color-100);
   --pf-info-color: var(--pf-secondary-color-200);
   --pf-brand-color: var(--pf-secondary-color-550);
+  --pf-pending-color: var(--pf-red-color-900);
 
   --pf-link-color: var(--pf-gray-color-300);
   --pf-link-hover-color: var(--pf-gray-color-100);

package/src/types.ts

@@ -7,7 +7,14 @@ export type PermafrostComponent = {
 
 import { IconSizes, IconName } from './components/icons/types';
 export type { IconSizes, IconName };
-export type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
+export type SemanticColor =
+  | 'primary'
+  | 'secondary'
+  | 'warning'
+  | 'error'
+  | 'success'
+  | 'info'
+  | 'pending';
 import { SelectOption } from './components/forms/select/types';
 export type { SelectOption };