@livechat/design-system-react-components 1.0.0-beta.0 → 1.0.0-beta.10

package/dist/components/PromoBannerV2/PromoBannerV2.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { ButtonKind } from '../Button';
+export interface IPromoBannerV2Props {
+    /**
+     * Specify an optional className to be applied to the main container node
+     */
+    className?: string;
+    /**
+     * Element with additional content for second column
+     */
+    additionalContent?: React.ReactNode;
+    /**
+     * Shows the primary CTA button
+     */
+    primaryButton?: {
+        handleClick: () => void;
+        label: string;
+        kind?: ButtonKind;
+    };
+    /**
+     * Shows the secondary CTA button
+     */
+    secondaryButton?: {
+        handleClick: () => void;
+        label: string;
+        kind?: ButtonKind;
+    };
+    /**
+     * Event handler for close button press
+     */
+    onClose?: () => void;
+}
+export declare const PromoBannerV2: React.FC<React.PropsWithChildren<IPromoBannerV2Props>>;

package/dist/components/PromoBannerV2/PromoBannerV2.spec.d.ts

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

package/dist/components/PromoBannerV2/PromoBannerV2.stories.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+    component: React.FC<React.PropsWithChildren<import("./PromoBannerV2").IPromoBannerV2Props>>;
+    argTypes: {
+        primaryButton: {
+            control: boolean;
+        };
+        secondaryButton: {
+            control: boolean;
+        };
+        additionalContent: {
+            control: boolean;
+        };
+        onClose: {
+            action: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: () => React.ReactElement;
+export declare const WithStyledAdditionalContent: () => React.ReactElement;
+export declare const WithStyledMainContent: () => React.ReactElement;

package/dist/components/PromoBannerV2/constants.d.ts

@@ -0,0 +1 @@
+export declare const SMALL_CONTAINER_WIDTH_TRESHOLD = 559;

package/dist/components/PromoBannerV2/index.d.ts

@@ -0,0 +1,2 @@
+export { PromoBannerV2 } from './PromoBannerV2';
+export type { IPromoBannerV2Props } from './PromoBannerV2';

package/dist/components/Switch/Switch.d.ts

@@ -3,15 +3,45 @@ export declare const baseClass = "switch";
 export type SwitchSize = 'compact' | 'medium' | 'large';
 export type SwitchState = 'regular' | 'loading' | 'locked';
 export interface SwitchProps {
+    /**
+     * Specify the label for the switch input
+     */
     ariaLabel?: string;
+    /**
+     * The CSS class for switch container
+     */
     className?: string;
+    /**
+     * Will set the switch to "on" on component initialization
+     */
     defaultOn?: boolean;
+    /**
+     * Specify whether the switch should be disabled
+     */
     disabled?: boolean;
+    /**
+     * Ref object
+     */
     innerRef?: React.LegacyRef<HTMLInputElement> | undefined;
+    /**
+     * Specify the switch input name
+     */
     name?: string;
+    /**
+     * Define if switch is "on"
+     */
     on?: boolean;
+    /**
+     * The event handler for onChange
+     */
     onChange?(e: React.FormEvent, value: boolean): void;
+    /**
+     * Specify the switch size
+     */
     size?: SwitchSize;
+    /**
+     * Specify the switch state
+     */
     state?: SwitchState;
 }
 export declare const Switch: React.FC<SwitchProps>;

package/dist/components/Tab/Tab.stories.d.ts

@@ -25,5 +25,5 @@ export declare const Tab: {
     (args: ITabArgs): React.ReactElement;
     args: TabProps;
 };
-export declare const StatesAndVariants: () => JSX.Element;
-export declare const Sizes: () => JSX.Element;
+export declare const StatesAndVariants: () => React.ReactElement;
+export declare const Sizes: () => React.ReactElement;

package/dist/components/Tag/Tag.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { IconSize, IconSource } from '../Icon';
 export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Specify the tag kind
@@ -8,11 +7,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Specify the tag size
      */
-    size?: 'medium' | 'large';
-    /**
-     * Specify the tag icon size if used
-     */
-    iconSize?: IconSize;
+    size?: 'small' | 'medium' | 'large';
     /**
      * Set the tag custom color
      */
@@ -30,12 +25,12 @@ export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     onRemove?(): void;
     /**
-     * Pass the icon to show it
+     * React node element to show on the left
      */
-    icon?: IconSource;
+    leftNode?: React.ReactElement;
     /**
-     * Pass the image source to show it as avatar
+     * React node element to show on the right
      */
-    avatar?: string;
+    rightNode?: React.ReactElement;
 }
 export declare const Tag: React.FC<React.PropsWithChildren<TagProps>>;

package/dist/components/Tag/Tag.stories.d.ts

@@ -12,13 +12,15 @@ export declare const Kinds: {
     ({ children, ...args }: TagProps): React.ReactElement;
     args: {
         children: string;
-        icon: any;
+        leftNode: React.JSX.Element;
+        rightNode: React.JSX.Element;
     };
 };
 export declare const Sizes: {
     ({ children, ...args }: TagProps): React.ReactElement;
     args: {
         children: string;
-        icon: any;
+        leftNode: React.JSX.Element;
+        rightNode: React.JSX.Element;
     };
 };

package/dist/components/TagInput/EmailTagInput.d.ts

@@ -1,5 +1,5 @@
-import { TagInputProps } from './TagInput';
 import * as React from 'react';
+import { TagInputProps } from './TagInput';
 export type EmailTagInputProps = Omit<TagInputProps, 'validator'>;
 export declare const emailRegex: RegExp;
 export declare const EmailTagInput: React.FC<EmailTagInputProps>;

package/dist/components/TagInput/TagInput.stories.d.ts

@@ -7,4 +7,4 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
 export default _default;
 export declare const DefaultTagInput: Story<TagInputProps>;
 export declare const DefaultEmailTagInput: Story<EmailTagInputProps>;
-export declare const Sizes: () => JSX.Element;
+export declare const Sizes: () => React.ReactElement;

package/dist/components/Textarea/Textarea.stories.d.ts

@@ -4,4 +4,4 @@ import { TextareaProps } from './Textarea';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default _default;
 export declare const Default: Story<TextareaProps>;
-export declare const States: () => JSX.Element;
+export declare const States: () => React.ReactElement;

package/dist/components/Toast/Toast.stories.d.ts

@@ -9,6 +9,6 @@ export declare const Default: Story<ToastProps>;
 export declare const Kinds: Story;
 export declare const WithCloseIcon: Story;
 export declare const WithCustomAction: {
-    (): JSX.Element;
+    (): React.ReactElement;
     parameters: import("@storybook/types").Parameters;
 };

package/dist/components/Toast/ToastWrapper.stories.d.ts

@@ -11,7 +11,7 @@ export declare const ToastWrapper: {
         toasts: ({
             id: string;
             kind: string;
-            content: React.JSX.Element;
+            content: string;
             removable?: undefined;
             action?: undefined;
         } | {
@@ -29,12 +29,6 @@ export declare const ToastWrapper: {
                 handler: () => void;
             };
             removable?: undefined;
-        } | {
-            id: string;
-            kind: string;
-            content: string;
-            removable?: undefined;
-            action?: undefined;
         })[];
     };
 };

