@camunda/camunda-composite-components 0.0.39 → 0.0.41

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 (12) hide show
  1. package/lib/esm/components/c3-navigation/c3-info-button.d.ts +4 -0
  2. package/lib/esm/components/c3-navigation/c3-info-button.js +5 -0
  3. package/lib/esm/components/c3-navigation/c3-navigation-appbar.js +6 -3
  4. package/lib/esm/components/c3-navigation/c3-navigation-sidebar/c3-navigation-sidebar.js +17 -6
  5. package/lib/esm/components/c3-navigation/c3-navigation-sidebar/c3-navigation-sidebar.types.d.ts +1 -0
  6. package/lib/esm/components/c3-navigation/c3-navigation-sidebar/c3-user-sidebar.js +1 -1
  7. package/lib/esm/components/c3-navigation/c3-navigation.d.ts +1 -1
  8. package/lib/esm/components/c3-navigation/c3-navigation.js +4 -6
  9. package/lib/esm/components/c3-navigation/c3-navigation.types.d.ts +3 -0
  10. package/lib/esm/components/c3-navigation/story-helpers.js +1 -0
  11. package/lib/esm/components/c3-navigation/story-templates.js +23 -19
  12. package/package.json +33 -22
package/lib/esm/components/c3-navigation/c3-info-button.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { FC } from "react";
2
+ export declare const InfoButton: FC<{
3
+ onClick: () => void;
4
+ }>;
package/lib/esm/components/c3-navigation/c3-info-button.js ADDED
@@ -0,0 +1,5 @@
1
+ import React from "react";
2
+ import { HeaderGlobalAction } from "@carbon/react";
3
+ import { Help } from "@carbon/react/icons";
4
+ export const InfoButton = ({ onClick }) => (React.createElement(HeaderGlobalAction, { "aria-label": "Open Help Center", tooltipAlignment: "center", onClick: onClick },
5
+ React.createElement(Help, { size: 20 })));
package/lib/esm/components/c3-navigation/c3-navigation-appbar.js CHANGED
@@ -23,18 +23,21 @@ export const C3NavigationAppBar = ({ appBar, forwardRef, navbar, }) => {
23
23
  return (React.createElement(React.Fragment, null,
24
24
  React.createElement(HeaderGlobalAction, { ref: iconRef, "aria-label": "Camunda apps", isActive: appBarOpen, onClick: () => {
25
25
  setAppBarOpen(!appBarOpen);
26
- }, tooltipAlignment: "start" }, appBarOpen ? React.createElement(Close, { size: 20 }) : React.createElement(C3AppMenuIcon, { size: 20 })),
26
+ }, tooltipAlignment: "start",
27
+ /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
28
+ /* @ts-ignore */
29
+ leaveDelayMs: 100 }, appBarOpen ? React.createElement(Close, { size: 20 }) : React.createElement(C3AppMenuIcon, { size: 20 })),
27
30
  React.createElement(NavWrapper, null,
28
31
  React.createElement(SideNav, { ref: panelRef, "aria-label": appBar.ariaLabel || "Side Navigation", expanded: appBarOpen, isPersistent: false },
29
32
  React.createElement(SideNavItems, null,
30
- navbar.elements.length > 0 && (React.createElement(HeaderSideNavItems, { hasDivider: true }, navbar.elements.map((element) => (React.createElement(HeaderMenuItem, { key: element.key, element: element.routeProps && forwardRef, isCurrentPage: element.isCurrentPage, ...element.routeProps, onClick: () => {
33
+ React.createElement("li", null, navbar.elements.length > 0 && (React.createElement(HeaderSideNavItems, { hasDivider: true }, navbar.elements.map((element) => (React.createElement(HeaderMenuItem, { key: element.key, element: element.routeProps && forwardRef, isActive: element.isCurrentPage, ...element.routeProps, onClick: () => {
31
34
  if (element.routeProps.onClick) {
32
35
  element.routeProps.onClick();
33
36
  }
34
37
  if (appBar.closeOnClick !== false) {
35
38
  setAppBarOpen(false);
36
39
  }
37
- } }, element.label))))),
40
+ } }, element.label)))))),
38
41
  appBar.elements &&
39
42
  appBar.elements.map((element) => {
40
43
  if (element.subElements && element.subElements.length > 0) {
package/lib/esm/components/c3-navigation/c3-navigation-sidebar/c3-navigation-sidebar.js CHANGED
@@ -4,6 +4,11 @@ import { useOnClickOutside } from "../helpers";
4
4
  import C3NavigationSidebarElement from "./c3-navigation-sidebar-element";
5
5
  import styled from "styled-components";
6
6
  import { useSidebarState } from "./c3-sidebar-state-provider";
7
+ const Wrapper = styled.div `
8
+ .cds--popover * {
9
+ z-index: 9000;
10
+ }
11
+ `;
7
12
  const HeaderPanel = styled(CarbonHeaderPanel) `
8
13
  visibility: ${({ expanded }) => (expanded ? "visible" : "hidden")};
9
14
  display: grid;
@@ -14,22 +19,28 @@ const HeaderPanel = styled(CarbonHeaderPanel) `
14
19
  `;
15
20
  const C3NavigationSideBar = (props) => {
16
21
  const { icon, sideBar, children, bottomChildren } = props;
17
- const { callbacks } = sideBar;
22
+ const { callbacks, onOpen } = sideBar;
18
23
  const { isOpen, setIsOpen: setOpenState } = useSidebarState()[sideBar.type];
19
24
  const setIsOpen = (open) => {
20
- if (open)
25
+ if (open) {
21
26
  callbacks?.beforeOpening?.();
27
+ onOpen?.();
28
+ }
22
29
  setOpenState(open);
23
30
  if (!open)
24
31
  callbacks?.afterClosing?.();
25
32
  };
26
33
  const itemTabIndex = isOpen ? undefined : -1;
27
34
  const [panelRef, iconRef] = useOnClickOutside(() => setIsOpen(false));
28
- return (React.createElement(React.Fragment, null,
29
- React.createElement(HeaderGlobalAction, { ref: iconRef, "aria-label": `Open ${sideBar.ariaLabel}`, onClick: () => {
35
+ const id = `c3-${sideBar.type}-sidebar`;
36
+ return (React.createElement(Wrapper, null,
37
+ React.createElement(HeaderGlobalAction, { ref: iconRef, "aria-label": `Open ${sideBar.ariaLabel}`, "aria-expanded": isOpen, "aria-controls": id, onClick: () => {
30
38
  setIsOpen(!isOpen);
31
- }, isActive: isOpen, tooltipAlignment: sideBar.type === "user" ? "end" : "center" }, icon),
32
- React.createElement(HeaderPanel, { ref: panelRef, "aria-label": sideBar.ariaLabel, expanded: isOpen },
39
+ }, isActive: isOpen, tooltipAlignment: sideBar.type === "user" ? "end" : "center",
40
+ /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
41
+ /* @ts-ignore */
42
+ leaveDelayMs: 100 }, icon),
43
+ React.createElement(HeaderPanel, { ref: panelRef, expanded: isOpen, id: id },
33
44
  React.createElement(Stack, null,
34
45
  children,
35
46
  sideBar.elements &&
package/lib/esm/components/c3-navigation/c3-navigation-sidebar/c3-navigation-sidebar.types.d.ts CHANGED
@@ -4,6 +4,7 @@ import { Notification } from "../../../api/notifications";
4
4
  export declare type C3NavigationSideBarBaseProps = {
5
5
  ariaLabel?: string;
6
6
  isOpen?: boolean;
7
+ onOpen?: () => void;
7
8
  closeOnClick?: boolean;
8
9
  elementClicked?: (key: string) => void;
9
10
  elements?: C3NavigationElementProps[];
package/lib/esm/components/c3-navigation/c3-navigation-sidebar/c3-user-sidebar.js CHANGED
@@ -39,6 +39,6 @@ const C3UserSidebar = ({ sideBar }) => {
39
39
  stageToggle && (React.createElement(React.Fragment, null,
40
40
  React.createElement(SwitcherDivider, null),
41
41
  React.createElement("div", { style: { padding: ".5rem 1rem" } },
42
- React.createElement(Toggle, { size: "sm", id: "toggle-productionfeatures", defaultToggled: stageToggle.prodFeaturesEnabled, onClick: stageToggle.toggle, labelText: "Simulate Production Features", tabIndex: itemTabIndex }))))));
42
+ React.createElement(Toggle, { size: "sm", id: "toggle-productionfeatures", defaultToggled: stageToggle.prodFeaturesEnabled, onClick: stageToggle.toggle, labelText: "Simulate Production Features", tabIndex: itemTabIndex, "aria-label": "Simulate Production Features" }))))));
43
43
  };
44
44
  export default C3UserSidebar;
package/lib/esm/components/c3-navigation/c3-navigation.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  /// <reference types="react" />
2
2
  import { C3NavigationProps } from "./c3-navigation.types";
3
- export declare const C3Navigation: ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, actionButtons, userSideBar, notificationSideBar, }: C3NavigationProps) => JSX.Element;
3
+ export declare const C3Navigation: ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, infoButton, actionButtons, userSideBar, notificationSideBar, }: C3NavigationProps) => JSX.Element;
package/lib/esm/components/c3-navigation/c3-navigation.js CHANGED
@@ -9,6 +9,7 @@ import { C3NavigationAppBar } from "./c3-navigation-appbar";
9
9
  import styled from "styled-components";
10
10
  import C3ActionButtons from "./c3-navigation-actions/c3-action-buttons";
11
11
  import { CamundaLogo } from "../../icons/c3-icons";
12
+ import { InfoButton } from "./c3-info-button";
12
13
  import { C3SidebarStateProvider } from "./c3-navigation-sidebar/c3-sidebar-state-provider";
13
14
  /**
14
15
  * UI SHELL
@@ -29,7 +30,7 @@ const StyledToggletipContent = styled(ToggletipContent) `
29
30
  color: var(--cds-link-hover-text-color);
30
31
  }
31
32
  `;
32
- export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, actionButtons, userSideBar, notificationSideBar, }) => {
33
+ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, infoButton, actionButtons, userSideBar, notificationSideBar, }) => {
33
34
  const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINT_LG_WIDTH}`);
34
35
  const appBarElementsLength = appBar.elements?.length ?? 0;
35
36
  const displayAppBar = appBarElementsLength > 0 || (!isLargeScreen && navbar.elements.length > 0);
@@ -41,7 +42,7 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
41
42
  React.createElement(HeaderName, { element: forwardRef, prefix: "", ...app.routeProps },
42
43
  React.createElement(CamundaLogo, { "aria-label": "Camunda" }),
43
44
  React.createElement("span", null, app.name)),
44
- React.createElement(HeaderNavigation, { "aria-label": app.ariaLabel }, navbar.elements.map((element) => (React.createElement(HeaderMenuItem, { key: element.key, element: element.routeProps && forwardRef, isCurrentPage: element.isCurrentPage, ...element.routeProps },
45
+ React.createElement(HeaderNavigation, { "aria-label": app.ariaLabel }, navbar.elements.map((element) => (React.createElement(HeaderMenuItem, { key: element.key, element: element.routeProps && forwardRef, isActive: element.isCurrentPage, ...element.routeProps },
45
46
  React.createElement("span", null, element.label))))),
46
47
  React.createElement(HeaderGlobalBar, null,
47
48
  React.createElement("div", { style: {
@@ -92,10 +93,7 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
92
93
  ...orgSideBar,
93
94
  type: "org",
94
95
  } })),
95
- infoSideBar && (React.createElement(C3InfoSidebar, { sideBar: {
96
- ...infoSideBar,
97
- type: "info",
98
- } })),
96
+ infoButton ? (React.createElement(InfoButton, { onClick: infoButton.onClick })) : (infoSideBar && (React.createElement(C3InfoSidebar, { sideBar: { ...infoSideBar, type: "info" } }))),
99
97
  userSideBar && (React.createElement(C3UserSidebar, { sideBar: {
100
98
  ...userSideBar,
101
99
  type: "user",
package/lib/esm/components/c3-navigation/c3-navigation.types.d.ts CHANGED
@@ -54,6 +54,9 @@ export interface C3NavigationProps {
54
54
  appBar: WithoutType<C3NavigationAppBarProps>;
55
55
  orgSideBar?: WithoutType<C3NavigationOrgSideBarProps>;
56
56
  infoSideBar?: WithoutType<C3NavigationInfoSideBarProps>;
57
+ infoButton?: {
58
+ onClick: () => void;
59
+ };
57
60
  actionButtons?: C3ActionButtonsProps;
58
61
  userSideBar?: WithoutType<C3NavigationUserSideBarProps>;
59
62
  notificationSideBar?: WithoutType<C3NavigationNotificationsSideBarProps>;
package/lib/esm/components/c3-navigation/story-helpers.js CHANGED
@@ -108,6 +108,7 @@ export function createNavBarBarProps(options = {}) {
108
108
  export function createInfoSideBarProps(options) {
109
109
  return {
110
110
  isOpen: options.isOpen,
111
+ onOpen: () => console.log("Opened info sidebar"),
111
112
  elements: [
112
113
  {
113
114
  key: "info1",
package/lib/esm/components/c3-navigation/story-templates.js CHANGED
@@ -2,30 +2,34 @@ import React, { useState } from "react";
2
2
  import { C3Navigation } from "./c3-navigation";
3
3
  import { createAppBarProps, createAppProps, createNavBarBarProps, createUserSideBarProps, } from "./story-helpers";
4
4
  import { SwitcherDivider, Toggle } from "@carbon/react";
5
- export const DefaultTemplate = (args) => (React.createElement(C3Navigation, { ...args }));
5
+ export const DefaultTemplate = (args) => (React.createElement(React.Fragment, null,
6
+ React.createElement(C3Navigation, { ...args }),
7
+ React.createElement("div", { id: "main-content" })));
6
8
  export const SuperUserToggle = ({ isActive, onChange }) => {
7
9
  return (React.createElement(React.Fragment, null,
8
10
  React.createElement(SwitcherDivider, null),
9
11
  React.createElement("div", { style: { padding: ".5rem 1rem" } },
10
- React.createElement(Toggle, { size: "sm", id: "toggle-super-admin-mode", defaultToggled: isActive, onToggle: (superAdminModeActive) => onChange?.(superAdminModeActive), labelText: "Enter super-admin mode" }))));
12
+ React.createElement(Toggle, { size: "sm", id: "toggle-super-admin-mode", defaultToggled: isActive, onToggle: (superAdminModeActive) => onChange?.(superAdminModeActive), labelText: "Enter super-admin mode", "aria-label": "Enter super-admin mode" }))));
11
13
  };
12
14
  export const NavbarWithCustomSection = () => {
13
15
  const [isSuperAdminModeActive, setIsSuperAdminModeActive] = useState(true);
14
- return (React.createElement(C3Navigation, { app: createAppProps(), appBar: createAppBarProps(), navbar: {
15
- ...createNavBarBarProps(),
16
- tags: isSuperAdminModeActive
17
- ? [
18
- {
19
- key: "superUserMode",
20
- label: "Super-user mode",
21
- color: "high-contrast",
22
- },
23
- ]
24
- : undefined,
25
- }, userSideBar: {
26
- ...createUserSideBarProps({ isOpen: false }),
27
- customElements: {
28
- customSection: (React.createElement(SuperUserToggle, { isActive: isSuperAdminModeActive, onChange: setIsSuperAdminModeActive })),
29
- },
30
- } }));
16
+ return (React.createElement(React.Fragment, null,
17
+ React.createElement(C3Navigation, { app: createAppProps(), appBar: createAppBarProps(), navbar: {
18
+ ...createNavBarBarProps(),
19
+ tags: isSuperAdminModeActive
20
+ ? [
21
+ {
22
+ key: "superUserMode",
23
+ label: "Super-user mode",
24
+ color: "high-contrast",
25
+ },
26
+ ]
27
+ : undefined,
28
+ }, userSideBar: {
29
+ ...createUserSideBarProps({ isOpen: false }),
30
+ customElements: {
31
+ customSection: (React.createElement(SuperUserToggle, { isActive: isSuperAdminModeActive, onChange: setIsSuperAdminModeActive })),
32
+ },
33
+ } }),
34
+ React.createElement("div", { id: "main-content" })));
31
35
  };
package/package.json CHANGED
@@ -1,32 +1,40 @@
1
1
  {
2
2
  "name": "@camunda/camunda-composite-components",
3
- "version": "0.0.39",
3
+ "version": "0.0.41",
4
4
  "scripts": {
5
5
  "clean": "rimraf lib/",
6
6
  "copy-css-files": "copyfiles -u 1 src/components/**/*.css lib/esm",
7
7
  "build": "yarn clean && tsc && yarn copy-css-files",
8
- "storybook": "start-storybook -p 6006",
8
+ "storybook": "storybook dev -p 6006",
9
9
  "start": "yarn storybook",
10
- "build-storybook": "build-storybook",
10
+ "build-storybook": "storybook build",
11
11
  "prepare": "husky install",
12
12
  "format": "prettier --write .",
13
13
  "lint": "eslint src/",
14
- "lint:fix": "eslint --fix src/"
14
+ "lint:fix": "eslint --fix src/",
15
+ "test:ts": "tsc --noEmit --project ./tsconfig.json",
16
+ "test:storybook": "TEST_A11Y=true test-storybook",
17
+ "test:storybook:smoke": "test-storybook",
18
+ "test": "yarn test:ts && yarn test:storybook"
15
19
  },
16
20
  "devDependencies": {
17
- "@babel/core": "^7.19.6",
18
- "@carbon/react": "1.11.0",
19
- "@mdx-js/react": "^1.6.22",
20
- "@storybook/addon-actions": "^6.5.13",
21
- "@storybook/addon-docs": "^6.5.13",
22
- "@storybook/addon-essentials": "^6.5.13",
23
- "@storybook/addon-interactions": "^6.5.13",
24
- "@storybook/addon-links": "^6.5.13",
25
- "@storybook/builder-webpack5": "6.5.15",
26
- "@storybook/manager-webpack5": "6.5.15",
27
- "@storybook/preset-scss": "^1.0.3",
28
- "@storybook/react": "^6.5.13",
29
- "@storybook/testing-library": "^0.0.13",
21
+ "@babel/core": "7.19.6",
22
+ "@babel/preset-env": "7.22.4",
23
+ "@babel/preset-react": "7.22.3",
24
+ "@babel/preset-typescript": "7.21.5",
25
+ "@carbon/react": "1.31.0",
26
+ "@mdx-js/react": "1.6.22",
27
+ "@storybook/addon-a11y": "7.0.18",
28
+ "@storybook/addon-actions": "7.0.18",
29
+ "@storybook/addon-docs": "7.0.18",
30
+ "@storybook/addon-essentials": "7.0.18",
31
+ "@storybook/addon-interactions": "7.0.18",
32
+ "@storybook/addon-links": "7.0.18",
33
+ "@storybook/preset-scss": "1.0.3",
34
+ "@storybook/react": "7.0.18",
35
+ "@storybook/react-webpack5": "7.0.18",
36
+ "@storybook/test-runner": "0.10.0",
37
+ "@storybook/testing-library": "0.1.0",
30
38
  "@types/carbon-components-react": "7.55.2",
31
39
  "@types/event-source-polyfill": "1.0.0",
32
40
  "@types/node": "18.11.5",
@@ -35,7 +43,8 @@
35
43
  "@types/styled-components": "5.1.26",
36
44
  "@typescript-eslint/eslint-plugin": "5.43.0",
37
45
  "@typescript-eslint/parser": "5.43.0",
38
- "babel-loader": "^8.2.5",
46
+ "axe-playwright": "1.2.3",
47
+ "babel-loader": "8.2.5",
39
48
  "copyfiles": "2.4.1",
40
49
  "eslint": "8.27.0",
41
50
  "eslint-config-prettier": "8.5.0",
@@ -44,15 +53,17 @@
44
53
  "eslint-plugin-prettier": "4.2.1",
45
54
  "eslint-plugin-react": "7.31.10",
46
55
  "eslint-plugin-react-hooks": "4.6.0",
47
- "event-source-polyfill": "^1.0.31",
56
+ "eslint-plugin-storybook": "0.6.12",
57
+ "event-source-polyfill": "1.0.31",
48
58
  "husky": "8.0.0",
49
59
  "prettier": "2.7.1",
50
60
  "react": "18.2.0",
51
61
  "react-dom": "18.2.0",
52
62
  "rimraf": "3.0.2",
53
- "sass": "^1.55.0",
54
- "sass-loader": "^13.1.0",
55
- "style-loader": "^3.3.1",
63
+ "sass": "1.55.0",
64
+ "sass-loader": "13.1.0",
65
+ "storybook": "7.0.18",
66
+ "style-loader": "3.3.1",
56
67
  "styled-components": "5.3.6",
57
68
  "typescript": "4.8.4"
58
69
  },