@camunda/camunda-composite-components 0.22.4 → 0.22.6

package/lib/esm/src/components/c3-navigation/c3-navigation.js

@@ -0,0 +1,262 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Callout, Stack as CarbonStack, DefinitionTooltip, Header, HeaderGlobalBar, HeaderMenu, HeaderMenuItem, HeaderName, HeaderNavigation, Link, SkipToContent, Tag, Toggletip, ToggletipButton, ToggletipContent, } from '@carbon/react';
+import { Time, Warning } from '@carbon/react/icons/index.esm.js';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { StatusService } from '../../api/status.js';
+import { CamundaLogo } from '../../assets/c3-icons.js';
+import { C3ClusterTagWithClusterName } from '../c3-cluster-tag/c3-cluster-tag.js';
+import { C3HelpCenter } from '../c3-help-center/c3-help-center.js';
+import { useC3HelpCenter } from '../c3-help-center/c3-help-center-provider.js';
+import { HelpCenterHint } from '../c3-help-center/help-center-hint.js';
+import { useC3Profile } from '../c3-user-configuration/c3-profile-provider/c3-profile-provider.js';
+import { useC3UserConfiguration } from '../c3-user-configuration/c3-user-configuration-provider.js';
+import { InfoButton } from './c3-info-button.js';
+import C3ActionButtons from './c3-navigation-actions/c3-action-buttons.js';
+import { C3NavigationAppBar } from './c3-navigation-appbar/c3-navigation-appbar.js';
+import C3InfoSidebar from './c3-navigation-sidebar/c3-info-sidebar.js';
+import { C3NotificationSidebar } from './c3-navigation-sidebar/c3-notification-sidebar.js';
+import { C3SidebarStateProvider } from './c3-navigation-sidebar/c3-sidebar-state-provider.js';
+import C3UserSidebar from './c3-navigation-sidebar/c3-user-sidebar.js';
+import { OrgName } from './c3-org-name.js';
+import C3OrgSidebar from './c3-org-sidebar/c3-org-sidebar.js';
+import { useMediaQuery } from './helpers.js';
+/**
+ * UI SHELL
+ * Docs: https://react.carbondesignsystem.com/?path=/story/components-ui-shell--fixed-side-nav
+ */
+const BREAKPOINT_LG_WIDTH = '66rem'; // This is Carbon's breakpoint (lg) width https://github.com/carbon-design-system/carbon/blob/main/packages/layout/src/index.js#L56
+const Stack = styled(CarbonStack) `
+  align-items: center;
+`;
+const StyledToggletipContent = styled(ToggletipContent) `
+  .cds--link:visited {
+    color: var(--cds-link-text-color);
+  }
+
+  .cds--link:visited:hover {
+    color: var(--cds-link-hover-text-color);
+  }
+`;
+const ClusterTagWrapper = styled.div `
+  .cds--tag {
+    height: 1.5rem;
+    margin-top: 0.75rem;
+    padding: 0 1rem;
+  }
+`;
+const ResponsiveNavbarElementsWrapper = styled.div `
+  display: grid;
+  grid-auto-flow: column;
+  gap: 0.5rem;
+  paddingright: 0.5rem;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
+const NON_PRODUCTION_TERMS_LINK = 'https://legal.camunda.com/#self-managed-non-production-terms';
+const SALES_CONTACT_LINK = 'https://camunda.com/contact/';
+export const SECOND = 1000;
+export const MINUTE = SECOND * 60;
+export const HOUR = MINUTE * 60;
+export const DAY = HOUR * 24;
+const LICENSE_EXPIRY = DAY * 30;
+export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, infoButton, helpCenter, actionButtons, userSideBar, notificationSideBar, clusterUuid, options, }) => {
+    const { openHelpCenter } = useC3HelpCenter();
+    const { currentClusterUuid, decodedAudience } = useC3UserConfiguration();
+    const { activeOrg } = useC3Profile();
+    const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINT_LG_WIDTH}`);
+    const appBarElementsLength = appBar.elements?.length ?? 0;
+    const displayAppBar = !!(appBarElementsLength > 0 ||
+        appBar.appTeaserRouteProps ||
+        (!isLargeScreen && navbar.elements.length > 0));
+    const [appBarOpen, setAppBarOpen] = useState(appBar.isOpen || false);
+    const orgName = activeOrg?.name || navbar.orgName;
+    let expiresAt;
+    if (navbar.licenseTag?.expiresAt !== undefined) {
+        if (typeof navbar.licenseTag?.expiresAt === 'string') {
+            expiresAt = Date.parse(navbar.licenseTag?.expiresAt);
+        }
+        if (typeof navbar.licenseTag?.expiresAt === 'number') {
+            expiresAt = navbar.licenseTag?.expiresAt;
+        }
+    }
+    const [camundaStatus, setCamundaStatus] = useState({ error: false, description: '', endpoint: '' });
+    const fetchStatus = async (audience) => {
+        const status = await StatusService.camundaStatus(audience);
+        setCamundaStatus(status);
+    };
+    React.useEffect(() => {
+        if (decodedAudience) {
+            fetchStatus(decodedAudience);
+        }
+        const interval = setInterval(() => {
+            if (decodedAudience) {
+                fetchStatus(decodedAudience);
+            }
+        }, 5 * MINUTE);
+        return () => clearInterval(interval);
+    }, [decodedAudience]);
+    const tags = [
+        ...(navbar.tags || []),
+        ...(navbar.licenseTag?.show
+            ? [
+                {
+                    key: 'license-tag',
+                    label: navbar.licenseTag.isProductionLicense
+                        ? 'Production license'
+                        : 'Non-production license',
+                    color: 'gray',
+                    tooltip: navbar.licenseTag.isProductionLicense
+                        ? undefined
+                        : {
+                            content: (_jsxs("p", { children: ["Non-production license. For production usage details, visit our", ' ', _jsx(Link, { href: NON_PRODUCTION_TERMS_LINK, target: '_blank', style: { display: 'inline' }, children: "terms & conditions page" }), ' ', "or", ' ', _jsx(Link, { href: SALES_CONTACT_LINK, target: '_blank', style: { display: 'inline' }, children: "contact our sales team" }), "."] })),
+                            buttonLabel: 'Learn more',
+                        },
+                },
+            ]
+            : []),
+        ...(navbar.licenseTag?.show &&
+            navbar.licenseTag?.isCommercial === false &&
+            (expiresAt === undefined || expiresAt - LICENSE_EXPIRY >= Date.now())
+            ? [
+                {
+                    key: 'non-commercial-license-tag',
+                    label: `Non-commercial license`,
+                    color: 'gray',
+                },
+            ]
+            : []),
+        ...(navbar.licenseTag?.show &&
+            expiresAt &&
+            navbar.licenseTag?.isCommercial === false &&
+            expiresAt - LICENSE_EXPIRY < Date.now() &&
+            expiresAt > Date.now()
+            ? [
+                {
+                    key: 'non-commercial-license-tag-about-to-expire',
+                    label: `Non-commercial license - ${Math.floor((expiresAt - Date.now()) / DAY)} ${Math.floor((expiresAt - Date.now()) / DAY) > 1 ? 'days' : 'day'} left`,
+                    color: 'blue',
+                    renderIcon: Time,
+                    tooltip: {
+                        content: (_jsx("p", { children: "Please renew and provide new license keys to continue production use of Camunda." })),
+                        buttonLabel: 'Learn more',
+                    },
+                },
+            ]
+            : []),
+        ...(navbar.licenseTag?.show &&
+            navbar.licenseTag?.expiresAt &&
+            navbar.licenseTag?.isCommercial === false &&
+            expiresAt < Date.now()
+            ? [
+                {
+                    key: 'non-commercial-license-tag-is-expired',
+                    label: `Non-commercial license - expired`,
+                    color: 'red',
+                    renderIcon: Warning,
+                    tooltip: {
+                        content: (_jsx("p", { children: "To continue using all features, please renew your license." })),
+                        buttonLabel: 'Learn more',
+                    },
+                },
+            ]
+            : []),
+    ];
+    if (app.prefix)
+        console.warn('The `prefix` prop is deprecated and will be removed in a future release. It has been replaced with a Camunda icon.');
+    return (_jsxs(C3SidebarStateProvider, { isNotificationSidebarOpen: notificationSideBar?.isOpen, isOrgSidebarOpen: orgSideBar?.isOpen, isInfoSidebarOpen: infoSideBar?.isOpen, isUserSidebarOpen: userSideBar?.isOpen, children: [_jsxs(Header, { "aria-label": app.ariaLabel, children: [_jsx(SkipToContent, {}), displayAppBar && (_jsx(C3NavigationAppBar, { app: app, appBar: { ...appBar, isOpen: appBarOpen }, forwardRef: forwardRef, navbar: navbar, toggleAppbar: (value) => {
+                            setAppBarOpen(value);
+                        } })), _jsx(HeaderName, { as: forwardRef, prefix: '', ...app.routeProps, children: _jsxs(Stack, { gap: 3, orientation: 'horizontal', children: [_jsx(CamundaLogo, { "aria-label": 'Camunda' }), _jsx("span", { children: app.name })] }) }), _jsx(HeaderNavigation, { "aria-label": app.ariaLabel, children: navbar.elements.map((element) => {
+                            if (element.subElements && element.subElements.length > 0) {
+                                const isSubElementActive = element.subElements.some((subElement) => subElement.isCurrentPage);
+                                return (_jsx(HeaderMenu, { "aria-label": element.label, menuLinkName: element.label, isActive: element.isCurrentPage || isSubElementActive, children: element.subElements.map((subElement) => {
+                                        const routeProps = subElement.routeProps ?? {};
+                                        const { onClick: routeOnClick, ...restRouteProps } = routeProps;
+                                        return (_jsx(HeaderMenuItem, { as: subElement.routeProps && forwardRef, isActive: subElement.isCurrentPage, href: subElement.href, target: subElement.href ? subElement.target : undefined, ...restRouteProps, onClick: () => {
+                                                subElement.onClick?.();
+                                                routeOnClick?.();
+                                            }, children: _jsx("span", { children: subElement.label }) }, subElement.key));
+                                    }) }, element.key));
+                            }
+                            return (_jsx(HeaderMenuItem, { as: element.routeProps && forwardRef, isActive: element.isCurrentPage, ...element.routeProps, children: _jsx("span", { children: element.label }) }, element.key));
+                        }) }), navbar?.customNavSlot && navbar?.customNavSlot, _jsxs(HeaderGlobalBar, { children: [_jsxs(ResponsiveNavbarElementsWrapper, { children: [tags &&
+                                        tags.length > 0 &&
+                                        tags.map((tag) => {
+                                            if (tag?.tooltip !== undefined) {
+                                                const { content, buttonLabel } = tag.tooltip;
+                                                return (_jsx("div", { style: {
+                                                        height: '1.5rem',
+                                                        marginTop: '0.75rem',
+                                                    }, children: _jsxs(Toggletip, { children: [_jsx(ToggletipButton, { as: 'span', label: buttonLabel, children: _jsx(Tag, { type: tag.color, renderIcon: tag.renderIcon, style: {
+                                                                        margin: '0',
+                                                                        cursor: 'pointer',
+                                                                        overflow: 'hidden',
+                                                                        whiteSpace: 'nowrap',
+                                                                        textOverflow: 'ellipsis',
+                                                                    }, children: tag.label }) }), _jsx(StyledToggletipContent, { children: content })] }) }, tag.key));
+                                            }
+                                            return (_jsx(Tag, { renderIcon: tag.renderIcon, style: {
+                                                    height: '1.5rem',
+                                                    marginTop: '0.75rem',
+                                                    overflow: 'hidden',
+                                                    whiteSpace: 'nowrap',
+                                                    textOverflow: 'ellipsis',
+                                                }, type: tag.color, children: tag.label }, tag.key));
+                                        }), (clusterUuid || currentClusterUuid) && (_jsx(ClusterTagWrapper, { children: _jsx(C3ClusterTagWithClusterName, { clusterUuid: clusterUuid || currentClusterUuid || '', conditionalRendering: options?.conditionalTagRendering }) })), orgName && (_jsx(OrgName, { orgName: orgName, isSuperOrg: activeOrg?.isSuperOrg, activeSuperOrg: activeOrg?.superOrganization?.name }))] }), actionButtons && _jsx(C3ActionButtons, { elements: actionButtons }), notificationSideBar && (_jsx(C3NotificationSidebar, { sideBar: {
+                                    ...notificationSideBar,
+                                    type: 'notifications',
+                                } })), orgSideBar && (_jsx(C3OrgSidebar, { sideBar: {
+                                    ...orgSideBar,
+                                    type: 'org',
+                                } })), infoButton || helpCenter ? (_jsx(HelpCenterHint, { children: _jsx(InfoButton, { onClick: infoButton ? infoButton.onClick : () => openHelpCenter() }) })) : (infoSideBar && (_jsx(C3InfoSidebar, { sideBar: { ...infoSideBar, type: 'info' } }))), userSideBar && (_jsx(C3UserSidebar, { sideBar: {
+                                    ...userSideBar,
+                                    type: 'user',
+                                } }))] })] }), (() => {
+                if (camundaStatus.error &&
+                    camundaStatus.endpoint &&
+                    options?.c8StatusBanner) {
+                    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'cds--header', style: {
+                                    position: 'fixed',
+                                    marginTop: '48px',
+                                    zIndex: '7000',
+                                }, children: _jsx(Callout, { title: '', kind: 'error', lowContrast: true, style: { maxWidth: '100%' }, children: _jsxs("div", { style: {
+                                            display: 'flex',
+                                            justifyContent: 'space-between',
+                                            alignItems: 'center',
+                                            width: '100%',
+                                            position: 'absolute',
+                                            paddingRight: '62px',
+                                        }, children: [_jsx("div", { className: 'cds--actionable-notification__title', dir: 'auto', style: {
+                                                    flexShrink: 0,
+                                                }, children: "Service incident alert" }), _jsx(DefinitionTooltip, { "aria-describedby": '', definition: 'We&apos;re aware of a live incident potentially impacting our SaaS product. Please check our status page for details.', align: 'bottom', openOnHover: true, style: {
+                                                    marginTop: '-1px',
+                                                    width: 'calc(100vw - 400px)',
+                                                    borderBlockEnd: 'none',
+                                                    overflow: 'hidden',
+                                                    textOverflow: 'ellipsis',
+                                                    textWrap: 'nowrap',
+                                                    whiteSpace: 'nowrap',
+                                                    fontSize: '14px',
+                                                }, children: _jsx("span", { children: "We're aware of a live incident potentially impacting our SaaS product. Please check our status page for details." }) }), _jsx(Link, { onClick: () => {
+                                                    window.open(camundaStatus.endpoint, '_blank');
+                                                }, inline: true, style: {
+                                                    cursor: 'pointer',
+                                                    color: '$link-primary',
+                                                    marginLeft: 'auto',
+                                                    marginRight: 0,
+                                                    textDecoration: 'none',
+                                                    overflow: 'hidden',
+                                                    whiteSpace: 'nowrap',
+                                                    textWrap: 'nowrap',
+                                                }, children: 'Camunda status page' })] }) }) }), _jsx("div", { style: { height: '48px' } })] }));
+                }
+                return _jsx(_Fragment, {});
+            })(), helpCenter && _jsx(C3HelpCenter, { ...helpCenter })] }));
+};

