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

package/dist/components/toggle/toggle.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import cx from 'classnames';
+import styles from './toggle.module.less';
+import { DisabledContext } from '../../helpers/disabled-context';
+import { HelpIcon } from '../help-icon/help-icon';
+import { InputType } from "../../common-enum";
+export const Toggle = ({ name, label, checked = false, disabled, small = false, onChange, noMargin = false, testId, helpText, onClickHelp, }) => {
+    const disabledContext = useContext(DisabledContext);
+    const showHelp = helpText || onClickHelp;
+    return (_jsxs("div", { className: cx(styles.toggle, disabled || disabledContext ? styles.disabled : null, small ? styles.small : null, noMargin ? styles.noMargin : null), onClick: (evt) => {
+            evt.target.name = name;
+            evt.target.checked = !checked;
+            evt.target.value = !checked;
+            onChange(evt);
+        }, "data-testid": testId, children: [_jsx("input", { type: InputType.CHECKBOX, name: name, value: checked.toString(), disabled: disabled || disabledContext, checked: checked, onChange: () => { } }), _jsx("label", { children: label }), showHelp && _jsx(HelpIcon, { text: helpText, onClick: onClickHelp })] }));
+};

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

@@ -0,0 +1,10 @@
+import { StoryFn } from '@storybook/react';
+import { IToggleProps } from './toggle';
+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, IToggleProps>;
+export declare const Disabled: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IToggleProps>;
+export declare const DisabledChecked: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IToggleProps>;
+export declare const HelpText: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IToggleProps>;
+export declare const OnClickHelp: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IToggleProps>;
+export declare const TestClickEvent: StoryFn<IToggleProps>;

package/dist/components/toggle/toggle.stories.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useArgs } from '@storybook/addons';
+import { Toggle } from './toggle';
+export default {
+    title: 'Forms/Toggle',
+    component: Toggle,
+    args: {
+        label: 'Label',
+    },
+};
+const Template = (args) => {
+    const [{ checked }, updateArgs] = useArgs();
+    const handleChange = () => {
+        updateArgs({ checked: !checked });
+    };
+    return (_jsx(Toggle
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    , { ...args, onChange: handleChange }));
+};
+export const Default = Template.bind({});
+export const Disabled = Template.bind({});
+Disabled.args = { disabled: true };
+export const DisabledChecked = Template.bind({});
+DisabledChecked.args = { checked: true, disabled: true };
+export const HelpText = Template.bind({});
+HelpText.args = {
+    helpText: 'Help text',
+};
+export const OnClickHelp = Template.bind({});
+OnClickHelp.args = {
+    onClickHelp: () => console.log('Help clicked'),
+};
+export const TestClickEvent = () => {
+    const [checked, setChecked] = useState(false);
+    return (_jsx(Toggle, { name: "name", label: "Label", checked: checked, onChange: (evt) => {
+            const { name, value, checked } = evt.target;
+            setChecked(checked);
+            console.log(name, value, checked);
+        } }));
+};

