@camunda/camunda-composite-components 0.0.20 → 0.0.22
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.
package/README.md
CHANGED
|
@@ -26,7 +26,7 @@ Pushing to `main` will update the storybook available under [github page](https:
|
|
|
26
26
|
Example for navbar:
|
|
27
27
|
|
|
28
28
|
```tsx
|
|
29
|
-
import { C3NavigationElementProps } from "@camunda
|
|
29
|
+
import { C3NavigationElementProps } from "@camunda/camunda-composite-components"
|
|
30
30
|
|
|
31
31
|
// ...
|
|
32
32
|
|
|
@@ -182,7 +182,33 @@ const C3NavigationSideBar = (props) => {
|
|
|
182
182
|
if (sideBar.closeOnClick !== false) {
|
|
183
183
|
setSideBarOpen(false);
|
|
184
184
|
}
|
|
185
|
-
}, tabIndex: itemTabIndex }, element.label)))
|
|
185
|
+
}, tabIndex: itemTabIndex }, element.label))),
|
|
186
|
+
sideBar.type === "info" && sideBar.version !== undefined && (React.createElement(React.Fragment, null,
|
|
187
|
+
React.createElement(SwitcherDivider, null),
|
|
188
|
+
React.createElement("span", { className: "cds--switcher__item", style: {
|
|
189
|
+
padding: "var(--cds-spacing-05)",
|
|
190
|
+
paddingTop: "var(--cds-spacing-03)",
|
|
191
|
+
paddingBottom: 0,
|
|
192
|
+
color: "var(--cds-text-primary)",
|
|
193
|
+
fontSize: "var(--cds-body-01-font-size)",
|
|
194
|
+
fontWeight: "var(--cds-body-01-font-weight)",
|
|
195
|
+
lineHeight: "var(--cds-body-01-line-height)",
|
|
196
|
+
letterSpacing: "var(--cds-body-01-letter-spacing)",
|
|
197
|
+
} },
|
|
198
|
+
"Version ",
|
|
199
|
+
sideBar.version),
|
|
200
|
+
React.createElement("span", { className: "cds--switcher__item", style: {
|
|
201
|
+
paddingRight: "var(--cds-spacing-05)",
|
|
202
|
+
paddingLeft: "var(--cds-spacing-05)",
|
|
203
|
+
color: "var(--cds-text-secondary)",
|
|
204
|
+
fontSize: "var(--cds-label-01-font-size)",
|
|
205
|
+
fontWeight: "var(--cds-label-01-font-weight)",
|
|
206
|
+
lineHeight: "var(--cds-label-01-line-height)",
|
|
207
|
+
letterSpacing: "var(--cds-label-01-letter-spacing)",
|
|
208
|
+
} },
|
|
209
|
+
`© Camunda Services GmbH ${new Date().getFullYear()}`,
|
|
210
|
+
React.createElement("br", null),
|
|
211
|
+
" All rights reserved.")))),
|
|
186
212
|
sideBar.bottomElements &&
|
|
187
213
|
sideBar.bottomElements.map((element) => (React.createElement(Button, { kind: element.kind, key: element.key, className: "cds--switcher__item", renderIcon: element.renderIcon, onClick: () => {
|
|
188
214
|
if (element.onClick) {
|
|
@@ -197,7 +223,8 @@ const C3NavigationSideBar = (props) => {
|
|
|
197
223
|
};
|
|
198
224
|
export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, userSideBar, }) => {
|
|
199
225
|
const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINT_LG_WIDTH}`);
|
|
200
|
-
const
|
|
226
|
+
const appBarElementsLength = appBar.elements?.length ?? 0;
|
|
227
|
+
const displayAppBar = appBarElementsLength > 0 || (!isLargeScreen && navbar.elements.length > 0);
|
|
201
228
|
const inverseThemeClassName = useInverseThemeClassName();
|
|
202
229
|
return (React.createElement(HeaderContainer, { render: () => {
|
|
203
230
|
return (React.createElement(Header, { "aria-label": app.ariaLabel },
|