@camunda/camunda-composite-components 0.0.35 → 0.0.36

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

@@ -1,69 +1,73 @@
 import React, { useState } from "react";
 import { Close } from "@carbon/react/icons";
 import { useOnClickOutside } from "./helpers";
-import { HeaderGlobalAction, HeaderMenuItem, HeaderSideNavItems, SideNav, SideNavItems, SideNavLink, SideNavMenu, SideNavMenuItem, } from "@carbon/react";
+import { HeaderGlobalAction, HeaderMenuItem, HeaderSideNavItems, SideNav as CarbonSideNav, SideNavItems, SideNavLink, SideNavMenu, SideNavMenuItem, } from "@carbon/react";
 import { C3AppMenuIcon } from "../../icons/c3-icons";
-const C3NavigationExternalLink = ({ label }) => React.createElement(React.Fragment, null, label);
+import styled from "styled-components";
+const NavWrapper = styled.div `
+	.cds--side-nav__overlay {
+		display: none;
+	}
+`;
+const SideNav = styled(CarbonSideNav) `
+	visibility: ${({ expanded }) => (expanded ? "visible" : "hidden")};
+	display: grid;
+	grid-auto-flow: row;
+	grid-auto-rows: max-content 1fr;
+	border-right: ${({ expanded }) => expanded ? "1px solid var(--cds-border-subtle)" : undefined};
+	overflow-y: auto;
+`;
 export const C3NavigationAppBar = ({ appBar, forwardRef, navbar, }) => {
     const [appBarOpen, setAppBarOpen] = useState(appBar.isOpen);
     const [panelRef, iconRef] = useOnClickOutside(() => setAppBarOpen(false));
     return (React.createElement(React.Fragment, null,
-        React.createElement(HeaderGlobalAction, { ref: iconRef, "aria-label": "App Switcher", isActive: appBarOpen, onClick: () => {
+        React.createElement(HeaderGlobalAction, { ref: iconRef, "aria-label": "Camunda apps", isActive: appBarOpen, onClick: () => {
                 setAppBarOpen(!appBarOpen);
             }, tooltipAlignment: "start" }, appBarOpen ? React.createElement(Close, { size: 20 }) : React.createElement(C3AppMenuIcon, { size: 20 })),
-        React.createElement(SideNav, { ref: panelRef, "aria-label": appBar.ariaLabel || "Side Navigation", expanded: appBarOpen, isPersistent: false, style: {
-                display: "grid",
-                gridAutoFlow: "row",
-                gridAutoRows: "max-content 1fr",
-                borderRight: appBarOpen
-                    ? "1px solid var(--cds-border-subtle)"
-                    : undefined,
-                overflowY: "auto",
-            } },
-            React.createElement(SideNavItems, null,
-                navbar.elements.length > 0 && (React.createElement(HeaderSideNavItems, { hasDivider: true }, navbar.elements.map((element) => (React.createElement(HeaderMenuItem, { key: element.key, element: forwardRef, isCurrentPage: element.isCurrentPage, ...element.routeProps, onClick: () => {
-                        if (appBar.closeOnClick !== false) {
-                            setAppBarOpen(false);
-                        }
-                    } }, element.label))))),
-                appBar.elements &&
-                    appBar.elements.map((element) => {
-                        if (element.subElements && element.subElements.length > 0) {
-                            return (React.createElement(SideNavMenu, { large: true, title: element.label, key: element.key }, element.subElements.map((subElement) => (React.createElement(SideNavMenuItem, { key: subElement.key, href: subElement.href, target: subElement.href ? subElement.target : undefined, onClick: () => {
-                                    if (subElement.onClick) {
-                                        subElement.onClick();
-                                    }
-                                    if (appBar.closeOnClick !== false) {
-                                        setAppBarOpen(false);
-                                    }
-                                    if (appBar.elementClicked) {
-                                        appBar.elementClicked(subElement.key);
-                                    }
-                                } },
-                                React.createElement(C3NavigationExternalLink, { label: subElement.label }))))));
-                        }
-                        else {
-                            return element.routeProps ? (React.createElement(SideNavLink, { element: forwardRef, key: element.key, large: true, isActive: element.active, ...element.routeProps, onClick: () => {
-                                    if (element.onClick) {
-                                        element.onClick();
-                                    }
-                                    if (appBar.closeOnClick !== false) {
-                                        setAppBarOpen(false);
-                                    }
-                                    if (appBar.elementClicked) {
-                                        appBar.elementClicked(element.key);
-                                    }
-                                } }, element.label)) : (React.createElement(SideNavLink, { key: element.key, large: true, onClick: () => {
-                                    if (element.onClick) {
-                                        element.onClick();
-                                    }
-                                    if (appBar.closeOnClick !== false) {
-                                        setAppBarOpen(false);
-                                    }
-                                    if (appBar.elementClicked) {
-                                        appBar.elementClicked(element.key);
-                                    }
-                                }, href: element.href, target: element.href ? element.target : undefined }, element.label));
-                        }
-                    })))));
+        React.createElement(NavWrapper, null,
+            React.createElement(SideNav, { ref: panelRef, "aria-label": appBar.ariaLabel || "Side Navigation", expanded: appBarOpen, isPersistent: false },
+                React.createElement(SideNavItems, null,
+                    navbar.elements.length > 0 && (React.createElement(HeaderSideNavItems, { hasDivider: true }, navbar.elements.map((element) => (React.createElement(HeaderMenuItem, { key: element.key, element: forwardRef, isCurrentPage: element.isCurrentPage, ...element.routeProps, onClick: () => {
+                            if (element.routeProps.onClick) {
+                                element.routeProps.onClick();
+                            }
+                            if (appBar.closeOnClick !== false) {
+                                setAppBarOpen(false);
+                            }
+                        } }, element.label))))),
+                    appBar.elements &&
+                        appBar.elements.map((element) => {
+                            if (element.subElements && element.subElements.length > 0) {
+                                return (React.createElement(SideNavMenu, { large: true, title: element.label, key: element.key }, element.subElements.map((subElement) => (React.createElement(SideNavMenuItem, { element: forwardRef, key: subElement.key, href: subElement.href, target: subElement.href ? subElement.target : undefined, ...subElement.routeProps, onClick: () => {
+                                        if (subElement.onClick) {
+                                            subElement.onClick();
+                                        }
+                                        if (subElement.routeProps.onClick) {
+                                            subElement.routeProps.onClick();
+                                        }
+                                        if (appBar.closeOnClick !== false) {
+                                            setAppBarOpen(false);
+                                        }
+                                        if (appBar.elementClicked) {
+                                            appBar.elementClicked(subElement.key);
+                                        }
+                                    } }, subElement.label)))));
+                            }
+                            else {
+                                return (React.createElement(SideNavLink, { element: forwardRef, key: element.key, large: true, isActive: element.active, ...element.routeProps, onClick: () => {
+                                        if (element.onClick) {
+                                            element.onClick();
+                                        }
+                                        if (element.routeProps.onClick) {
+                                            element.routeProps.onClick();
+                                        }
+                                        if (appBar.closeOnClick !== false) {
+                                            setAppBarOpen(false);
+                                        }
+                                        if (appBar.elementClicked) {
+                                            appBar.elementClicked(element.key);
+                                        }
+                                    }, href: element.href, target: element.href ? element.target : undefined }, element.label));
+                            }
+                        }))))));
 };

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

@@ -1,7 +1,16 @@
-import { Button, HeaderGlobalAction, HeaderPanel, Stack, SwitcherDivider, } from "@carbon/react";
+import { Button, HeaderGlobalAction, HeaderPanel as CarbonHeaderPanel, Stack, SwitcherDivider, } from "@carbon/react";
 import React from "react";
 import { useOnClickOutside } from "../helpers";
 import C3NavigationSidebarElement from "./c3-navigation-sidebar-element";
+import styled from "styled-components";
+const HeaderPanel = styled(CarbonHeaderPanel) `
+	visibility: ${({ expanded }) => (expanded ? "visible" : "hidden")};
+	display: grid;
+	grid-auto-flow: row;
+	grid-auto-rows: max-content 1fr;
+	overflow-y: auto;
+	overflow-x: hidden;
+`;
 const C3NavigationSideBar = (props) => {
     const { icon, sideBar, children, bottomChildren } = props;
     const { isOpen, setIsOpen } = sideBar;
@@ -9,13 +18,7 @@ const C3NavigationSideBar = (props) => {
     const [panelRef, iconRef] = useOnClickOutside(() => isOpen && setIsOpen(false));
     return (React.createElement(React.Fragment, null,
         React.createElement(HeaderGlobalAction, { ref: iconRef, "aria-label": `Open ${sideBar.ariaLabel}`, onClick: () => setIsOpen(!isOpen), isActive: isOpen, tooltipAlignment: sideBar.type === "user" ? "end" : "center" }, icon),
-        React.createElement(HeaderPanel, { ref: panelRef, "aria-label": sideBar.ariaLabel, expanded: isOpen, style: {
-                display: "grid",
-                gridAutoFlow: "row",
-                gridAutoRows: "max-content 1fr",
-                overflowY: "auto",
-                overflowX: "hidden",
-            } },
+        React.createElement(HeaderPanel, { ref: panelRef, "aria-label": sideBar.ariaLabel, expanded: isOpen },
             React.createElement(Stack, null,
                 children,
                 sideBar.elements &&

package/lib/esm/components/c3-navigation/c3-navigation-sidebar/c3-org-sidebar.js

@@ -5,7 +5,7 @@ import C3NavigationSideBar from "./c3-navigation-sidebar";
 import { SwitcherDivider } from "./components";
 const C3OrgSidebar = ({ sideBar }) => {
     const { customElements, isOpen, ...sideBarProps } = sideBar;
-    const activeOrganization = sideBar.customElements?.activeOrganization;
+    const activeOrganization = customElements?.activeOrganization;
     const [isSidebarOpen, setIsSidebarOpen] = useState(isOpen);
     const itemTabIndex = isSidebarOpen ? undefined : -1;
     return (React.createElement(C3NavigationSideBar, { sideBar: {

package/lib/esm/components/c3-navigation/c3-navigation-sidebar/c3-user-sidebar.js

@@ -4,10 +4,10 @@ import { FormLabel, RadioButton, RadioButtonGroup, Stack, SwitcherDivider, Toggl
 import { UserAvatar } from "@carbon/react/icons";
 const C3UserSidebar = ({ sideBar }) => {
     const { customElements, isOpen, ...sideBarProps } = sideBar;
-    const profile = sideBar.customElements?.profile;
-    const themeSelector = sideBar.customElements?.themeSelector;
-    const stageToggle = sideBar.customElements?.stageToggle;
-    const customSection = sideBar.customElements?.customSection;
+    const profile = customElements?.profile;
+    const themeSelector = customElements?.themeSelector;
+    const stageToggle = customElements?.stageToggle;
+    const customSection = customElements?.customSection;
     const [isSidebarOpen, setIsSidebarOpen] = useState(isOpen);
     const itemTabIndex = isSidebarOpen ? undefined : -1;
     return (React.createElement(C3NavigationSideBar, { sideBar: {

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

@@ -1,4 +1,4 @@
-import { Header, HeaderContainer, HeaderGlobalBar, HeaderMenuItem, HeaderName, HeaderNavigation, SkipToContent, Tag, Toggletip, ToggletipButton, ToggletipContent, } from "@carbon/react";
+import { Header, HeaderContainer, HeaderGlobalBar, HeaderMenuItem, HeaderName as CarbonHeaderName, HeaderNavigation, SkipToContent, Tag, Toggletip, ToggletipButton, ToggletipContent, } from "@carbon/react";
 import React from "react";
 import C3InfoSidebar from "./c3-navigation-sidebar/c3-info-sidebar";
 import { C3NotificationSidebar } from "./c3-navigation-sidebar/c3-notification-sidebar";
@@ -7,11 +7,17 @@ import C3UserSidebar from "./c3-navigation-sidebar/c3-user-sidebar";
 import { useMediaQuery } from "./helpers";
 import { C3NavigationAppBar } from "./c3-navigation-appbar";
 import styled from "styled-components";
+import { CamundaLogo } from "../../icons/c3-icons";
 /**
  * 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 HeaderName = styled(CarbonHeaderName) `
+	display: grid;
+	grid-auto-flow: column;
+	gap: 0.5rem;
+`;
 const StyledToggletipContent = styled(ToggletipContent) `
 	.cds--link:visited {
 		color: var(--cds-link-text-color);
@@ -29,7 +35,8 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
             return (React.createElement(Header, { "aria-label": app.ariaLabel },
                 React.createElement(SkipToContent, null),
                 displayAppBar && (React.createElement(C3NavigationAppBar, { app: app, appBar: appBar, forwardRef: forwardRef, navbar: navbar })),
-                React.createElement(HeaderName, { element: forwardRef, prefix: app.prefix, ...app.routeProps },
+                React.createElement(HeaderName, { element: forwardRef, prefix: "", ...app.routeProps },
+                    React.createElement(CamundaLogo, { "aria-label": "Camunda" }),
                     React.createElement("span", null, app.name)),
                 React.createElement(HeaderNavigation, { "aria-label": app.ariaLabel }, navbar.elements.map((element) => (React.createElement(HeaderMenuItem, { key: element.key, element: forwardRef, isCurrentPage: element.isCurrentPage, ...element.routeProps },
                     React.createElement("span", null, element.label))))),

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

@@ -3,7 +3,7 @@ import { Tag } from "@carbon/react";
 import { Endpoints, Stage } from "../../api/endpoints.const";
 import { C3NavigationAppBarProps, C3NavigationInfoSideBarProps, C3NavigationNotificationsSideBarProps, C3NavigationOrgSideBarProps, C3NavigationUserSideBarProps } from "./c3-navigation-sidebar/c3-navigation-sidebar.types";
 export interface C3NavigationAppProps {
-    prefix: string;
+    prefix?: string;
     name: string;
     ariaLabel: string;
     routeProps: any;

package/lib/esm/components/c3-navigation/story-helpers.js

@@ -3,10 +3,11 @@ import { Link } from "@carbon/react";
 import { ArrowRight } from "@carbon/react/icons";
 export function createAppProps() {
     return {
-        prefix: "Camunda",
         name: "Console",
         ariaLabel: "Camunda Console",
-        routeProps: {},
+        routeProps: {
+            href: "https://www.camunda.com",
+        },
     };
 }
 export function createAppBarProps(options = {}) {
@@ -22,8 +23,14 @@ export function createAppBarProps(options = {}) {
                 key: "modeler",
                 label: "Modeler",
                 active: false,
-                href: "https://camunda.com/",
+                routeProps: { onClick: () => console.log("Redirecting to Modeler...") },
+            },
+            {
+                key: "operate",
+                label: "Operate",
+                active: false,
                 target: "_blank",
+                href: "https://camunda.com/",
             },
             {
                 key: "tasklist",
@@ -39,8 +46,14 @@ export function createAppBarProps(options = {}) {
                     {
                         key: "cluster-b",
                         label: "Cluster B",
-                        href: "https://camunda.com/",
-                        target: "_blank",
+                        onClick: () => console.log("Redirecting to Tasklist..."),
+                    },
+                    {
+                        key: "cluster-c",
+                        label: "Cluster C",
+                        routeProps: {
+                            onClick: () => console.log("Redirecting to Tasklist..."),
+                        },
                     },
                 ],
             },
@@ -60,7 +73,9 @@ export function createNavBarBarProps(options = {}) {
                 key: "clusters",
                 label: "Clusters",
                 isCurrentPage: false,
-                routeProps: {},
+                routeProps: {
+                    onClick: () => console.log("Redirecting to clusters..."),
+                },
             },
         ],
         orgName: "Camunda",

package/lib/esm/icons/c3-icons.d.ts

@@ -3,3 +3,4 @@ import { C3IconProps } from "./c3-icons.types";
 export declare const C3AppMenuIcon: ({ size }: C3IconProps) => JSX.Element;
 export declare const C3NotificationsUnreadIcon: ({ size }: C3IconProps) => JSX.Element;
 export declare const C3BellIcon: ({ size }: C3IconProps) => JSX.Element;
+export declare const CamundaLogo: () => JSX.Element;

package/lib/esm/icons/c3-icons.js

@@ -7,3 +7,8 @@ export const C3NotificationsUnreadIcon = ({ size }) => (React.createElement("svg
     React.createElement("path", { d: "M15 10.25a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z", style: { fill: "var(--cds-link-primary)" } })));
 export const C3BellIcon = ({ size }) => (React.createElement("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "transparent", xmlns: "http://www.w3.org/2000/svg" },
     React.createElement("path", { d: "M50.2373 33.7627L45.5 29.0253V22.75C45.4944 18.4134 43.881 14.2329 40.9718 11.0169C38.0626 7.80093 34.0643 5.77786 29.75 5.3389V1.75H26.25V5.3389C21.9357 5.77786 17.9374 7.80093 15.0282 11.0169C12.119 14.2329 10.5056 18.4134 10.5 22.75V29.0253L5.76275 33.7627C5.60018 33.9252 5.47122 34.118 5.38324 34.3303C5.29526 34.5426 5.24998 34.7702 5.25 35V40.25C5.25 40.7141 5.43437 41.1592 5.76256 41.4874C6.09075 41.8156 6.53587 42 7 42H19.25V43.75C19.25 46.0706 20.1719 48.2962 21.8128 49.9372C23.4538 51.5781 25.6794 52.5 28 52.5C30.3206 52.5 32.5462 51.5781 34.1872 49.9372C35.8281 48.2962 36.75 46.0706 36.75 43.75V42H49C49.4641 42 49.9092 41.8156 50.2374 41.4874C50.5656 41.1592 50.75 40.7141 50.75 40.25V35C50.75 34.7702 50.7047 34.5426 50.6168 34.3303C50.5288 34.118 50.3998 33.9252 50.2373 33.7627ZM33.25 43.75C33.25 45.1424 32.6969 46.4777 31.7123 47.4623C30.7277 48.4469 29.3924 49 28 49C26.6076 49 25.2723 48.4469 24.2877 47.4623C23.3031 46.4777 22.75 45.1424 22.75 43.75V42H33.25V43.75Z", fill: "#FF8201" })));
+export const CamundaLogo = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
+    React.createElement("title", null, "Camunda logo"),
+    React.createElement("rect", { width: "24", height: "24", rx: "3", style: { fill: "var(--cds-icon-primary)" } }),
+    React.createElement("path", { d: "M11.986 15.585c1.824 0 2.762-1.075 2.776-2.967v-1.564h-1.755v1.687c0 .844-.368 1.143-.966 1.143-.585 0-.966-.3-.966-1.143V6.364c0-.843.367-1.17.966-1.156.585 0 .966.326.966 1.17v1.261h1.755V6.496c0-1.891-.94-2.965-2.762-2.965-1.823 0-2.764 1.074-2.776 2.965v6.136c0 1.864.943 2.953 2.762 2.953Z", style: { fill: "var(--cds-text-inverse)" } }),
+    React.createElement("path", { d: "M14.762 17.312H9.224v3.13h5.538v-3.13Z", fill: "#FC5D0D" })));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@camunda/camunda-composite-components",
-	"version": "0.0.35",
+	"version": "0.0.36",
 	"scripts": {
 		"clean": "rimraf lib/",
 		"copy-css-files": "copyfiles -u 1 src/components/**/*.css lib/esm",