@camunda/camunda-composite-components 0.0.24 → 0.0.26

package/README.md

@@ -1,6 +1,14 @@
 # Camunda Composite Components
 
-Storybook: [Link](https://camunda-composite-components.pages.dev/)
+Camunda Composite Components (also known as **C3**) is the main software artifact of the [Design System Team](https://confluence.camunda.com/display/HAN/Design+System).
+
+We have a dedicated slack channel for everyone having questions, comments, bug reports or concerns about this repository: [#camunda-composite-components](https://app.slack.com/client/T0PM0P1SA/C049YH1C202/thread/C03NF7FH17G-1671730364.608129). For more general questions towards the Design System team, please use [#ask-cds](https://app.slack.com/client/T0PM0P1SA/C04FUEGLG8N).
+
+If you like the idea of having a repository for your own composite components - how about you do your own **Camunda Custom Composite Components**? Just go over [here](https://github.com/camunda-cloud/c4-starter), fork it, lezgo! A list of C4-Adopters can be found <a href="#c4list">here</a>.
+
+## Storybook
+
+A live view of the `main` branch can be found [here](https://camunda-composite-components.pages.dev/). When opening a PR, a version of storybook with the changes is deployed automatically and can be accessed by clicking on the link in the PR.
 
 ## Dev
 
@@ -17,7 +25,7 @@ yarn build
 
 ## Release
 
-Bump version in `package.json` and create a [new release](https://github.com/camunda-cloud/camunda-composite-components/releases/new). This will start a github action to publish the package to the github package repository.
+Just create a [new release](https://github.com/camunda-cloud/camunda-composite-components/releases/new). This will start a github action to bump the version in `package.json` and publish the package to the github package repository.
 
 Pushing to `main` will update the storybook available under [cloudflare page](https://camunda-composite-components.pages.dev/).
 
@@ -42,3 +50,7 @@ return (
 	/>
 )
 ```
+
+## <a name="c4list"></a> (incomplete) List of adopters of C3+C4
+
+- [console-team](https://confluence.camunda.com/display/HAN/Console+Team) started this, their C4 repo can be found [here](https://github.com/camunda-cloud/camunda-console-composite-components)

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

@@ -1,14 +1,9 @@
-import { Button, FormLabel, Header, HeaderContainer, HeaderGlobalAction, HeaderGlobalBar, HeaderMenuItem, HeaderName, HeaderNavigation, HeaderPanel, HeaderSideNavItems, RadioButton, RadioButtonGroup, SideNav, SideNavItems, SideNavLink, SideNavMenu, SideNavMenuItem, SkipToContent, Stack, SwitcherDivider, Tag, Toggle, ToggletipContent, Toggletip, ToggletipButton, useTheme, usePrefix, } from "@carbon/react";
-import { Close, Enterprise, Help, Launch, UserAvatar, } from "@carbon/react/icons";
+import { Button, FormLabel, Header, HeaderContainer, HeaderGlobalAction, HeaderGlobalBar, HeaderMenuItem, HeaderName, HeaderNavigation, HeaderPanel, HeaderSideNavItems, RadioButton, RadioButtonGroup, SideNav, SideNavItems, SideNavLink, SideNavMenu, SideNavMenuItem, SkipToContent, Stack, SwitcherDivider, Tag, Toggle, Toggletip, ToggletipButton, ToggletipContent, usePrefix, useTheme, } from "@carbon/react";
+import { Close, Enterprise, Help, UserAvatar } from "@carbon/react/icons";
 import React, { useEffect, useState } from "react";
 import { C3AppMenuIcon } from "../../icons/c3-icons";
 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 C3NavigationExternalLink = ({ label }) => (React.createElement(React.Fragment, null,
-    label,
-    React.createElement(Launch, { style: {
-            transform: `translate(2px, 1px)`,
-            verticalAlign: "top",
-        } })));
+const C3NavigationExternalLink = ({ label }) => React.createElement(React.Fragment, null, label);
 const C3NavigationAppBar = ({ appBar, forwardRef, navbar, }) => {
     const [appBarOpen, setAppBarOpen] = useState(appBar.isOpen);
     const refPanel = React.createRef();
@@ -173,18 +168,7 @@ const C3NavigationSideBar = (props) => {
                         sideBar.customElements &&
                         !sideBar.customElements?.activeOrganization && (React.createElement(SwitcherDivider, null)),
                     sideBar.elements &&
-                        sideBar.elements.map((element, index) => (React.createElement("span", { key: element.key },
-                            element.preceedingDivider && React.createElement(SwitcherDivider, null),
-                            React.createElement(Button, { style: index === 0 && !sideBar.customElements
-                                    ? { marginTop: "1.5rem", whiteSpace: "nowrap" }
-                                    : { whiteSpace: "nowrap" }, size: "sm", kind: element.kind ?? "ghost", className: "cds--switcher__item", onClick: () => {
-                                    if (element.onClick) {
-                                        element.onClick();
-                                    }
-                                    if (sideBar.closeOnClick !== false) {
-                                        setSideBarOpen(false);
-                                    }
-                                }, tabIndex: itemTabIndex }, element.label)))),
+                        sideBar.elements.map((element, index) => (React.createElement(C3NavigationSideBarElement, { key: element.key, element: element, index: index, sideBar: sideBar, setSideBarOpen: setSideBarOpen, itemTabIndex: itemTabIndex }))),
                     sideBar.type === "info" && sideBar.version !== undefined && (React.createElement(React.Fragment, null,
                         React.createElement(SwitcherDivider, null),
                         React.createElement("span", { className: "cds--switcher__item", style: {
@@ -223,6 +207,20 @@ const C3NavigationSideBar = (props) => {
     }
     return null;
 };
+const C3NavigationSideBarElement = (props) => {
+    return (React.createElement(React.Fragment, null,
+        props.element.preceedingDivider && React.createElement(SwitcherDivider, null),
+        React.createElement(Button, { style: props.index === 0 && !props.sideBar.customElements
+                ? { marginTop: "1.5rem", whiteSpace: "nowrap" }
+                : { whiteSpace: "nowrap" }, size: "sm", kind: props.element.kind ?? "ghost", className: "cds--switcher__item", onClick: () => {
+                if (props.element.onClick) {
+                    props.element.onClick();
+                }
+                if (props.sideBar.closeOnClick !== false) {
+                    props.setSideBarOpen(false);
+                }
+            }, tabIndex: props.itemTabIndex }, props.element.label)));
+};
 export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, userSideBar, }) => {
     const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINT_LG_WIDTH}`);
     const appBarElementsLength = appBar.elements?.length ?? 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@camunda/camunda-composite-components",
-	"version": "0.0.24",
+	"version": "0.0.26",
 	"scripts": {
 		"build": "tsc",
 		"storybook": "start-storybook -p 6006",