package/dist/components/Tooltip/Tooltip.stories.d.ts

@@ -20,11 +20,11 @@ export declare const Default: {
         hoverOutDelayTimeout: number;
     };
 };
-export declare const TooltipInfo: () => JSX.Element;
-export declare const TooltipInteractive: () => JSX.Element;
-export declare const TooltipReports: () => JSX.Element;
+export declare const TooltipInfo: () => React.ReactElement;
+export declare const TooltipInteractive: () => React.ReactElement;
+export declare const TooltipReports: () => React.ReactElement;
 export declare const TooltipUserGuide: {
-    (args: ITooltipProps): JSX.Element;
+    (args: ITooltipProps): React.ReactElement;
     args: {
         placement: string;
         isVisible: boolean;

package/dist/components/Tooltip/components/Info.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
+import { TooltipTheme } from '../types';
 export declare const Info: React.FC<{
     header?: string;
     text: string;
     closeWithX?: boolean;
-    theme?: string;
+    theme?: TooltipTheme;
     handleCloseAction?: (ev: React.MouseEvent) => void;
 }>;

package/dist/components/Tooltip/components/Interactive.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ButtonKind } from '../../Button';
+import { TooltipButton, TooltipTheme } from '../types';
 export declare const Interactive: React.FC<{
     header?: string;
     text: string;
@@ -8,16 +8,8 @@ export declare const Interactive: React.FC<{
         alt: string;
     };
     closeWithX?: boolean;
-    theme?: 'invert' | 'important';
+    theme?: TooltipTheme;
     handleCloseAction?: (ev: React.MouseEvent) => void;
-    primaryButton: {
-        handleClick: () => void;
-        label: string;
-        kind?: ButtonKind;
-    };
-    secondaryButton: {
-        handleClick: () => void;
-        label: string;
-        kind?: ButtonKind;
-    };
+    primaryButton: TooltipButton;
+    secondaryButton: TooltipButton;
 }>;

package/dist/components/Tooltip/components/UserGuide/SpotlightOverlay.d.ts

@@ -1,7 +1,8 @@
+import * as React from 'react';
 declare const SpotlightOverlay: ({ gap, isVisible, slide, disablePointerEvents, }: {
     gap: DOMRect | null;
     isVisible: boolean;
     slide: boolean;
     disablePointerEvents: boolean;
-}) => JSX.Element | null;
+}) => React.ReactElement | null;
 export default SpotlightOverlay;