package/dist/components/tooltip/tooltip-layer.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode, CSSProperties } from 'react';
+import { ArrowProps } from 'react-laag';
+export interface ITooltipLayerProps {
+    text?: string | number | ReactNode;
+    error?: boolean;
+    warning?: boolean;
+    fontSize?: string | number;
+    padding?: string | number;
+    maxWidth?: string | number;
+    layerProps?: {
+        style?: CSSProperties;
+        [key: string]: any;
+    };
+    arrowProps?: Partial<ArrowProps>;
+}
+export declare const TooltipLayer: ({ text, error, warning, maxWidth, fontSize, padding, layerProps, arrowProps, }: ITooltipLayerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/tooltip/tooltip-layer.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Arrow } from 'react-laag';
+import cx from 'classnames';
+import styles from './tooltip.module.less';
+export const TooltipLayer = ({ text = '', error = false, warning = false, maxWidth = 'none', fontSize = 'inherit', padding = '4px 8px', layerProps = {
+    style: {
+        position: 'fixed',
+    },
+}, arrowProps = {
+    style: {
+        top: '100%',
+        bottom: undefined,
+        left: '50%',
+        right: undefined,
+        position: 'absolute',
+    },
+}, }) => {
+    return (_jsxs("div", { className: cx(styles.tooltip, error ? styles.error : warning ? styles.warning : ''), ...layerProps, children: [_jsx("div", { style: { maxWidth, fontSize, padding }, children: text }), _jsx(Arrow, { ...arrowProps, size: 6 })] }));
+};

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { Placement } from 'react-laag';
+export interface ITooltipProps {
+    text?: string | number | ReactNode;
+    error?: boolean;
+    warning?: boolean;
+    placement?: Placement;
+    possiblePlacements?: Placement[];
+    enabled?: boolean;
+    maxWidth?: string | number;
+    triggerOffset?: number;
+    fontSize?: string | number;
+    padding?: string | number;
+    display?: string;
+    flex?: string;
+    forceOpen?: boolean;
+    children?: ReactNode;
+}
+export declare const Tooltip: ({ children, text, error, placement, possiblePlacements, enabled, warning, maxWidth, triggerOffset, fontSize, padding, display, flex, forceOpen, }: ITooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+import { useHover, useLayer } from 'react-laag';
+import { TooltipLayer } from './tooltip-layer';
+export const Tooltip = ({ children, text = '', error = false, placement = 'top-center', possiblePlacements = [
+    'top-center',
+    'left-center',
+    'bottom-center',
+    'right-center',
+], enabled = true, warning = false, maxWidth = 'none', triggerOffset = 12, fontSize = 'inherit', padding = '4px 8px', display = 'inline', flex = 'none', forceOpen = false, }) => {
+    const visible = enabled &&
+        (isValidElement(text) || (typeof text === 'string' && text.length > 0));
+    const [isOver, hoverProps, forceClose] = useHover({
+        delayEnter: 100,
+        delayLeave: 0,
+    });
+    const isOpen = !visible ? false : forceOpen ? true : isOver;
+    const { renderLayer, triggerProps, layerProps, arrowProps } = useLayer({
+        isOpen,
+        overflowContainer: true,
+        ResizeObserver,
+        auto: true,
+        triggerOffset,
+        placement,
+        possiblePlacements,
+        onParentClose: forceClose,
+    });
+    return (_jsxs(_Fragment, { children: [isOpen &&
+                renderLayer(_jsx(TooltipLayer, { text: text, error: error, warning: warning, padding: padding, maxWidth: maxWidth, fontSize: fontSize, layerProps: layerProps, arrowProps: arrowProps })), _jsx("span", { ...triggerProps, ...hoverProps, style: { display, flex }, children: children })] }));
+};

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

@@ -0,0 +1,11 @@
+import { ITooltipProps } from './tooltip';
+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, ITooltipProps>;
+export declare const Error: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITooltipProps>;
+export declare const Warning: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITooltipProps>;
+export declare const JSX: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITooltipProps>;
+export declare const Placement: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITooltipProps>;
+export declare const Offset: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITooltipProps>;
+export declare const ForceOpen: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITooltipProps>;
+export declare const Display: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITooltipProps>;

package/dist/components/tooltip/tooltip.stories.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Tooltip } from './tooltip';
+export default {
+    title: 'Basic/Tooltip',
+    component: Tooltip,
+    args: {
+        text: 'Tooltip text',
+        error: false,
+        warning: false,
+        enabled: true,
+        placement: undefined,
+        triggerOffset: undefined,
+        fontSize: undefined,
+        padding: undefined,
+        maxWidth: undefined,
+        display: undefined,
+        children: _jsx("span", { children: "Hover over me" }),
+    },
+};
+const Template = (args) => (_jsx(Tooltip
+// eslint-disable-next-line react/jsx-props-no-spreading
+, { ...args }));
+export const Default = Template.bind({});
+export const Error = Template.bind({});
+Error.args = { error: true };
+export const Warning = Template.bind({});
+Warning.args = { warning: true };
+export const JSX = Template.bind({});
+JSX.args = {
+    text: (_jsxs(_Fragment, { children: ["Select from options:", _jsxs("ul", { children: [_jsx("li", { children: "One" }), _jsx("li", { children: "Two" })] })] })),
+};
+export const Placement = Template.bind({});
+Placement.args = { placement: 'right-end' };
+export const Offset = Template.bind({});
+Offset.args = { triggerOffset: 30 };
+export const ForceOpen = Template.bind({});
+ForceOpen.args = { forceOpen: true };
+export const Display = Template.bind({});
+Display.args = {
+    display: 'block',
+    children: _jsx("div", { style: { background: 'lightgray' }, children: "Block element" }),
+};
+Display.parameters = {
+    docs: {
+        source: { type: 'code' },
+        description: {
+            story: 'The `Tooltip` trigger wrapper defaults to `display: inline`. If you encounter layout issues, try changing this to match its content (i.e. `display: block` for `block` elements)',
+        },
+    },
+};

package/dist/components/tooltip/tooltip.test-case.stories.d.ts

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

