@camunda/camunda-composite-components 0.0.40 → 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 (8) hide show
  1. package/lib/esm/components/c3-navigation/c3-navigation-appbar.js +6 -3
  2. package/lib/esm/components/c3-navigation/c3-navigation-sidebar/c3-navigation-sidebar.js +17 -6
  3. package/lib/esm/components/c3-navigation/c3-navigation-sidebar/c3-navigation-sidebar.types.d.ts +1 -0
  4. package/lib/esm/components/c3-navigation/c3-navigation-sidebar/c3-user-sidebar.js +1 -1
  5. package/lib/esm/components/c3-navigation/c3-navigation.js +1 -1
  6. package/lib/esm/components/c3-navigation/story-helpers.js +1 -0
  7. package/lib/esm/components/c3-navigation/story-templates.js +23 -19
  8. package/package.json +33 -22
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.js CHANGED
@@ -42,7 +42,7 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
42
42
  React.createElement(HeaderName, { element: forwardRef, prefix: "", ...app.routeProps },
43
43
  React.createElement(CamundaLogo, { "aria-label": "Camunda" }),
44
44
  React.createElement("span", null, app.name)),
45
- 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 },
46
46
  React.createElement("span", null, element.label))))),
47
47
  React.createElement(HeaderGlobalBar, null,
48
48
  React.createElement("div", { style: {
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.40",
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
  },