@indico-data/design-system 2.57.0 → 2.58.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.57.0",
+  "version": "2.58.1",
   "description": "",
   "author": "",
   "main": "lib/index.js",
@@ -55,6 +55,7 @@
     "react-modal": "^3.16.1",
     "react-popper": "^2.3.0",
     "react-stately": "^3.31.0",
+    "react-toastify": "^11.0.5",
     "react-tooltip": "5.28.0",
     "svgo": "^3.2.2",
     "ts-jest": "^29.3.1",

package/src/components/index.ts

@@ -26,3 +26,4 @@ export { Tooltip } from './tooltip';
 export { BarSpinner } from './loading-indicators/BarSpinner/BarSpinner';
 export { CirclePulse } from './loading-indicators/CirclePulse/CirclePulse';
 export { Truncate } from './truncate';
+export { toast, ToastContainer } from 'react-toastify';

package/src/components/toast/Toast.mdx

@@ -0,0 +1,14 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks';
+import * as Toast from './Toast.stories';
+
+<Meta title="Components/Toast" of={Toast} />
+
+# Toast
+
+The Toast component is used to display a toast message. A Toast message is a notification that appears at the top of the screen to provide feedback to the user. This is a wrapper around the `react-toastify` library. To view their documentation, please visit [react-toastify](https://fkhadra.github.io/react-toastify/introduction).
+
+<Canvas of={Toast.Default} />
+
+### The following props are available for the Toast component, but not limited to:
+
+<Controls of={Toast.Default} />

package/src/components/toast/Toast.stories.tsx

@@ -0,0 +1,55 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { toast, ToastContainer } from './index';
+import { Button } from '../button';
+
+const meta: Meta<typeof ToastContainer> = {
+  title: 'Components/Toast',
+  component: ToastContainer,
+  argTypes: {
+    position: {
+      control: 'select',
+      options: [
+        'top-right',
+        'top-center',
+        'top-left',
+        'bottom-right',
+        'bottom-center',
+        'bottom-left',
+      ],
+    },
+    theme: {
+      control: 'select',
+      options: ['light', 'dark'],
+    },
+    autoClose: {
+      control: 'number',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ height: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ToastContainer>;
+
+export const Default: Story = {
+  args: {
+    position: 'top-right',
+    theme: 'dark',
+    autoClose: 3000,
+  },
+  render: (args) => (
+    <div>
+      <Button ariaLabel="Click me" onClick={() => toast('Hello World')}>
+        Fire a toast
+      </Button>
+      <ToastContainer {...args} />
+    </div>
+  ),
+};

package/src/components/toast/index.ts

@@ -0,0 +1 @@
+export { toast, ToastContainer } from 'react-toastify';

package/src/components/toast/styles/Toast.scss

@@ -0,0 +1,17 @@
+// Common Variables
+:root,
+:root [data-theme='light'],
+:root [data-theme='dark'] {
+  --toastify-color-dark: var(--pf-background-color-light);
+  --toastify-color-progress-dark: var(--pf-primary-color-400);
+  --toastify-icon-color-success: var(--pf-success-color);
+  --toastify-color-progress-bgo: 0.2;
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'] {
+  --toastify-color-dark: var(--pf-background-color-light);
+  --toastify-color-progress-dark: var(--pf-primary-color-400);
+  --toastify-icon-color-success: var(--pf-success-color);
+  --toastify-color-progress-bgo: 0.2;
+}

package/src/index.ts

@@ -35,10 +35,12 @@ export { BarSpinner } from './components/loading-indicators/BarSpinner/BarSpinne
 export { Truncate } from './components/truncate';
 // Utilities
 export { registerFontAwesomeIcons } from './setup/setupIcons';
+export { toast, ToastContainer } from './components/toast';
 
 // Types
 export type {
   ColumnDef,
+  Column as TanstackTableColumnType,
   Row as TanstackTableRowType,
   Table as TanstackTableType,
 } from '@tanstack/react-table';

package/src/styles/index.scss

@@ -30,6 +30,7 @@
 @import '../components/loading-indicators/BarSpinner/styles/BarSpinner.scss';
 @import '../components/loading-indicators/CirclePulse/CirclePulse.scss';
 @import '../components/truncate/styles/Truncate.scss';
+@import '../components/toast/styles/Toast.scss';
 @import 'sheets'; // Port to an sheets component when we build it
 @import 'typography';
 @import 'colors';

package/src/stylesAndAnimations/colors/constants.ts

@@ -12,125 +12,150 @@ export const colorList = [
 export const utilityColorList = ['success', 'info', 'neutral', 'warning', 'error', 'brand'];
 export const lightThemeColors = {
   primary: {
-    base: '#6833D0',
-    100: '#F0EBFA',
-    200: '#D5C6F2',
-    300: '#BAA1E9',
-    400: '#8C64DB',
-    500: '#6833D0',
-    600: '#5E2EBB',
-    700: '#5329A6',
-    800: '#492492',
-    900: '#3E1F7D',
+    base: '#b4cadf',
+    50: '#5b8ab7',
+    100: '#6d96c3',
+    200: '#7b9fc5',
+    300: '#90adc8',
+    400: '#a3bdd4',
+    500: '#b4cadf',
+    600: '#c4d8eb',
+    700: '#d2e1f0',
+    800: '#dfeaf3',
+    900: '#eef4fa',
+    950: '#f6f9fc',
   },
   secondary: {
-    base: '#0070F5',
-    100: '#DCEAFD',
-    200: '#B3D4FC',
-    300: '#7AB5FA',
-    400: '#4797F5',
-    500: '#0070F5',
-    600: '#0067E1',
-    700: '#005AC4',
-    800: '#004EAC',
-    900: '#004393',
+    base: '#3892f3',
+    50: '#002b66',
+    100: '#003b8c',
+    200: '#004cb0',
+    300: '#0060d6',
+    400: '#0070f5',
+    500: '#3892f3',
+    550: '#66adff',
+    600: '#91c5ff',
+    700: '#b8dbff',
+    800: '#d4eaff',
+    900: '#e0f2ff',
+    950: '#eaf4ff',
   },
   tertiary: {
-    base: '#0070F5',
-    100: '#DCEAFD',
-    200: '#B3D4FC',
-    300: '#7AB5FA',
-    400: '#4797F5',
-    500: '#0070F5',
-    600: '#0067E1',
-    700: '#005AC4',
-    800: '#004EAC',
-    900: '#004393',
+    base: '#8394a9',
+    50: '#142838',
+    100: '#203148',
+    200: '#2e4563',
+    300: '#3e587a',
+    400: '#55677f',
+    450: '#6d8097',
+    500: '#8394a9',
+    600: '#93a3bb',
+    700: '#a5b4c6',
+    800: '#b2bfd0',
+    900: '#c4ccd7',
+    950: '#d6dde5',
   },
   gray: {
-    base: '#444444',
-    100: '#EEEEEE',
-    200: '#D0D0D0',
-    300: '#A9A9A9',
-    400: '#737373',
-    500: '#444444',
-    600: '#373737',
-    700: '#2C2C2C',
-    800: '#1F1F1F',
-    900: '#141414',
+    base: '#525252',
+    50: '#0a0a0a',
+    100: '#171717',
+    200: '#262626',
+    300: '#404040',
+    400: '#525252',
+    450: '#737373',
+    500: '#737373',
+    600: '#989898',
+    700: '#bdbdbd',
+    800: '#dcdcdc',
+    900: '#efefef',
+    950: '#f6f6f6',
   },
   red: {
-    base: '#E72326',
-    100: '#FFD6D6',
-    200: '#F49EA0',
-    300: '#EF696B',
-    400: '#EB4649',
-    500: '#E72326',
-    600: '#D52023',
-    700: '#C21D20',
-    800: '#B01B1D',
-    900: '#9D181A',
+    base: '#f4a5ae',
+    50: '#5b0d16',
+    100: '#761821',
+    200: '#8f252f',
+    300: '#ad303d',
+    350: '#b8424c',
+    400: '#c84a57',
+    450: '#dc5a66',
+    500: '#f4a5ae',
+    600: '#ebb6b8',
+    700: '#f9d5dc',
+    800: '#f4d7d8',
+    850: '#fae9e9',
+    900: '#fcebeb',
+    950: '#fcf5f4',
   },
   orange: {
-    base: '#FFA424',
-    100: '#FFDFB2',
-    200: '#FFD292',
-    300: '#FFC471',
-    400: '#FFB650',
-    500: '#FFA424',
-    600: '#F29C22',
-    700: '#E69420',
-    800: '#CC831D',
-    900: '#B37319',
+    base: '#ff873f',
+    50: '#721e01',
+    100: '#992702',
+    200: '#b33403',
+    300: '#d94b04',
+    400: '#f25c05',
+    500: '#ff873f',
+    600: '#ffa26d',
+    700: '#ffc9aa',
+    800: '#ffe3d1',
+    900: '#fff3ec',
+    950: '#fffaf7',
   },
   yellow: {
-    base: '#F29C22',
-    100: '#FFF9D6',
-    200: '#FFEDAC',
-    300: '#FFE182',
-    400: '#FFD558',
-    500: '#F29C22',
-    600: '#E69420',
-    700: '#CC831D',
-    800: '#B37319',
-    900: '#9D6616',
+    base: '#ffa400',
+    50: '#312602',
+    100: '#664200',
+    200: '#895c00',
+    300: '#b37300',
+    400: '#e08e00',
+    500: '#ffa400',
+    600: '#ffb621',
+    700: '#ffc344',
+    800: '#ffd369',
+    900: '#ffeaa1',
+    950: '#fff4d0',
   },
   green: {
-    base: '#008A00',
-    100: '#D6ECD6',
-    200: '#99D099',
-    300: '#66B966',
-    400: '#33A133',
-    500: '#008A00',
-    600: '#007C00',
-    700: '#006E00',
-    800: '#006100',
-    900: '#005300',
+    base: '#39c29d',
+    50: '#003325',
+    100: '#075f48',
+    200: '#0a906c',
+    300: '#03aaaa',
+    400: '#26b890',
+    500: '#39c29d',
+    600: '#52ccae',
+    700: '#6cd6ba',
+    800: '#83e2c7',
+    900: '#c1f1e2',
+    950: '#83e2c7',
   },
   purple: {
-    base: '#8B60C7',
-    100: '#ECE2FA',
-    200: '#D5C4F5',
-    300: '#BAA1E9',
-    400: '#8C64DB',
-    500: '#6833D0',
-    600: '#5E2EBB',
-    700: '#5329A6',
-    800: '#492492',
-    900: '#3E1F7D',
+    base: '#9776d3',
+    50: '#291a40',
+    100: '#55377b',
+    200: '#664196',
+    300: '#7a4eb3',
+    400: '#8b60c7',
+    500: '#9776d3',
+    600: '#b6a3e2',
+    700: '#cfc4ee',
+    800: '#e4dff5',
+    900: '#f1edfa',
+    950: '#f7f6fc',
   },
   utility: {
-    success: '#168116',
-    info: '#2070D1',
-    neutral: '#BFC1C3',
-    warning: '#C7892F',
-    error: '#D52023',
-    brand: '#0070F5',
+    success: '#39c29d',
+    info: '#004cb0',
+    neutral: '#171717',
+    warning: '#b37300',
+    error: '#f4a5ae',
+    brand: '#0070f5',
   },
 } as Record<string, any>;
 
 export const darkThemeColors = {
   primary: {
+    base: '#394c6b',
     50: '#bcc7da',
     100: '#7989b5',
     200: '#8593b3',
@@ -144,19 +169,22 @@ export const darkThemeColors = {
     950: '#0c141d',
   },
   secondary: {
+    base: '#198bdc',
     50: '#bddffa',
     100: '#83c5f6',
     200: '#68afee',
     300: '#66a2d5',
     400: '#36a1ea',
     500: '#198bdc',
-    600: '#0070f5',
+    550: '#0070f5',
+    600: '#2f6a98',
     700: '#0c6ebd',
     800: '#0b5899',
     900: '#002c4e',
     950: '#112341',
   },
   tertiary: {
+    base: '#40464e',
     50: '#dae3eb',
     100: '#c2d4df',
     200: '#a3b2c9',
@@ -171,6 +199,7 @@ export const darkThemeColors = {
     950: '#283243',
   },
   gray: {
+    base: '#525252',
     50: '#f6f6f6',
     100: '#efefef',
     200: '#dcdcdc',
@@ -182,21 +211,27 @@ export const darkThemeColors = {
     700: '#262626',
     800: '#171717',
     900: '#0a0a0a',
+    950: '#000000',
   },
   red: {
+    base: '#ce6068',
     50: '#fcf5f4',
     100: '#fae9e9',
     200: '#f4d7d8',
     300: '#ebb6b8',
-    400: '#df8d91',
+    350: '#f39bb9',
+    400: '#ef76a0',
+    450: '#df8d91',
     500: '#ce6068',
     600: '#b94553',
     700: '#9b3544',
     800: '#822f3e',
-    900: '#702b39',
+    850: '#702b39',
+    900: '#510e2b',
     950: '#3e131b',
   },
   orange: {
+    base: '#f46325',
     50: '#fff5ed',
     100: '#fee9d6',
     200: '#fcceac',
@@ -210,6 +245,7 @@ export const darkThemeColors = {
     950: '#420f08',
   },
   yellow: {
+    base: '#f29c22',
     50: '#fbf7eb',
     100: '#f5edcc',
     200: '#ecd99c',
@@ -223,6 +259,7 @@ export const darkThemeColors = {
     950: '#312602',
   },
   green: {
+    base: '#15b77d',
     50: '#a9f1ce',
     100: '#71e4b3',
     200: '#14b8a6',
@@ -236,6 +273,7 @@ export const darkThemeColors = {
     950: '#032b20',
   },
   purple: {
+    base: '#9776d3',
     50: '#f7f6fc',
     100: '#f1edfa',
     200: '#e4dff5',
@@ -246,7 +284,7 @@ export const darkThemeColors = {
     700: '#7a4eb3',
     800: '#664196',
     900: '#55377b',
-    950: '#352253',
+    950: '#291a40',
   },
   utility: {
     success: '#15b77d',