package/dist/components/tooltip/tooltip.test-case.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from './tooltip';
+import { Menu } from '../menu/menu';
+import { menu } from '../menu/menu.stories-data';
+export default {
+    title: 'Basic/Tooltip/Test Cases',
+    component: Tooltip,
+    args: {
+        text: 'Tooltip text',
+    },
+};
+const Template = (args) => (_jsx(Tooltip
+// eslint-disable-next-line react/jsx-props-no-spreading
+, { ...args }));
+export const CloseWhenMenuOpen = Template.bind({});
+CloseWhenMenuOpen.args = {
+    children: _jsx(Menu, { menu: menu }),
+    placement: 'bottom-end',
+    display: 'inline-block',
+};

package/dist/components/top-bar/element/element.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+import { TopBarElementType } from "./enum";
+type BaseElementProps = {
+    label?: string;
+    icon?: ReactNode;
+    onClick?: () => void;
+    testId?: string;
+};
+type LinkElement = BaseElementProps & {
+    type: TopBarElementType.LINK;
+    url: string;
+    active?: boolean;
+    disabled?: boolean;
+};
+type ButtonElement = BaseElementProps & {
+    type: TopBarElementType.BUTTON;
+    colored?: boolean;
+    disabled?: boolean;
+};
+type MenuElement = BaseElementProps & {
+    type: TopBarElementType.MENU;
+    sections: any[] | ReactNode;
+};
+type ComponentElement = {
+    type: TopBarElementType.COMPONENT;
+    component: ReactNode;
+};
+export type TTopBarElementProps = {
+    element: LinkElement | ButtonElement | MenuElement | ComponentElement;
+};
+export declare const Element: ({ element }: TTopBarElementProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/top-bar/element/element.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cx from "classnames";
+import { Button } from "../../button/button";
+import { Menu } from "../../menu/menu";
+import { Link } from "./link";
+import styles from "../top-bar.module.less";
+import { TriggerType } from "../../../common-enum";
+import { TopBarElementType } from "./enum";
+export const Element = ({ element }) => {
+    switch (element.type) {
+        case TopBarElementType.LINK:
+            return (_jsx("div", { className: styles.item, children: _jsx(Link, { label: element.label, url: element.url, icon: element.icon, onClick: element.onClick, active: element.active, disabled: element.disabled, testId: element.testId }) }));
+        case TopBarElementType.BUTTON:
+            return (_jsx("div", { className: cx(styles.item, styles.button), children: _jsx(Button, { label: element.label, colored: element.colored, pill: true, disabled: element.disabled, onClick: element.onClick, icon: element.icon, testId: element.testId }) }));
+        case TopBarElementType.MENU:
+            return (_jsx("div", { className: cx(styles.item, styles.menu), children: _jsx(Menu, { maxHeight: "100%", menu: {
+                        trigger: TriggerType.COMPONENT,
+                        fullHeightTrigger: true,
+                        placement: 'bottom-start',
+                        component: (_jsx(Link, { label: element.label, icon: element.icon, onClick: element.onClick })),
+                        sections: element.sections,
+                    } }) }));
+        case TopBarElementType.COMPONENT:
+            return _jsx("div", { className: styles.item, children: element.component });
+        default:
+            return null;
+    }
+};

package/dist/components/top-bar/element/enum.d.ts

@@ -0,0 +1,6 @@
+export declare enum TopBarElementType {
+    LINK = "Link",
+    BUTTON = "Button",
+    MENU = "Menu",
+    COMPONENT = "Component"
+}

package/dist/components/top-bar/element/enum.js

@@ -0,0 +1,7 @@
+export var TopBarElementType;
+(function (TopBarElementType) {
+    TopBarElementType["LINK"] = "Link";
+    TopBarElementType["BUTTON"] = "Button";
+    TopBarElementType["MENU"] = "Menu";
+    TopBarElementType["COMPONENT"] = "Component";
+})(TopBarElementType || (TopBarElementType = {}));

package/dist/components/top-bar/element/link.d.ts

@@ -0,0 +1,11 @@
+import React, { MouseEventHandler } from 'react';
+export type TTopBarLinkProps = {
+    label?: string;
+    url?: string;
+    icon?: React.ReactNode;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    active?: boolean;
+    disabled?: boolean;
+    testId?: string;
+};
+export declare const Link: ({ label, url, icon, onClick, active, disabled, testId, }: TTopBarLinkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/top-bar/element/link.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import cx from 'classnames';
+import styles from '../top-bar.module.less';
+import { DisabledContext } from '../../../helpers/disabled-context';
+export const Link = ({ label, url, icon, onClick, active, disabled, testId, }) => {
+    const disabledContext = useContext(DisabledContext);
+    const handleClick = (event) => {
+        if (disabled || disabledContext) {
+            event.preventDefault();
+        }
+        onClick?.(event);
+    };
+    return (_jsxs("a", { className: cx(styles.link, active ? styles.active : ''), href: url || '#', onClick: handleClick, "aria-disabled": disabled || disabledContext, "data-testid": testId, role: onClick && !url ? 'button' : undefined, children: [icon, _jsx("span", { className: styles.label, children: label })] }));
+};

package/dist/components/top-bar/title.d.ts

@@ -0,0 +1,9 @@
+import React, { MouseEventHandler } from 'react';
+export interface ITopBarTitleProps {
+    label?: string;
+    logo?: React.ReactNode;
+    url?: string;
+    version?: string | number;
+    onClick?: MouseEventHandler<HTMLDivElement | HTMLAnchorElement>;
+}
+export declare const Title: ({ label, logo, url, version, onClick, }: ITopBarTitleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/top-bar/title.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import styles from './top-bar.module.less';
+export const Title = ({ label, logo, url, version, onClick, }) => {
+    const content = (_jsxs("div", { className: styles.title, children: [logo && _jsx("div", { className: styles.logo, children: logo }), label && _jsx("span", { className: styles.label, children: label }), version && _jsx("div", { className: styles.version, children: version })] }));
+    return (_jsx("div", { className: cx(styles.item, styles.brand), children: url ? (_jsx("a", { href: url, onClick: onClick, children: content })) : (_jsx("div", { onClick: onClick, children: content })) }));
+};

package/dist/components/top-bar/top-bar.d.ts

@@ -0,0 +1,11 @@
+import { ITopBarTitleProps } from './title';
+import { TTopBarElementProps } from './element/element';
+export interface ITopBarProps {
+    title?: ITopBarTitleProps;
+    content?: TTopBarElementProps[];
+    contentRight?: TTopBarElementProps[];
+    warning?: string;
+    height?: string | number;
+    fixedPosition?: boolean;
+}
+export declare const TopBar: ({ title, content, contentRight, warning, height, fixedPosition, }: ITopBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/top-bar/top-bar.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import { Warning } from './warning';
+import { Title } from './title';
+import { Element } from './element/element';
+import styles from './top-bar.module.less';
+export const TopBar = ({ title, content = [], contentRight = [], warning = '', height, fixedPosition = true, }) => {
+    return (_jsxs("div", { children: [warning && _jsx(Warning, { warning: warning }), _jsxs("div", { className: cx(styles.topbar, fixedPosition ? styles.fixed : ''), style: { height }, children: [_jsxs("div", { className: styles.left, children: [title && (_jsx(Title, { label: title.label, logo: title.logo, url: title.url, version: title.version, onClick: title.onClick })), content.map((element, i) => {
+                                if (element) {
+                                    return _jsx(Element, { element: element }, i);
+                                }
+                                return null;
+                            })] }), _jsx("div", { className: styles.right, children: contentRight.map((element, i) => {
+                            if (element) {
+                                return _jsx(Element, { element: element }, i);
+                            }
+                            return null;
+                        }) })] })] }));
+};

package/dist/components/top-bar/top-bar.stories.d.ts

@@ -0,0 +1,6 @@
+import { ITopBarProps } from "./top-bar";
+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, ITopBarProps>;
+export declare const WithWarning: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITopBarProps>;
+export declare const TextBranding: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITopBarProps>;

package/dist/components/top-bar/top-bar.stories.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TopBar } from "./top-bar";
+import { Menu } from "../menu/menu";
+import { Button } from "../button/button";
+import { Badge } from "../badge/badge";
+import LogoSVG from "../../images/logo.svg";
+import { IconType, TriggerType } from "../../common-enum";
+import { MenuType } from "../menu/enum";
+const content = [
+    {
+        type: 'Link',
+        label: 'Link',
+        onClick: () => { },
+    },
+    {
+        type: 'Link',
+        label: 'Active',
+        active: true,
+        onClick: () => { },
+    },
+    {
+        type: 'Link',
+        label: 'Disabled',
+        disabled: true,
+        onClick: () => { },
+    },
+    {
+        type: 'Menu',
+        label: 'Dropdown',
+        onClick: () => { },
+        sections: [
+            {
+                type: 'Option',
+                label: 'Alpacas',
+                onClick: () => { },
+            },
+            {
+                type: 'Option',
+                label: 'Llamas',
+                onClick: () => { },
+            },
+        ],
+    },
+    {
+        type: 'Button',
+        label: 'Save',
+        colored: true,
+        onClick: () => { },
+        testId: 'top-bar-button-save',
+    },
+];
+const contentRight = [
+    {
+        type: 'Component',
+        component: (_jsx(Badge, { title: "3", small: true, margin: "5px", children: _jsx(Button, { icon: IconType.NOTIFICATION, round: true, onClick: () => { } }) })),
+    },
+    {
+        type: 'Component',
+        component: (_jsx(Menu, { menu: {
+                trigger: TriggerType.COMPONENT,
+                fullHeightTrigger: true,
+                placement: 'bottom-end',
+                component: _jsx(Button, { label: "TU", round: true, onClick: () => { } }),
+                sections: [
+                    {
+                        type: MenuType.HEADING,
+                        label: 'Test User',
+                    },
+                    {
+                        type: MenuType.OPTION,
+                        label: 'Profile',
+                        icon: 'user',
+                        onClick: () => { },
+                    },
+                    { type: MenuType.DIVIDER, },
+                    {
+                        type: MenuType.OPTION,
+                        label: 'Sign out',
+                        icon: 'lock',
+                        onClick: () => { },
+                    },
+                ],
+            } })),
+    },
+];
+export default {
+    title: 'Navigation/TopBar',
+    component: TopBar,
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            story: {
+                inline: false,
+                iframeHeight: 400,
+            },
+        },
+    },
+    argTypes: {
+        height: { control: 'text' },
+    },
+    args: {
+        title: {
+            logo: _jsx("img", { src: LogoSVG, alt: "logo" }),
+            version: 'V1.2.3',
+            onClick: () => { },
+        },
+        content,
+        contentRight,
+    },
+};
+const Template = (args) => _jsx(TopBar, { ...args });
+export const Default = Template.bind({});
+export const WithWarning = Template.bind({});
+WithWarning.args = {
+    warning: 'Application update available. Please refresh your browser.',
+};
+export const TextBranding = Template.bind({});
+TextBranding.args = {
+    title: {
+        label: 'Text Branding',
+        version: 'V1.2.3',
+        onClick: () => { },
+    },
+};

package/dist/components/top-bar/top-bar.testcase.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryFn } from '@storybook/react';
+import { ITopBarProps } from './top-bar';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const OverflowingLinks: StoryFn<ITopBarProps>;

