@camunda/camunda-composite-components 0.3.1-rc.3 → 0.3.1-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.
@@ -1,9 +1,15 @@
1
1
  import React, { FC, PropsWithChildren } from "react";
2
+ import { HelpCenterHintType } from "./help-center-hint";
2
3
  export type C3HelpCenterContextValue = {
3
4
  openHelpCenter: (showTabId?: string) => void;
4
5
  setIsHelpCenterOpen: (isOpen: boolean) => void;
5
6
  isHelpCenterOpen: boolean;
6
7
  showTabId?: string | null;
8
+ showHint: boolean;
9
+ setShowHint: (showHint: boolean) => void;
10
+ setShowHintOnClose: (showHintOnClose: boolean) => void;
11
+ hintType: HelpCenterHintType;
12
+ setHintType: (hintType: HelpCenterHintType) => void;
7
13
  };
8
14
  export declare const C3HelpCenterContext: React.Context<C3HelpCenterContextValue>;
9
15
  export declare const C3HelpCenterProvider: FC<PropsWithChildren>;
@@ -3,10 +3,18 @@ export const C3HelpCenterContext = React.createContext({
3
3
  openHelpCenter: () => undefined,
4
4
  setIsHelpCenterOpen: () => undefined,
5
5
  isHelpCenterOpen: false,
6
+ showHint: false,
7
+ setShowHint: () => undefined,
8
+ setShowHintOnClose: () => undefined,
9
+ hintType: "onboarding",
10
+ setHintType: () => undefined,
6
11
  });
7
12
  export const C3HelpCenterProvider = ({ children }) => {
8
13
  const [isHelpCenterOpen, setIsHelpCenterOpen] = useState(false);
9
14
  const [activeTabId, setActiveTabId] = useState(null);
15
+ const [showHint, setShowHint] = useState(false);
16
+ const [showHintOnClose, setShowHintOnClose] = useState(false);
17
+ const [hintType, setHintType] = useState("onboarding");
10
18
  const openHelpCenter = (showTabId) => {
11
19
  if (!isHelpCenterOpen) {
12
20
  setIsHelpCenterOpen(true);
@@ -15,14 +23,24 @@ export const C3HelpCenterProvider = ({ children }) => {
15
23
  setActiveTabId(showTabId);
16
24
  };
17
25
  useEffect(() => {
18
- if (!isHelpCenterOpen)
26
+ if (!isHelpCenterOpen) {
19
27
  setActiveTabId(null);
28
+ if (showHintOnClose) {
29
+ setShowHint(true);
30
+ setShowHintOnClose(false);
31
+ }
32
+ }
20
33
  }, [isHelpCenterOpen]);
21
34
  return (React.createElement(C3HelpCenterContext.Provider, { value: {
22
35
  openHelpCenter,
23
36
  setIsHelpCenterOpen,
24
37
  isHelpCenterOpen,
25
38
  showTabId: activeTabId,
39
+ showHint,
40
+ setShowHint,
41
+ setShowHintOnClose,
42
+ hintType,
43
+ setHintType,
26
44
  } }, children));
27
45
  };
28
46
  export const useC3HelpCenter = () => React.useContext(C3HelpCenterContext);
@@ -9,7 +9,7 @@ import { defaultTheme, useC3Profile, } from "../c3-user-configuration/c3-profile
9
9
  import { resolveTheme, } from "../c3-user-configuration/c3-profile-provider/carbon-theme-provider";
10
10
  import { useC3HelpCenter } from "./c3-help-center-provider";
11
11
  export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, mixpanelTrack: customMixpanelTrack, onRequestOpen, theme, onPersonaChange, activeTab, }) => {
12
- const { isHelpCenterOpen: isOpen, setIsHelpCenterOpen } = useC3HelpCenter();
12
+ const { isHelpCenterOpen: isOpen, setIsHelpCenterOpen, setShowHintOnClose, } = useC3HelpCenter();
13
13
  const { userToken, decodedToken, activeOrganizationId, handleTheme, decodedAudience, analyticsTrack, } = useC3UserConfiguration() || {};
14
14
  const { theme: themeConfig, isEnabled, reloadClusters } = useC3Profile();
15
15
  const themeHandlingEnabled = isEnabled && !!handleTheme && !!themeConfig;
@@ -90,6 +90,10 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
90
90
  const tabs = helpCenterConfig.tabs;
91
91
  const firstTab = tabs[0].id;
92
92
  if (isOpen) {
93
+ if (autoStartSurvey && !persona?.wasShown) {
94
+ console.log("opening hc, show hint on close");
95
+ setShowHintOnClose(true);
96
+ }
93
97
  if (persona && !persona.wasShown && decodedAudience) {
94
98
  updatePersona({
95
99
  newPersona: { ...persona, wasShown: true },
@@ -0,0 +1,3 @@
1
+ import React, { PropsWithChildren } from "react";
2
+ export type HelpCenterHintType = "help-center" | "onboarding";
3
+ export declare const HelpCenterHint: React.FC<PropsWithChildren>;
@@ -0,0 +1,18 @@
1
+ import React from "react";
2
+ import { Button, Toggletip, ToggletipActions, ToggletipContent, } from "@carbon/react";
3
+ import { useC3HelpCenter } from "./c3-help-center-provider";
4
+ export const HelpCenterHint = ({ children }) => {
5
+ const { showHint, setShowHint, hintType } = useC3HelpCenter();
6
+ console.log("showHint", showHint);
7
+ return showHint ? (React.createElement(Toggletip, { defaultOpen: showHint,
8
+ // eslint-disable-next-line
9
+ // @ts-ignore
10
+ align: "bottom-right" },
11
+ children,
12
+ React.createElement(ToggletipContent, null,
13
+ React.createElement("p", null, hintType === "help-center"
14
+ ? "Access the help center at any time to see your recommendations, discover guides, tutorials, or to share feedback."
15
+ : "Access the onboarding survey to get personalized next steps and educational content"),
16
+ React.createElement(ToggletipActions, null,
17
+ React.createElement(Button, { size: "sm", onClick: () => setShowHint(false) }, "Got it"))))) : (children);
18
+ };
@@ -8,11 +8,11 @@ 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: true, hideCloseButton: true, style: { maxWidth: "100%", marginBottom: "1rem" }, 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",
15
15
  justifyContent: "flexStart",
16
- gap: "var(--cds-spacing-05)",
16
+ gap: "16px",
17
17
  } }, tiles.map((tile) => (React.createElement(HelpCenterTile, { origin: origin, tabType: type, tile: tile, mixpanelTrack: mixpanelTrack, key: tile.card_id })))))));
