@camunda/camunda-composite-components 0.2.17 → 0.2.18-rc.1

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.
Files changed (6) hide show
  1. package/lib/esm/components/c3-cluster-tag/c3-cluster-tag.js +1 -1
  2. package/lib/esm/components/c3-help-center/help-center.js +28 -24
  3. package/lib/esm/components/c3-help-center/tabs/feedback.js +6 -7
  4. package/lib/esm/components/c3-onboarding-survey/elements/dropdownSelect.js +3 -2
  5. package/lib/esm/components/c3-onboarding-survey/elements/textField.js +11 -8
  6. package/package.json +13 -13
package/lib/esm/components/c3-cluster-tag/c3-cluster-tag.js CHANGED
@@ -6,7 +6,7 @@ export const C3ClusterTag = (props) => {
6
6
  return "stage" in props ? (React.createElement(Tag, { type: getColorForStage(props.stage) }, props.stage)) : "clusterUuid" in props ? (generateFromInput({
7
7
  clusterUuid: props.clusterUuid,
8
8
  allClusters: clusters,
9
- conditionalRendering: props.conditionalRendering || ((_) => true),
9
+ conditionalRendering: props.conditionalRendering || (() => true),
10
10
  })) : (React.createElement(React.Fragment, null));
11
11
  };
12
12
  function generateFromInput(props) {
package/lib/esm/components/c3-help-center/help-center.js CHANGED
@@ -152,30 +152,34 @@ export const HelpCenter = ({ configuration, persona, email, audience, flags = []
152
152
  React.createElement(SideNavItems, null,
153
153
  React.createElement(SideNavMenuItem, null,
154
154
  React.createElement("h5", null, "Help Center")),
155
- React.createElement("div", { style: { marginTop: "4px" } },
156
- React.createElement(Stack, null, tabBar.map(({ name, id, text }) => {
157
- const active = activeTab === name;
158
- let tabBackgroundColor = theme === "light" ? "#F4F4F4" : "#161616";
159
- let tabButtonColor = theme === "light" ? "#525252" : "#f4f4f4";
160
- if (active) {
161
- tabBackgroundColor =
162
- theme === "light" ? "#E5E5E5" : "#8D8D8D3D";
163
- tabButtonColor = theme === "light" ? "#161616" : "#f4f4f4";
164
- }
165
- return (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
- }, key: name, "aria-label": text }, text));
176
- }))),
177
- 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" },
178
- React.createElement("span", { className: "cds--link" }, link.label))))))),
155
+ React.createElement("li", { style: { marginTop: "4px" } },
156
+ React.createElement(Stack, null,
157
+ React.createElement("ul", null, tabBar.map(({ name, id, text }) => {
158
+ const active = activeTab === name;
159
+ let tabBackgroundColor = theme === "light" ? "#F4F4F4" : "#161616";
160
+ let tabButtonColor = theme === "light" ? "#525252" : "#f4f4f4";
161
+ if (active) {
162
+ tabBackgroundColor =
163
+ theme === "light" ? "#E5E5E5" : "#8D8D8D3D";
164
+ tabButtonColor =
165
+ theme === "light" ? "#161616" : "#f4f4f4";
166
+ }
167
+ return (React.createElement("li", { key: name },
168
+ React.createElement(Button, { className: active ? "active" : "", kind: "secondary", onClick: () => {
169
+ setActiveTab(name);
170
+ mixpanelTrack?.("helpcenter:open", {
171
+ to: id,
172
+ from: origin,
173
+ });
174
+ }, style: {
175
+ width: "100%",
176
+ backgroundColor: tabBackgroundColor,
177
+ color: tabButtonColor,
178
+ }, "aria-label": text }, text)));
179
+ })))),
180
+ React.createElement("li", { style: { position: "absolute", bottom: "20px" } },
181
+ React.createElement("ul", null, configuration.links.map((link) => (React.createElement(SideNavMenuItem, { key: link.label.split(" ").join("-").toLowerCase(), href: link.link, target: "_blank" },
182
+ React.createElement("span", { className: "cds--link" }, link.label)))))))),
179
183
  content)),
