@livechat/design-system-react-components 1.0.0-alpha.57 → 1.0.0-alpha.59

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { IPopoverProps } from './Popover';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, IPopoverProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Default: {
+    (args: IPopoverProps): React.ReactElement;
+    args: {
+        placement: string;
+        isVisible: boolean;
+    };
+};

package/dist/{src/components → components}/Progress/ProgressBar.d.ts

@@ -1,9 +1,21 @@
 import * as React from 'react';
 import { ProgressSize, ProgressStatus } from './constants';
 export interface ProgressBarProps {
+    /**
+     * The CSS class for container
+     */
     className?: string;
+    /**
+     * Specify the value of current progress bar (0-100)
+     */
     percent: number;
+    /**
+     * Specify the progress bar status
+     */
     status?: ProgressStatus;
+    /**
+     * Specify the progress bar size
+     */
     size?: ProgressSize;
 }
 export declare const ProgressBar: React.ExoticComponent<ProgressBarProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Progress/ProgressBar.spec.d.ts

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

package/dist/components/Progress/ProgressBar.stories.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ProgressBarProps } from './ProgressBar';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ProgressBarProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;
+export declare const ProgressBar: {
+    (args: ProgressBarProps): React.ReactElement;
+    args: {
+        percent: number;
+        status: string;
+        size: string;
+    };
+};

package/dist/{src/components → components}/Progress/ProgressCircle.d.ts

@@ -1,9 +1,21 @@
 import * as React from 'react';
 import { ProgressSize, ProgressStatus } from './constants';
 export interface ProgressCircleProps {
+    /**
+     * The CSS class for container
+     */
     className?: string;
+    /**
+     * Specify the value of current progress circle (0-100)
+     */
     progressValue: number;
+    /**
+     * Specify the progress circle status
+     */
     status?: ProgressStatus;
+    /**
+     * Specify the progress circle size
+     */
     size?: ProgressSize;
 }
 export declare const ProgressCircle: React.ExoticComponent<ProgressCircleProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Progress/ProgressCircle.spec.d.ts

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

package/dist/components/Progress/ProgressCircle.stories.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ProgressCircleProps } from './ProgressCircle';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ProgressCircleProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;
+export declare const ProgressCircle: {
+    (args: ProgressCircleProps): React.ReactElement;
+    args: {
+        progressValue: number;
+        status: string;
+        size: string;
+    };
+};

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

@@ -0,0 +1,4 @@
+export type ProgressStatus = 'normal' | 'error' | 'success';
+export type ProgressSize = 'small' | 'medium' | 'large';
+export declare const PROGRESS_STATUSES: ProgressStatus[];
+export declare const PROGRESS_SIZES: ProgressSize[];

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

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

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { PromoBannerProps } from './PromoBanner';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const PromoBanner: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps>;
+export declare const WithButtons: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps>;
+export declare const WithImage: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps>;
+export declare const WithClose: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps>;
+export declare const WithLight: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps>;

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

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

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { RadioButtonProps } from './RadioButton';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;
+export declare const RadioButton: {
+    ({ children, ...args }: RadioButtonProps): React.ReactElement;
+    args: {
+        checked: boolean;
+        disabled: boolean;
+        description: string;
+        children: string;
+    };
+};

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

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

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ISearchInputProps } from './Search';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ISearchInputProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Search: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ISearchInputProps>;
+export declare const States: {
+    (args: ISearchInputProps): React.ReactElement;
+    args: {};
+};
+export declare const Sizes: {
+    (args: ISearchInputProps): React.ReactElement;
+    args: {};
+};
+export declare const CollapsableSearch: {
+    (args: ISearchInputProps): React.ReactElement;
+    args: {};
+};

package/dist/{src/components → components}/SegmentedControl/SegmentedControl.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ButtonProps } from '../Button';
-export declare type ButtonSize = 'compact' | 'medium' | 'large';
-declare type ButtonElement = {
+export type ButtonSize = 'compact' | 'medium' | 'large';
+type ButtonElement = {
     id: string;
     label: string;
 } & Pick<ButtonProps, 'disabled' | 'loading' | 'icon'>;

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

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

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Story } from '@storybook/react';
+import { SegmentedControlProps } from './SegmentedControl';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, SegmentedControlProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Default: Story<SegmentedControlProps>;
+export declare const Uncontrolled: Story<SegmentedControlProps>;

