@camunda/camunda-composite-components 0.10.0 → 0.11.0

package/lib/esm/package.json

@@ -4,7 +4,7 @@
         "type": "git",
         "url": "git+https://github.com/camunda-cloud/camunda-composite-components.git"
     },
-    "version": "0.9.0",
+    "version": "0.10.1-rc.2",
     "scripts": {
         "clean": "rimraf lib/",
         "build": "yarn clean && tsc",

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

@@ -1,3 +1,7 @@
 import React from "react";
 import { C3NavigationProps } from "./c3-navigation.types";
+export declare const SECOND = 1000;
+export declare const MINUTE: number;
+export declare const HOUR: number;
+export declare const DAY: number;
 export declare const C3Navigation: ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, infoButton, helpCenter, actionButtons, userSideBar, notificationSideBar, clusterUuid, options, }: C3NavigationProps) => React.JSX.Element;

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

@@ -17,6 +17,7 @@ import { useC3HelpCenter } from "../c3-help-center/c3-help-center-provider";
 import { useC3Profile } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
 import { HelpCenterHint } from "../c3-help-center/help-center-hint";
 import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
+import { Time, Warning } from "@carbon/react/icons";
 /**
  * UI SHELL
  * Docs: https://react.carbondesignsystem.com/?path=/story/components-ui-shell--fixed-side-nav
@@ -43,6 +44,11 @@ const ClusterTagWrapper = styled.div `
 `;
 const NON_PRODUCTION_TERMS_LINK = "https://legal.camunda.com/#self-managed-non-production-terms";
 const SALES_CONTACT_LINK = "https://camunda.com/contact/";
+export const SECOND = 1000;
+export const MINUTE = SECOND * 60;
+export const HOUR = MINUTE * 60;
+export const DAY = HOUR * 24;
+const LICENSE_EXPIRY = DAY * 30;
 export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, infoButton, helpCenter, actionButtons, userSideBar, notificationSideBar, clusterUuid, options, }) => {
     const { openHelpCenter } = useC3HelpCenter();
     const { currentClusterUuid } = useC3UserConfiguration();
@@ -53,6 +59,15 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
         appBar.appTeaserRouteProps ||
         (!isLargeScreen && navbar.elements.length > 0);
     const orgName = activeOrg?.name || navbar.orgName;
+    let expiresAt;
+    if (navbar.licenseTag?.expiresAt !== undefined) {
+        if (typeof navbar.licenseTag?.expiresAt === "string") {
+            expiresAt = Date.parse(navbar.licenseTag?.expiresAt);
+        }
+        if (typeof navbar.licenseTag?.expiresAt === "number") {
+            expiresAt = navbar.licenseTag?.expiresAt;
+        }
+    }
     const tags = [
         ...(navbar.tags || []),
         ...(navbar.licenseTag?.show
@@ -80,6 +95,52 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
                 },
             ]
             : []),
+        ...(navbar.licenseTag?.show &&
+            navbar.licenseTag?.isCommercial === false &&
+            (expiresAt === undefined || expiresAt - LICENSE_EXPIRY >= Date.now())
+            ? [
+                {
+                    key: "non-commercial-license-tag",
+                    label: `Non-commercial license`,
+                    color: "gray",
+                },
+            ]
+            : []),
+        ...(navbar.licenseTag?.show &&
+            expiresAt &&
+            navbar.licenseTag?.isCommercial === false &&
+            expiresAt - LICENSE_EXPIRY < Date.now() &&
+            expiresAt > Date.now()
+            ? [
+                {
+                    key: "non-commercial-license-tag-about-to-expire",
+                    label: `Non-commercial license - ${Math.floor((expiresAt - Date.now()) / DAY)} ${Math.floor((expiresAt - Date.now()) / DAY) > 1 ? "days" : "day"} left`,
+                    color: "blue",
+                    renderIcon: Time,
+                    tooltip: {
+                        content: (React.createElement("p", null, "Please renew and provide new license keys to continue production use of Camunda.")),
+                        buttonLabel: "Learn more",
+                    },
+                },
+            ]
+            : []),
+        ...(navbar.licenseTag?.show &&
+            navbar.licenseTag?.expiresAt &&
+            navbar.licenseTag?.isCommercial === false &&
+            expiresAt < Date.now()
+            ? [
+                {
+                    key: "non-commercial-license-tag-is-expired",
+                    label: `Non-commercial license - expired`,
+                    color: "red",
+                    renderIcon: Warning,
+                    tooltip: {
+                        content: (React.createElement("p", null, "To continue using all features, please renew your license.")),
+                        buttonLabel: "Learn more",
+                    },
+                },
+            ]
+            : []),
     ];
     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.");
@@ -112,15 +173,21 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
                                             } },
                                             React.createElement(Toggletip, null,
                                                 React.createElement(ToggletipButton, { label: buttonLabel },
-                                                    React.createElement(Tag, { type: tag.color, style: {
+                                                    React.createElement(Tag, { type: tag.color, renderIcon: tag.renderIcon, style: {
                                                             margin: "0",
                                                             cursor: "pointer",
+                                                            overflow: "hidden",
+                                                            whiteSpace: "nowrap",
+                                                            textOverflow: "ellipsis",
                                                         } }, tag.label)),
                                                 React.createElement(StyledToggletipContent, null, content))));
                                     }
-                                    return (React.createElement(Tag, { key: tag.key, style: {
+                                    return (React.createElement(Tag, { key: tag.key, renderIcon: tag.renderIcon, style: {
                                             height: "1.5rem",
                                             marginTop: "0.75rem",
+                                            overflow: "hidden",
+                                            whiteSpace: "nowrap",
+                                            textOverflow: "ellipsis",
                                         }, type: tag.color }, tag.label));
                                 }),
                             (clusterUuid || currentClusterUuid) && (React.createElement(ClusterTagWrapper, null,

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

@@ -4,6 +4,7 @@ import { C3NavigationAppBarProps, C3NavigationInfoSideBarProps, C3NavigationNoti
 import { C3ActionButtonsProps } from "./c3-navigation-actions/c3-action-buttons.types";
 import { C3HelpCenterProps } from "../c3-help-center/c3-help-center";
 import { CamundaClusterStage } from "../c3-cluster-tag/c3-cluster-tag.types";
+import { CarbonIconType } from "@carbon/react/icons";
 export interface C3NavigationAppProps {
     prefix?: string;
     name: string;
@@ -37,6 +38,7 @@ export interface C3NavigationNavBarProps {
         label: string;
         key: string;
         color?: React.ComponentProps<typeof Tag>["type"];
+        renderIcon?: CarbonIconType;
         tooltip?: {
             content: React.ReactNode;
             buttonLabel: string;
@@ -45,6 +47,8 @@ export interface C3NavigationNavBarProps {
     licenseTag?: {
         show: boolean;
         isProductionLicense: boolean;
+        isCommercial?: boolean;
+        expiresAt?: number | string;
     };
     orgName?: string;
 }

package/lib/esm/src/components/c3-navigation/stories/story-helpers.d.ts

@@ -7,11 +7,13 @@ export declare function createAppBarProps(options?: {
     elements?: Array<C3NavigationElementProps>;
     useElementsFromConfig?: boolean;
 }): C3NavigationProps["appBar"];
-export declare function createNavBarBarProps({ orgName, elements, showLicenseTag, showProductionLicense, }?: {
+export declare function createNavBarBarProps({ orgName, elements, showLicenseTag, showProductionLicense, isCommercial, expiresAt, }?: {
     elements?: C3NavigationNavBarProps["elements"];
     orgName?: string;
     showLicenseTag?: boolean;
     showProductionLicense?: boolean;
+    isCommercial?: boolean;
+    expiresAt?: number | string;
 }): C3NavigationNavBarProps;
 export declare function createInfoSideBarProps(options: {
     isOpen: boolean;

package/lib/esm/src/components/c3-navigation/stories/story-helpers.js

@@ -17,7 +17,7 @@ export function createAppBarProps(options = {}) {
             : Boolean(options?.isOpen),
         elements: options.useElementsFromConfig
             ? undefined
-            : options?.elements ?? [
+            : (options?.elements ?? [
                 {
                     key: "console",
                     label: "Console",
@@ -70,11 +70,11 @@ export function createAppBarProps(options = {}) {
                     target: "_blank",
                     href: "https://camunda.com/",
                 },
-            ],
+            ]),
         elementClicked: (element) => console.log(`event coming from the appBarProps: ${element} has been clicked`),
     };
 }
-export function createNavBarBarProps({ orgName = "Camunda", elements = undefined, showLicenseTag, showProductionLicense, } = {}) {
+export function createNavBarBarProps({ orgName = "Camunda", elements = undefined, showLicenseTag, showProductionLicense, isCommercial, expiresAt, } = {}) {
     return {
         elements: elements ?? [
             {
@@ -96,6 +96,8 @@ export function createNavBarBarProps({ orgName = "Camunda", elements = undefined
         licenseTag: {
             show: showLicenseTag || false,
             isProductionLicense: showProductionLicense || false,
+            isCommercial: isCommercial || false,
+            expiresAt,
         },
         tags: [
             {

package/package.json

@@ -4,7 +4,7 @@
 		"type": "git",
 		"url": "git+https://github.com/camunda-cloud/camunda-composite-components.git"
 	},
-	"version": "0.10.0",
+	"version": "0.11.0",
 	"scripts": {
 		"clean": "rimraf lib/",
 		"build": "yarn clean && tsc",