@camunda/camunda-composite-components 0.2.18-rc.7 → 0.3.0
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.
- package/lib/esm/components/c3-help-center/help-center.js +28 -24
- package/lib/esm/components/c3-help-center/tabs/feedback.js +6 -7
- package/lib/esm/components/c3-onboarding-survey/elements/dropdownSelect.js +7 -4
- package/lib/esm/components/c3-onboarding-survey/elements/textField.js +12 -8
- package/lib/esm/components/c3-onboarding-survey/helpers.d.ts +1 -0
- package/lib/esm/components/c3-onboarding-survey/helpers.js +5 -0
- package/package.json +2 -2
|
@@ -149,30 +149,34 @@ export const HelpCenter = ({ configuration, persona, email, audience, flags = []
|
|
|
149
149
|
React.createElement(SideNavItems, null,
|
|
150
150
|
React.createElement(SideNavMenuItem, null,
|
|
151
151
|
React.createElement("h5", null, "Help Center")),
|
|
152
|
-
React.createElement("
|
|
153
|
-
React.createElement(Stack, null,
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
152
|
+
React.createElement("li", { style: { marginTop: "4px" } },
|
|
153
|
+
React.createElement(Stack, null,
|
|
154
|
+
React.createElement("ul", 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 =
|
|
162
|
+
theme === "light" ? "#161616" : "#f4f4f4";
|
|
163
|
+
}
|
|
164
|
+
return (React.createElement("li", { key: name },
|
|
165
|
+
React.createElement(Button, { className: active ? "active" : "", kind: "secondary", onClick: () => {
|
|
166
|
+
setActiveTab(name);
|
|
167
|
+
mixpanelTrack?.("helpcenter:open", {
|
|
168
|
+
to: id,
|
|
169
|
+
from: origin,
|
|
170
|
+
});
|
|
171
|
+
}, style: {
|
|
172
|
+
width: "100%",
|
|
173
|
+
backgroundColor: tabBackgroundColor,
|
|
174
|
+
color: tabButtonColor,
|
|
175
|
+
}, "aria-label": text }, text)));
|
|
176
|
+
})))),
|
|
177
|
+
React.createElement("li", { style: { position: "absolute", bottom: "20px" } },
|
|
178
|
+
React.createElement("ul", null, configuration.links.map((link) => (React.createElement(SideNavMenuItem, { key: link.label.split(" ").join("-").toLowerCase(), href: link.link, target: "_blank" },
|
|
179
|
+
React.createElement("span", { className: "cds--link" }, link.label)))))))),
|
|
176
180
|
content,
|
|
177
181
|
React.createElement("div", { style: { display: activeTab === "feedback" ? "block" : "none" } },
|
|
178
182
|
React.createElement(Feedback, { audience: audience, theme: theme, mixpanelTrack: mixpanelTrack, setHeader: (head) => {
|
|
@@ -157,13 +157,12 @@ export const Feedback = (props) => {
|
|
|
157
157
|
// eslint-disable-next-line
|
|
158
158
|
// @ts-ignore
|
|
159
159
|
align: "bottom" },
|
|
160
|
-
React.createElement(
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
} })))),
|
|
160
|
+
React.createElement(Button, { kind: "ghost", "aria-label": "Information", renderIcon: Information, iconDescription: "Information", style: {
|
|
161
|
+
marginTop: "-10px",
|
|
162
|
+
backgroundColor: props.theme === "light" ? "#FFFFFF" : "#161616",
|
|
163
|
+
color: props.theme === "light" ? "#161616" : "#F4F4F4",
|
|
164
|
+
paddingLeft: "0px",
|
|
165
|
+
} }))),
|
|
167
166
|
React.createElement("p", { className: "cds--label-description", style: { marginTop: "-24px" } }, "Max. file size is 5MB. Supported file types are .jpg and .png."))),
|
|
168
167
|
!orgIsEnterPriseOrPaidCC &&
|
|
169
168
|
(() => {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Select, SelectItem, Stack, TextInput } from "@carbon/react";
|
|
2
2
|
import React, { useState } from "react";
|
|
3
|
+
import { getTitleId } from "../helpers";
|
|
3
4
|
export const DropdownSelect = ({ title, label, elements, selectedElement, setSelectedElement, exceptionTitle, exceptionLabel, exceptionValue, }) => {
|
|
4
5
|
let showSuggestion = false;
|
|
5
6
|
const [suggestion, setSuggestion] = useState((selectedElement ?? "").split(" - ").length > 0
|
|
@@ -22,6 +23,8 @@ export const DropdownSelect = ({ title, label, elements, selectedElement, setSel
|
|
|
22
23
|
setSuggestion(input);
|
|
23
24
|
setElement(rawElement);
|
|
24
25
|
};
|
|
26
|
+
const titleId = getTitleId(title);
|
|
27
|
+
const exceptionTitleId = getTitleId(exceptionTitle);
|
|
25
28
|
return (React.createElement(React.Fragment, null,
|
|
26
29
|
React.createElement(Stack, null, (() => {
|
|
27
30
|
return (React.createElement(React.Fragment, null,
|
|
@@ -30,7 +33,7 @@ export const DropdownSelect = ({ title, label, elements, selectedElement, setSel
|
|
|
30
33
|
gridTemplateColumns: "58% 42%",
|
|
31
34
|
} },
|
|
32
35
|
React.createElement(Stack, { gap: 1 },
|
|
33
|
-
React.createElement("h4",
|
|
36
|
+
React.createElement("h4", { id: titleId }, title),
|
|
34
37
|
(() => {
|
|
35
38
|
if (label) {
|
|
36
39
|
return React.createElement("p", { className: "cds--modal-header__label" }, label);
|
|
@@ -38,7 +41,7 @@ export const DropdownSelect = ({ title, label, elements, selectedElement, setSel
|
|
|
38
41
|
return React.createElement(React.Fragment, null);
|
|
39
42
|
})(),
|
|
40
43
|
" "),
|
|
41
|
-
React.createElement(Select, { key: `select-${Math.random() * 10000}`, id: `select-${Math.random() * 10000}`, size: "lg", defaultValue: elements[0].value, labelText: "", onChange: (event) => {
|
|
44
|
+
React.createElement(Select, { key: `select-${Math.random() * 10000}`, id: `select-${Math.random() * 10000}`, size: "lg", defaultValue: elements[0].value, "aria-labelledby": titleId, labelText: "", onChange: (event) => {
|
|
42
45
|
const element = elements.find((e) => e.value === event.target.value);
|
|
43
46
|
if (element)
|
|
44
47
|
setElement(element.value);
|
|
@@ -49,11 +52,11 @@ export const DropdownSelect = ({ title, label, elements, selectedElement, setSel
|
|
|
49
52
|
React.createElement("div", { style: { marginTop: "24px" } }),
|
|
50
53
|
React.createElement("div", { style: { marginTop: "24px" } }),
|
|
51
54
|
React.createElement(Stack, { gap: 1 },
|
|
52
|
-
React.createElement("h4",
|
|
55
|
+
React.createElement("h4", { id: exceptionTitleId }, exceptionTitle),
|
|
53
56
|
React.createElement("p", { className: "cds--modal-header__label" }, exceptionLabel)),
|
|
54
57
|
React.createElement(TextInput, { style: { height: "48px" }, id: `text-input-element-${Math.random() * 1000}`, placeholder: "Enter your suggestion", labelText: "", value: suggestion, onChange: (event) => {
|
|
55
58
|
calculateSuggestion(event.target.value);
|
|
56
|
-
} })));
|
|
59
|
+
}, "aria-labelledby": exceptionTitleId, "aria-label": exceptionTitle })));
|
|
57
60
|
}
|
|
58
61
|
return React.createElement(React.Fragment, null);
|
|
59
62
|
})())));
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import { TextInput, Stack } from "@carbon/react";
|
|
2
2
|
import React from "react";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
3
|
+
import { getTitleId } from "../helpers";
|
|
4
|
+
export const TextInputElement = ({ title, label, preFiledValue, setValue, placeholder }) => {
|
|
5
|
+
const titleId = getTitleId(title);
|
|
6
|
+
return (React.createElement(React.Fragment, null,
|
|
7
|
+
React.createElement(Stack, { orientation: "horizontal" },
|
|
8
|
+
React.createElement(Stack, { gap: 1 },
|
|
9
|
+
React.createElement("h4", { id: titleId }, title),
|
|
10
|
+
label && React.createElement("p", { className: "cds--modal-header__label" }, label)),
|
|
11
|
+
React.createElement(TextInput, { id: `text-input-element-${Math.random() * 1000}`, placeholder: placeholder ?? "", labelText: "", value: preFiledValue ?? "", onChange: (event) => {
|
|
12
|
+
setValue(event.target.value);
|
|
13
|
+
}, "aria-labelledby": titleId }))));
|
|
14
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getTitleId: (title: string) => string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@camunda/camunda-composite-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"clean": "rimraf lib/",
|
|
6
6
|
"build": "yarn clean && tsc",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"@types/carbon-components-react": "7.55.3",
|
|
49
49
|
"@types/event-source-polyfill": "1.0.1",
|
|
50
50
|
"@types/mixpanel-browser": "2.47.1",
|
|
51
|
-
"@types/node": "
|
|
51
|
+
"@types/node": "20.9.0",
|
|
52
52
|
"@types/react": "18.2.21",
|
|
53
53
|
"@types/react-dom": "18.2.7",
|
|
54
54
|
"@types/styled-components": "5.1.27",
|