package/dist/{src/components → components}/Switch/Switch.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export declare const baseClass = "switch";
-export declare type SwitchSize = 'compact' | 'medium' | 'large';
-export declare type SwitchState = 'regular' | 'loading' | 'locked';
+export type SwitchSize = 'compact' | 'medium' | 'large';
+export type SwitchState = 'regular' | 'loading' | 'locked';
 export interface SwitchProps {
     ariaLabel?: string;
     className?: string;

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

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

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Story } from '@storybook/react';
+import { SwitchProps } from './Switch';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, SwitchProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Default: Story<SwitchProps>;
+export declare const States: Story;
+export declare const Availability: Story;
+export declare const Sizes: Story;

package/dist/{src/components → components}/Tab/Tab.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { Size } from 'utils';
-declare type HTMLProps = (React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+type HTMLProps = (React.AnchorHTMLAttributes<HTMLAnchorElement> & {
     href: string;
 }) | (React.ButtonHTMLAttributes<HTMLButtonElement> & {
     href?: never;
 });
-export declare type TabProps = HTMLProps & {
+export type TabProps = HTMLProps & {
     count?: number;
     isSelected?: boolean;
     asBadge?: boolean;

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

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

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { TabProps } from './Tab';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+} & {
+    count?: number | undefined;
+    isSelected?: boolean | undefined;
+    asBadge?: boolean | undefined;
+    size?: import("../..").Size | undefined;
+} & {
+    children?: React.ReactNode;
+}> | import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: undefined;
+} & {
+    count?: number | undefined;
+    isSelected?: boolean | undefined;
+    asBadge?: boolean | undefined;
+    size?: import("../..").Size | undefined;
+} & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+type ITabArgs = TabProps;
+export declare const Tab: {
+    (args: ITabArgs): React.ReactElement;
+    args: TabProps;
+};
+export declare const StatesAndVariants: () => JSX.Element;
+export declare const Sizes: () => JSX.Element;

package/dist/components/Tab/TabsWrapper.spec.d.ts

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

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+type ITabArgs = {
+    items: Array<{
+        id: string;
+        title: string;
+        count: number;
+        asBadge?: boolean;
+        isDisabled?: boolean;
+    }>;
+};
+export declare const TabsWrapper: {
+    ({ items }: ITabArgs): React.ReactElement;
+    args: ITabArgs;
+};

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

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

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { TagProps } from './Tag';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, TagProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Default: {
+    ({ children, ...args }: TagProps): React.ReactElement;
+    args: TagProps;
+};
+export declare const Kinds: {
+    ({ children, ...args }: TagProps): React.ReactElement;
+    args: {
+        children: string;
+        icon: any;
+    };
+};
+export declare const Sizes: {
+    ({ children, ...args }: TagProps): React.ReactElement;
+    args: {
+        children: string;
+        icon: any;
+    };
+};

package/dist/{src/components → components}/TagInput/EmailTagInput.d.ts

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

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

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

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Story } from '@storybook/react';
+import { TagInputProps, EmailTagInputProps } from './index';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, TagInputProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const DefaultTagInput: Story<TagInputProps>;
+export declare const DefaultEmailTagInput: Story<EmailTagInputProps>;
+export declare const Sizes: () => JSX.Element;

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

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

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Story } from '@storybook/react';
+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;

