@livechat/design-system-react-components 1.31.0 → 1.32.0

package/dist/components/AppFrame/components/NavigationTopBar/NavigationTopBar.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { INavigationTopBarProps, ITopBarAlertProps, ITopBarTitleProps } from './types';
+/**
+ * NavigationTopBar is used to display a top bar in the app frame - mostly to display alerts, but arbitrary content can be placed there too.
+ * @example
+ * <NavigationTopBar>
+ *     <NavigationTopBar.Alert kind="error">
+ *       Something went wrong
+ *     </NavigationTopBar.Alert>
+ * </NavigationTopBar>
+ */
+export declare const NavigationTopBar: {
+    ({ children, additionalNodes, }: INavigationTopBarProps): React.ReactElement;
+    Alert: React.FC<ITopBarAlertProps>;
+    Title: React.FC<ITopBarTitleProps>;
+};
+/**
+ * Title component for the NavigationTopBar. Supposed to be placed in the `additionalNodes` prop of the NavigationTopBar.
+ * @example
+ * <NavigationTopBar additionalNodes={<NavigationTopBar.Title>Example top bar content</NavigationTopBar.Title>}>
+ * </NavigationTopBar>
+ */
+export declare const NavigationTopBarTitle: React.FC<ITopBarTitleProps>;
+/**
+ * Alert component for the NavigationTopBar.
+ * @example
+ * <NavigationTopBar>
+ *    <NavigationTopBar.Alert kind="error" show={!!error}>
+ *     Something went wrong
+ *   </NavigationTopBar.Alert>
+ * </NavigationTopBar>
+ * @example
+ * <NavigationTopBar>
+ *     <NavigationTopBarAlert
+ *      kind="warning"
+ *      primaryCta={{ label: 'Save', onClick: () => console.log('Save clicked') }}
+ *      secondaryCta={{ label: 'Discard', onClick: () => console.log('Discard clicked') }}
+ *      closeButton={{ onClick: () => console.log('Close clicked') }}
+ *      show={!hasUnsavedChanges && !hasClosedAlert}
+ *      >
+ *      You have unsaved changes
+ *     </NavigationTopBarAlert>
+ * </NavigationTopBar>
+ **/
+export declare const NavigationTopBarAlert: React.FC<ITopBarAlertProps>;

package/dist/components/AppFrame/components/NavigationTopBar/examples.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export declare const DisconnectedAlert: React.FC<{
+    show: boolean;
+    onClose: () => void;
+}>;
+export declare const ChameleonAlert: React.FC<{
+    show: boolean;
+    onClose: () => void;
+    kind: 'info' | 'success' | 'warning' | 'error';
+    changeKind: () => void;
+}>;
+export declare const CustomBackgroundAlert: React.FC<{
+    show: boolean;
+    onClose: () => void;
+}>;

package/dist/components/AppFrame/components/NavigationTopBar/types.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { ComponentCoreProps } from 'utils/types';
+export type NavigationTopBarKind = 'info' | 'success' | 'warning' | 'error';
+export interface INavigationTopBarProps extends ComponentCoreProps {
+    /**
+     * Contents of the top bar. You can use the `NavigationTopBar.Alert` component to display alerts.
+     */
+    children?: React.ReactNode;
+    /**
+     * Ńodes placed under the children.
+     */
+    additionalNodes?: React.ReactNode;
+}
+export interface ITopBarTitleProps extends ComponentCoreProps {
+    /**
+     * Content of the title.
+     */
+    children: React.ReactNode;
+}
+export interface ITopBarAlertProps extends ComponentCoreProps {
+    /**
+     * Visual style of the alert. You can also use `className` to style the alert if you need to set a custom background color.
+     * Defaults to `info`.
+     * */
+    kind?: NavigationTopBarKind;
+    /**
+     * Properties of the close button. If defined, the alert will be closable and the close button will be rendered.
+     * aria-label is highly recommended for accessibility.
+     * */
+    closeButton?: {
+        onClick: () => void;
+        'data-testid'?: string;
+        'aria-label'?: string;
+    };
+    /**
+     * Content of the alert.
+     */
+    children: React.ReactNode;
+    /**
+     * Primary CTA button. The button will be rendered if defined.
+     * Simple on purpose - if you need more complex buttons, you can use the `children` prop.
+     * */
+    primaryCta?: {
+        label: string;
+        onClick: () => void;
+    };
+    /**
+     * Secondary CTA button. The button will be rendered if defined.
+     * Simple on purpose - if you need more complex buttons, you can use the `children` prop.
+     * */
+    secondaryCta?: {
+        label: string;
+        onClick: () => void;
+    };
+    /**
+     * Show or hide the alert, defaults to `true`. Changes to this prop are animated - the alert will enter and leave smoothly.
+     * */
+    isVisible?: boolean;
+}

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

@@ -4,4 +4,5 @@ export { SideNavigationItem } from './SideNavigationItem/SideNavigationItem';
 export { NavigationGroup } from './NavigationGroup/NavigationGroup';
 export { NavigationItem } from './NavigationItem/NavigationItem';
 export { Navigation } from './Navigation/Navigation';
+export { NavigationTopBar, NavigationTopBarAlert, NavigationTopBarTitle, } from './NavigationTopBar/NavigationTopBar';
 export { SIDE_NAVIGATION_ITEM_TEST_ID, SIDE_NAVIGATION_ACTIVE_ITEM_TEST_ID, SIDE_NAVIGATION_PARENT_ICON_TEST_ID, } from './SideNavigationItem/constants';

package/dist/components/AppFrame/stories-helpers.d.ts

@@ -1,9 +1,14 @@
 import * as React from 'react';
 interface ExampleAppContentProps {
     showToggle: boolean;
+    alerts?: boolean[];
+    setAlerts?: (alerts: boolean[]) => void;
 }
 export declare const ExampleAppContent: React.FC<ExampleAppContentProps>;
-export declare const ExampleTopBar: React.FC;
+export declare const ExampleTopBar: React.FC<{
+    visibleAlerts: boolean[];
+    setAlerts: (alerts: boolean[]) => void;
+}>;
 export declare const getBadgeContent: (item: string) => "dot" | "alert" | 5 | undefined;
 export declare const getChatsMenu: (activeSubItem: number, handler: (o: number) => void) => React.JSX.Element;
 export declare const getEngageSubMenu: (activeSubItem: number, handler: (o: number) => void) => React.JSX.Element;