@camunda/camunda-composite-components 0.3.0 → 0.3.1-rc.1

package/lib/esm/api/api.js

@@ -68,7 +68,7 @@ export async function request(payload) {
         success = false;
     }
     if (!success) {
-        throw new HttpError(response.statusText, response.status);
+        console.error(response.statusText, response.status);
     }
     const responseType = payload.responseType ?? type;
     switch (responseType) {

package/lib/esm/components/c3-help-center/c3-help-center-provider.d.ts

@@ -1,9 +1,15 @@
 import React, { FC, PropsWithChildren } from "react";
+import { HelpCenterHintType } from "./help-center-hint";
 export type C3HelpCenterContextValue = {
     openHelpCenter: (showTabId?: string) => void;
     setIsHelpCenterOpen: (isOpen: boolean) => void;
     isHelpCenterOpen: boolean;
     showTabId?: string | null;
+    showHint: boolean;
+    setShowHint: (showHint: boolean) => void;
+    setShowHintOnClose: (showHintOnClose: boolean) => void;
+    hintType: HelpCenterHintType;
+    setHintType: (hintType: HelpCenterHintType) => void;
 };
 export declare const C3HelpCenterContext: React.Context<C3HelpCenterContextValue>;
 export declare const C3HelpCenterProvider: FC<PropsWithChildren>;

package/lib/esm/components/c3-help-center/c3-help-center-provider.js

@@ -3,10 +3,18 @@ export const C3HelpCenterContext = React.createContext({
     openHelpCenter: () => undefined,
     setIsHelpCenterOpen: () => undefined,
     isHelpCenterOpen: false,
+    showHint: false,
+    setShowHint: () => undefined,
+    setShowHintOnClose: () => undefined,
+    hintType: "help-center",
+    setHintType: () => undefined,
 });
 export const C3HelpCenterProvider = ({ children }) => {
     const [isHelpCenterOpen, setIsHelpCenterOpen] = useState(false);
     const [activeTabId, setActiveTabId] = useState(null);
+    const [showHint, setShowHint] = useState(false);
+    const [showHintOnClose, setShowHintOnClose] = useState(false);
+    const [hintType, setHintType] = useState("help-center");
     const openHelpCenter = (showTabId) => {
         if (!isHelpCenterOpen) {
             setIsHelpCenterOpen(true);
@@ -15,14 +23,24 @@ export const C3HelpCenterProvider = ({ children }) => {
             setActiveTabId(showTabId);
     };
     useEffect(() => {
-        if (!isHelpCenterOpen)
+        if (!isHelpCenterOpen) {
             setActiveTabId(null);
+            if (showHintOnClose) {
+                setShowHint(true);
+                setShowHintOnClose(false);
+            }
+        }
     }, [isHelpCenterOpen]);
     return (React.createElement(C3HelpCenterContext.Provider, { value: {
             openHelpCenter,
             setIsHelpCenterOpen,
             isHelpCenterOpen,
             showTabId: activeTabId,
+            showHint,
+            setShowHint,
+            setShowHintOnClose,
+            hintType,
+            setHintType,
         } }, children));
 };
 export const useC3HelpCenter = () => React.useContext(C3HelpCenterContext);

package/lib/esm/components/c3-help-center/help-center-hint.d.ts

@@ -0,0 +1,5 @@
+import React, { PropsWithChildren } from "react";
+export type HelpCenterHintType = "help-center" | "onboarding";
+export declare const HelpCenterHint: React.FC<PropsWithChildren<{
+    type: HelpCenterHintType;
+}>>;

package/lib/esm/components/c3-help-center/help-center-hint.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Button, Toggletip, ToggletipActions, ToggletipContent, } from "@carbon/react";
+import { useC3HelpCenter } from "./c3-help-center-provider";
+export const HelpCenterHint = ({ children, type }) => {
+    const { showHint, setShowHint } = useC3HelpCenter();
+    return setShowHint ? (React.createElement(Toggletip, { defaultOpen: showHint, 
+        // eslint-disable-next-line
+        // @ts-ignore
+        align: "bottom-right" },
+        children,
+        React.createElement(ToggletipContent, null,
+            React.createElement("p", null, type === "help-center"
+                ? "Access the help center at any time to see your recommendations, discover guides, tutorials, or to share feedback."
+                : "Access the onboarding survey to get personalized next steps and educational content"),
+            React.createElement(ToggletipActions, null,
+                React.createElement(Button, { size: "sm", onClick: () => setShowHint(false) }, "Got it"))))) : (children);
+};

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

@@ -15,6 +15,7 @@ import { C3HelpCenter } from "../c3-help-center/c3-help-center";
 import { C3ClusterTag } from "../c3-cluster-tag/c3-cluster-tag";
 import { useC3HelpCenter } from "../c3-help-center/c3-help-center-provider";
 import { useC3Profile } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
+import { HelpCenterHint } from "../c3-help-center/help-center-hint";
 /**
  * UI SHELL
  * Docs: https://react.carbondesignsystem.com/?path=/story/components-ui-shell--fixed-side-nav
@@ -110,9 +111,10 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
                                 ...orgSideBar,
                                 type: "org",
                             } })),
-                        infoButton || helpCenter ? (React.createElement(InfoButton, { onClick: infoButton
-                                ? infoButton.onClick
-                                : () => setIsHelpCenterOpen(!isHelpCenterOpen) })) : (infoSideBar && (React.createElement(C3InfoSidebar, { sideBar: { ...infoSideBar, type: "info" } }))),
+                        infoButton || helpCenter ? (React.createElement(HelpCenterHint, { type: "onboarding" },
+                            React.createElement(InfoButton, { onClick: infoButton
+                                    ? infoButton.onClick
+                                    : () => setIsHelpCenterOpen(!isHelpCenterOpen) }))) : (infoSideBar && (React.createElement(C3InfoSidebar, { sideBar: { ...infoSideBar, type: "info" } }))),
                         userSideBar && (React.createElement(C3UserSidebar, { sideBar: {
                                 ...userSideBar,
                                 type: "user",

package/lib/esm/components/c3-onboarding-survey/onboardingSurvey.js

@@ -4,7 +4,9 @@ import { OnboardingModal } from "./onboardingModal";
 import { OnboardingPage } from "./onboardingPage";
 import { OnboardingStep } from "./step";
 import { Body01 } from "../styles";
+import { useC3HelpCenter } from "../c3-help-center/c3-help-center-provider";
 export const OnboardingSurvey = ({ appTheme, persona, userFirstName, syncPersona, setPersona, mixpanelTrack, onRequestClose, onboardingConfiguration, isLoadingConfig, modal, origin, }) => {
+    const { setShowHintOnClose, setHintType } = useC3HelpCenter();
     const [step, setStep] = useState(persona?.nextStep ?? 0);
     const [isDoingAsyncWork, setIsDoingAsyncWork] = useState(false);
     React.useEffect(() => {
@@ -19,10 +21,15 @@ export const OnboardingSurvey = ({ appTheme, persona, userFirstName, syncPersona
                 wasShown: true,
             },
         };
+        if (!persona?.wasShown) {
+            setShowHintOnClose(true);
+            setHintType("onboarding");
+        }
         if (committedStep >= onboardingConfiguration.steps.length) {
             newPersona.nextStep = 0;
             newPersona.complete = true;
             await syncPersona(newPersona, true);
+            setHintType("help-center");
         }
         else {
             newPersona.nextStep = step + 1;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@camunda/camunda-composite-components",
-	"version": "0.3.0",
+	"version": "0.3.1-rc.1",
 	"scripts": {
 		"clean": "rimraf lib/",
 		"build": "yarn clean && tsc",
@@ -26,24 +26,24 @@
 		"test": "yarn test:ts && yarn test:storybook && yarn test:visual-regression:docker"
 	},
 	"devDependencies": {
-		"@babel/core": "7.23.2",
-		"@babel/preset-env": "7.23.2",
-		"@babel/preset-react": "7.22.15",
-		"@babel/preset-typescript": "7.23.2",
+		"@babel/core": "7.23.3",
+		"@babel/preset-env": "7.23.3",
+		"@babel/preset-react": "7.23.3",
+		"@babel/preset-typescript": "7.23.3",
 		"@carbon/react": "1.37.0",
 		"@mdx-js/react": "2.3.0",
 		"@playwright/test": "1.37.1",
-		"@storybook/addon-a11y": "7.5.2",
-		"@storybook/addon-actions": "7.5.2",
-		"@storybook/addon-docs": "7.5.2",
-		"@storybook/addon-essentials": "7.5.2",
-		"@storybook/addon-interactions": "7.5.2",
-		"@storybook/addon-links": "7.5.2",
-		"@storybook/blocks": "7.5.2",
+		"@storybook/addon-a11y": "7.5.3",
+		"@storybook/addon-actions": "7.5.3",
+		"@storybook/addon-docs": "7.5.3",
+		"@storybook/addon-essentials": "7.5.3",
+		"@storybook/addon-interactions": "7.5.3",
+		"@storybook/addon-links": "7.5.3",
+		"@storybook/blocks": "7.5.3",
 		"@storybook/preset-scss": "1.0.3",
-		"@storybook/react": "7.5.2",
-		"@storybook/react-webpack5": "7.5.2",
-		"@storybook/test-runner": "0.13.0",
+		"@storybook/react": "7.5.3",
+		"@storybook/react-webpack5": "7.5.3",
+		"@storybook/test-runner": "0.14.1",
 		"@storybook/testing-library": "0.2.2",
 		"@types/carbon-components-react": "7.55.3",
 		"@types/event-source-polyfill": "1.0.1",
@@ -76,7 +76,7 @@
 		"sass": "1.66.1",
 		"sass-loader": "13.3.2",
 		"serve": "14.2.1",
-		"storybook": "7.5.2",
+		"storybook": "7.5.3",
 		"style-loader": "3.3.3",
 		"styled-components": "6.0.7",
 		"typescript": "5.2.2",