package/lib/esm/src/components/c3-navigation/c3-navigation.test.d.ts

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

package/lib/esm/src/components/c3-navigation/c3-navigation.test.js

@@ -0,0 +1,89 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { expect, test } from '@playwright/test';
+import { getStory } from '../test-utils.js';
+test.describe('Navigation', () => {
+    test('Basic', async ({ page }) => {
+        await getStory(page, 'uishell-c3navigation--basic');
+        await expect(page).toHaveScreenshot();
+    });
+    test('App bar open', async ({ page }) => {
+        await getStory(page, 'uishell-c3navigation--app-bar-opened');
+        await expect(page).toHaveScreenshot();
+    });
+    test('Org bar open', async ({ page }) => {
+        await getStory(page, 'uishell-c3navigation--org-side-bar-opened');
+        await expect(page).toHaveScreenshot();
+    });
+    test('Info bar open', async ({ page }) => {
+        await getStory(page, 'uishell-c3navigation--info-side-bar-opened');
+        await expect(page).toHaveScreenshot();
+    });
+    test('Info bar open - with divider', async ({ page }) => {
+        await getStory(page, 'uishell-c3navigation--info-side-bar-opened-with-divider');
+        await expect(page).toHaveScreenshot();
+    });
+    test('Info button', async ({ page }) => {
+        await getStory(page, 'uishell-c3navigation--info-button');
+        await expect(page).toHaveScreenshot();
+    });
+    test('User bar open', async ({ page }) => {
+        await getStory(page, 'uishell-c3navigation--user-side-bar-opened');
+        await expect(page).toHaveScreenshot();
+    });
+    test('User bar open - with custom section', async ({ page }) => {
+        await getStory(page, 'uishell-c3navigation--user-side-bar-opened-with-custom-section');
+        await expect(page).toHaveScreenshot();
+    });
+    test('User bar open - with custom section and state', async ({ page }) => {
+        await getStory(page, 'uishell-c3navigation--user-side-bar-with-custom-section-and-state');
+        await expect(page).toHaveScreenshot();
+    });
+    test('App bar - without elements', async ({ page }) => {
+        await getStory(page, 'uishell-c3navigation--app-bar-without-elements');
+        await expect(page).toHaveScreenshot();
+    });
+    test('App bar - without elements and nav elements', async ({ page }) => {
+        await getStory(page, 'uishell-c3navigation--app-bar-without-elements-and-nav-elements');
+        await expect(page).toHaveScreenshot();
+    });
+    test('Notifications bar open', async ({ page }) => {
+        // Fake current time for consistent screenshots
+        const fakeNow = new Date('January 5 2023 13:37:11').valueOf();
+        await page.addInitScript(`{
+  Date = class extends Date {
+    constructor(...args) {
+      if (args.length === 0) {
+        super(${fakeNow});
+      } else {
+        super(...args);
+      }
+    }
+  }
+  const __DateNowOffset = ${fakeNow} - Date.now();
+  const __DateNow = Date.now;
+  Date.now = () => __DateNow() + __DateNowOffset;
+	}`);
+        await getStory(page, 'uishell-c3navigation--notifications-side-bar-opened');
+        await expect(page).toHaveScreenshot();
+    });
+    test('Notifications bar open - no notifications', async ({ page }) => {
+        await getStory(page, 'uishell-c3navigation--notifications-side-bar-opened-no-notifications');
+        await expect(page).toHaveScreenshot();
+    });
+    test('Action button', async ({ page }) => {
+        await getStory(page, 'uishell-c3navigation--acion-button-instead-of-info-bar');
+        await expect(page).toHaveScreenshot();
+    });
+    test('Action button with custom element', async ({ page }) => {
+        await getStory(page, 'uishell-c3navigation--acion-button-with-custom-element');
+        await expect(page).toHaveScreenshot();
+    });
+    test('Navbar with submenu', async ({ page }) => {
+        await getStory(page, 'uishell-c3navigation--nav-bar-with-submenu');
+        await expect(page).toHaveScreenshot();
+    });
+});

