@camunda/camunda-composite-components 0.2.16-rc.4 → 0.2.16-rc.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -75,11 +75,11 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
|
|
|
75
75
|
fetchData();
|
|
76
76
|
}, [JSON.stringify(decodedToken), decodedAudience]);
|
|
77
77
|
useEffect(() => {
|
|
78
|
-
if (!userToken || !decodedAudience)
|
|
78
|
+
if (!userToken || !decodedAudience || !persona?.complete)
|
|
79
79
|
return;
|
|
80
80
|
fetchConfig();
|
|
81
81
|
reloadClusters();
|
|
82
|
-
}, [persona?.
|
|
82
|
+
}, [persona?.complete]);
|
|
83
83
|
React.useEffect(() => {
|
|
84
84
|
const tabs = helpCenterConfig.tabs;
|
|
85
85
|
const firstTab = tabs[0].id;
|
|
@@ -162,6 +162,8 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
|
|
|
162
162
|
}
|
|
163
163
|
setIsHelpCenterOpen(false);
|
|
164
164
|
onRequestClose?.();
|
|
165
|
+
fetchConfig();
|
|
166
|
+
reloadClusters();
|
|
165
167
|
};
|
|
166
168
|
return (React.createElement(Layer, null,
|
|
167
169
|
React.createElement(ComposedModal, { open: isOpen, size: "lg", onClose: closeFn, className: "help-center", "aria-label": "HelpCenter" }, shouldShowSurvey ? (React.createElement(C3OnboardingSurvey, { personaCallback: personaCallback, persona: persona, mixpanelTrack: mixpanelTrack, onRequestClose: closeFn, onRequestSkip: onRequestSkipSurvey, theme: resolvedTheme, origin: origin, modal: true })) : (React.createElement(HelpCenter, { configuration: helpCenterConfig, persona: persona, audience: decodedAudience || "", organization: activeOrg, clusters: clusters || [], flags: flags, onRequestResumeSurvey: onRequestResumeSurvey, onRequestRetakeSurvey: onRequestRetakeSurvey, onRequestClose: closeFn, mixpanelTrack: mixpanelTrack, email: email, theme: resolvedTheme, origin: origin, initialTab: activeTab })))));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Button,
|
|
1
|
+
import { Button, Loading, ModalBody, ModalFooter, ModalHeader, SideNav, SideNavItems, SideNavMenuItem, Stack, } from "@carbon/react";
|
|
2
2
|
import { Undo } from "@carbon/react/icons";
|
|
3
3
|
import React, { useEffect, useState } from "react";
|
|
4
4
|
import { Feedback } from "./tabs/feedback";
|
|
@@ -138,41 +138,43 @@ export const HelpCenter = ({ configuration, organization, persona, email, audien
|
|
|
138
138
|
} },
|
|
139
139
|
React.createElement("h4", { style: { marginLeft: "16rem" } }, header)),
|
|
140
140
|
React.createElement(StyledModalBody, { style: {
|
|
141
|
-
height: persona.complete && activeTab === "recommendations"
|
|
142
|
-
? "638px"
|
|
143
|
-
: "700px",
|
|
144
141
|
backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
|
|
145
142
|
marginBottom: 0,
|
|
146
143
|
} },
|
|
147
|
-
React.createElement(
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
144
|
+
React.createElement("div", { style: {
|
|
145
|
+
height: persona.complete && activeTab === "recommendations"
|
|
146
|
+
? "638px"
|
|
147
|
+
: "650px",
|
|
148
|
+
} },
|
|
149
|
+
React.createElement(SideNav, { isFixedNav: true, expanded: true, isChildOfHeader: false, "aria-label": "Side nav" },
|
|
150
|
+
React.createElement(SideNavItems, null,
|
|
151
|
+
React.createElement(SideNavMenuItem, null,
|
|
152
|
+
React.createElement("h5", null, "Help Center")),
|
|
153
|
+
React.createElement("div", { style: { marginTop: "4px" } },
|
|
154
|
+
React.createElement(Stack, null, tabBar.map(({ name, id, text }) => {
|
|
155
|
+
const active = activeTab === name;
|
|
156
|
+
let tabBackgroundColor = theme === "light" ? "#F4F4F4" : "#161616";
|
|
157
|
+
let tabButtonColor = theme === "light" ? "#525252" : "#f4f4f4";
|
|
158
|
+
if (active) {
|
|
159
|
+
tabBackgroundColor =
|
|
160
|
+
theme === "light" ? "#E5E5E5" : "#8D8D8D3D";
|
|
161
|
+
tabButtonColor = theme === "light" ? "#161616" : "#f4f4f4";
|
|
162
|
+
}
|
|
163
|
+
return (React.createElement(Button, { className: active ? "active" : "", kind: "secondary", onClick: () => {
|
|
164
|
+
setActiveTab(name);
|
|
165
|
+
mixpanelTrack?.("helpcenter:open", {
|
|
166
|
+
to: id,
|
|
167
|
+
from: origin,
|
|
168
|
+
});
|
|
169
|
+
}, style: {
|
|
170
|
+
width: "100%",
|
|
171
|
+
backgroundColor: tabBackgroundColor,
|
|
172
|
+
color: tabButtonColor,
|
|
173
|
+
}, key: name, "aria-label": text }, text));
|
|
174
|
+
}))),
|
|
175
|
+
React.createElement("div", { style: { position: "absolute", bottom: "20px" } }, configuration.links.map((link) => (React.createElement(SideNavMenuItem, { key: link.label.split(" ").join("-").toLowerCase(), href: link.link, target: "_blank" },
|
|
176
|
+
React.createElement("span", { className: "cds--link" }, link.label))))))),
|
|
177
|
+
content)),
|
|
176
178
|
persona.complete && activeTab === "recommendations" && (React.createElement(ModalFooter, { style: {
|
|
177
179
|
height: "62px",
|
|
178
180
|
paddingRight: "16px",
|
|
@@ -8,7 +8,7 @@ export const TAB_TYPES = {
|
|
|
8
8
|
export const TabContent = ({ onboarding, type, origin, tiles, mixpanelTrack }) => {
|
|
9
9
|
return (React.createElement("div", null,
|
|
10
10
|
React.createElement(Stack, null,
|
|
11
|
-
onboarding && onboarding?.complete !== true && (React.createElement(ActionableNotification, { kind: "info", inline: true, lowContrast: false, hideCloseButton: true, style: { maxWidth: "100%" }, actionButtonLabel: "Resume Survey", onActionButtonClick: onboarding.resumeSurvey, title: "Complete the new user survey to see more recommendations", subtitle: "" })),
|
|
11
|
+
onboarding && onboarding?.complete !== true && (React.createElement(ActionableNotification, { kind: "info", inline: true, lowContrast: false, hideCloseButton: true, style: { maxWidth: "100%", marginBottom: "1rem" }, actionButtonLabel: "Resume Survey", onActionButtonClick: onboarding.resumeSurvey, title: "Complete the new user survey to see more recommendations", subtitle: "" })),
|
|
12
12
|
React.createElement("div", { style: {
|
|
13
13
|
display: "flex",
|
|
14
14
|
flexWrap: "wrap",
|