package/dist/components/top-bar/top-bar.testcase.stories.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TopBar } from './top-bar';
+import { Button } from '../button/button';
+import { Badge } from '../badge/badge';
+import LogoSVG from '../../images/logo.svg';
+import { IconType } from "../../common-enum";
+export default {
+    title: 'Navigation/TopBar/Test Cases',
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            story: {
+                inline: false,
+                iframeHeight: 400,
+            },
+        },
+    },
+};
+export const OverflowingLinks = (args) => (_jsx(TopBar, { title: {
+        logo: _jsx("img", { src: LogoSVG, alt: "logo" }),
+        version: 'V1.2.3',
+        onClick: () => { },
+    }, content: [
+        {
+            type: 'Link',
+            label: 'Link',
+            onClick: () => { },
+        },
+        {
+            type: 'Link',
+            label: 'Lorem ipsum dolor est compendum lorem ipsum dolor est compendum lorem ipsum dolor est (cloned 2022-06-17 01:33:42)',
+            active: true,
+            onClick: () => { },
+        },
+        {
+            type: 'Link',
+            label: 'Disabled',
+            disabled: true,
+            onClick: () => { },
+        },
+        {
+            type: 'Button',
+            label: 'Save',
+            colored: true,
+            onClick: () => { },
+            testId: 'top-bar-button-save',
+        },
+    ], contentRight: [
+        {
+            type: 'Component',
+            component: (_jsx(Badge, { title: "3", small: true, margin: "5px", children: _jsx(Button, { icon: IconType.NOTIFICATION, round: true, onClick: () => { } }) })),
+        },
+    ] }));

package/dist/components/top-bar/warning.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export interface ITopBarWarningProps {
+    warning: ReactNode;
+}
+export declare const Warning: ({ warning }: ITopBarWarningProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/top-bar/warning.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './top-bar.module.less';
+export const Warning = ({ warning }) => {
+    return _jsx("div", { className: styles.alert, children: warning });
+};

package/dist/components/tree/tree-item.d.ts

@@ -0,0 +1,10 @@
+import { NodeModel } from '@minoru/react-dnd-treeview';
+export interface ITreeItemProps {
+    node: NodeModel<any>;
+    depth: number;
+    isOpen: boolean;
+    onToggle: (id: string | number) => void;
+    hasChild: boolean;
+    draggable?: boolean;
+}
+export declare const TreeItem: ({ node, depth, isOpen, onToggle, hasChild, draggable, }: ITreeItemProps) => import("react/jsx-runtime").JSX.Element;