@indico-data/design-system 2.56.0 → 2.58.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.56.0",
+  "version": "2.58.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",
@@ -45,6 +45,7 @@
     "date-fns": "^3.6.0",
     "focus-trap-react": "^10.2.3",
     "html-webpack-plugin": "^5.6.0",
+    "nanoid": "^5.1.5",
     "prop-types": "^15.8.1",
     "react-aria-components": "^1.2.1",
     "react-data-table-component": "^7.6.2",
@@ -54,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

@@ -25,3 +25,5 @@ export { TanstackTable } from './tanstackTable';
 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/components/truncate/Truncate.mdx

@@ -0,0 +1,34 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks';
+import * as Truncate from './Truncate.stories';
+
+<Meta title="Utilities/Truncate" name="Truncate" of={Truncate} />
+
+# Truncate
+
+The truncate component accepts a string prop and will truncate the string to fit the available space. It will add an `...` ellipsis to the end of the string. If the truncation is detected by the observer, it will show a tooltip by default, unless the `hasTooltip` prop is set to `false`.
+
+<Canvas of={Truncate.Default} />
+
+### The following props are available for the Truncate component:
+
+<Controls of={Truncate.Default} />
+
+
+## Usage
+Simply pass in a string to the `truncateString` prop.
+
+
+### With Line Clamp
+
+If you want to truncate the text to a specific number of lines, set the `lineClamp` prop to the number of lines you want to truncate to.
+
+<Canvas of={Truncate.WithLineClamp} />
+
+### No Tooltip
+
+If you want to disable the tooltip, set the `hasTooltip` prop to `false`.
+
+<Canvas of={Truncate.NoTooltip} />
+
+### Notes on Tooltips
+If a duplicate ID is provided, the tooltip will only show on the first instance of the ID.

package/src/components/truncate/Truncate.stories.tsx