180
184
  persona.complete && activeTab === "recommendations" && (React.createElement(ModalFooter, { style: {
181
185
  height: "62px",
package/lib/esm/components/c3-help-center/tabs/feedback.js CHANGED
@@ -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("span", { className: "upload-file" },
161
- React.createElement(Button, { kind: "ghost", renderIcon: Information, iconDescription: "Information", style: {
162
- marginTop: "-10px",
163
- backgroundColor: props.theme === "light" ? "#FFFFFF" : "#161616",
164
- color: props.theme === "light" ? "#161616" : "#F4F4F4",
165
- paddingLeft: "0px",
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
  (() => {
package/lib/esm/components/c3-onboarding-survey/elements/dropdownSelect.js CHANGED
@@ -22,6 +22,7 @@ export const DropdownSelect = ({ title, label, elements, selectedElement, setSel
22
22
  setSuggestion(input);
23
23
  setElement(rawElement);
24
24
  };
25
+ const titleId = title.replace(/\s/g, "-").toLowerCase();
25
26
  return (React.createElement(React.Fragment, null,
26
27
  React.createElement(Stack, null, (() => {
27
28
  return (React.createElement(React.Fragment, null,
@@ -30,7 +31,7 @@ export const DropdownSelect = ({ title, label, elements, selectedElement, setSel
30
31
  gridTemplateColumns: "58% 42%",
31
32
  } },
32
33
  React.createElement(Stack, { gap: 1 },
33
- React.createElement("h4", null, title),
34
+ React.createElement("h4", { id: titleId }, title),
34
35
  (() => {
35
36
  if (label) {
36
37
  return React.createElement("p", { className: "cds--modal-header__label" }, label);
@@ -38,7 +39,7 @@ export const DropdownSelect = ({ title, label, elements, selectedElement, setSel
38
39
  return React.createElement(React.Fragment, null);
39
40
  })(),
40
41
  " "),
41
- React.createElement(Select, { key: `select-${Math.random() * 10000}`, id: `select-${Math.random() * 10000}`, size: "lg", defaultValue: elements[0].value, labelText: "", onChange: (event) => {
42
+ 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
43
  const element = elements.find((e) => e.value === event.target.value);
43
44
  if (element)
44
45
  setElement(element.value);
package/lib/esm/components/c3-onboarding-survey/elements/textField.js CHANGED
@@ -1,10 +1,13 @@
1
1
  import { TextInput, Stack } from "@carbon/react";
2
2
  import React from "react";
3
- export const TextInputElement = ({ title, label, preFiledValue, setValue, placeholder }) => (React.createElement(React.Fragment, null,
4
- React.createElement(Stack, { orientation: "horizontal" },
5
- React.createElement(Stack, { gap: 1 },
6
- React.createElement("h4", null, title),
7
- label && React.createElement("p", { className: "cds--modal-header__label" }, label)),
8
- React.createElement(TextInput, { id: `text-input-element-${Math.random() * 1000}`, placeholder: placeholder ?? "", labelText: "", value: preFiledValue ?? "", onChange: (event) => {
9
- setValue(event.target.value);
10
- } }))));
3
+ export const TextInputElement = ({ title, label, preFiledValue, setValue, placeholder }) => {
4
+ const titleId = title.replace(/\s/g, "-").toLowerCase();
5
+ return (React.createElement(React.Fragment, null,
6
+ React.createElement(Stack, { orientation: "horizontal" },
7
+ React.createElement(Stack, { gap: 1 },
8
+ React.createElement("h4", { id: titleId }, title),
9
+ label && React.createElement("p", { className: "cds--modal-header__label" }, label)),
10
+ React.createElement(TextInput, { id: `text-input-element-${Math.random() * 1000}`, placeholder: placeholder ?? "", labelText: "", value: preFiledValue ?? "", onChange: (event) => {
11
+ setValue(event.target.value);
12
+ }, "aria-labelledby": titleId }))));
13
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@camunda/camunda-composite-components",
3
- "version": "0.2.17",
3
+ "version": "0.2.18-rc.1",
4
4
  "scripts": {
5
5
  "clean": "rimraf lib/",
6
6
  "build": "yarn clean && tsc",
@@ -26,10 +26,10 @@
26
26
  "test": "yarn test:ts && yarn test:storybook && yarn test:visual-regression:docker"
27
27
  },
28
28
  "devDependencies": {
29
- "@babel/core": "7.23.0",
30
- "@babel/preset-env": "7.22.20",
29
+ "@babel/core": "7.23.2",
30
+ "@babel/preset-env": "7.23.2",
31
31
  "@babel/preset-react": "7.22.15",
32
- "@babel/preset-typescript": "7.23.0",
32
+ "@babel/preset-typescript": "7.23.2",
33
33
  "@carbon/react": "1.37.0",
34
34
  "@mdx-js/react": "2.3.0",
35
35
  "@playwright/test": "1.37.1",
@@ -52,27 +52,27 @@
52
52
  "@types/react": "18.2.21",
53
53
  "@types/react-dom": "18.2.7",
54
54
  "@types/styled-components": "5.1.27",
55
- "@typescript-eslint/eslint-plugin": "5.62.0",
56
- "@typescript-eslint/parser": "5.62.0",
55
+ "@typescript-eslint/eslint-plugin": "6.7.5",
56
+ "@typescript-eslint/parser": "6.7.5",
57
57
  "axe-playwright": "1.2.3",
58
58
  "babel-loader": "9.1.3",
59
59
  "copyfiles": "2.4.1",
60
60
  "css-loader": "6.8.1",
61
- "eslint": "8.47.0",
62
- "eslint-config-prettier": "8.10.0",
63
- "eslint-import-resolver-typescript": "3.6.0",
61
+ "eslint": "8.51.0",
62
+ "eslint-config-prettier": "9.0.0",
63
+ "eslint-import-resolver-typescript": "3.6.1",
64
64
  "eslint-plugin-import": "2.28.1",
65
- "eslint-plugin-prettier": "4.2.1",
65
+ "eslint-plugin-prettier": "5.0.1",
66
66
  "eslint-plugin-react": "7.33.2",
67
67
  "eslint-plugin-react-hooks": "4.6.0",
68
68
  "eslint-plugin-storybook": "0.6.14",
69
69
  "event-source-polyfill": "1.0.31",
70
70
  "husky": "8.0.3",
71
71
  "mixpanel-browser": "2.47.0",
72
- "prettier": "2.8.8",
72
+ "prettier": "3.0.3",
73
73
  "react": "18.2.0",
74
74
  "react-dom": "18.2.0",
75
- "rimraf": "3.0.2",
75
+ "rimraf": "5.0.5",
76
76
  "sass": "1.66.1",
77
77
  "sass-loader": "13.3.2",
78
78
  "serve": "14.2.1",
@@ -102,5 +102,5 @@
102
102
  ],
103
103
  "author": "Camunda",
104
104
  "license": "Apache-2.0",
105
- "packageManager": "yarn@3.6.2"
105
+ "packageManager": "yarn@3.6.4"
106
106
  }