@camunda/camunda-composite-components 0.1.1 → 0.1.2

package/lib/esm/components/c3-navigation/c3-navigation.js

@@ -1,39 +1,27 @@
-import {
-	Header,
-	HeaderContainer,
-	HeaderGlobalBar,
-	HeaderMenuItem,
-	HeaderName as CarbonHeaderName,
-	HeaderNavigation,
-	SkipToContent,
-	Tag,
-	Toggletip,
-	ToggletipButton,
-	ToggletipContent,
-} from "@carbon/react"
-import React from "react"
-import C3InfoSidebar from "./c3-navigation-sidebar/c3-info-sidebar"
-import { C3NotificationSidebar } from "./c3-navigation-sidebar/c3-notification-sidebar"
-import C3OrgSidebar from "./c3-navigation-sidebar/c3-org-sidebar"
-import C3UserSidebar from "./c3-navigation-sidebar/c3-user-sidebar"
-import { useMediaQuery } from "./helpers"
-import { C3NavigationAppBar } from "./c3-navigation-appbar"
-import styled from "styled-components"
-import C3ActionButtons from "./c3-navigation-actions/c3-action-buttons"
-import { CamundaLogo } from "../../icons/c3-icons"
-import { InfoButton } from "./c3-info-button"
-import { C3SidebarStateProvider } from "./c3-navigation-sidebar/c3-sidebar-state-provider"
+import { Header, HeaderContainer, HeaderGlobalBar, HeaderMenuItem, HeaderName as CarbonHeaderName, HeaderNavigation, SkipToContent, Tag, Toggletip, ToggletipButton, ToggletipContent, } from "@carbon/react";
+import React from "react";
+import C3InfoSidebar from "./c3-navigation-sidebar/c3-info-sidebar";
+import { C3NotificationSidebar } from "./c3-navigation-sidebar/c3-notification-sidebar";
+import C3OrgSidebar from "./c3-navigation-sidebar/c3-org-sidebar";
+import C3UserSidebar from "./c3-navigation-sidebar/c3-user-sidebar";
+import { useMediaQuery } from "./helpers";
+import { C3NavigationAppBar } from "./c3-navigation-appbar";
+import styled from "styled-components";
+import C3ActionButtons from "./c3-navigation-actions/c3-action-buttons";
+import { CamundaLogo } from "../../icons/c3-icons";
+import { InfoButton } from "./c3-info-button";
+import { C3SidebarStateProvider } from "./c3-navigation-sidebar/c3-sidebar-state-provider";
 /**
  * UI SHELL
  * Docs: https://react.carbondesignsystem.com/?path=/story/components-ui-shell--fixed-side-nav
  */
-const BREAKPOINT_LG_WIDTH = "66rem" // This is Carbon's breakpoint (lg) width https://github.com/carbon-design-system/carbon/blob/main/packages/layout/src/index.js#L56
-const HeaderName = styled(CarbonHeaderName)`
+const BREAKPOINT_LG_WIDTH = "66rem"; // This is Carbon's breakpoint (lg) width https://github.com/carbon-design-system/carbon/blob/main/packages/layout/src/index.js#L56
+const HeaderName = styled(CarbonHeaderName) `
 	display: grid;
 	grid-auto-flow: column;
 	gap: 0.5rem;
-`
-const StyledToggletipContent = styled(ToggletipContent)`
+`;
+const StyledToggletipContent = styled(ToggletipContent) `
 	.cds--link:visited {
 		color: var(--cds-link-text-color);
 	}