18
18
  };
@@ -3,21 +3,6 @@ import { ArrowRight } from "@carbon/react/icons";
3
3
  import React from "react";
4
4
  import { TAB_TYPES } from "./tabs/tabContent";
5
5
  import ReactMarkdown from "react-markdown";
6
- import styled from "styled-components";
7
- const TileHeading = styled.h6 `
8
- font-size: var(--cds-heading-compact-01-font-size);
9
- font-weight: var(--cds-heading-compact-01-font-weight);
10
- line-height: var(--cds-heading-compact-01-line-height);
11
- letter-spacing: var(--cds-heading-compact-01-letter-spacing);
12
- `;
13
- const TileDescription = styled.p `
14
- height: 50px;
15
- color: var(--cds-text-secondary);
16
- `;
17
- const TileStack = styled.div `
18
- display: flex;
19
- flex-direction: column;
20
- `;
21
6
  export const HelpCenterTile = ({ tile, tabType, origin, mixpanelTrack }) => {
22
7
  const { title, description, timeToComplete, cta, image, link, card_id } = tile;
23
8
  if (tabType === TAB_TYPES.Grid) {
@@ -27,17 +12,17 @@ export const HelpCenterTile = ({ tile, tabType, origin, mixpanelTrack }) => {
27
12
  }, className: "cds--layer-two" },
28
13
  React.createElement(Stack, { orientation: "vertical", gap: 3 },
29
14
  React.createElement("img", { src: image, alt: title }),
30
- React.createElement(TileStack, null,
31
- React.createElement(TileHeading, null, title),
32
- React.createElement(TileDescription, null, description),
15
+ React.createElement(Stack, null,
16
+ React.createElement("h5", null, title),
17
+ React.createElement("p", { style: { height: "50px" } }, description),
33
18
  React.createElement("div", { style: { marginLeft: "-4px", marginTop: "12px" } }, (() => {
34
19
  let content = React.createElement("div", { style: { height: "32px" } });
35
20
  if (timeToComplete) {
36
- content = (React.createElement(Tag, { type: "warm-gray", size: "sm", title: timeToComplete }, timeToComplete));
21
+ content = (React.createElement(Tag, { type: "gray", title: timeToComplete }, timeToComplete));
37
22
  }
38
23
  return content;
39
24
  })()))),
40
- React.createElement(Button, { size: "sm", as: "a", href: link, target: "_blank", onClick: () => {
25
+ React.createElement(Button, { as: "a", href: link, target: "_blank", onClick: () => {
41
26
  mixpanelTrack?.(`helpcenter:click`, {
42
27
  from: origin,
43
28
  to: card_id,
@@ -15,6 +15,7 @@ import { C3HelpCenter } from "../c3-help-center/c3-help-center";
15
15
  import { C3ClusterTag } from "../c3-cluster-tag/c3-cluster-tag";
16
16
  import { useC3HelpCenter } from "../c3-help-center/c3-help-center-provider";
17
17
  import { useC3Profile } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
18
+ import { HelpCenterHint } from "../c3-help-center/help-center-hint";
18
19
  /**
19
20
  * UI SHELL
20
21
  * 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
110
111
  ...orgSideBar,
111
112
  type: "org",
112
113
  } })),
113
- infoButton || helpCenter ? (React.createElement(InfoButton, { onClick: infoButton
114
- ? infoButton.onClick
115
- : () => setIsHelpCenterOpen(!isHelpCenterOpen) })) : (infoSideBar && (React.createElement(C3InfoSidebar, { sideBar: { ...infoSideBar, type: "info" } }))),
114
+ infoButton || helpCenter ? (React.createElement(HelpCenterHint, null,
115
+ React.createElement(InfoButton, { onClick: infoButton
116
+ ? infoButton.onClick
117
+ : () => setIsHelpCenterOpen(!isHelpCenterOpen) }))) : (infoSideBar && (React.createElement(C3InfoSidebar, { sideBar: { ...infoSideBar, type: "info" } }))),
116
118
  userSideBar && (React.createElement(C3UserSidebar, { sideBar: {
117
119
  ...userSideBar,
118
120
  type: "user",
@@ -10,17 +10,17 @@ export declare const NotificationTitle: import("styled-components").IStyledCompo
10
10
  accessKey?: string | undefined;
11
11
  autoFocus?: boolean | undefined;
12
12
  className?: string | undefined;
13
- contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
13
+ contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
14
14
  contextMenu?: string | undefined;
15
15
  dir?: string | undefined;
16
- draggable?: (boolean | "true" | "false") | undefined;
16
+ draggable?: (boolean | "false" | "true") | undefined;
17
17
  hidden?: boolean | undefined;
18
18
  id?: string | undefined;
19
19
  lang?: string | undefined;
20
20
  nonce?: string | undefined;
21
21
  placeholder?: string | undefined;
22
22
  slot?: string | undefined;
23
- spellCheck?: (boolean | "true" | "false") | undefined;
23
+ spellCheck?: (boolean | "false" | "true") | undefined;
24
24
  style?: React.CSSProperties | undefined;
25
25
  tabIndex?: number | undefined;
26
26
  title?: string | undefined;
@@ -50,55 +50,55 @@ export declare const NotificationTitle: import("styled-components").IStyledCompo
50
50
  results?: number | undefined;
51
51
  security?: string | undefined;
52
52
  unselectable?: "on" | "off" | undefined;
53
- inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
53
+ inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
54
54
  is?: string | undefined;
55
55
  'aria-activedescendant'?: string | undefined;
56
- 'aria-atomic'?: (boolean | "true" | "false") | undefined;
56
+ 'aria-atomic'?: (boolean | "false" | "true") | undefined;
57
57
  'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
58
58
  'aria-braillelabel'?: string | undefined;
59
59
  'aria-brailleroledescription'?: string | undefined;
60
- 'aria-busy'?: (boolean | "true" | "false") | undefined;
61
- 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
60
+ 'aria-busy'?: (boolean | "false" | "true") | undefined;
61
+ 'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
62
62
  'aria-colcount'?: number | undefined;
63
63
  'aria-colindex'?: number | undefined;
64
64
  'aria-colindextext'?: string | undefined;
65
65
  'aria-colspan'?: number | undefined;
66
66
  'aria-controls'?: string | undefined;
67
- 'aria-current'?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
67
+ 'aria-current'?: boolean | "time" | "step" | "page" | "false" | "true" | "location" | "date" | undefined;
68
68
  'aria-describedby'?: string | undefined;
69
69
  'aria-description'?: string | undefined;
70
70
  'aria-details'?: string | undefined;
71
- 'aria-disabled'?: (boolean | "true" | "false") | undefined;
72
- 'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
71
+ 'aria-disabled'?: (boolean | "false" | "true") | undefined;
72
+ 'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
73
73
  'aria-errormessage'?: string | undefined;
74
- 'aria-expanded'?: (boolean | "true" | "false") | undefined;
74
+ 'aria-expanded'?: (boolean | "false" | "true") | undefined;
75
75
  'aria-flowto'?: string | undefined;
76
- 'aria-grabbed'?: (boolean | "true" | "false") | undefined;
77
- 'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
78
- 'aria-hidden'?: (boolean | "true" | "false") | undefined;
79
- 'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
76
+ 'aria-grabbed'?: (boolean | "false" | "true") | undefined;
77
+ 'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "false" | "true" | undefined;
78
+ 'aria-hidden'?: (boolean | "false" | "true") | undefined;
79
+ 'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
80
80
  'aria-keyshortcuts'?: string | undefined;
81
81
  'aria-label'?: string | undefined;
82
82
  'aria-labelledby'?: string | undefined;
83
83
  'aria-level'?: number | undefined;
84
84
  'aria-live'?: "off" | "assertive" | "polite" | undefined;
85
- 'aria-modal'?: (boolean | "true" | "false") | undefined;
86
- 'aria-multiline'?: (boolean | "true" | "false") | undefined;
87
- 'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
85
+ 'aria-modal'?: (boolean | "false" | "true") | undefined;
86
+ 'aria-multiline'?: (boolean | "false" | "true") | undefined;
87
+ 'aria-multiselectable'?: (boolean | "false" | "true") | undefined;
88
88
  'aria-orientation'?: "horizontal" | "vertical" | undefined;
89
89
  'aria-owns'?: string | undefined;
90
90
  'aria-placeholder'?: string | undefined;
91
91
  'aria-posinset'?: number | undefined;
92
- 'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
93
- 'aria-readonly'?: (boolean | "true" | "false") | undefined;
94
- 'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
95
- 'aria-required'?: (boolean | "true" | "false") | undefined;
92
+ 'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
93
+ 'aria-readonly'?: (boolean | "false" | "true") | undefined;
94
+ 'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
95
+ 'aria-required'?: (boolean | "false" | "true") | undefined;
96
96
  'aria-roledescription'?: string | undefined;
97
97
  'aria-rowcount'?: number | undefined;
98
98
  'aria-rowindex'?: number | undefined;
99
99
  'aria-rowindextext'?: string | undefined;
100
100
  'aria-rowspan'?: number | undefined;
101
- 'aria-selected'?: (boolean | "true" | "false") | undefined;
101
+ 'aria-selected'?: (boolean | "false" | "true") | undefined;
102
102
  'aria-setsize'?: number | undefined;
103
103
  'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
104
104
  'aria-valuemax'?: number | undefined;
@@ -282,17 +282,17 @@ export declare const NotificationDescription: import("styled-components").IStyle
282
282
  accessKey?: string | undefined;
283
283
  autoFocus?: boolean | undefined;
284
284
  className?: string | undefined;
285
- contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
285
+ contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
286
286
  contextMenu?: string | undefined;
287
287
  dir?: string | undefined;
288
- draggable?: (boolean | "true" | "false") | undefined;
288
+ draggable?: (boolean | "false" | "true") | undefined;
289
289
  hidden?: boolean | undefined;
290
290
  id?: string | undefined;
291
291
  lang?: string | undefined;
292
292
  nonce?: string | undefined;
293
293
  placeholder?: string | undefined;
294
294
  slot?: string | undefined;
295
- spellCheck?: (boolean | "true" | "false") | undefined;
295
+ spellCheck?: (boolean | "false" | "true") | undefined;
296
296
  style?: React.CSSProperties | undefined;
297
297
  tabIndex?: number | undefined;
298
298
  title?: string | undefined;
@@ -322,55 +322,55 @@ export declare const NotificationDescription: import("styled-components").IStyle
322
322
  results?: number | undefined;
323
323
  security?: string | undefined;
324
324
  unselectable?: "on" | "off" | undefined;
325
- inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
325
+ inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
326
326
  is?: string | undefined;
327
327
  'aria-activedescendant'?: string | undefined;
328
- 'aria-atomic'?: (boolean | "true" | "false") | undefined;
328
+ 'aria-atomic'?: (boolean | "false" | "true") | undefined;
329
329
  'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
330
330
  'aria-braillelabel'?: string | undefined;
331
331
  'aria-brailleroledescription'?: string | undefined;
332
- 'aria-busy'?: (boolean | "true" | "false") | undefined;
333
- 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
332
+ 'aria-busy'?: (boolean | "false" | "true") | undefined;
333
+ 'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
334
334
  'aria-colcount'?: number | undefined;
335
335
  'aria-colindex'?: number | undefined;
336
336
  'aria-colindextext'?: string | undefined;
337
337
  'aria-colspan'?: number | undefined;
338
338
  'aria-controls'?: string | undefined;
339
- 'aria-current'?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
339
+ 'aria-current'?: boolean | "time" | "step" | "page" | "false" | "true" | "location" | "date" | undefined;
340
340
  'aria-describedby'?: string | undefined;
341
341
  'aria-description'?: string | undefined;
342
342
  'aria-details'?: string | undefined;
343
- 'aria-disabled'?: (boolean | "true" | "false") | undefined;
344
- 'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
343
+ 'aria-disabled'?: (boolean | "false" | "true") | undefined;
344
+ 'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
345
345
  'aria-errormessage'?: string | undefined;
346
- 'aria-expanded'?: (boolean | "true" | "false") | undefined;
346
+ 'aria-expanded'?: (boolean | "false" | "true") | undefined;
347
347
  'aria-flowto'?: string | undefined;
348
- 'aria-grabbed'?: (boolean | "true" | "false") | undefined;
349
- 'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
350
- 'aria-hidden'?: (boolean | "true" | "false") | undefined;
351
- 'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
348
+ 'aria-grabbed'?: (boolean | "false" | "true") | undefined;
349
+ 'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "false" | "true" | undefined;
350
+ 'aria-hidden'?: (boolean | "false" | "true") | undefined;
351
+ 'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
352
352
  'aria-keyshortcuts'?: string | undefined;
353
353
  'aria-label'?: string | undefined;
354
354
  'aria-labelledby'?: string | undefined;
355
355
  'aria-level'?: number | undefined;
356
356
  'aria-live'?: "off" | "assertive" | "polite" | undefined;
357
- 'aria-modal'?: (boolean | "true" | "false") | undefined;
358
- 'aria-multiline'?: (boolean | "true" | "false") | undefined;
359
- 'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
357
+ 'aria-modal'?: (boolean | "false" | "true") | undefined;
358
+ 'aria-multiline'?: (boolean | "false" | "true") | undefined;
359
+ 'aria-multiselectable'?: (boolean | "false" | "true") | undefined;
360
360
  'aria-orientation'?: "horizontal" | "vertical" | undefined;
361
361
  'aria-owns'?: string | undefined;
362
362
  'aria-placeholder'?: string | undefined;
363
363
  'aria-posinset'?: number | undefined;
364
- 'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
365
- 'aria-readonly'?: (boolean | "true" | "false") | undefined;
366
- 'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
367
- 'aria-required'?: (boolean | "true" | "false") | undefined;
364
+ 'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
365
+ 'aria-readonly'?: (boolean | "false" | "true") | undefined;
366
+ 'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
367
+ 'aria-required'?: (boolean | "false" | "true") | undefined;
368
368
  'aria-roledescription'?: string | undefined;
369
369
  'aria-rowcount'?: number | undefined;
370
370
  'aria-rowindex'?: number | undefined;
371
371
  'aria-rowindextext'?: string | undefined;
372
372
  'aria-rowspan'?: number | undefined;
373
- 'aria-selected'?: (boolean | "true" | "false") | undefined;
373
+ 'aria-selected'?: (boolean | "false" | "true") | undefined;
374
374
  'aria-setsize'?: number | undefined;
375
375
  'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
376
376
  'aria-valuemax'?: number | undefined;
@@ -554,17 +554,17 @@ export declare const LinkContainer: import("styled-components").IStyledComponent
554
554
  accessKey?: string | undefined;
555
555
  autoFocus?: boolean | undefined;
556
556
  className?: string | undefined;
557
- contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
557
+ contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
558
558
  contextMenu?: string | undefined;
559
559
  dir?: string | undefined;
560
- draggable?: (boolean | "true" | "false") | undefined;
560
+ draggable?: (boolean | "false" | "true") | undefined;
561
561
  hidden?: boolean | undefined;
562
562
  id?: string | undefined;
563
563
  lang?: string | undefined;
564
564
  nonce?: string | undefined;
565
565
  placeholder?: string | undefined;
566
566
  slot?: string | undefined;
567
- spellCheck?: (boolean | "true" | "false") | undefined;
567
+ spellCheck?: (boolean | "false" | "true") | undefined;
568
568
  style?: React.CSSProperties | undefined;
569
569
  tabIndex?: number | undefined;
570
570
  title?: string | undefined;
@@ -594,55 +594,55 @@ export declare const LinkContainer: import("styled-components").IStyledComponent
594
594
  results?: number | undefined;
595
595
  security?: string | undefined;
596
596
  unselectable?: "on" | "off" | undefined;
597
- inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
597
+ inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
598
598
  is?: string | undefined;
599
599
  'aria-activedescendant'?: string | undefined;
600
- 'aria-atomic'?: (boolean | "true" | "false") | undefined;
600
+ 'aria-atomic'?: (boolean | "false" | "true") | undefined;
601
601
  'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
602
602
  'aria-braillelabel'?: string | undefined;
603
603
  'aria-brailleroledescription'?: string | undefined;
604
- 'aria-busy'?: (boolean | "true" | "false") | undefined;
605
- 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
604
+ 'aria-busy'?: (boolean | "false" | "true") | undefined;
605
+ 'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
606
606
  'aria-colcount'?: number | undefined;
607
607
  'aria-colindex'?: number | undefined;
608
608
  'aria-colindextext'?: string | undefined;
609
609
  'aria-colspan'?: number | undefined;
610
610
  'aria-controls'?: string | undefined;
611
- 'aria-current'?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
611
+ 'aria-current'?: boolean | "time" | "step" | "page" | "false" | "true" | "location" | "date" | undefined;
612
612
  'aria-describedby'?: string | undefined;
613
613
  'aria-description'?: string | undefined;
614
614
  'aria-details'?: string | undefined;
615
- 'aria-disabled'?: (boolean | "true" | "false") | undefined;
616
- 'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
615
+ 'aria-disabled'?: (boolean | "false" | "true") | undefined;
616
+ 'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
617
617
  'aria-errormessage'?: string | undefined;
618
- 'aria-expanded'?: (boolean | "true" | "false") | undefined;
618
+ 'aria-expanded'?: (boolean | "false" | "true") | undefined;
619
619
  'aria-flowto'?: string | undefined;
620
- 'aria-grabbed'?: (boolean | "true" | "false") | undefined;
621
- 'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
622
- 'aria-hidden'?: (boolean | "true" | "false") | undefined;
623
- 'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
620
+ 'aria-grabbed'?: (boolean | "false" | "true") | undefined;
621
+ 'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "false" | "true" | undefined;
622
+ 'aria-hidden'?: (boolean | "false" | "true") | undefined;
623
+ 'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
624
624
  'aria-keyshortcuts'?: string | undefined;
625
625
  'aria-label'?: string | undefined;
626
626
  'aria-labelledby'?: string | undefined;
627
627
  'aria-level'?: number | undefined;
628
628
  'aria-live'?: "off" | "assertive" | "polite" | undefined;
629
- 'aria-modal'?: (boolean | "true" | "false") | undefined;
630
- 'aria-multiline'?: (boolean | "true" | "false") | undefined;
631
- 'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
629
+ 'aria-modal'?: (boolean | "false" | "true") | undefined;
630
+ 'aria-multiline'?: (boolean | "false" | "true") | undefined;
631
+ 'aria-multiselectable'?: (boolean | "false" | "true") | undefined;
632
632
  'aria-orientation'?: "horizontal" | "vertical" | undefined;
633
633
  'aria-owns'?: string | undefined;
634
634
  'aria-placeholder'?: string | undefined;
635
635
  'aria-posinset'?: number | undefined;
636
- 'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
637
- 'aria-readonly'?: (boolean | "true" | "false") | undefined;
638
- 'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
639
- 'aria-required'?: (boolean | "true" | "false") | undefined;
636
+ 'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
637
+ 'aria-readonly'?: (boolean | "false" | "true") | undefined;
638
+ 'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
639
+ 'aria-required'?: (boolean | "false" | "true") | undefined;
640
640
  'aria-roledescription'?: string | undefined;
641
641
  'aria-rowcount'?: number | undefined;
642
642
  'aria-rowindex'?: number | undefined;
643
643
  'aria-rowindextext'?: string | undefined;
644
644
  'aria-rowspan'?: number | undefined;
645
- 'aria-selected'?: (boolean | "true" | "false") | undefined;
645
+ 'aria-selected'?: (boolean | "false" | "true") | undefined;
646
646
  'aria-setsize'?: number | undefined;
647
647
  'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
648
648
  'aria-valuemax'?: number | undefined;
@@ -4,7 +4,9 @@ import { OnboardingModal } from "./onboardingModal";
4
4
  import { OnboardingPage } from "./onboardingPage";
5
5
  import { OnboardingStep } from "./step";
6
6
  import { Body01 } from "../styles";
7
+ import { useC3HelpCenter } from "../c3-help-center/c3-help-center-provider";
7
8
  export const OnboardingSurvey = ({ appTheme, persona, userFirstName, syncPersona, setPersona, mixpanelTrack, onRequestClose, onboardingConfiguration, isLoadingConfig, modal, origin, }) => {
9
+ const { setHintType } = useC3HelpCenter();
8
10
  const [step, setStep] = useState(persona?.nextStep ?? 0);
9
11
  const [isDoingAsyncWork, setIsDoingAsyncWork] = useState(false);
10
12
  React.useEffect(() => {
@@ -20,6 +22,8 @@ export const OnboardingSurvey = ({ appTheme, persona, userFirstName, syncPersona
20
22
  },
21
23
  };
22
24
  if (committedStep >= onboardingConfiguration.steps.length) {
25
+ console.log("survey completed");
26
+ setHintType("help-center");
23
27
  newPersona.nextStep = 0;
24
28
  newPersona.complete = true;
25
29
  await syncPersona(newPersona, true);
@@ -11,17 +11,17 @@ export declare const Body02: import("styled-components").IStyledComponent<"web",
11
11
  accessKey?: string | undefined;
12
12
  autoFocus?: boolean | undefined;
13
13
  className?: string | undefined;
14
- contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
14
+ contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
15
15
  contextMenu?: string | undefined;
16
16
  dir?: string | undefined;
17
- draggable?: (boolean | "true" | "false") | undefined;
17
+ draggable?: (boolean | "false" | "true") | undefined;
18
18
  hidden?: boolean | undefined;
19
19
  id?: string | undefined;
20
20
  lang?: string | undefined;
21
21
  nonce?: string | undefined;
22
22
  placeholder?: string | undefined;
23
23
  slot?: string | undefined;
24
- spellCheck?: (boolean | "true" | "false") | undefined;
24
+ spellCheck?: (boolean | "false" | "true") | undefined;
25
25
  style?: import("react").CSSProperties | undefined;
26
26
  tabIndex?: number | undefined;
27
27
  title?: string | undefined;
@@ -51,55 +51,55 @@ export declare const Body02: import("styled-components").IStyledComponent<"web",
51
51
  results?: number | undefined;
52
52
  security?: string | undefined;
53
53
  unselectable?: "on" | "off" | undefined;
54
- inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
54
+ inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
55
55
  is?: string | undefined;
56
56
  'aria-activedescendant'?: string | undefined;
57
- 'aria-atomic'?: (boolean | "true" | "false") | undefined;
57
+ 'aria-atomic'?: (boolean | "false" | "true") | undefined;
58
58
  'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
59
59
  'aria-braillelabel'?: string | undefined;
60
60
  'aria-brailleroledescription'?: string | undefined;
61
- 'aria-busy'?: (boolean | "true" | "false") | undefined;
62
- 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
61
+ 'aria-busy'?: (boolean | "false" | "true") | undefined;
62
+ 'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
63
63
  'aria-colcount'?: number | undefined;
64
64
  'aria-colindex'?: number | undefined;
65
65
  'aria-colindextext'?: string | undefined;
66
66
  'aria-colspan'?: number | undefined;
67
67
  'aria-controls'?: string | undefined;
68
- 'aria-current'?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
68
+ 'aria-current'?: boolean | "time" | "step" | "page" | "false" | "true" | "location" | "date" | undefined;
69
69
  'aria-describedby'?: string | undefined;
70
70
  'aria-description'?: string | undefined;
71
71
  'aria-details'?: string | undefined;
72
- 'aria-disabled'?: (boolean | "true" | "false") | undefined;
73
- 'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
72
+ 'aria-disabled'?: (boolean | "false" | "true") | undefined;
73
+ 'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
74
74
  'aria-errormessage'?: string | undefined;
75
- 'aria-expanded'?: (boolean | "true" | "false") | undefined;
75
+ 'aria-expanded'?: (boolean | "false" | "true") | undefined;
76
76
  'aria-flowto'?: string | undefined;
77
- 'aria-grabbed'?: (boolean | "true" | "false") | undefined;
78
- 'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
79
- 'aria-hidden'?: (boolean | "true" | "false") | undefined;
80
- 'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
77
+ 'aria-grabbed'?: (boolean | "false" | "true") | undefined;
78
+ 'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "false" | "true" | undefined;
79
+ 'aria-hidden'?: (boolean | "false" | "true") | undefined;
80
+ 'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
81
81
  'aria-keyshortcuts'?: string | undefined;
82
82
  'aria-label'?: string | undefined;
83
83
  'aria-labelledby'?: string | undefined;
84
84
  'aria-level'?: number | undefined;
85
85
  'aria-live'?: "off" | "assertive" | "polite" | undefined;
86
- 'aria-modal'?: (boolean | "true" | "false") | undefined;
87
- 'aria-multiline'?: (boolean | "true" | "false") | undefined;
88
- 'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
86
+ 'aria-modal'?: (boolean | "false" | "true") | undefined;
87
+ 'aria-multiline'?: (boolean | "false" | "true") | undefined;
88
+ 'aria-multiselectable'?: (boolean | "false" | "true") | undefined;
89
89
  'aria-orientation'?: "horizontal" | "vertical" | undefined;
90
90
  'aria-owns'?: string | undefined;
91
91
  'aria-placeholder'?: string | undefined;
92
92
  'aria-posinset'?: number | undefined;
93
- 'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
94
- 'aria-readonly'?: (boolean | "true" | "false") | undefined;
95
- 'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
96
- 'aria-required'?: (boolean | "true" | "false") | undefined;
93
+ 'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
94
+ 'aria-readonly'?: (boolean | "false" | "true") | undefined;
95
+ 'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
96
+ 'aria-required'?: (boolean | "false" | "true") | undefined;
97
97
  'aria-roledescription'?: string | undefined;
98
98
  'aria-rowcount'?: number | undefined;
99
99
  'aria-rowindex'?: number | undefined;
100
100
  'aria-rowindextext'?: string | undefined;
101
101
  'aria-rowspan'?: number | undefined;
102
- 'aria-selected'?: (boolean | "true" | "false") | undefined;
102
+ 'aria-selected'?: (boolean | "false" | "true") | undefined;
103
103
  'aria-setsize'?: number | undefined;
104
104
  'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
105
105
  'aria-valuemax'?: number | undefined;
@@ -284,17 +284,17 @@ export declare const Body01: import("styled-components").IStyledComponent<"web",
284
284
  accessKey?: string | undefined;
285
285
  autoFocus?: boolean | undefined;
286
286
  className?: string | undefined;
287
- contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
287
+ contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
288
288
  contextMenu?: string | undefined;
289
289
  dir?: string | undefined;
290
- draggable?: (boolean | "true" | "false") | undefined;
290
+ draggable?: (boolean | "false" | "true") | undefined;
291
291
  hidden?: boolean | undefined;
292
292
  id?: string | undefined;
293
293
  lang?: string | undefined;
294
294
  nonce?: string | undefined;
295
295
  placeholder?: string | undefined;
296
296
  slot?: string | undefined;
297
- spellCheck?: (boolean | "true" | "false") | undefined;
297
+ spellCheck?: (boolean | "false" | "true") | undefined;
298
298
  style?: import("react").CSSProperties | undefined;
299
299
  tabIndex?: number | undefined;
300
300
  title?: string | undefined;
@@ -324,55 +324,55 @@ export declare const Body01: import("styled-components").IStyledComponent<"web",
324
324
  results?: number | undefined;
325
325
  security?: string | undefined;
326
326
  unselectable?: "on" | "off" | undefined;
327
- inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
327
+ inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
328
328
  is?: string | undefined;
329
329
  'aria-activedescendant'?: string | undefined;
330
- 'aria-atomic'?: (boolean | "true" | "false") | undefined;
330
+ 'aria-atomic'?: (boolean | "false" | "true") | undefined;
331
331
  'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
332
332
  'aria-braillelabel'?: string | undefined;
333
333
  'aria-brailleroledescription'?: string | undefined;
334
- 'aria-busy'?: (boolean | "true" | "false") | undefined;
335
- 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
334
+ 'aria-busy'?: (boolean | "false" | "true") | undefined;
335
+ 'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
336
336
  'aria-colcount'?: number | undefined;
337
337
  'aria-colindex'?: number | undefined;
338
338
  'aria-colindextext'?: string | undefined;
339
339
  'aria-colspan'?: number | undefined;
340
340
  'aria-controls'?: string | undefined;
341
- 'aria-current'?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
341
+ 'aria-current'?: boolean | "time" | "step" | "page" | "false" | "true" | "location" | "date" | undefined;
342
342
  'aria-describedby'?: string | undefined;
343
343
  'aria-description'?: string | undefined;
344
344
  'aria-details'?: string | undefined;
345
- 'aria-disabled'?: (boolean | "true" | "false") | undefined;
346
- 'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
345
+ 'aria-disabled'?: (boolean | "false" | "true") | undefined;
346
+ 'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
347
347
  'aria-errormessage'?: string | undefined;
348
- 'aria-expanded'?: (boolean | "true" | "false") | undefined;
348
+ 'aria-expanded'?: (boolean | "false" | "true") | undefined;
349
349
  'aria-flowto'?: string | undefined;
350
- 'aria-grabbed'?: (boolean | "true" | "false") | undefined;
351
- 'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
352
- 'aria-hidden'?: (boolean | "true" | "false") | undefined;
353
- 'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
350
+ 'aria-grabbed'?: (boolean | "false" | "true") | undefined;
351
+ 'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "false" | "true" | undefined;
352
+ 'aria-hidden'?: (boolean | "false" | "true") | undefined;
353
+ 'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
354
354
  'aria-keyshortcuts'?: string | undefined;
355
355
  'aria-label'?: string | undefined;
356
356
  'aria-labelledby'?: string | undefined;
357
357
  'aria-level'?: number | undefined;
358
358
  'aria-live'?: "off" | "assertive" | "polite" | undefined;
359
- 'aria-modal'?: (boolean | "true" | "false") | undefined;
360
- 'aria-multiline'?: (boolean | "true" | "false") | undefined;
361
- 'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
359
+ 'aria-modal'?: (boolean | "false" | "true") | undefined;
360
+ 'aria-multiline'?: (boolean | "false" | "true") | undefined;
361
+ 'aria-multiselectable'?: (boolean | "false" | "true") | undefined;
362
362
  'aria-orientation'?: "horizontal" | "vertical" | undefined;
363
363
  'aria-owns'?: string | undefined;
364
364
  'aria-placeholder'?: string | undefined;
365
365
  'aria-posinset'?: number | undefined;
366
- 'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
367
- 'aria-readonly'?: (boolean | "true" | "false") | undefined;
368
- 'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
369
- 'aria-required'?: (boolean | "true" | "false") | undefined;
366
+ 'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
367
+ 'aria-readonly'?: (boolean | "false" | "true") | undefined;
368
+ 'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
369
+ 'aria-required'?: (boolean | "false" | "true") | undefined;
370
370
  'aria-roledescription'?: string | undefined;
371
371
  'aria-rowcount'?: number | undefined;
372
372
  'aria-rowindex'?: number | undefined;
373
373
  'aria-rowindextext'?: string | undefined;
374
374
  'aria-rowspan'?: number | undefined;
375
- 'aria-selected'?: (boolean | "true" | "false") | undefined;
375
+ 'aria-selected'?: (boolean | "false" | "true") | undefined;
376
376
  'aria-setsize'?: number | undefined;
377
377
  'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
378
378
  'aria-valuemax'?: number | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@camunda/camunda-composite-components",
3
- "version": "0.3.1-rc.3",
3
+ "version": "0.3.1-rc.5",
4
4
  "scripts": {
5
5
  "clean": "rimraf lib/",
6
6
  "build": "yarn clean && tsc",
@@ -43,7 +43,7 @@
43
43
  "@storybook/preset-scss": "1.0.3",
44
44
  "@storybook/react": "7.5.3",
45
45
  "@storybook/react-webpack5": "7.5.3",
46
- "@storybook/test-runner": "0.15.2",
46
+ "@storybook/test-runner": "0.16.0",
47
47
  "@storybook/testing-library": "0.2.2",
48
48
  "@types/carbon-components-react": "7.55.3",
49
49
  "@types/event-source-polyfill": "1.0.1",