@camunda/camunda-composite-components 0.0.42-rc.0 → 0.0.43

package/README.md

@@ -53,4 +53,5 @@ 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)
+- [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-cloud-management-apps/tree/main/packages/c4)
+- [Identity team](https://github.com/camunda/team-identity): [c4-identity](https://github.com/camunda-cloud/c4-identity)

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

@@ -4,6 +4,10 @@ import { Help } from "@carbon/react/icons"
 import C3NavigationSideBar from "./c3-navigation-sidebar"
 const C3InfoSidebar = ({ sideBar }) => {
 	const { version, ...sideBarProps } = sideBar
+	if (version)
+		console.warn(
+			"The `version` prop in the info sidebar is deprecated and will be removed in a future release. Please set `version` in the `userSideBar` prop instead.",
+		)
 	return React.createElement(C3NavigationSideBar, {
 		sideBar: {
 			...sideBarProps,

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

@@ -4,6 +4,7 @@ declare const C3NavigationSideBar: (props: {
 	sideBar: C3NavigationSideBarProps
 	icon: ReactElement
 	children?: ReactNode
+	version?: ReactNode
 	bottomChildren?: ReactNode
 }) => JSX.Element
 export default C3NavigationSideBar

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

@@ -31,7 +31,7 @@ const BottomElements = styled.div`
 	}
 `
 const C3NavigationSideBar = (props) => {
-	const { icon, sideBar, children, bottomChildren } = props
+	const { icon, sideBar, children, version, bottomChildren } = props
 	const { callbacks, onOpen } = sideBar
 	const { isOpen, setIsOpen: setOpenState } = useSidebarState()[sideBar.type]
 	const setIsOpen = (open) => {
@@ -92,6 +92,7 @@ const C3NavigationSideBar = (props) => {
 				),
 				bottomChildren,
 			),
+			version,
 			React.createElement(
 				BottomElements,
 				null,

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

@@ -33,6 +33,7 @@ export declare type C3NavigationInfoSideBarProps =
 export declare type C3NavigationUserSideBarProps =
 	C3NavigationSideBarBaseProps & {
 		type: "user"
+		version?: string
 		customElements?: {
 			customSection?: JSX.Element
 			profile?: {

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

@@ -9,9 +9,28 @@ import {
 	Toggle,
 } from "@carbon/react"
 import { UserAvatar } from "@carbon/react/icons"
+import styled from "styled-components"
 import { useUserSidebarState } from "./c3-sidebar-state-provider"
+const VersionWrapper = styled.div`
+	align-self: end;
+	padding: 0.5rem 1rem;
+`
+const Version = styled.p`
+	color: var(--cds-text-primary);
+	font-size: var(--cds-label-02-font-size);
+	font-weight: var(--cds-label-02-font-weight);
+	line-height: var(--cds-label-02-line-height);
+	letter-spacing: var(--cds-label-02-letter-spacing);
+`
+const Copyright = styled.p`
+	color: var(--cds-text-secondary);
+	font-size: var(--cds-label-01-font-size);
+	font-weight: var(--cds-label-01-font-weight);
+	line-height: var(--cds-label-01-line-height);
+	letter-spacing: var(--cds-label-01-letter-spacing);
+`
 const C3UserSidebar = ({ sideBar }) => {
-	const { customElements, ...sideBarProps } = sideBar
+	const { customElements, version, ...sideBarProps } = sideBar
 	const profile = customElements?.profile
 	const themeSelector = customElements?.themeSelector
 	const stageToggle = customElements?.stageToggle
@@ -26,6 +45,20 @@ const C3UserSidebar = ({ sideBar }) => {
 				ariaLabel: sideBarProps.ariaLabel || "User Sidebar",
 			},
 			icon: React.createElement(UserAvatar, { size: 20 }),
+			version:
+				version &&
+				React.createElement(
+					VersionWrapper,
+					null,
+					React.createElement(Version, null, "Version ", version),
+					React.createElement(
+						Copyright,
+						null,
+						"\u00A9 Camunda Services GmbH ",
+						new Date().getFullYear(),
+					),
+					React.createElement(Copyright, null, "All right reserved."),
+				),
 			bottomChildren: customSection,
 		},
 		profile &&

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

@@ -58,6 +58,10 @@ export const C3Navigation = ({
 	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,
 		{

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

@@ -1,6 +1,6 @@
 import React from "react"
 import { Link } from "@carbon/react"
-import { ArrowRight } from "@carbon/react/icons"
+import { ArrowRight, TrashCan } from "@carbon/react/icons"
 export function createAppProps() {
 	return {
 		name: "Console",
@@ -123,7 +123,6 @@ export function createInfoSideBarProps(options) {
 				preceedingDivider: options.preceedingDividerOn2ndElement,
 			},
 		],
-		version: "8.2.0-alpha2",
 	}
 }
 export function createOrgSideBarProps(options) {
@@ -153,6 +152,7 @@ export function createOrgSideBarProps(options) {
 export function createUserSideBarProps(options) {
 	return {
 		isOpen: options.isOpen,
+		version: "8.3.0-alpha4",
 		customElements: {
 			customSection: options.customSection,
 			profile: {
@@ -181,17 +181,18 @@ export function createUserSideBarProps(options) {
 				label: "Terms of use",
 			},
 			{
-				key: "delete",
-				label: "Delete account",
-				kind: "danger--ghost",
+				key: "logout",
+				label: "Log out",
+				kind: "ghost",
+				renderIcon: ArrowRight,
 			},
 		],
 		bottomElements: [
 			{
-				key: "logout",
-				label: "Logout",
-				kind: "ghost",
-				renderIcon: ArrowRight,
+				key: "delete",
+				label: "Delete account",
+				kind: "danger--ghost",
+				renderIcon: TrashCan,
 			},
 		],
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@camunda/camunda-composite-components",
-	"version": "0.0.42-rc.0",
+	"version": "0.0.43",
 	"scripts": {
 		"clean": "rimraf lib/",
 		"copy-css-files": "copyfiles -u 1 src/components/**/*.css lib/esm",
@@ -30,6 +30,7 @@
 		"@storybook/addon-essentials": "7.0.18",
 		"@storybook/addon-interactions": "7.0.18",
 		"@storybook/addon-links": "7.0.18",
+		"@storybook/blocks": "7.0.21",
 		"@storybook/preset-scss": "1.0.3",
 		"@storybook/react": "7.0.18",
 		"@storybook/react-webpack5": "7.0.18",