package/lib/esm/src/components/c3-navigation/c3-navigation.types.d.ts

@@ -0,0 +1,97 @@
+import type { Endpoints, Stage } from '../../api/endpoints.const';
+import type { TagColor } from '../c3-cluster-tag/c3-cluster-tag';
+import type { CamundaClusterStage } from '../c3-cluster-tag/c3-cluster-tag.types';
+import type { C3HelpCenterProps } from '../c3-help-center/c3-help-center';
+import type { C3ActionButtonsProps } from './c3-navigation-actions/c3-action-buttons.types';
+import type { C3NavigationAppBarProps, C3NavigationInfoSideBarProps, C3NavigationNotificationsSideBarProps, C3NavigationOrgSideBarProps, C3NavigationUserSideBarProps } from './c3-navigation-sidebar/c3-navigation-sidebar.types';
+export interface C3NavigationAppProps {
+    prefix?: string;
+    name: string;
+    ariaLabel: string;
+    routeProps: any;
+}
+export interface C3NavigationElementProps {
+    ariaLabel?: string;
+    key: string;
+    label: string;
+    kind?: 'ghost' | 'danger--ghost';
+    active?: boolean;
+    isActive?: boolean;
+    renderIcon?: any;
+    routeProps?: any;
+    href?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    onClick?: () => void;
+    subElements?: C3NavigationElementProps[];
+    preceedingDivider?: boolean;
+    overflowMenu?: React.ReactNode;
+    isNavLink?: boolean;
+}
+export interface C3NavigationNavBarSubElement {
+    key: string;
+    label: string;
+    routeProps?: C3NavigationElementProps['routeProps'];
+    href?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    isCurrentPage?: boolean;
+    onClick?: () => void;
+}
+export interface C3NavigationNavBarElement {
+    label: string;
+    key: string;
+    routeProps?: C3NavigationElementProps['routeProps'];
+    isCurrentPage: boolean;
+    subElements?: C3NavigationNavBarSubElement[];
+}
+export interface C3NavigationNavBarProps {
+    elements: C3NavigationNavBarElement[];
+    tags?: Array<{
+        label: string;
+        key: string;
+        color?: TagColor;
+        renderIcon?: any;
+        tooltip?: {
+            content: React.ReactNode;
+            buttonLabel: string;
+        };
+    }>;
+    licenseTag?: {
+        show: boolean;
+        isProductionLicense: boolean;
+        isCommercial?: boolean;
+        expiresAt?: number | string;
+    };
+    customNavSlot?: React.ReactNode;
+    orgName?: string;
+}
+export interface C3NotificationsProps {
+    stage?: Stage;
+    endpoints?: Endpoints;
+    activeOrganizationId: string;
+    userToken: string;
+    getNewUserToken: () => Promise<string>;
+    enableLogs?: boolean;
+}
+type WithoutType<P> = Omit<P, 'type'>;
+export interface C3NavigationProps {
+    app: C3NavigationAppProps;
+    appBar: WithoutType<C3NavigationAppBarProps>;
+    orgSideBar?: WithoutType<C3NavigationOrgSideBarProps>;
+    infoSideBar?: WithoutType<C3NavigationInfoSideBarProps>;
+    infoButton?: {
+        onClick: () => void;
+    };
+    helpCenter?: C3HelpCenterProps;
+    actionButtons?: C3ActionButtonsProps;
+    userSideBar?: WithoutType<C3NavigationUserSideBarProps>;
+    notificationSideBar?: WithoutType<C3NavigationNotificationsSideBarProps>;
+    navbar: C3NavigationNavBarProps;
+    forwardRef?: React.ForwardRefExoticComponent<any>;
+    clusterUuid?: string;
+    options?: {
+        conditionalTagRendering?: (stage: CamundaClusterStage) => boolean;
+        c8StatusBanner?: boolean;
+    };
+    toggleAppbar: (value: boolean) => void;
+}
+export {};

