@oliasoft-open-source/react-ui-library 3.12.0-beta-20 → 3.12.0-beta-21

package/dist/components/table/title/title.stories.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Table } from '../table';
+import * as storyData from '../table.stories-data';
+export default {
+    title: 'Basic/Table/Title & Header',
+    component: Table,
+    args: {
+        table: {
+            ...storyData.table,
+        },
+    },
+};
+const Template = (args) => {
+    return (_jsx(Table
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    , { ...args }));
+};
+export const Units = Template.bind({});
+Units.args = {
+    table: storyData.tableUnits,
+};
+export const ActiveRow = Template.bind({});
+ActiveRow.args = {
+    table: storyData.tableActiveRow,
+};
+export const Title = Template.bind({});
+Title.args = {
+    table: storyData.tableTitle,
+};
+export const TitleJSX = Template.bind({});
+TitleJSX.args = {
+    table: storyData.tableTitleJsx,
+};
+export const ChildComponent = Template.bind({});
+ChildComponent.args = {
+    table: storyData.tableChildComponent,
+};
+export const Filter = Template.bind({});
+Filter.args = {
+    table: storyData.tableFilters,
+};
+export const Sort = Template.bind({});
+Sort.args = {
+    table: storyData.tableSort,
+};
+export const HeaderActionsNoLabel = Template.bind({});
+HeaderActionsNoLabel.args = {
+    table: storyData.tableWithActionHeaderAndNoLabel,
+};
+export const HelpAndLibraryIcons = Template.bind({});
+HelpAndLibraryIcons.args = {
+    table: storyData.tableHelpLibraryIcons,
+};