package/dist/{src/components → components}/Toast/Toast.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-declare type ToastKind = 'success' | 'warning' | 'error' | 'info';
-declare type ToastAction = {
+type ToastKind = 'success' | 'warning' | 'error' | 'info';
+type ToastAction = {
     onClick: () => void;
     label: string;
     closesOnClick?: boolean;

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

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

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Story } from '@storybook/react';
+import { ToastProps } from './Toast';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ToastProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Default: Story<ToastProps>;
+export declare const Kinds: Story;
+export declare const WithCloseIcon: Story;
+export declare const WithCustomAction: {
+    (): JSX.Element;
+    parameters: import("@storybook/types").Parameters;
+};

package/dist/{src/components → components}/Toast/ToastWrapper.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { ToastProps, Toast } from './Toast';
-declare type HorizontalPosition = 'left' | 'center' | 'right';
-declare type VerticalPosition = 'top' | 'bottom';
+type HorizontalPosition = 'left' | 'center' | 'right';
+type VerticalPosition = 'top' | 'bottom';
 export declare const ANIMATION_TIME = 200;
-interface Toast extends ToastProps {
+interface Toast extends Omit<ToastProps, 'content'> {
     id: string;
     content: React.ReactElement | string;
 }

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

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

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { ToastWrapperProps } from './ToastWrapper';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ToastWrapperProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const ToastWrapper: {
+    (args: ToastWrapperProps): React.ReactElement;
+    args: {
+        fixed: boolean;
+        toasts: ({
+            id: string;
+            kind: string;
+            content: React.JSX.Element;
+            removable?: undefined;
+            action?: undefined;
+        } | {
+            id: string;
+            kind: string;
+            content: string;
+            removable: boolean;
+            action?: undefined;
+        } | {
+            id: string;
+            kind: string;
+            content: string;
+            action: {
+                label: string;
+                handler: () => void;
+            };
+            removable?: undefined;
+        } | {
+            id: string;
+            kind: string;
+            content: string;
+            removable?: undefined;
+            action?: undefined;
+        })[];
+    };
+};

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

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

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

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { ITooltipProps } from './Tooltip';
+export declare const Tooltip: {
+    (args: ITooltipProps): React.ReactElement;
+    args: {
+        placement: string;
+        isVisible: boolean;
+        theme: string;
+        triggerOnClick: boolean;
+        arrowOffsetY: number;
+        arrowOffsetX: number;
+        offsetMainAxis: number;
+        withFadeAnimation: boolean;
+        transitionDuration: number;
+        transitionDelay: number;
+        hoverOutDelayTimeout: number;
+    };
+};
+export declare const TooltipInfo: {
+    (args: ITooltipProps): JSX.Element;
+    args: {
+        placement: string;
+        isVisible: boolean;
+        theme: string;
+        triggerOnClick: boolean;
+        arrowOffsetY: number;
+        arrowOffsetX: number;
+        offsetMainAxis: number;
+        withFadeAnimation: boolean;
+        transitionDuration: number;
+        transitionDelay: number;
+        hoverOutDelayTimeout: number;
+    };
+};
+export declare const TooltipInteractive: {
+    (args: ITooltipProps): JSX.Element;
+    args: {
+        placement: string;
+        isVisible: boolean;
+        theme: string;
+        triggerOnClick: boolean;
+        arrowOffsetY: number;
+        arrowOffsetX: number;
+        offsetMainAxis: number;
+        withFadeAnimation: boolean;
+        transitionDuration: number;
+        transitionDelay: number;
+        hoverOutDelayTimeout: number;
+    };
+};
+export declare const TooltipUserGuide: {
+    (args: ITooltipProps): JSX.Element;
+    args: {
+        placement: string;
+        isVisible: boolean;
+        theme: string;
+        triggerOnClick: boolean;
+        arrowOffsetY: number;
+        arrowOffsetX: number;
+        offsetMainAxis: number;
+        withFadeAnimation: boolean;
+        transitionDuration: number;
+        transitionDelay: number;
+        hoverOutDelayTimeout: number;
+    };
+};
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ITooltipProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export declare const UserGuideStep: React.FC<{
+    header: string;
+    text: string;
+    image?: {
+        src: string;
+        alt: string;
+    };
+    currentStep: number;
+    stepMax: number;
+    closeWithX?: boolean;
+    theme?: string;
+    handleClickPrimary: () => void;
+    handleCloseAction?: (ev: KeyboardEvent | React.MouseEvent) => void;
+}>;

package/dist/{src/components → components}/Typography/Heading.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type TSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+type TSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 interface IProps {
     size?: TSize;
     /** DOM element name that will be rendered */

package/dist/{src/components → components}/Typography/Text.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type TSize = 'md' | 'sm' | 'xs';
+type TSize = 'md' | 'sm' | 'xs';
 interface IProps {
     /** DOM element name that will be rendered */
     as?: string;

package/dist/components/UploadBar/UploadBar.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { ProgressStatus, ProgressSize } from '../Progress/constants';
+export interface UploadBarProps {
+    /**
+     * The CSS class for container
+     */
+    className?: string;
+    /**
+     * Specify the value of current progress circle (0-100)
+     */
+    progressValue: number;
+    /**
+     * Specify the upload bar title
+     */
+    title: string;
+    /**
+     * Define if upload bar should be open
+     */
+    isExpanded?: boolean;
+    /**
+     * Specify the error message
+     */
+    errorMessage?: string;
+    /**
+     * Specify the upload bar status
+     */
+    status?: ProgressStatus;
+    /**
+     * Renders given element
+     */
+    icon?: React.ReactNode;
+    /**
+     * Specify the upload bar size
+     */
+    size?: ProgressSize;
+    /**
+     * Set the component's mode to `multiple` to specify whether the upload bar should display multiple elements
+     */
+    mode?: 'single' | 'multiple';
+    /**
+     * The event handler for close icon click
+     */
+    onCloseButtonClick?: () => void;
+    /**
+     * The event handler for retry icon click
+     */
+    onRetryButtonClick?: () => void;
+}
+export declare const UploadBar: React.FC<React.PropsWithChildren<UploadBarProps>>;

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./UploadBar").UploadBarProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const UploadBarWithSingleElement: React.FC;
+export declare const UploadBarWithMultipleElements: React.FC;