@camunda/camunda-composite-components 0.0.39 → 0.0.40

package/lib/esm/components/c3-navigation/c3-info-button.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+export declare const InfoButton: FC<{
+    onClick: () => void;
+}>;

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { HeaderGlobalAction } from "@carbon/react";
+import { Help } from "@carbon/react/icons";
+export const InfoButton = ({ onClick }) => (React.createElement(HeaderGlobalAction, { "aria-label": "Open Help Center", tooltipAlignment: "center", onClick: onClick },
+    React.createElement(Help, { size: 20 })));

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { C3NavigationProps } from "./c3-navigation.types";
-export declare const C3Navigation: ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, actionButtons, userSideBar, notificationSideBar, }: C3NavigationProps) => JSX.Element;
+export declare const C3Navigation: ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, infoButton, actionButtons, userSideBar, notificationSideBar, }: C3NavigationProps) => JSX.Element;

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

@@ -9,6 +9,7 @@ import { C3NavigationAppBar } from "./c3-navigation-appbar";
 import styled from "styled-components";
 import C3ActionButtons from "./c3-navigation-actions/c3-action-buttons";
 import { CamundaLogo } from "../../icons/c3-icons";
+import { InfoButton } from "./c3-info-button";
 import { C3SidebarStateProvider } from "./c3-navigation-sidebar/c3-sidebar-state-provider";
 /**
  * UI SHELL
@@ -29,7 +30,7 @@ const StyledToggletipContent = styled(ToggletipContent) `
 		color: var(--cds-link-hover-text-color);
 	}
 `;
-export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, actionButtons, userSideBar, notificationSideBar, }) => {
+export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, infoButton, actionButtons, userSideBar, notificationSideBar, }) => {
     const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINT_LG_WIDTH}`);
     const appBarElementsLength = appBar.elements?.length ?? 0;
     const displayAppBar = appBarElementsLength > 0 || (!isLargeScreen && navbar.elements.length > 0);
@@ -92,10 +93,7 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
                                 ...orgSideBar,
                                 type: "org",
                             } })),
-                        infoSideBar && (React.createElement(C3InfoSidebar, { sideBar: {
-                                ...infoSideBar,
-                                type: "info",
-                            } })),
+                        infoButton ? (React.createElement(InfoButton, { onClick: infoButton.onClick })) : (infoSideBar && (React.createElement(C3InfoSidebar, { sideBar: { ...infoSideBar, type: "info" } }))),
                         userSideBar && (React.createElement(C3UserSidebar, { sideBar: {
                                 ...userSideBar,
                                 type: "user",

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

@@ -54,6 +54,9 @@ export interface C3NavigationProps {
     appBar: WithoutType<C3NavigationAppBarProps>;
     orgSideBar?: WithoutType<C3NavigationOrgSideBarProps>;
     infoSideBar?: WithoutType<C3NavigationInfoSideBarProps>;
+    infoButton?: {
+        onClick: () => void;
+    };
     actionButtons?: C3ActionButtonsProps;
     userSideBar?: WithoutType<C3NavigationUserSideBarProps>;
     notificationSideBar?: WithoutType<C3NavigationNotificationsSideBarProps>;

package/package.json

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