package/dist/components/tabs/content.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface ITabContentProps {
+    children?: ReactNode[] | ReactNode;
+    activeTabIndex: number;
+    contentPadding?: boolean;
+}
+export declare const Content: ({ children, activeTabIndex, contentPadding, }: ITabContentProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/tabs/content.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cx from 'classnames';
+import styles from './tabs.module.less';
+export const Content = ({ children, activeTabIndex, contentPadding, }) => {
+    return Array.isArray(children) ? (_jsx("div", { className: cx(contentPadding ? styles.contentPadding : ''), children: children.map((child, index) => activeTabIndex === index && child) })) : null;
+};

package/dist/components/tabs/label.d.ts

@@ -0,0 +1,14 @@
+import { MouseEvent } from 'react';
+export interface ITabLabelProps {
+    label: string | number;
+    url?: string;
+    hidden?: boolean;
+    disabled?: boolean;
+    active?: boolean;
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    right?: boolean;
+    invalid?: boolean;
+    badge?: string | number;
+    testId?: string;
+}
+export declare const Label: ({ label, url, hidden, disabled, active, onClick, right, invalid, badge, testId, }: ITabLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/tabs/label.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cx from 'classnames';
+import styles from './tabs.module.less';
+import { Badge } from '../badge/badge';
+export const Label = ({ label, url, hidden, disabled, active, onClick, right, invalid, badge, testId, }) => {
+    const col_danger = getComputedStyle(document.body).getPropertyValue('--color-text-error');
+    return (_jsx("a", { id: label?.toString(), href: url, className: cx(styles.item, active ? styles.active : '', disabled ? styles.disabled : '', hidden && !active ? styles.hidden : '', right ? styles.right : styles.left), onClick: onClick, "data-testid": testId, children: invalid ? (_jsx(Badge, { small: true, margin: "-4px", color: col_danger, title: "!", children: label })) : badge ? (_jsx(Badge, { small: true, margin: "-4px", title: badge?.toString(), children: label })) : (label) }));
+};

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,33 @@
+import { ChangeEvent } from 'react';
+interface ITabOption {
+    key?: string;
+    label: string | number;
+    value: string | number;
+    url?: string;
+    hidden?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    badge?: string | number;
+    right?: boolean;
+    testId?: string;
+}
+interface ITabSelectedOption {
+    label: string | number;
+    value: string | number;
+}
+export interface ITabsProps {
+    name?: string;
+    options?: ITabOption[] | null;
+    children?: any;
+    value?: ITabSelectedOption;
+    onChange?: (event: ChangeEvent<any>) => void;
+    padding?: boolean;
+    margin?: boolean;
+    contentPadding?: boolean;
+    activeTabIndex?: number;
+    tabs?: ITabOption[] | undefined;
+    onChangeTab?: (index: number, value: string | number | null) => void;
+    testId?: string;
+}
+export declare const Tabs: ({ name, options: rawOptions, children, value: rawValue, onChange, padding, margin, contentPadding, onChangeTab, activeTabIndex: rawActiveTabIndex, tabs: tabsConfig, testId, }: ITabsProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/tabs/tabs.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import cx from 'classnames';
+import { Label } from './label';
+import { Content } from './content';
+import styles from './tabs.module.less';
+import { standardizeInputs } from '../select/select.input';
+import { DisabledContext } from '../../helpers/disabled-context';
+export const Tabs = ({ name = undefined, options: rawOptions = null, children = null, value: rawValue = undefined, onChange = () => { }, padding = false, margin = true, contentPadding = true, 
+//deprecated:
+onChangeTab, activeTabIndex: rawActiveTabIndex = undefined, tabs: tabsConfig = undefined, testId, }) => {
+    const disabledContext = useContext(DisabledContext);
+    //----------------------------------------------------------------------------
+    // Deprecation / backwards-compatibility
+    const isDeprecated = onChangeTab !== undefined;
+    const rawTabs = children
+        ? children.map((c, i) => ({
+            value: i,
+            url: c.props.url,
+            label: c.props.label,
+            hidden: c.props.hidden,
+            disabled: c.props.disabled || disabledContext,
+            badge: c.props.badge,
+            testId: c.props?.testId && `${c.props.testId}-${i}`,
+        }))
+        : rawOptions || tabsConfig;
+    const { simpleInputs, options: tabs, selectedOptions: value, } = isDeprecated
+        ? {
+            simpleInputs: false,
+            options: rawTabs,
+            selectedOptions: undefined,
+        }
+        : standardizeInputs(rawTabs, rawValue);
+    const selectedValue = isDeprecated || value === undefined || value === null
+        ? undefined
+        : simpleInputs
+            ? value
+            : value.value;
+    const activeTabIndexBase = rawActiveTabIndex !== undefined
+        ? rawActiveTabIndex
+        : tabs?.findIndex((t) => t.value === selectedValue);
+    const activeTabIndex = activeTabIndexBase === -1 ? 0 : activeTabIndexBase;
+    //----------------------------------------------------------------------------
+    const renderTab = (tab, index) => {
+        const { label, url, hidden, disabled, value, right, invalid, badge, testId, } = tab;
+        return (_jsx(Label, { label: label, url: url, hidden: hidden, disabled: disabled || disabledContext, invalid: invalid, badge: badge, right: right, active: isDeprecated ? index === activeTabIndex : value === selectedValue, onClick: isDeprecated
+                ? () => {
+                    //deprecated
+                    const value = tab.key || label || null; //return key if it exists, otherwise use label
+                    onChangeTab(index, value);
+                }
+                : (evt) => {
+                    const target = evt.target;
+                    target.name = name;
+                    target.value = tab.value;
+                    target.label = label;
+                    onChange(evt);
+                }, testId: testId }, index));
+    };
+    if (tabs) {
+        return (_jsxs("div", { children: [_jsx("div", { className: cx(styles.tabs, padding ? styles.padding : '', margin ? styles.margin : ''), "data-testid": testId, children: tabs.map(renderTab) }), _jsx(Content, { activeTabIndex: activeTabIndex ?? 0, contentPadding: contentPadding, children: children })] }));
+    }
+    return null;
+};

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

@@ -0,0 +1,10 @@
+import { StoryFn } from '@storybook/react';
+import { ITabsProps } from './tabs';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<ITabsProps>;
+export declare const WithChildren: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITabsProps>;
+export declare const NoMargin: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITabsProps>;
+export declare const HorizontalPadding: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITabsProps>;
+export declare const Alignment: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITabsProps>;
+export declare const Managed: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/tabs/tabs.stories.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Tabs } from './tabs';
+export default {
+    title: 'Navigation/Tabs',
+    component: Tabs,
+    args: {
+        name: 'example',
+        options: [
+            { label: 'Tab', value: 0 },
+            { label: 'Tab', value: 1 },
+            { label: 'With Badge', value: 2, badge: '3' },
+            { label: 'Invalid', value: 3, invalid: true },
+            { label: 'Disabled', value: 4, disabled: true },
+            { label: 'Hidden tab', value: 5, hidden: true },
+        ],
+        value: 0,
+    },
+};
+const Template = (args) => _jsx(Tabs, { ...args });
+export const Default = Template.bind({});
+// TODO - @Jack & @Oleg & @Mark - revisit, why label and disabled used for div
+// JACK - this looks like a deprecated usage (the tab names & states are grabbed from 'label', etc but it seems hacky). I can't find any evidence of it on WD. If the other apps don't use it either we should consider removing it
+export const WithChildren = Template.bind({});
+WithChildren.args = {
+    children: [
+        // @ts-ignore: write explicit reason
+        _jsx("div", { label: "Tab 0", children: _jsx("h3", { children: "Tab 0 Content" }) }),
+        // @ts-ignore: write explicit reason
+        _jsx("div", { label: "Tab 1", hidden: true, children: _jsx("h3", { children: "Tab 1 Content" }) }),
+        // @ts-ignore: write explicit reason
+        _jsx("div", { label: "Tab 2", disabled: true, children: _jsx("h3", { children: "Tab 2 Content" }) }),
+        // @ts-ignore: write explicit reason
+        _jsx("div", { label: "Tab 3", children: _jsx("h3", { children: "Tab 3 Content" }) }),
+        // @ts-ignore: write explicit reason
+        _jsx("div", { label: "Tab 4", children: _jsx("h3", { children: "Tab 4 Content" }) }),
+    ],
+};
+export const NoMargin = Template.bind({});
+NoMargin.args = { margin: false };
+export const HorizontalPadding = Template.bind({});
+HorizontalPadding.parameters = {
+    layout: 'fullscreen',
+    docs: {
+        description: {
+            story: 'When you want the divider to fill the edges of its container.',
+        },
+    },
+};
+HorizontalPadding.args = { padding: true };
+export const Alignment = Template.bind({});
+Alignment.args = {
+    options: [
+        { label: 'Tab 0', value: 0 },
+        { label: 'Tab 1', value: 1 },
+        { label: 'Tab 2', value: 2 },
+        { label: 'Tab 3', value: 3, right: true },
+        { label: 'Tab 4', value: 4, right: true },
+    ],
+};
+export const Managed = () => {
+    const options = [
+        {
+            label: 'Strawberries',
+            value: 'strawberries',
+        },
+        {
+            label: 'Bananas',
+            value: 'bananas',
+        },
+        {
+            label: 'Apples',
+            value: 'apples',
+            disabled: true,
+        },
+        {
+            label: 'Pomegranates',
+            value: 'pomegranates',
+        },
+    ];
+    const [selectedTab, setSelectedTab] = useState(options[0]);
+    return (_jsxs(_Fragment, { children: [_jsx(Tabs, { name: "example", value: selectedTab, options: options, onChange: (evt) => {
+                    const { value, label } = evt.target;
+                    setSelectedTab({ value, label });
+                } }), _jsxs("span", { children: ["Eating ", selectedTab.value, "..."] })] }));
+};

package/dist/components/text/text.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface ITextProps {
+    bold?: boolean;
+    center?: boolean;
+    error?: boolean;
+    faint?: boolean;
+    link?: boolean;
+    muted?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;
+    small?: boolean;
+    success?: boolean;
+    warning?: boolean;
+    children?: React.ReactNode;
+}
+export declare const Text: ({ children, bold, center, error, faint, link, muted, onClick, small, success, warning, }: ITextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/text/text.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cx from 'classnames';
+import styles from './text.module.less';
+export const Text = ({ children, bold = false, center = false, error = false, faint = false, link = false, muted = false, onClick, small = false, success = false, warning = false, }) => {
+    return (_jsx("span", { className: cx(bold && styles.bold, center && styles.center, error && styles.error, faint && styles.faint, link && styles.link, muted && styles.muted, onClick && styles.clickable, small && styles.small, success && styles.success, warning && styles.warning), onClick: onClick, children: children }));
+};

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

@@ -0,0 +1,6 @@
+import { ITextProps } from './text';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITextProps>;
+export declare const Small: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITextProps>;
+export declare const Link: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITextProps>;

package/dist/components/text/text.stories.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from './text';
+export default {
+    title: 'Basic/Text',
+    component: Text,
+    args: {
+        children: 'Text goes here',
+        small: false,
+        muted: false,
+        error: false,
+        warning: false,
+        success: false,
+        link: false,
+        onClick: undefined,
+    },
+};
+const Template = (args) => _jsx(Text, { ...args });
+export const Default = Template.bind({});
+export const Small = Template.bind({});
+Small.args = { small: true };
+export const Link = Template.bind({});
+Link.args = { link: true, onClick: () => { } };

package/dist/components/text-link/text-link.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface ITextLinkProps {
+    href?: string;
+    target?: string;
+    testId?: string;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    children?: React.ReactNode;
+}
+export declare const TextLink: ({ children, href, target, testId, onClick, }: ITextLinkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/text-link/text-link.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from '../text/text';
+export const TextLink = ({ children, href = undefined, target = undefined, testId, onClick, }) => {
+    return (_jsx("a", { href: href, target: target, onClick: onClick, "data-testid": testId, children: _jsx(Text, { link: true, children: children }) }));
+};

package/dist/components/text-link/text-link.stories.d.ts

@@ -0,0 +1,5 @@
+import { ITextLinkProps } from './text-link';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITextLinkProps>;
+export declare const OnClick: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITextLinkProps>;

package/dist/components/text-link/text-link.stories.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextLink } from './text-link';
+export default {
+    title: 'Basic/TextLink',
+    component: TextLink,
+    args: {
+        children: 'Link text goes here',
+        href: 'http://oliasoft.com',
+    },
+};
+const Template = (args) => _jsx(TextLink, { ...args });
+export const Default = Template.bind({});
+export const OnClick = Template.bind({});
+OnClick.args = {
+    href: undefined,
+    onClick: () => console.log('Clicked!'),
+};

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,22 @@
+import React, { ChangeEvent, KeyboardEvent, FocusEvent } from 'react';
+export interface ITextAreaProps {
+    name?: string;
+    value?: string | number;
+    placeholder?: string;
+    cols?: number;
+    rows?: number;
+    disabled?: boolean;
+    onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+    onKeyPress?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
+    tabIndex?: number;
+    error?: string | number | React.ReactNode;
+    warning?: string | number | React.ReactNode;
+    tooltip?: string | number | React.ReactNode;
+    maxTooltipWidth?: string | number;
+    resize?: any;
+    monospace?: boolean;
+    testId?: string;
+}
+export declare const TextArea: ({ name, value, placeholder, cols, rows, disabled, onChange, onKeyPress, onFocus, onBlur, tabIndex, error, warning, tooltip, maxTooltipWidth, resize, monospace, testId, }: ITextAreaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/textarea/textarea.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, } from 'react';
+import cx from 'classnames';
+import styles from './textarea.module.less';
+import { Tooltip } from '../tooltip/tooltip';
+import { isStringNumberOrNode } from '../../helpers/types';
+import { DisabledContext } from '../../helpers/disabled-context';
+export const TextArea = ({ name, value = '', placeholder = '', cols, rows, disabled = false, onChange = () => { }, onKeyPress = () => { }, onFocus = () => { }, onBlur = () => { }, tabIndex = 0, error = null, warning = null, tooltip = null, maxTooltipWidth, resize, monospace = false, testId, }) => {
+    const disabledContext = useContext(DisabledContext);
+    const textarea = (_jsx("textarea", { className: cx(styles.textarea, error ? styles.error : '', warning ? styles.warning : '', monospace ? styles.monospace : ''), name: name, value: value, placeholder: placeholder, cols: cols, rows: rows, onChange: onChange, disabled: disabled || disabledContext, onKeyPress: onKeyPress, onFocus: onFocus, onBlur: onBlur, tabIndex: tabIndex, style: { resize }, "data-testid": testId }));
+    return (_jsx(Tooltip, { error: !!error, warning: !!warning, text: tooltip || error || warning, enabled: (tooltip && isStringNumberOrNode(tooltip)) ||
+            (error && isStringNumberOrNode(error)) ||
+            (warning && isStringNumberOrNode(warning)) ||
+            false, maxWidth: maxTooltipWidth, placement: "bottom-center", children: textarea }));
+};

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

@@ -0,0 +1,4 @@
+import { ITextAreaProps } from './textarea';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITextAreaProps>;

package/dist/components/textarea/textarea.stories.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useArgs } from '@storybook/addons';
+import { TextArea } from './textarea';
+export default {
+    title: 'Forms/TextArea',
+    component: TextArea,
+    args: {
+        disabled: false,
+    },
+};
+const Template = (args) => {
+    const [_, updateArgs] = useArgs();
+    const handleChange = (evt) => {
+        updateArgs({ value: evt.target.value });
+    };
+    return _jsx(TextArea, { ...args, onChange: handleChange });
+};
+export const Default = Template.bind({});

package/dist/components/toaster/toaster.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { Id as ToastId } from "react-toastify";
+import "./toaster.less";
+import { MessageType } from "../message/enum";
+export { ToastContainer as Toaster } from 'react-toastify';
+export type IMessageType = {
+    type: MessageType;
+    icon: boolean;
+    heading: string;
+    content: string;
+    details?: string;
+};
+export interface IToastProps {
+    id?: ToastId;
+    message: IMessageType;
+    autoClose?: number;
+    onClose?: () => void;
+}
+export declare const toast: ({ id, message, autoClose, onClose, }: IToastProps) => void | React.ReactText;

package/dist/components/toaster/toaster.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slide, toast as toastBase } from "react-toastify";
+import { Message } from "../message/message";
+import { Dismiss } from "../message/dismiss";
+import "./toaster.less";
+import { MessageType } from "../message/enum";
+export { ToastContainer as Toaster } from 'react-toastify';
+export const toast = ({ id, message, autoClose = 6000, onClose, }) => {
+    const { type } = message;
+    const CloseButton = ({ closeToast, }) => _jsx(Dismiss, { type: type, onClose: closeToast, isInToast: true });
+    const content = (_jsx(Message, { message: {
+            ...message,
+            visible: true,
+            width: '100%',
+            maxHeight: '500px',
+            withDismiss: false,
+        } }));
+    const toastType = (() => {
+        switch (message?.type) {
+            case MessageType.SUCCESS:
+                return toastBase.TYPE.SUCCESS;
+            case MessageType.WARNING:
+                return toastBase.TYPE.WARNING;
+            case MessageType.ERROR:
+                return toastBase.TYPE.ERROR;
+            default:
+                return toastBase.TYPE.INFO;
+        }
+    })();
+    if (id !== undefined && toastBase.isActive(id)) {
+        return toastBase.update(id, {
+            render: content,
+            autoClose,
+            onClose,
+            type: toastType,
+        });
+    }
+    return toastBase(content, {
+        toastId: id,
+        autoClose,
+        onClose,
+        hideProgressBar: false,
+        icon: false,
+        closeOnClick: false,
+        pauseOnHover: true,
+        draggable: false,
+        closeButton: CloseButton,
+        transition: Slide,
+        type: toastType,
+    });
+};

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

@@ -0,0 +1,15 @@
+import { IToastProps } from "./toaster";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, IToastProps>;
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IToastProps>;
+export declare const PreventDuplicates: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            iframeHeight: number;
+            description: {
+                story: string;
+            };
+        };
+    };
+};