package/lib/esm/src/components/c3-navigation/c3-navigation.types.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+export {};

package/lib/esm/src/components/c3-navigation/c3-notification-provider/c3-notification-container.d.ts

@@ -0,0 +1,13 @@
+import { type FC } from 'react';
+import type { Notification as NotificationProps } from '../../../api/notifications';
+export declare const NotificationTitle: any;
+export declare const NotificationDescription: any;
+export declare const LinkContainer: any;
+declare const C3NotificationContainer: FC<NotificationProps & {
+    onRead: () => void;
+    onDismiss: () => void;
+    onLinkClick?: (meta: NotificationProps['meta']) => void;
+    originalOnLinkClick?: (meta: NotificationProps['meta']) => void;
+    unread?: boolean;
+}>;
+export default C3NotificationContainer;

package/lib/esm/src/components/c3-navigation/c3-notification-provider/c3-notification-container.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Button, Link, Tile } from '@carbon/react';
+import { Close } from '@carbon/react/icons/index.esm.js';
+import { useState } from 'react';
+import styled from 'styled-components';
+const NotificationTile = styled(Tile) `
+  box-shadow: inset 0px -1px 0px var(--cds-border-subtle-01);
+`;
+const CloseButton = styled(Button) `
+  margin-right: -1rem;
+  visibility: ${({ $show }) => ($show ? 'visible' : 'hidden')};
+`;
+const UnreadNotificationHeader = styled.div `
+  display: flex;
+  align-items: center;
+  width: 100%;
+`;
+const Dot = styled.div `
+  background: var(--cds-interactive);
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  margin-left: -9px;
+  margin-right: 4px;
+`;
+const Timestamp = styled.p `
+  color: var(--cds-text-helper);
+  font-size: var(--cds-label-01-font-size);
+  font-weight: var(--cds-label-01-font-weight);
+  line-height: var(--cds-label-01-line-height);
+  letter-spacing: var(--cds-label-01-letter-spacing);
+`;
+const NotificationHeader = styled.div `
+  width: 100%;
+  min-height: 2rem;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-top: -1rem;
+`;
+export const NotificationTitle = styled.p `
+  color: var(--cds-text-primary);
+  font-size: var(--cds-heading-compact-01-font-size);
+  font-weight: var(--cds-heading-compact-01-font-weight);
+  line-height: var(--cds-heading-compact-01-line-height);
+  letter-spacing: var(--cds-heading-compact-01-letter-spacing);
+  margin-top: var(--cds-spacing-01);
+`;
+export const NotificationDescription = styled.p `
+  color: var(--cds-text-primary);
+  font-size: var(--cds-helper-text-01-font-size);
+  font-weight: var(--cds-helper-text-01-font-weight);
+  line-height: var(--cds-helper-text-01-line-height);
+  letter-spacing: var(--cds-helper-text-01-letter-spacing);
+  margin-top: var(--cds-spacing-01);
+`;
+export const LinkContainer = styled.div `
+  margin-top: 0.5rem;
+`;
+const getReadableTimestamp = (timestamp) => {
+    const date = new Date(timestamp);
+    const minutesAgo = Math.floor(Math.abs(Date.now() - timestamp) / 1000 / 60);
+    if (minutesAgo === 0) {
+        return 'New';
+    }
+    if (minutesAgo < 60) {
+        return `${minutesAgo}min ago`;
+    }
+    const hoursAgo = Math.floor(minutesAgo / 60);
+    if (hoursAgo < 24) {
+        return `${hoursAgo}hr ago`;
+    }
+    return date.toDateString();
+};
+const C3NotificationContainer = ({ description, state, timestamp, title, onDismiss, meta, onLinkClick, originalOnLinkClick, unread = false, }) => {
+    const [isHovering, setIsHovering] = useState(false);
+    const dismissNotification = (e) => {
+        e.stopPropagation();
+        onDismiss();
+    };
+    const handleLinkClick = (event) => {
+        if (originalOnLinkClick && onLinkClick) {
+            event.preventDefault();
+            onLinkClick(meta);
+            return false;
+        }
+        return true;
+    };
+    return (_jsxs(NotificationTile, { onMouseEnter: () => {
+            setIsHovering(true);
+        }, onMouseLeave: () => {
+            setIsHovering(false);
+        }, children: [_jsxs(UnreadNotificationHeader, { children: [(state === 'new' || unread) && _jsx(Dot, {}), _jsxs(NotificationHeader, { children: [_jsx(Timestamp, { children: getReadableTimestamp(timestamp) }), _jsx(CloseButton, { kind: 'ghost', hasIconOnly: true, iconDescription: 'Dismiss', align: 'bottom-right', renderIcon: Close, onClick: dismissNotification, size: 'sm', "$show": isHovering })] })] }), _jsx(NotificationTitle, { children: title }), _jsx(NotificationDescription, { children: description }), meta && (_jsx(LinkContainer, { children: _jsx(Link, { href: meta.href, onClick: handleLinkClick, visited: true, style: { fontSize: 'var(--cds-helper-text-01-font-size)' }, children: meta.label }) }))] }));
+};
+export default C3NotificationContainer;

package/lib/esm/src/components/c3-navigation/c3-notification-provider/c3-notification-provider.d.ts

@@ -0,0 +1,19 @@
+import React, { type ComponentType, type FC, type ReactNode } from 'react';
+import { type AnalyticsEvent, type Notification } from '../../../api/notifications';
+export type C3NotificationContextValue = {
+    enabled: boolean;
+    isFetching: boolean;
+    notifications: Notification[];
+    markAsRead: (notification: Notification) => void;
+    markAllAsRead: (notifications: Notification[]) => void;
+    dismiss: (notification: Notification) => void;
+    dismissAll: (notifications: Notification[]) => void;
+    analytics: (event: AnalyticsEvent, id?: string) => void;
+};
+export declare const C3NotificationContext: React.Context<C3NotificationContextValue>;
+export type C3NotificationProviderProps = {
+    children?: ReactNode;
+};
+declare const C3NotificationProvider: FC<C3NotificationProviderProps>;
+export declare function withNotifications<P>(Component: ComponentType<P>): ComponentType<P>;
+export default C3NotificationProvider;