package/dist/components/Tooltip/components/UserGuide/UserGuideStep.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { TooltipTheme } from '../../types';
 export declare const UserGuideStep: React.FC<{
     header: string;
     text: string;
@@ -9,7 +10,7 @@ export declare const UserGuideStep: React.FC<{
     currentStep: number;
     stepMax: number;
     closeWithX?: boolean;
-    theme?: string;
+    theme?: TooltipTheme;
     handleClickPrimary: () => void;
     handleCloseAction?: (ev: KeyboardEvent | React.MouseEvent) => void;
 }>;

package/dist/components/Tooltip/helpers.d.ts

@@ -1,3 +1,4 @@
 import { IconKind } from '../Icon';
-export declare function getIconType(theme: string): IconKind;
+import { TooltipTheme } from './types';
+export declare function getIconType(theme: TooltipTheme): IconKind;
 export declare const sleep: (milliseconds: number) => Promise<void>;

package/dist/components/Tooltip/index.d.ts

@@ -1,3 +1,4 @@
 export { Tooltip } from './Tooltip';
 export { Simple, Info, Interactive, Reports } from './components';
 export { UserGuide } from './components/UserGuide';
+export type { ITooltipProps } from './types';

package/dist/components/Tooltip/types.d.ts

@@ -1,9 +1,17 @@
 import * as React from 'react';
 import { Placement, VirtualElement } from '@floating-ui/react-dom';
+import { ButtonKind } from '../Button';
+export type TooltipTheme = 'invert' | 'important' | undefined;
+export type TooltipButton = {
+    handleClick: () => void;
+    label: string;
+    kind?: ButtonKind;
+};
 export interface ITooltipProps {
     children?: React.ReactNode;
     className?: string;
-    theme?: 'invert' | 'important' | undefined;
+    triggerClassName?: string;
+    theme?: TooltipTheme;
     placement?: Placement;
     isVisible?: boolean;
     withFadeAnimation?: boolean;

package/dist/components/Typography/Display.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface IProps {
+    size?: 'md' | 'sm';
+    /** DOM element name that will be rendered */
+    as?: string;
+    /** Optional custom className */
+    className?: string;
+}
+export declare const Display: React.FC<React.PropsWithChildren<IProps>>;
+export {};

package/dist/components/Typography/index.d.ts

@@ -1,2 +1,3 @@
 export { Heading } from './Heading';
 export { Text } from './Text';
+export { Display } from './Display';