@@ -0,0 +1,86 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Truncate } from './Truncate';
+import { TruncateProps } from './types';
+
+const meta: Meta<typeof Truncate> = {
+  title: 'Utilities/Truncate',
+  component: Truncate,
+  decorators: [
+    (Story) => (
+      <div style={{ width: '300px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    truncateString: {
+      required: true,
+      control: 'text',
+      description:
+        'The string to truncate. This value will also be displayed in the tooltip when the text is truncated.',
+      table: {
+        category: 'Props',
+      },
+    },
+    lineClamp: {
+      control: 'number',
+      defaultValue: 0,
+      description:
+        'The number of lines to truncate the text to. If left blank, it will default to 1 line.',
+      table: {
+        category: 'Props',
+      },
+    },
+    tooltipId: {
+      control: 'text',
+      description:
+        'The id of the tooltip. If an ID is not provided, it will generate one from nanoid',
+      table: {
+        category: 'Props',
+      },
+    },
+    hasTooltip: {
+      control: 'boolean',
+      defaultValue: true,
+      description:
+        'Whether to show the tooltip. If left blank, it will default to true. If set to false, the tooltip will not be shown.',
+      table: {
+        category: 'Props',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<TruncateProps>;
+
+export const Default: Story = {
+  args: {
+    lineClamp: 0,
+    hasTooltip: true,
+    tooltipId: 'truncate-tooltip',
+    truncateString: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
+  },
+  render: (args) => <Truncate {...args} />,
+};
+
+export const WithLineClamp: Story = {
+  args: {
+    lineClamp: 2,
+    hasTooltip: true,
+    tooltipId: 'truncate-tooltip-line-clamp',
+    truncateString: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
+  },
+  render: (args) => <Truncate {...args} />,
+};
+
+export const NoTooltip: Story = {
+  args: {
+    lineClamp: 2,
+    hasTooltip: false,
+    tooltipId: 'truncate-tooltip-no-tooltip',
+    truncateString: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
+  },
+  render: (args) => <Truncate {...args} />,
+};

package/src/components/truncate/Truncate.tsx

@@ -0,0 +1,55 @@
+import { nanoid } from 'nanoid';
+import { useState, useEffect, CSSProperties } from 'react';
+import { Tooltip } from '../tooltip';
+import { TruncateProps } from './types';
+
+export const Truncate = ({
+  lineClamp = 0,
+  truncateString,
+  hasTooltip = true,
+  tooltipId,
+  ...rest
+}: TruncateProps) => {
+  const [isTruncated, setIsTruncated] = useState(false);
+  const id = (tooltipId ?? nanoid()).replace(/[^a-zA-Z0-9-_]/g, '_');
+
+  useEffect(() => {
+    const checkTruncation = () => {
+      const element = document.querySelector(`[data-tooltip-id="${id}"]`);
+      if (element) {
+        if (lineClamp === 0) {
+          setIsTruncated(element.scrollWidth > element.clientWidth);
+        } else {
+          setIsTruncated(element.scrollHeight > element.clientHeight);
+        }
+      }
+    };
+
+    checkTruncation();
+    window.addEventListener('resize', checkTruncation);
+    return () => window.removeEventListener('resize', checkTruncation);
+  }, [id, lineClamp]);
+
+  const truncateStyle = {
+    '--line-clamp': lineClamp,
+  } as CSSProperties;
+
+  return (
+    <div className="truncate-wrapper" style={truncateStyle}>
+      <span
+        data-testid={`truncate-${id}-${isTruncated ? 'truncated' : 'not-truncated'}`}
+        data-tooltip-id={id}
+        data-tooltip-content={isTruncated ? truncateString : undefined}
+        className={lineClamp > 0 ? 'truncate-clip' : 'truncate'}
+        {...rest}
+      >
+        {truncateString}
+      </span>
+      {isTruncated && truncateString && hasTooltip && (
+        <Tooltip data-tooltip-delay-hide={100} id={id} border="solid 1px var(--pf-border-color)">
+          {truncateString}
+        </Tooltip>
+      )}
+    </div>
+  );
+};

package/src/components/truncate/__tests__/Truncate.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react';
+import { Truncate } from '../Truncate';
+
+// Mock nanoid to return a predictable ID
+jest.mock('nanoid', () => ({
+  nanoid: () => 'test-id',
+}));
+
+describe('Truncate', () => {
+  beforeAll(() => {
+    // Mock offsetWidth and scrollWidth
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+      configurable: true,
+      value: 100,
+    });
+    Object.defineProperty(HTMLElement.prototype, 'scrollWidth', {
+      configurable: true,
+      value: 200, // larger than offsetWidth to simulate overflow
+    });
+  });
+
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+
+  // Only way to test is by checking testid, validated this works in app
+  it('shows truncated state when content overflows', () => {
+    render(<Truncate truncateString="This is a very long text that should be truncated" />);
+
+    // Now we can use exact IDs instead of regex
+    expect(screen.getByTestId('truncate-test-id-truncated')).toBeInTheDocument();
+
+    // Verify tooltip appears when truncated
+    expect(screen.getByTestId('truncate-test-id-truncated')).toHaveAttribute(
+      'data-tooltip-content',
+      'This is a very long text that should be truncated',
+    );
+  });
+
+  it('shows non-truncated state when content fits', () => {
+    // Override both scrollWidth and clientWidth to simulate content fitting
+    Object.defineProperty(HTMLElement.prototype, 'scrollWidth', {
+      configurable: true,
+      value: 100,
+    });
+    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+      configurable: true,
+      value: 200,
+    });
+
+    render(<Truncate truncateString="Short text" />);
+
+    // Now we can use exact IDs
+    expect(screen.getByTestId('truncate-test-id-not-truncated')).toBeInTheDocument();
+
+    // Verify no tooltip when not truncated
+    expect(screen.getByTestId('truncate-test-id-not-truncated')).not.toHaveAttribute(
+      'data-tooltip-content',
+    );
+  });
+});

package/src/components/truncate/index.ts

@@ -0,0 +1 @@
+export { Truncate } from './Truncate';

package/src/components/truncate/styles/Truncate.scss

@@ -0,0 +1,22 @@
+.truncate-wrapper {
+  width: 100%;
+  display: block;
+
+  .truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+    display: inline-block;
+  }
+
+  .truncate-clip {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--line-clamp);
+    line-clamp: var(--line-clamp);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+  }
+}

package/src/components/truncate/types.ts

@@ -0,0 +1,7 @@
+export interface TruncateProps {
+  lineClamp?: number;
+  truncateString: string;
+  hasTooltip?: boolean;
+  tooltipId?: string;
+  [key: string]: any;
+}

package/src/index.ts

@@ -32,9 +32,10 @@ export { Tooltip } from './components/tooltip';
 export { Pagination } from './components/pagination';
 export { CirclePulse } from './components/loading-indicators/CirclePulse';
 export { BarSpinner } from './components/loading-indicators/BarSpinner/BarSpinner';
-
+export { Truncate } from './components/truncate';
 // Utilities
 export { registerFontAwesomeIcons } from './setup/setupIcons';
+export { toast, ToastContainer } from './components/toast';
 
 // Types
 export type {

package/src/styles/index.scss

@@ -29,6 +29,8 @@
 @import '../components/tooltip/styles/Tooltip.scss';
 @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';