@@ -41,188 +29,76 @@ const StyledToggletipContent = styled(ToggletipContent)`
 	.cds--link:visited:hover {
 		color: var(--cds-link-hover-text-color);
 	}
-`
-export const C3Navigation = ({
-	app,
-	appBar,
-	forwardRef,
-	navbar,
-	orgSideBar,
-	infoSideBar,
-	infoButton,
-	actionButtons,
-	userSideBar,
-	notificationSideBar,
-}) => {
-	const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINT_LG_WIDTH}`)
-	const appBarElementsLength = appBar.elements?.length ?? 0
-	const displayAppBar =
-		appBarElementsLength > 0 || (!isLargeScreen && navbar.elements.length > 0)
-	if (app.prefix)
-		console.warn(
-			"The `prefix` prop is deprecated and will be removed in a future release. It has been replaced with a Camunda icon.",
-		)
-	return React.createElement(
-		C3SidebarStateProvider,
-		{
-			isNotificationSidebarOpen: notificationSideBar?.isOpen,
-			isOrgSidebarOpen: orgSideBar?.isOpen,
-			isInfoSidebarOpen: infoSideBar?.isOpen,
-			isUserSidebarOpen: userSideBar?.isOpen,
-		},
-		React.createElement(HeaderContainer, {
-			render: () => {
-				return React.createElement(
-					Header,
-					{ "aria-label": app.ariaLabel },
-					React.createElement(SkipToContent, null),
-					displayAppBar &&
-						React.createElement(C3NavigationAppBar, {
-							app: app,
-							appBar: appBar,
-							forwardRef: forwardRef,
-							navbar: navbar,
-						}),
-					React.createElement(
-						HeaderName,
-						{ element: forwardRef, prefix: "", ...app.routeProps },
-						React.createElement(CamundaLogo, { "aria-label": "Camunda" }),
-						React.createElement("span", null, app.name),
-					),
-					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,
-								},
-								React.createElement("span", null, element.label),
-							),
-						),
-					),
-					React.createElement(
-						HeaderGlobalBar,
-						null,
-						React.createElement(
-							"div",
-							{
-								style: {
-									display: "grid",
-									gridAutoFlow: "column",
-									gap: ".5rem",
-									paddingRight: ".5rem",
-								},
-							},
-							navbar.tags &&
-								navbar.tags.length > 0 &&
-								navbar.tags.map((tag) => {
-									if (tag?.tooltip !== undefined) {
-										const { content, buttonLabel } = tag.tooltip
-										return React.createElement(
-											"div",
-											{
-												key: tag.key,
-												style: {
-													height: "1.5rem",
-													marginTop: "0.50rem",
-												},
-											},
-											React.createElement(
-												Toggletip,
-												null,
-												React.createElement(
-													ToggletipButton,
-													{ label: buttonLabel },
-													React.createElement(
-														Tag,
-														{
-															type: tag.color,
-															style: {
-																padding: "0 1rem",
-																marginRight: 0,
-																marginLeft: 0,
-																cursor: "pointer",
-															},
-														},
-														tag.label,
-													),
-												),
-												React.createElement(
-													StyledToggletipContent,
-													null,
-													content,
-												),
-											),
-										)
-									}
-									return React.createElement(
-										Tag,
-										{
-											key: tag.key,
-											style: {
-												height: "1.5rem",
-												marginTop: "0.75rem",
-												padding: "0 1rem",
-											},
-											type: tag.color,
-										},
-										tag.label,
-									)
-								}),
-							navbar.orgName &&
-								React.createElement(
-									"div",
-									{
-										className: "bodyText",
-										style: {
-											fontSize: "14px",
-											lineHeight: "3rem",
-											textOverflow: "ellipsis",
-											whiteSpace: "nowrap",
-											overflow: "hidden",
-											maxWidth: "150px",
-										},
-									},
-									navbar.orgName,
-								),
-						),
-						actionButtons &&
-							React.createElement(C3ActionButtons, { elements: actionButtons }),
-						notificationSideBar &&
-							React.createElement(C3NotificationSidebar, {
-								sideBar: {
-									...notificationSideBar,
-									type: "notifications",
-								},
-							}),
-						orgSideBar &&
-							React.createElement(C3OrgSidebar, {
-								sideBar: {
-									...orgSideBar,
-									type: "org",
-								},
-							}),
-						infoButton
-							? React.createElement(InfoButton, { onClick: infoButton.onClick })
-							: infoSideBar &&
-									React.createElement(C3InfoSidebar, {
-										sideBar: { ...infoSideBar, type: "info" },
-									}),
-						userSideBar &&
-							React.createElement(C3UserSidebar, {
-								sideBar: {
-									...userSideBar,
-									type: "user",
-								},
-							}),
-					),
-				)
-			},
-		}),
-	)
-}
+`;
+export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, infoButton, actionButtons, userSideBar, notificationSideBar, }) => {
+    const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINT_LG_WIDTH}`);
+    const appBarElementsLength = appBar.elements?.length ?? 0;
+    const displayAppBar = appBarElementsLength > 0 || (!isLargeScreen && navbar.elements.length > 0);
+    if (app.prefix)
+        console.warn("The `prefix` prop is deprecated and will be removed in a future release. It has been replaced with a Camunda icon.");
+    return (React.createElement(C3SidebarStateProvider, { isNotificationSidebarOpen: notificationSideBar?.isOpen, isOrgSidebarOpen: orgSideBar?.isOpen, isInfoSidebarOpen: infoSideBar?.isOpen, isUserSidebarOpen: userSideBar?.isOpen },
+        React.createElement(HeaderContainer, { render: () => {
+                return (React.createElement(Header, { "aria-label": app.ariaLabel },
+                    React.createElement(SkipToContent, null),
+                    displayAppBar && (React.createElement(C3NavigationAppBar, { app: app, appBar: appBar, forwardRef: forwardRef, navbar: navbar })),
+                    React.createElement(HeaderName, { element: forwardRef, prefix: "", ...app.routeProps },
+                        React.createElement(CamundaLogo, { "aria-label": "Camunda" }),
+                        React.createElement("span", null, app.name)),
+                    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 },
+                        React.createElement("span", null, element.label))))),
+                    React.createElement(HeaderGlobalBar, null,
+                        React.createElement("div", { style: {
+                                display: "grid",
+                                gridAutoFlow: "column",
+                                gap: ".5rem",
+                                paddingRight: ".5rem",
+                            } },
+                            navbar.tags &&
+                                navbar.tags.length > 0 &&
+                                navbar.tags.map((tag) => {
+                                    if (tag?.tooltip !== undefined) {
+                                        const { content, buttonLabel } = tag.tooltip;
+                                        return (React.createElement("div", { key: tag.key, style: {
+                                                height: "1.5rem",
+                                                marginTop: "0.50rem",
+                                            } },
+                                            React.createElement(Toggletip, null,
+                                                React.createElement(ToggletipButton, { label: buttonLabel },
+                                                    React.createElement(Tag, { type: tag.color, style: {
+                                                            padding: "0 1rem",
+                                                            marginRight: 0,
+                                                            marginLeft: 0,
+                                                            cursor: "pointer",
+                                                        } }, tag.label)),
+                                                React.createElement(StyledToggletipContent, null, content))));
+                                    }
+                                    return (React.createElement(Tag, { key: tag.key, style: {
+                                            height: "1.5rem",
+                                            marginTop: "0.75rem",
+                                            padding: "0 1rem",
+                                        }, type: tag.color }, tag.label));
+                                }),
+                            navbar.orgName && (React.createElement("div", { className: "bodyText", style: {
+                                    fontSize: "14px",
+                                    lineHeight: "3rem",
+                                    textOverflow: "ellipsis",
+                                    whiteSpace: "nowrap",
+                                    overflow: "hidden",
+                                    maxWidth: "150px",
+                                } }, navbar.orgName))),
+                        actionButtons && React.createElement(C3ActionButtons, { elements: actionButtons }),
+                        notificationSideBar && (React.createElement(C3NotificationSidebar, { sideBar: {
+                                ...notificationSideBar,
+                                type: "notifications",
+                            } })),
+                        orgSideBar && (React.createElement(C3OrgSidebar, { sideBar: {
+                                ...orgSideBar,
+                                type: "org",
+                            } })),
+                        infoButton ? (React.createElement(InfoButton, { onClick: infoButton.onClick })) : (infoSideBar && (React.createElement(C3InfoSidebar, { sideBar: { ...infoSideBar, type: "info" } }))),
+                        userSideBar && (React.createElement(C3UserSidebar, { sideBar: {
+                                ...userSideBar,
+                                type: "user",
+                            } })))));
+            } })));
+};

package/lib/esm/components/c3-navigation/c3-navigation.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/c3-navigation/c3-navigation.test.js

@@ -0,0 +1,80 @@
+import { expect, test } from "@playwright/test";
+import { getStory } from "../test-utils";
+test.describe("Navigation", () => {
+    test("Basic", async ({ page }) => {
+        await getStory(page, "uishell-c3navigation--basic");
+        await expect(page).toHaveScreenshot();
+    });
+    test("App bar open", async ({ page }) => {
+        await getStory(page, "uishell-c3navigation--app-bar-opened");
+        await expect(page).toHaveScreenshot();
+    });
+    test("Org bar open", async ({ page }) => {
+        await getStory(page, "uishell-c3navigation--org-side-bar-opened");
+        await expect(page).toHaveScreenshot();
+    });
+    test("Info bar open", async ({ page }) => {
+        await getStory(page, "uishell-c3navigation--info-side-bar-opened");
+        await expect(page).toHaveScreenshot();
+    });
+    test("Info bar open - with divider", async ({ page }) => {
+        await getStory(page, "uishell-c3navigation--info-side-bar-opened-with-divider");
+        await expect(page).toHaveScreenshot();
+    });
+    test("Info button", async ({ page }) => {
+        await getStory(page, "uishell-c3navigation--info-button");
+        await expect(page).toHaveScreenshot();
+    });
+    test("User bar open", async ({ page }) => {
+        await getStory(page, "uishell-c3navigation--user-side-bar-opened");
+        await expect(page).toHaveScreenshot();
+    });
+    test("User bar open - with custom section", async ({ page }) => {
+        await getStory(page, "uishell-c3navigation--user-side-bar-opened-with-custom-section");
+        await expect(page).toHaveScreenshot();
+    });
+    test("User bar open - with custom section and state", async ({ page }) => {
+        await getStory(page, "uishell-c3navigation--user-side-bar-with-custom-section-and-state");
+        await expect(page).toHaveScreenshot();
+    });
+    test("App bar - without elements", async ({ page }) => {
+        await getStory(page, "uishell-c3navigation--app-bar-without-elements");
+        await expect(page).toHaveScreenshot();
+    });
+    test("App bar - without elements and nav elements", async ({ page }) => {
+        await getStory(page, "uishell-c3navigation--app-bar-without-elements-and-nav-elements");
+        await expect(page).toHaveScreenshot();
+    });
+    test("Notifications bar open", async ({ page }) => {
+        // Fake current time for consistent screenshots
+        const fakeNow = new Date("January 5 2023 13:37:11").valueOf();
+        await page.addInitScript(`{
+  Date = class extends Date {
+    constructor(...args) {
+      if (args.length === 0) {
+        super(${fakeNow});
+      } else {
+        super(...args);
+      }
+    }
+  }
+  const __DateNowOffset = ${fakeNow} - Date.now();
+  const __DateNow = Date.now;
+  Date.now = () => __DateNow() + __DateNowOffset;
+	}`);
+        await getStory(page, "uishell-c3navigation--notifications-side-bar-opened");
+        await expect(page).toHaveScreenshot();
+    });
+    test("Notifications bar open - no notifications", async ({ page }) => {
+        await getStory(page, "uishell-c3navigation--notifications-side-bar-opened-no-notifications");
+        await expect(page).toHaveScreenshot();
+    });
+    test("Action button", async ({ page }) => {
+        await getStory(page, "uishell-c3navigation--acion-button-instead-of-info-bar");
+        await expect(page).toHaveScreenshot();
+    });
+    test("Action button with custom element", async ({ page }) => {
+        await getStory(page, "uishell-c3navigation--acion-button-with-custom-element");
+        await expect(page).toHaveScreenshot();
+    });
+});

package/lib/esm/components/c3-navigation/c3-navigation.types.d.ts

@@ -1,81 +1,74 @@
-/// <reference types="react" />
-import { Tag } from "@carbon/react"
-import { Endpoints, Stage } from "../../api/endpoints.const"
-import {
-	C3NavigationAppBarProps,
-	C3NavigationInfoSideBarProps,
-	C3NavigationNotificationsSideBarProps,
-	C3NavigationOrgSideBarProps,
-	C3NavigationUserSideBarProps,
-} from "./c3-navigation-sidebar/c3-navigation-sidebar.types"
-import { C3ActionButtonsProps } from "./c3-navigation-actions/c3-action-buttons.types"
+import { Tag } from "@carbon/react";
+import { Endpoints, Stage } from "../../api/endpoints.const";
+import { C3NavigationAppBarProps, C3NavigationInfoSideBarProps, C3NavigationNotificationsSideBarProps, C3NavigationOrgSideBarProps, C3NavigationUserSideBarProps } from "./c3-navigation-sidebar/c3-navigation-sidebar.types";
+import { C3ActionButtonsProps } from "./c3-navigation-actions/c3-action-buttons.types";
 export interface C3NavigationAppProps {
-	prefix?: string
-	name: string
-	ariaLabel: string
-	routeProps: any
+    prefix?: string;
+    name: string;
+    ariaLabel: string;
+    routeProps: any;
 }
 export interface C3NavigationElementProps {
-	ariaLabel?: string
-	key: string
-	label: string
-	kind?: "ghost" | "danger--ghost"
-	active?: boolean
-	renderIcon?: any
-	routeProps?: any
-	href?: string
-	target?: "_blank" | "_self" | "_parent" | "_top"
-	onClick?: () => void
-	subElements?: C3NavigationElementProps[]
-	preceedingDivider?: boolean
+    ariaLabel?: string;
+    key: string;
+    label: string;
+    kind?: "ghost" | "danger--ghost";
+    active?: boolean;
+    renderIcon?: any;
+    routeProps?: any;
+    href?: string;
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    onClick?: () => void;
+    subElements?: C3NavigationElementProps[];
+    preceedingDivider?: boolean;
 }
 export interface C3NavigationNavBarProps {
-	elements: Array<{
-		label: string
-		key: string
-		routeProps: any
-		isCurrentPage: boolean
-	}>
-	tags?: Array<{
-		label: string
-		key: string
-		color?: React.ComponentProps<typeof Tag>["type"]
-		tooltip?: {
-			content: React.ReactNode
-			buttonLabel: string
-		}
-	}>
-	orgName?: string
+    elements: Array<{
+        label: string;
+        key: string;
+        routeProps: any;
+        isCurrentPage: boolean;
+    }>;
+    tags?: Array<{
+        label: string;
+        key: string;
+        color?: React.ComponentProps<typeof Tag>["type"];
+        tooltip?: {
+            content: React.ReactNode;
+            buttonLabel: string;
+        };
+    }>;
+    orgName?: string;
 }
 export interface C3NotificationsProps {
-	stage?: Stage
-	endpoints?: Endpoints
-	activeOrganizationId: string
-	userToken: string
-	getNewUserToken: () => Promise<string>
+    stage?: Stage;
+    endpoints?: Endpoints;
+    activeOrganizationId: string;
+    userToken: string;
+    getNewUserToken: () => Promise<string>;
 }
-declare type WithoutType<P> = Omit<P, "type">
+declare type WithoutType<P> = Omit<P, "type">;
 export interface C3NavigationProps {
-	app: C3NavigationAppProps
-	appBar: WithoutType<C3NavigationAppBarProps>
-	orgSideBar?: WithoutType<C3NavigationOrgSideBarProps>
-	infoSideBar?: WithoutType<C3NavigationInfoSideBarProps>
-	infoButton?: {
-		onClick: () => void
-	}
-	actionButtons?: C3ActionButtonsProps
-	userSideBar?: WithoutType<C3NavigationUserSideBarProps>
-	notificationSideBar?: WithoutType<C3NavigationNotificationsSideBarProps>
-	navbar: C3NavigationNavBarProps
-	forwardRef?: React.ForwardRefExoticComponent<any>
+    app: C3NavigationAppProps;
+    appBar: WithoutType<C3NavigationAppBarProps>;
+    orgSideBar?: WithoutType<C3NavigationOrgSideBarProps>;
+    infoSideBar?: WithoutType<C3NavigationInfoSideBarProps>;
+    infoButton?: {
+        onClick: () => void;
+    };
+    actionButtons?: C3ActionButtonsProps;
+    userSideBar?: WithoutType<C3NavigationUserSideBarProps>;
+    notificationSideBar?: WithoutType<C3NavigationNotificationsSideBarProps>;
+    navbar: C3NavigationNavBarProps;
+    forwardRef?: React.ForwardRefExoticComponent<any>;
 }
 export declare type LinkProps = {
-	element?: React.ElementType
-	isSideNavExpanded?: boolean
-	children: React.ReactNode
-	className?: string
-	isActive?: boolean
-	large?: boolean
-	renderIcon?: (() => React.ReactNode) | object
-}
-export {}
+    element?: React.ElementType;
+    isSideNavExpanded?: boolean;
+    children: React.ReactNode;
+    className?: string;
+    isActive?: boolean;
+    large?: boolean;
+    renderIcon?: (() => React.ReactNode) | object;
+};
+export {};

package/lib/esm/components/c3-navigation/c3-navigation.types.js

@@ -1 +1 @@
-export {}
+export {};

package/lib/esm/components/c3-navigation/c3-notification-provider/c3-notification-container.d.ts

@@ -1,30 +1,13 @@
-import { FC } from "react"
-import { Notification as NotificationProps } from "../../../api/notifications"
-export declare const NotificationTitle: import("styled-components").StyledComponent<
-	"p",
-	any,
-	{},
-	never
->
-export declare const NotificationDescription: import("styled-components").StyledComponent<
-	"p",
-	any,
-	{},
-	never
->
-export declare const LinkContainer: import("styled-components").StyledComponent<
-	"div",
-	any,
-	{},
-	never
->
-declare const C3NotificationContainer: FC<
-	NotificationProps & {
-		onRead: () => void
-		onDismiss: () => void
-		onLinkClick?: (meta: NotificationProps["meta"]) => void
-		originalOnLinkClick?: (meta: NotificationProps["meta"]) => void
-		unread?: boolean
-	}
->
-export default C3NotificationContainer
+import { FC } from "react";
+import { Notification as NotificationProps } from "../../../api/notifications";
+export declare const NotificationTitle: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const NotificationDescription: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const LinkContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const C3NotificationContainer: FC<NotificationProps & {
+    onRead: () => void;
+    onDismiss: () => void;
+    onLinkClick?: (meta: NotificationProps["meta"]) => void;
+    originalOnLinkClick?: (meta: NotificationProps["meta"]) => void;
+    unread?: boolean;
+}>;
+export default C3NotificationContainer;