package/dist/components/toaster/toaster.stories.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { toast } from "./toaster";
+import { Button } from "../button/button";
+import { Spacer } from "../layout/spacer/spacer";
+import { MessageType } from "../message/enum";
+const messageSuccess = {
+    type: MessageType.SUCCESS,
+    icon: true,
+    heading: 'Heading',
+    content: 'Great results',
+};
+const messageError = {
+    type: MessageType.ERROR,
+    icon: true,
+    heading: 'Heading',
+    content: 'An error has happened',
+    details: 'Bad input data lorem ipsum dolor est compendum lorem ipsum.',
+};
+const messageWarning = {
+    type: MessageType.WARNING,
+    icon: true,
+    heading: 'Heading',
+    content: 'Warning message',
+};
+const messageInfo = {
+    type: MessageType.INFO,
+    icon: true,
+    heading: 'Heading',
+    content: 'Long content lorem ipsum dolor est compendum lorem ipsum.',
+};
+export default {
+    title: 'Modals/Toaster',
+    parameters: {
+        docs: {
+            story: {
+                inline: false,
+                iframeHeight: 400,
+            },
+        },
+    },
+    source: { type: 'code' },
+    args: {
+        id: undefined,
+        message: messageInfo,
+        autoClose: 6000,
+        onClose: () => { },
+    },
+};
+const Template = () => {
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Info", onClick: () => toast({
+                    message: messageInfo,
+                    onClose: () => console.log('toast closed'),
+                }) }), _jsx(Spacer, {}), _jsx(Button, { label: "Error", onClick: () => toast({
+                    message: messageError,
+                    onClose: () => console.log('toast closed'),
+                }) }), _jsx(Spacer, {}), _jsx(Button, { label: "Warning", onClick: () => toast({
+                    message: messageWarning,
+                    onClose: () => console.log('toast closed'),
+                }) }), _jsx(Spacer, {}), _jsx(Button, { label: "Success", onClick: () => toast({
+                    message: messageSuccess,
+                    onClose: () => console.log('toast closed'),
+                }) })] }));
+};
+export const Default = Template.bind({});
+export const PreventDuplicates = () => (_jsx(Button, { label: "Show Toast", onClick: () => {
+        const isSuccess = Math.random() >= 0.5;
+        toast({
+            message: {
+                type: isSuccess ? 'Success' : 'Error',
+                icon: true,
+                content: isSuccess ? 'Success' : 'Error',
+            },
+            onClose: () => console.log('toast closed'),
+            id: 'uniqueId',
+        });
+    } }));
+PreventDuplicates.parameters = {
+    docs: {
+        iframeHeight: 200,
+        description: {
+            story: 'Pass a unique `id` in the `toast` object to prevent duplicates. Successive toasts with the same ID will update the existing toast.',
+        },
+    },
+};

package/dist/components/toggle/toggle.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface IToggleProps {
+    name?: string;
+    label?: string | React.ReactElement;
+    checked?: boolean;
+    disabled?: boolean;
+    small?: boolean;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    noMargin?: boolean;
+    testId?: string;
+    helpText?: string;
+    onClickHelp?: (event: any) => void;
+}
+export declare const Toggle: ({ name, label, checked, disabled, small, onChange, noMargin, testId, helpText, onClickHelp, }: IToggleProps) => import("react/jsx-runtime").JSX.Element;