@indico-data/design-system 2.56.0 → 2.58.0

package/lib/components/index.d.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/lib/components/toast/Toast.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ToastContainer } from './index';
+declare const meta: Meta<typeof ToastContainer>;
+export default meta;
+type Story = StoryObj<typeof ToastContainer>;
+export declare const Default: Story;

package/lib/components/toast/index.d.ts

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

package/lib/components/truncate/Truncate.d.ts

@@ -0,0 +1,2 @@
+import { TruncateProps } from './types';
+export declare const Truncate: ({ lineClamp, truncateString, hasTooltip, tooltipId, ...rest }: TruncateProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/truncate/Truncate.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Truncate } from './Truncate';
+import { TruncateProps } from './types';
+declare const meta: Meta<typeof Truncate>;
+export default meta;
+type Story = StoryObj<TruncateProps>;
+export declare const Default: Story;
+export declare const WithLineClamp: Story;
+export declare const NoTooltip: Story;

package/lib/components/truncate/__tests__/Truncate.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/truncate/index.d.ts

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

package/lib/components/truncate/types.d.ts

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

package/lib/index.css

@@ -2637,6 +2637,43 @@ form {
   }
 }
 
+.truncate-wrapper {
+  width: 100%;
+  display: block;
+}
+.truncate-wrapper .truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  display: inline-block;
+}
+.truncate-wrapper .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%;
+}
+
+: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;
+}
+
+: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;
+}
+
 :root [data-theme=light] {
   --sheets-background-color: var(--pf-gray-color-100);
 }

package/lib/index.d.ts

@@ -11,6 +11,7 @@ import { DateRange, OnSelectHandler, Mode, CustomComponents, Matcher, Formatters
 import { ColumnDef, Row as Row$1 } from '@tanstack/react-table';
 export { ColumnDef, Row as TanstackTableRowType, Table as TanstackTableType } from '@tanstack/react-table';
 import { PlacesType } from 'react-tooltip';
+export { ToastContainer, toast } from 'react-toastify';
 
 declare const registerFontAwesomeIcons: (...icons: IconDefinition[]) => void;
 
@@ -617,4 +618,14 @@ declare function BarSpinner({ width, id, height, className, ...rest }: {
     [key: string]: any;
 }): react_jsx_runtime.JSX.Element;
 
-export { Badge, BarSpinner, Button, Card, Checkbox, CirclePulse, Col, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, Modal, Pagination, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select as SelectInput, SingleInputDatePicker, Skeleton, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, registerFontAwesomeIcons };
+interface TruncateProps {
+    lineClamp?: number;
+    truncateString: string;
+    hasTooltip?: boolean;
+    tooltipId?: string;
+    [key: string]: any;
+}
+
+declare const Truncate: ({ lineClamp, truncateString, hasTooltip, tooltipId, ...rest }: TruncateProps) => react_jsx_runtime.JSX.Element;
+
+export { Badge, BarSpinner, Button, Card, Checkbox, CirclePulse, Col, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, Modal, Pagination, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select as SelectInput, SingleInputDatePicker, Skeleton, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, Truncate, registerFontAwesomeIcons };

package/lib/index.esm.css

@@ -2637,6 +2637,43 @@ form {
   }
 }
 
+.truncate-wrapper {
+  width: 100%;
+  display: block;
+}
+.truncate-wrapper .truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  display: inline-block;
+}
+.truncate-wrapper .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%;
+}
+
+: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;
+}
+
+: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;
+}
+
 :root [data-theme=light] {
   --sheets-background-color: var(--pf-gray-color-100);
 }