@camunda/camunda-composite-components 0.0.18 → 0.0.20

package/lib/esm/components/c3-empty-state/c3-empty-state.js

@@ -6,7 +6,7 @@ export const C3EmptyState = ({ icon, heading, description, button, link, }) => (
         paddingBottom: "3rem",
     } },
     React.createElement(Stack, { orientation: "horizontal", gap: 6 },
-        React.createElement("img", { src: icon.path, alt: icon.altText }),
+        icon && React.createElement("img", { src: icon.path, alt: icon.altText }),
         React.createElement(Stack, { gap: 3 },
             React.createElement("h2", null, heading),
             React.createElement(Stack, { gap: 6 },

package/lib/esm/components/c3-empty-state/c3-empty-state.types.d.ts

@@ -1,10 +1,10 @@
 export interface C3EmptyStateProps {
-    icon: {
+    heading: string;
+    description: any;
+    icon?: {
         path: string;
         altText: string;
     };
-    heading: string;
-    description: any;
     button?: {
         onClick: () => void;
         disabled?: boolean;

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

@@ -1,7 +1,8 @@
-import { Button, FormLabel, Header, HeaderContainer, HeaderGlobalAction, HeaderGlobalBar, HeaderMenuItem, HeaderName, HeaderNavigation, HeaderPanel, HeaderSideNavItems, RadioButton, RadioButtonGroup, SideNav, SideNavItems, SideNavLink, SideNavMenu, SideNavMenuItem, SkipToContent, Stack, SwitcherDivider, Tag, Toggle, } from "@carbon/react";
+import { Button, FormLabel, Header, HeaderContainer, HeaderGlobalAction, HeaderGlobalBar, HeaderMenuItem, HeaderName, HeaderNavigation, HeaderPanel, HeaderSideNavItems, RadioButton, RadioButtonGroup, SideNav, SideNavItems, SideNavLink, SideNavMenu, SideNavMenuItem, SkipToContent, Stack, SwitcherDivider, Tag, Toggle, ToggletipContent, Toggletip, ToggletipButton, useTheme, usePrefix, } from "@carbon/react";
 import { Close, Enterprise, Help, Launch, UserAvatar, } from "@carbon/react/icons";
 import React, { useEffect, useState } from "react";
 import { C3AppMenuIcon } from "../../icons/c3-icons";
+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 C3NavigationExternalLink = ({ label }) => (React.createElement(React.Fragment, null,
     label,
     React.createElement(Launch, { style: {
@@ -95,10 +96,11 @@ const C3NavigationSideBar = (props) => {
         const refPanel = React.createRef();
         const refIcon = React.createRef();
         useOnClickOutside(refPanel, refIcon, () => setSideBarOpen(false));
+        const itemTabIndex = sideBarOpen ? undefined : -1;
         return (React.createElement(React.Fragment, null,
             React.createElement(HeaderGlobalAction, { ref: refIcon, "aria-label": sideBar.ariaLabel, onClick: () => {
                     setSideBarOpen(!sideBarOpen);
-                }, isActive: sideBarOpen, tooltipAlignment: sideBar.type === 'user' ? 'end' : 'center' }, icon),
+                }, isActive: sideBarOpen, tooltipAlignment: sideBar.type === "user" ? "end" : "center" }, icon),
             React.createElement(HeaderPanel, { ref: refPanel, "aria-label": sideBar.ariaLabel, expanded: sideBarOpen, style: {
                     display: "grid",
                     gridAutoFlow: "row",
@@ -123,13 +125,13 @@ const C3NavigationSideBar = (props) => {
                             React.createElement(RadioButtonGroup, { name: "theme-radio-group", defaultSelected: themeSelector.currentTheme, legendText: "Theme", orientation: "vertical", onChange: (newValue) => {
                                     themeSelector.onChange(newValue);
                                 } },
-                                React.createElement(RadioButton, { id: "light", labelText: "Light", value: "light" }),
-                                React.createElement(RadioButton, { id: "system", labelText: "System", value: "system" }),
-                                React.createElement(RadioButton, { id: "dark", labelText: "Dark", value: "dark" }))))),
+                                React.createElement(RadioButton, { id: "light", labelText: "Light", value: "light", tabIndex: itemTabIndex }),
+                                React.createElement(RadioButton, { id: "system", labelText: "System", value: "system", tabIndex: itemTabIndex }),
+                                React.createElement(RadioButton, { id: "dark", labelText: "Dark", value: "dark", tabIndex: itemTabIndex }))))),
                     stageToggle && (React.createElement(React.Fragment, null,
                         React.createElement(SwitcherDivider, null),
                         React.createElement("div", { style: { padding: ".5rem 1rem" } },
-                            React.createElement(Toggle, { size: "sm", id: "toggle-productionfeatures", defaultToggled: stageToggle.prodFeaturesEnabled, onClick: stageToggle.toggle, labelText: "Simulate Production Features" })))),
+                            React.createElement(Toggle, { size: "sm", id: "toggle-productionfeatures", defaultToggled: stageToggle.prodFeaturesEnabled, onClick: stageToggle.toggle, labelText: "Simulate Production Features", tabIndex: itemTabIndex })))),
                     activeOrganization && (React.createElement(React.Fragment, null,
                         React.createElement("div", { style: {
                                 padding: "1rem",
@@ -158,7 +160,7 @@ const C3NavigationSideBar = (props) => {
                                     if (sideBar.closeOnClick !== false) {
                                         setSideBarOpen(false);
                                     }
-                                } }, activeOrganization.action.label)),
+                                }, tabIndex: itemTabIndex }, activeOrganization.action.label)),
                         sideBar.elements && sideBar.elements.length > 0 && (React.createElement(React.Fragment, null,
                             React.createElement(SwitcherDivider, null),
                             React.createElement(FormLabel, { style: {
@@ -180,7 +182,7 @@ const C3NavigationSideBar = (props) => {
                                 if (sideBar.closeOnClick !== false) {
                                     setSideBarOpen(false);
                                 }
-                            } }, element.label)))),
+                            }, tabIndex: itemTabIndex }, element.label)))),
                 sideBar.bottomElements &&
                     sideBar.bottomElements.map((element) => (React.createElement(Button, { kind: element.kind, key: element.key, className: "cds--switcher__item", renderIcon: element.renderIcon, onClick: () => {
                             if (element.onClick) {
@@ -189,15 +191,18 @@ const C3NavigationSideBar = (props) => {
                             if (sideBar.closeOnClick !== false) {
                                 setSideBarOpen(false);
                             }
-                        }, style: { alignSelf: "end" } }, element.label))))));
+                        }, style: { alignSelf: "end" }, tabIndex: itemTabIndex }, element.label))))));
     }
     return null;
 };
 export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, userSideBar, }) => {
+    const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINT_LG_WIDTH}`);
+    const displayAppBar = (appBar.elements?.length ?? 0) > 0 || !isLargeScreen;
+    const inverseThemeClassName = useInverseThemeClassName();
     return (React.createElement(HeaderContainer, { render: () => {
-            return (React.createElement(Header, { "aria-label": "Camunda Console" },
+            return (React.createElement(Header, { "aria-label": app.ariaLabel },
                 React.createElement(SkipToContent, null),
-                React.createElement(C3NavigationAppBar, { app: app, appBar: appBar, forwardRef: forwardRef, navbar: navbar }),
+                displayAppBar && (React.createElement(C3NavigationAppBar, { app: app, appBar: appBar, forwardRef: forwardRef, navbar: navbar })),
                 React.createElement(HeaderName, { element: forwardRef, prefix: app.prefix, ...app.routeProps },
                     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 },
@@ -211,7 +216,29 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
                         } },
                         navbar.tags &&
                             navbar.tags.length > 0 &&
-                            navbar.tags.map((tag) => (React.createElement(Tag, { key: tag.key, className: "headerTag", type: tag.color }, tag.label))),
+                            navbar.tags.map((tag) => {
+                                if (tag?.tooltip !== undefined) {
+                                    const { content, buttonLabel } = tag.tooltip;
+                                    return (React.createElement("div", { key: tag.key, style: {
+                                            height: "1.5rem",
+                                            marginTop: "0.50rem",
+                                        } },
+                                        React.createElement(Toggletip, null,
+                                            React.createElement(ToggletipButton, { label: buttonLabel },
+                                                React.createElement(Tag, { type: tag.color, style: {
+                                                        padding: "0 1rem",
+                                                        marginRight: 0,
+                                                        marginLeft: 0,
+                                                        cursor: "pointer",
+                                                    } }, tag.label)),
+                                            React.createElement(ToggletipContent, { className: inverseThemeClassName }, content))));
+                                }
+                                return (React.createElement(Tag, { key: tag.key, style: {
+                                        height: "1.5rem",
+                                        marginTop: "0.75rem",
+                                        padding: "0 1rem",
+                                    }, type: tag.color }, tag.label));
+                            }),
                         navbar.orgName && (React.createElement("div", { className: "bodyText", style: {
                                 fontSize: "14px",
                                 lineHeight: "3rem",
@@ -244,3 +271,28 @@ function useOnClickOutside(refPanel, refIcon, handler) {
         };
     }, [refPanel, handler]);
 }
+function executeMediaQuery(mediaQuery) {
+    return window.matchMedia(mediaQuery);
+}
+function useMediaQuery(mediaQuery) {
+    const [isMatched, setIsMatched] = useState(executeMediaQuery(mediaQuery).matches);
+    useEffect(() => {
+        const query = executeMediaQuery(mediaQuery);
+        const listener = (event) => {
+            setIsMatched(event.matches);
+        };
+        query.addEventListener("change", listener);
+        return () => {
+            query.removeEventListener("change", listener);
+        };
+    }, []);
+    return isMatched;
+}
+function useInverseThemeClassName() {
+    const { theme } = useTheme();
+    const prefix = usePrefix();
+    if (!["g10", "g100"].includes(theme)) {
+        return "";
+    }
+    return theme === "g10" ? `${prefix}--g100` : `${prefix}--g10`;
+}

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { Tag } from "@carbon/react";
 export interface C3NavigationAppProps {
     prefix: string;
     name: string;
@@ -63,7 +64,11 @@ export interface C3NavigationNavBarProps {
     tags?: Array<{
         label: string;
         key: string;
-        color?: "red" | "green" | "purple" | "teal";
+        color?: React.ComponentProps<typeof Tag>["type"];
+        tooltip?: {
+            content: React.ReactNode;
+            buttonLabel: string;
+        };
     }>;
     orgName?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@camunda/camunda-composite-components",
-	"version": "0.0.18",
+	"version": "0.0.20",
 	"scripts": {
 		"build": "tsc",
 		"storybook": "start-storybook -p 6006",