npm - @eccenca/gui-elements - Versions diffs - 24.1.0-rc.0 → 24.1.0-rc.1 - Mend

@eccenca/gui-elements 24.1.0-rc.0 → 24.1.0-rc.1

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.

Files changed (17) hide show

package/CHANGELOG.md +16 -9
package/dist/cjs/components/ContentGroup/ContentGroup.js +95 -0
package/dist/cjs/components/ContentGroup/ContentGroup.js.map +1 -0
package/dist/cjs/components/index.js +1 -0
package/dist/cjs/components/index.js.map +1 -1
package/dist/esm/components/ContentGroup/ContentGroup.js +100 -0
package/dist/esm/components/ContentGroup/ContentGroup.js.map +1 -0
package/dist/esm/components/index.js +1 -0
package/dist/esm/components/index.js.map +1 -1
package/dist/types/components/ContentGroup/ContentGroup.d.ts +78 -0
package/dist/types/components/index.d.ts +1 -0
package/package.json +2 -1
package/src/components/ContentGroup/ContentGroup.stories.tsx +47 -0
package/src/components/ContentGroup/ContentGroup.tsx +256 -0
package/src/components/ContentGroup/_contentgroup.scss +56 -0
package/src/components/index.scss +1 -0
package/src/components/index.ts +1 -0

package/CHANGELOG.md CHANGED Viewed

@@ -6,14 +6,27 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 ## [Unreleased]
-### Changed
+### Added
--   `eslint` libraries were upgraded to v9, so `node` v18.18 or higher is required
+-   `CntentGroup` component
+    -   Manage display of a grouped content section.
+    -   Add info, actions and context annotations by using its properties.
+    -   Can be nested into each other.
+-   `<CodeEditor />`
+    -   implemented support for linting which is enabled via `useLinting` prop
+    -   `turtle` and `javascript` are currently supported languages for linting
+    -   editor is focused on load if `autoFocus` prop is set to `true`
+    -   implemented support for `disabled` state in code editor
+    -   implemented support for `intent` states in code editor
 ### Fixed
 -   `MultiSelect`:
-    -    Old suggestions might be shown for a very short time when typing in a new search query.
+    -   Old suggestions might be shown for a very short time when typing in a new search query.
+### Changed
+-   `eslint` libraries were upgraded to v9, so `node` v18.18 or higher is required
 ## [24.0.0] - 2024-12-17
@@ -64,12 +77,6 @@ This is a major release, and it might be not compatible with your current usage
     -   `htmlContentBlockProps` can now be used to configure the wrapper around the Markdown content
 -   `$eccgui-selector-text-spot-highlight` SCSS config variable to specify selector that is used to create shortly highlighted spots
     -   it is highlighted when the selector is also active local anchor target or if it has the `.eccgui-typography--spothighlight` class attached to it
--   `<CodeEditor />`
-    -   implemented support for linting which is enabled via `useLinting` prop
-    -   `turtle` and `javascript` are currently supported languages for linting
-    -   editor is focused on load if `autoFocus` prop is set to `true`
-    -   implemented support for `disabled` state in code editor
-    -   implemented support for `intent` states in code editor
 ### Fixed

package/dist/cjs/components/ContentGroup/ContentGroup.js ADDED Viewed

@@ -0,0 +1,95 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentGroup = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const color_1 = __importDefault(require("color"));
+const constants_1 = require("../../configuration/constants");
+const index_1 = require("../index");
+/**
+ * Manage display of a grouped content section.
+ * Add info, actions and context annotations by using its properties.
+ * Can be nested into each other.
+ */
+const ContentGroup = (_a) => {
+    var _b;
+    var { children, className = "", title, contextInfo, annotation, actionOptions, isCollapsed = false, textToggleCollapse, handlerToggleCollapse, borderMainConnection = false, borderSubConnection = false, level = 1, minimumHeadlineLevel = 3, whitespaceSize = "small", style, stickyHeaderProps, description, hideGroupDivider, contentProps } = _a, otherContentWrapperProps = __rest(_a, ["children", "className", "title", "contextInfo", "annotation", "actionOptions", "isCollapsed", "textToggleCollapse", "handlerToggleCollapse", "borderMainConnection", "borderSubConnection", "level", "minimumHeadlineLevel", "whitespaceSize", "style", "stickyHeaderProps", "description", "hideGroupDivider", "contentProps"]);
+    const displayHeader = title || handlerToggleCollapse;
+    let borderGradient = undefined;
+    if (typeof borderSubConnection === "object") {
+        const borderColors = Array.isArray(borderSubConnection) ? borderSubConnection : [borderSubConnection];
+        borderGradient = borderColors.reduce((acc, borderColor, index) => {
+            try {
+                const color = (0, color_1.default)(borderColor);
+                acc.push(`${color.rgb().toString()} ` +
+                    `${(index / borderColors.length) * 100}% ` +
+                    `${((index + 1) / borderColors.length) * 100}%`);
+            }
+            catch (_a) {
+                // eslint-disable-next-line no-console
+                console.warn("Received invalid background color for tag: " + borderColor);
+            }
+            return acc;
+        }, []);
+    }
+    const contextInfoElements = Array.isArray(contextInfo) ? contextInfo : [contextInfo];
+    const _c = contentProps !== null && contentProps !== void 0 ? contentProps : {}, { className: contentClassName } = _c, otherContentProps = __rest(_c, ["className"]);
+    const headerContent = displayHeader ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(index_1.SectionHeader, { className: `${constants_1.CLASSPREFIX}-contentgroup__header` },
+            react_1.default.createElement(index_1.Toolbar, null,
+                handlerToggleCollapse && (react_1.default.createElement(index_1.ToolbarSection, null,
+                    react_1.default.createElement(index_1.IconButton, { className: `${constants_1.CLASSPREFIX}-contentgroup__header__toggler`, name: isCollapsed ? "toggler-showmore" : "toggler-showless", text: textToggleCollapse !== null && textToggleCollapse !== void 0 ? textToggleCollapse : (isCollapsed ? "Show more" : "Show less"), onClick: handlerToggleCollapse }),
+                    react_1.default.createElement(index_1.Spacing, { vertical: true, size: "small" }))),
+                title && (react_1.default.createElement(index_1.ToolbarSection, { canShrink: true },
+                    react_1.default.createElement("h" +
+                        Math.min(Math.max(minimumHeadlineLevel, level + minimumHeadlineLevel), 6).toString(), {
+                        children: react_1.default.createElement(index_1.OverflowText, null, title),
+                        className: `${constants_1.CLASSPREFIX}-contentgroup__header__title`,
+                    }),
+                    description && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(index_1.Spacing, { vertical: true, size: "tiny" }),
+                        react_1.default.createElement(index_1.Tooltip, { content: description },
+                            react_1.default.createElement(index_1.Icon, { name: "item-info", small: true, className: "dmapp--text-info" })))))),
+                contextInfoElements &&
+                    ((_b = contextInfoElements[0]) === null || _b === void 0 ? void 0 : _b.props) &&
+                    Object.values(contextInfoElements[0].props).every((v) => v !== undefined) && (react_1.default.createElement(index_1.ToolbarSection, { className: `${constants_1.CLASSPREFIX}-contentgroup__header__context`, canGrow: true },
+                    react_1.default.createElement("div", { className: `${constants_1.CLASSPREFIX}-contentgroup__content ` },
+                        react_1.default.createElement(index_1.Spacing, { vertical: true, size: "tiny" }),
+                        contextInfoElements))),
+                !isCollapsed && handlerToggleCollapse && actionOptions && (react_1.default.createElement(index_1.ToolbarSection, { className: `${constants_1.CLASSPREFIX}-contentgroup__header__options` },
+                    react_1.default.createElement(index_1.Spacing, { vertical: true, size: "small" }),
+                    actionOptions)))),
+        (!isCollapsed || !handlerToggleCollapse) && (react_1.default.createElement(react_1.default.Fragment, null,
+            !hideGroupDivider && react_1.default.createElement(index_1.Divider, { addSpacing: "small" }),
+            react_1.default.createElement(index_1.Spacing, { size: whitespaceSize }))))) : (react_1.default.createElement(react_1.default.Fragment, null));
+    return (react_1.default.createElement(index_1.Section, Object.assign({ className: `${constants_1.CLASSPREFIX}-contentgroup` +
+            (className ? ` ${className}` : "") +
+            (whitespaceSize ? ` ${constants_1.CLASSPREFIX}-contentgroup--padding-${whitespaceSize}` : "") +
+            (borderMainConnection ? ` ${constants_1.CLASSPREFIX}-contentgroup--border-main` : "") +
+            (borderSubConnection ? ` ${constants_1.CLASSPREFIX}-contentgroup--border-sub` : ""), style: borderGradient
+            ? Object.assign(Object.assign({}, (style !== null && style !== void 0 ? style : {})), { [`--${constants_1.CLASSPREFIX}-color-contentgroup-border-sub`]: borderGradient.join(", ") })
+            : style }, otherContentWrapperProps),
+        headerContent && stickyHeaderProps ? (react_1.default.createElement(index_1.StickyTarget, Object.assign({}, stickyHeaderProps), headerContent)) : (headerContent),
+        (!isCollapsed || !handlerToggleCollapse) && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: `${constants_1.CLASSPREFIX}-contentgroup__content` },
+                react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(`${constants_1.CLASSPREFIX}-contentgroup__content__body`, contentClassName) }, otherContentProps), children),
+                contextInfo && !displayHeader && (react_1.default.createElement("div", { className: `${constants_1.CLASSPREFIX}-contentgroup__content__context` }, contextInfoElements)),
+                annotation && react_1.default.createElement("div", null, annotation),
+                actionOptions && !displayHeader && (react_1.default.createElement("div", { className: `${constants_1.CLASSPREFIX}-contentgroup__content__options` }, actionOptions)))))));
+};
+exports.ContentGroup = ContentGroup;
+//# sourceMappingURL=ContentGroup.js.map

package/dist/cjs/components/ContentGroup/ContentGroup.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ContentGroup.js","sourceRoot":"","sources":["../../../../src/components/ContentGroup/ContentGroup.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/index.js CHANGED Viewed

@@ -64,5 +64,6 @@ __exportStar(require("./Tooltip/Tooltip"), exports);
 __exportStar(require("./Tree/Tree"), exports);
 __exportStar(require("./Typography"), exports);
 __exportStar(require("./Workspace"), exports);
+__exportStar(require("./ContentGroup/ContentGroup"), exports);
 __exportStar(require("./interfaces"), exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B;AAC5B,gDAA8B;AAC9B,sDAAoC;AACpC,iDAA+B;AAC/B,mDAAiC;AACjC,0DAAwC;AACxC,gDAA8B;AAC9B,+CAA6B;AAC7B,kDAAgC;AAChC,yCAAuB;AACvB,sDAAoC;AACpC,mDAAiC;AACjC,wDAAsC;AACtC,2CAAyB;AACzB,mDAAiC;AACjC,yCAAuB;AACvB,yCAAuB;AACvB,8DAA4C;AAC5C,yCAAuB;AACvB,2CAAyB;AACzB,oEAAkD;AAClD,gDAA8B;AAC9B,8CAA4B;AAC5B,8CAA4B;AAC5B,yCAAuB;AACvB,4DAA0C;AAC1C,wEAAsD;AACtD,iDAA+B;AAC/B,iDAA+B;AAC/B,0DAAwC;AACxC,gDAA8B;AAC9B,sDAAoC;AACpC,4DAA0C;AAC1C,kDAAgC;AAChC,uDAAqC;AACrC,uDAAqC;AACrC,sDAAoC;AACpC,oDAAkC;AAClC,2CAAyB;AACzB,8CAA4B;AAC5B,kDAAgC;AAChC,0CAAwB;AACxB,yCAAuB;AACvB,wCAAsB;AACtB,8CAA4B;AAC5B,4CAA0B;AAC1B,oDAAkC;AAClC,8CAA4B;AAC5B,+CAA6B;AAC7B,8CAA4B;~~AAE5B~~,+CAA6B"}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B;AAC5B,gDAA8B;AAC9B,sDAAoC;AACpC,iDAA+B;AAC/B,mDAAiC;AACjC,0DAAwC;AACxC,gDAA8B;AAC9B,+CAA6B;AAC7B,kDAAgC;AAChC,yCAAuB;AACvB,sDAAoC;AACpC,mDAAiC;AACjC,wDAAsC;AACtC,2CAAyB;AACzB,mDAAiC;AACjC,yCAAuB;AACvB,yCAAuB;AACvB,8DAA4C;AAC5C,yCAAuB;AACvB,2CAAyB;AACzB,oEAAkD;AAClD,gDAA8B;AAC9B,8CAA4B;AAC5B,8CAA4B;AAC5B,yCAAuB;AACvB,4DAA0C;AAC1C,wEAAsD;AACtD,iDAA+B;AAC/B,iDAA+B;AAC/B,0DAAwC;AACxC,gDAA8B;AAC9B,sDAAoC;AACpC,4DAA0C;AAC1C,kDAAgC;AAChC,uDAAqC;AACrC,uDAAqC;AACrC,sDAAoC;AACpC,oDAAkC;AAClC,2CAAyB;AACzB,8CAA4B;AAC5B,kDAAgC;AAChC,0CAAwB;AACxB,yCAAuB;AACvB,wCAAsB;AACtB,8CAA4B;AAC5B,4CAA0B;AAC1B,oDAAkC;AAClC,8CAA4B;AAC5B,+CAA6B;AAC7B,8CAA4B;AAC5B,8DAA4C;AAE5C,+CAA6B"}

package/dist/esm/components/ContentGroup/ContentGroup.js ADDED Viewed

@@ -0,0 +1,100 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import classNames from "classnames";
+import Color from "color";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
+import { Divider, Icon, IconButton, OverflowText, Section, SectionHeader, Spacing, StickyTarget, Toolbar, ToolbarSection, Tooltip, } from "../index.js";
+/**
+ * Manage display of a grouped content section.
+ * Add info, actions and context annotations by using its properties.
+ * Can be nested into each other.
+ */
+export var ContentGroup = function (_a) {
+    var _b;
+    var _c;
+    var children = _a.children, _d = _a.className, className = _d === void 0 ? "" : _d, title = _a.title, contextInfo = _a.contextInfo, annotation = _a.annotation, actionOptions = _a.actionOptions, _e = _a.isCollapsed, isCollapsed = _e === void 0 ? false : _e, textToggleCollapse = _a.textToggleCollapse, handlerToggleCollapse = _a.handlerToggleCollapse, _f = _a.borderMainConnection, borderMainConnection = _f === void 0 ? false : _f, _g = _a.borderSubConnection, borderSubConnection = _g === void 0 ? false : _g, _h = _a.level, level = _h === void 0 ? 1 : _h, _j = _a.minimumHeadlineLevel, minimumHeadlineLevel = _j === void 0 ? 3 : _j, _k = _a.whitespaceSize, whitespaceSize = _k === void 0 ? "small" : _k, style = _a.style, stickyHeaderProps = _a.stickyHeaderProps, description = _a.description, hideGroupDivider = _a.hideGroupDivider, contentProps = _a.contentProps, otherContentWrapperProps = __rest(_a, ["children", "className", "title", "contextInfo", "annotation", "actionOptions", "isCollapsed", "textToggleCollapse", "handlerToggleCollapse", "borderMainConnection", "borderSubConnection", "level", "minimumHeadlineLevel", "whitespaceSize", "style", "stickyHeaderProps", "description", "hideGroupDivider", "contentProps"]);
+    var displayHeader = title || handlerToggleCollapse;
+    var borderGradient = undefined;
+    if (typeof borderSubConnection === "object") {
+        var borderColors_1 = Array.isArray(borderSubConnection) ? borderSubConnection : [borderSubConnection];
+        borderGradient = borderColors_1.reduce(function (acc, borderColor, index) {
+            try {
+                var color = Color(borderColor);
+                acc.push("".concat(color.rgb().toString(), " ") +
+                    "".concat((index / borderColors_1.length) * 100, "% ") +
+                    "".concat(((index + 1) / borderColors_1.length) * 100, "%"));
+            }
+            catch (_a) {
+                // eslint-disable-next-line no-console
+                console.warn("Received invalid background color for tag: " + borderColor);
+            }
+            return acc;
+        }, []);
+    }
+    var contextInfoElements = Array.isArray(contextInfo) ? contextInfo : [contextInfo];
+    var _l = contentProps !== null && contentProps !== void 0 ? contentProps : {}, contentClassName = _l.className, otherContentProps = __rest(_l, ["className"]);
+    var headerContent = displayHeader ? (React.createElement(React.Fragment, null,
+        React.createElement(SectionHeader, { className: "".concat(eccgui, "-contentgroup__header") },
+            React.createElement(Toolbar, null,
+                handlerToggleCollapse && (React.createElement(ToolbarSection, null,
+                    React.createElement(IconButton, { className: "".concat(eccgui, "-contentgroup__header__toggler"), name: isCollapsed ? "toggler-showmore" : "toggler-showless", text: textToggleCollapse !== null && textToggleCollapse !== void 0 ? textToggleCollapse : (isCollapsed ? "Show more" : "Show less"), onClick: handlerToggleCollapse }),
+                    React.createElement(Spacing, { vertical: true, size: "small" }))),
+                title && (React.createElement(ToolbarSection, { canShrink: true },
+                    React.createElement("h" +
+                        Math.min(Math.max(minimumHeadlineLevel, level + minimumHeadlineLevel), 6).toString(), {
+                        children: React.createElement(OverflowText, null, title),
+                        className: "".concat(eccgui, "-contentgroup__header__title"),
+                    }),
+                    description && (React.createElement(React.Fragment, null,
+                        React.createElement(Spacing, { vertical: true, size: "tiny" }),
+                        React.createElement(Tooltip, { content: description },
+                            React.createElement(Icon, { name: "item-info", small: true, className: "dmapp--text-info" })))))),
+                contextInfoElements &&
+                    ((_c = contextInfoElements[0]) === null || _c === void 0 ? void 0 : _c.props) &&
+                    Object.values(contextInfoElements[0].props).every(function (v) { return v !== undefined; }) && (React.createElement(ToolbarSection, { className: "".concat(eccgui, "-contentgroup__header__context"), canGrow: true },
+                    React.createElement("div", { className: "".concat(eccgui, "-contentgroup__content ") },
+                        React.createElement(Spacing, { vertical: true, size: "tiny" }),
+                        contextInfoElements))),
+                !isCollapsed && handlerToggleCollapse && actionOptions && (React.createElement(ToolbarSection, { className: "".concat(eccgui, "-contentgroup__header__options") },
+                    React.createElement(Spacing, { vertical: true, size: "small" }),
+                    actionOptions)))),
+        (!isCollapsed || !handlerToggleCollapse) && (React.createElement(React.Fragment, null,
+            !hideGroupDivider && React.createElement(Divider, { addSpacing: "small" }),
+            React.createElement(Spacing, { size: whitespaceSize }))))) : (React.createElement(React.Fragment, null));
+    return (React.createElement(Section, __assign({ className: "".concat(eccgui, "-contentgroup") +
+            (className ? " ".concat(className) : "") +
+            (whitespaceSize ? " ".concat(eccgui, "-contentgroup--padding-").concat(whitespaceSize) : "") +
+            (borderMainConnection ? " ".concat(eccgui, "-contentgroup--border-main") : "") +
+            (borderSubConnection ? " ".concat(eccgui, "-contentgroup--border-sub") : ""), style: borderGradient
+            ? __assign(__assign({}, (style !== null && style !== void 0 ? style : {})), (_b = {}, _b["--".concat(eccgui, "-color-contentgroup-border-sub")] = borderGradient.join(", "), _b))
+            : style }, otherContentWrapperProps),
+        headerContent && stickyHeaderProps ? (React.createElement(StickyTarget, __assign({}, stickyHeaderProps), headerContent)) : (headerContent),
+        (!isCollapsed || !handlerToggleCollapse) && (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "".concat(eccgui, "-contentgroup__content") },
+                React.createElement("div", __assign({ className: classNames("".concat(eccgui, "-contentgroup__content__body"), contentClassName) }, otherContentProps), children),
+                contextInfo && !displayHeader && (React.createElement("div", { className: "".concat(eccgui, "-contentgroup__content__context") }, contextInfoElements)),
+                annotation && React.createElement("div", null, annotation),
+                actionOptions && !displayHeader && (React.createElement("div", { className: "".concat(eccgui, "-contentgroup__content__options") }, actionOptions)))))));
+};
+//# sourceMappingURL=ContentGroup.js.map

package/dist/esm/components/ContentGroup/ContentGroup.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ContentGroup.js","sourceRoot":"","sources":["../../../../src/components/ContentGroup/ContentGroup.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/index.js CHANGED Viewed

@@ -48,5 +48,6 @@ export * from "./Tooltip/Tooltip.js";
 export * from "./Tree/Tree.js";
 export * from "./Typography/index.js";
 export * from "./Workspace/index.js";
+export * from "./ContentGroup/ContentGroup.js";
 export * from "./interfaces.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,mCAAmC,CAAC;AAClD,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;~~AAE5B~~,cAAc,cAAc,CAAC"}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,mCAAmC,CAAC;AAClD,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,6BAA6B,CAAC;AAE5C,cAAc,cAAc,CAAC"}

package/dist/types/components/ContentGroup/ContentGroup.d.ts ADDED Viewed

@@ -0,0 +1,78 @@
+import React from "react";
+import { TestableComponent } from "../../components/interfaces";
+import { StickyTargetProps } from "../index";
+export interface ContentGroupProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, TestableComponent {
+    /**
+     * Title of the content group.
+     */
+    title?: string;
+    /**
+     * Level of the content group.
+     */
+    level?: number;
+    /**
+     * Context information to display in the header.
+     */
+    contextInfo?: React.ReactElement | React.ReactElement[];
+    /**
+     * Annotation to display in the content.
+     */
+    annotation?: React.ReactElement | React.ReactElement[];
+    /**
+     * Action options to display in the header.
+     */
+    actionOptions?: React.ReactElement | React.ReactElement[];
+    /**
+     * Flag to collapse the content group.
+     */
+    isCollapsed?: boolean;
+    /**
+     * Text to display when the callapse button is hovered.
+     * If not set then it uses "Show more" or "Show less".
+     */
+    textToggleCollapse?: string;
+    /**
+     * Event handler to toggle the collapse state.
+     */
+    handlerToggleCollapse?: () => void;
+    /**
+     * Use a border on the left side to visually connect the whole content content group.
+     */
+    borderMainConnection?: boolean;
+    /**
+     * Use a border on the left side to visually emphase the content group.
+     * If it is set to an array of color codes then the border is multi colored.
+     */
+    borderSubConnection?: boolean | string[];
+    /**
+     * Whitespace size between header and the content.
+     */
+    whitespaceSize?: "tiny" | "small" | "medium" | "large" | "xlarge";
+    /**
+     * Title minimum headline level.
+     */
+    minimumHeadlineLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Props to pass to `StickyTarget`.
+     */
+    stickyHeaderProps?: Omit<StickyTargetProps, "children">;
+    /**
+     * Description of the content group.
+     * Added as tooltip to an info icon placed in the content group header.
+     */
+    description?: string;
+    /**
+     * Flag to hide the group divider.
+     */
+    hideGroupDivider?: boolean;
+    /**
+     * Additional props to pass to the content container.
+     */
+    contentProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+}
+/**
+ * Manage display of a grouped content section.
+ * Add info, actions and context annotations by using its properties.
+ * Can be nested into each other.
+ */
+export declare const ContentGroup: ({ children, className, title, contextInfo, annotation, actionOptions, isCollapsed, textToggleCollapse, handlerToggleCollapse, borderMainConnection, borderSubConnection, level, minimumHeadlineLevel, whitespaceSize, style, stickyHeaderProps, description, hideGroupDivider, contentProps, ...otherContentWrapperProps }: ContentGroupProps) => React.JSX.Element;

package/dist/types/components/index.d.ts CHANGED Viewed

@@ -48,4 +48,5 @@ export * from "./Tooltip/Tooltip";
 export * from "./Tree/Tree";
 export * from "./Typography";
 export * from "./Workspace";
+export * from "./ContentGroup/ContentGroup";
 export * from "./interfaces";

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "24.1.0-rc.0",
+    "version": "24.1.0-rc.1",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -78,6 +78,7 @@
         "@codemirror/lang-xml": "^6.1.0",
         "@codemirror/legacy-modes": "^6.4.2",
         "@mavrin/remark-typograf": "^2.2.0",
+        "classnames": "^2.5.1",
         "codemirror": "^6.0.1",
         "color": "^4.2.3",
         "compute-scroll-into-view": "^3.1.0",

package/src/components/ContentGroup/ContentGroup.stories.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+import { Badge, ContentGroup, HtmlContentBlock, IconButton, Tag } from "../../../index";
+export default {
+    title: "Components/ContentGroup",
+    component: ContentGroup,
+    argTypes: {
+        handlerToggleCollapse: {
+            action: "toggle collapse",
+        },
+    },
+} as Meta<typeof ContentGroup>;
+const TemplateFull: StoryFn<typeof ContentGroup> = (args) => <ContentGroup {...args} />;
+export const BasicExample = TemplateFull.bind({});
+BasicExample.args = {
+    title: "Content group title",
+    contextInfo: <Badge children={100} maxLength={3} intent={"warning"} title="Found warnings context." />,
+    annotation: (
+        <Tag backgroundColor={"purple"} round>
+            Context tag
+        </Tag>
+    ),
+    actionOptions: (
+        <>
+            <IconButton name="item-remove" text="Example remove tooltip" disruptive />
+        </>
+    ),
+    isCollapsed: false,
+    handlerToggleCollapse: () => {},
+    borderMainConnection: true,
+    borderSubConnection: ["red", "blue"],
+    level: 1,
+    minimumHeadlineLevel: 5,
+    whitespaceSize: "small",
+    description: "More context description by tooltip.",
+    hideGroupDivider: false,
+    children: (
+        <HtmlContentBlock>
+            <LoremIpsum p={3} avgSentencesPerParagraph={4} random={false} />
+        </HtmlContentBlock>
+    ),
+};

package/src/components/ContentGroup/ContentGroup.tsx ADDED Viewed

@@ -0,0 +1,256 @@
+import React from "react";
+import classNames from "classnames";
+import Color from "color";
+import { TestableComponent } from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {
+    Divider,
+    Icon,
+    IconButton,
+    OverflowText,
+    Section,
+    SectionHeader,
+    Spacing,
+    StickyTarget,
+    StickyTargetProps,
+    Toolbar,
+    ToolbarSection,
+    Tooltip,
+} from "../index";
+export interface ContentGroupProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, TestableComponent {
+    /**
+     * Title of the content group.
+     */
+    title?: string;
+    /**
+     * Level of the content group.
+     */
+    level?: number;
+    /**
+     * Context information to display in the header.
+     */
+    contextInfo?: React.ReactElement | React.ReactElement[];
+    /**
+     * Annotation to display in the content.
+     */
+    annotation?: React.ReactElement | React.ReactElement[];
+    /**
+     * Action options to display in the header.
+     */
+    actionOptions?: React.ReactElement | React.ReactElement[];
+    /**
+     * Flag to collapse the content group.
+     */
+    isCollapsed?: boolean;
+    /**
+     * Text to display when the callapse button is hovered.
+     * If not set then it uses "Show more" or "Show less".
+     */
+    textToggleCollapse?: string;
+    /**
+     * Event handler to toggle the collapse state.
+     */
+    handlerToggleCollapse?: () => void;
+    /**
+     * Use a border on the left side to visually connect the whole content content group.
+     */
+    borderMainConnection?: boolean;
+    /**
+     * Use a border on the left side to visually emphase the content group.
+     * If it is set to an array of color codes then the border is multi colored.
+     */
+    borderSubConnection?: boolean | string[];
+    /**
+     * Whitespace size between header and the content.
+     */
+    whitespaceSize?: "tiny" | "small" | "medium" | "large" | "xlarge";
+    /**
+     * Title minimum headline level.
+     */
+    minimumHeadlineLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Props to pass to `StickyTarget`.
+     */
+    stickyHeaderProps?: Omit<StickyTargetProps, "children">;
+    /**
+     * Description of the content group.
+     * Added as tooltip to an info icon placed in the content group header.
+     */
+    description?: string;
+    /**
+     * Flag to hide the group divider.
+     */
+    hideGroupDivider?: boolean;
+    /**
+     * Additional props to pass to the content container.
+     */
+    contentProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+}
+/**
+ * Manage display of a grouped content section.
+ * Add info, actions and context annotations by using its properties.
+ * Can be nested into each other.
+ */
+export const ContentGroup = ({
+    children,
+    className = "",
+    title,
+    contextInfo,
+    annotation,
+    actionOptions,
+    isCollapsed = false,
+    textToggleCollapse,
+    handlerToggleCollapse,
+    borderMainConnection = false,
+    borderSubConnection = false,
+    level = 1,
+    minimumHeadlineLevel = 3,
+    whitespaceSize = "small",
+    style,
+    stickyHeaderProps,
+    description,
+    hideGroupDivider,
+    contentProps,
+    ...otherContentWrapperProps
+}: ContentGroupProps) => {
+    const displayHeader = title || handlerToggleCollapse;
+    let borderGradient: string[] | undefined = undefined;
+    if (typeof borderSubConnection === "object") {
+        const borderColors: string[] = Array.isArray(borderSubConnection) ? borderSubConnection : [borderSubConnection];
+        borderGradient = borderColors.reduce((acc: string[], borderColor: string, index: number): string[] => {
+            try {
+                const color = Color(borderColor);
+                acc.push(
+                    `${color.rgb().toString()} ` +
+                        `${(index / borderColors.length) * 100}% ` +
+                        `${((index + 1) / borderColors.length) * 100}%`
+                );
+            } catch {
+                // eslint-disable-next-line no-console
+                console.warn("Received invalid background color for tag: " + borderColor);
+            }
+            return acc;
+        }, []);
+    }
+    const contextInfoElements = Array.isArray(contextInfo) ? contextInfo : [contextInfo];
+    const { className: contentClassName, ...otherContentProps } = contentProps ?? {};
+    const headerContent = displayHeader ? (
+        <>
+            <SectionHeader className={`${eccgui}-contentgroup__header`}>
+                <Toolbar>
+                    {handlerToggleCollapse && (
+                        <ToolbarSection>
+                            <IconButton
+                                className={`${eccgui}-contentgroup__header__toggler`}
+                                name={isCollapsed ? "toggler-showmore" : "toggler-showless"}
+                                text={textToggleCollapse ?? (isCollapsed ? "Show more" : "Show less")}
+                                onClick={handlerToggleCollapse}
+                            />
+                            <Spacing vertical size="small" />
+                        </ToolbarSection>
+                    )}
+                    {title && (
+                        <ToolbarSection canShrink>
+                            {React.createElement(
+                                "h" +
+                                    Math.min(
+                                        Math.max(minimumHeadlineLevel, level + minimumHeadlineLevel),
+                                        6
+                                    ).toString(),
+                                {
+                                    children: <OverflowText>{title}</OverflowText>,
+                                    className: `${eccgui}-contentgroup__header__title`,
+                                }
+                            )}
+                            {description && (
+                                <>
+                                    <Spacing vertical size="tiny" />
+                                    <Tooltip content={description}>
+                                        <Icon name="item-info" small className="dmapp--text-info" />
+                                    </Tooltip>
+                                </>
+                            )}
+                        </ToolbarSection>
+                    )}
+                    {contextInfoElements &&
+                        contextInfoElements[0]?.props &&
+                        Object.values(contextInfoElements[0].props).every((v) => v !== undefined) && (
+                            <ToolbarSection className={`${eccgui}-contentgroup__header__context`} canGrow>
+                                <div className={`${eccgui}-contentgroup__content `}>
+                                    <Spacing vertical size="tiny" />
+                                    {contextInfoElements}
+                                </div>
+                            </ToolbarSection>
+                        )}
+                    {!isCollapsed && handlerToggleCollapse && actionOptions && (
+                        <ToolbarSection className={`${eccgui}-contentgroup__header__options`}>
+                            <Spacing vertical size="small" />
+                            {actionOptions}
+                        </ToolbarSection>
+                    )}
+                </Toolbar>
+            </SectionHeader>
+            {(!isCollapsed || !handlerToggleCollapse) && (
+                <>
+                    {!hideGroupDivider && <Divider addSpacing="small" />}
+                    <Spacing size={whitespaceSize} />
+                </>
+            )}
+        </>
+    ) : (
+        <></>
+    );
+    return (
+        <Section
+            className={
+                `${eccgui}-contentgroup` +
+                (className ? ` ${className}` : "") +
+                (whitespaceSize ? ` ${eccgui}-contentgroup--padding-${whitespaceSize}` : "") +
+                (borderMainConnection ? ` ${eccgui}-contentgroup--border-main` : "") +
+                (borderSubConnection ? ` ${eccgui}-contentgroup--border-sub` : "")
+            }
+            style={
+                borderGradient
+                    ? ({
+                          ...(style ?? {}),
+                          [`--${eccgui}-color-contentgroup-border-sub`]: borderGradient.join(", "),
+                      } as React.CSSProperties)
+                    : style
+            }
+            {...otherContentWrapperProps}
+        >
+            {headerContent && stickyHeaderProps ? (
+                <StickyTarget {...stickyHeaderProps}>{headerContent}</StickyTarget>
+            ) : (
+                headerContent
+            )}
+            {(!isCollapsed || !handlerToggleCollapse) && (
+                <>
+                    <div className={`${eccgui}-contentgroup__content`}>
+                        <div
+                            className={classNames(`${eccgui}-contentgroup__content__body`, contentClassName)}
+                            {...otherContentProps}
+                        >
+                            {children}
+                        </div>
+                        {contextInfo && !displayHeader && (
+                            <div className={`${eccgui}-contentgroup__content__context`}>{contextInfoElements}</div>
+                        )}
+                        {annotation && <div>{annotation}</div>}
+                        {actionOptions && !displayHeader && (
+                            <div className={`${eccgui}-contentgroup__content__options`}>{actionOptions}</div>
+                        )}
+                    </div>
+                </>
+            )}
+        </Section>
+    );
+};

package/src/components/ContentGroup/_contentgroup.scss ADDED Viewed

@@ -0,0 +1,56 @@
+$eccgui-color-scontentgroup-border-main: rgba($eccgui-color-workspace-text, $eccgui-opacity-muted) !default;
+$eccgui-color-scontentgroup-border-sub: rgba($eccgui-color-workspace-text, $eccgui-opacity-disabled) !default;
+.#{$eccgui}-contentgroup {
+    --#{$eccgui}-color-contentgroup-border-main: #{$eccgui-color-scontentgroup-border-main};
+    --#{$eccgui}-color-contentgroup-border-sub: #{$eccgui-color-scontentgroup-border-sub};
+}
+.#{$eccgui}-contentgroup--border-main {
+    border-left: 0.25 * $eccgui-size-block-whitespace solid
+        var(--#{$eccgui}-color-contentgroup-border-main, #{$eccgui-color-scontentgroup-border-main});
+    &.#{$eccgui}-contentgroup--padding-small {
+        padding-left: 0.5 * $eccgui-size-block-whitespace;
+    }
+}
+.#{$eccgui}-contentgroup--border-sub {
+    position: relative;
+    border-right: 0.25 * $eccgui-size-block-whitespace solid transparent;
+    &::after {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 100%;
+        width: 0.25 * $eccgui-size-block-whitespace;
+        content: " ";
+        background-color: var(--#{$eccgui}-color-contentgroup-border-sub, #{$eccgui-color-scontentgroup-border-sub});
+        background-image: linear-gradient(to bottom, var(--#{$eccgui}-color-contentgroup-border-sub));
+    }
+    &.#{$eccgui}-contentgroup--padding-small {
+        padding-right: 0.5 * $eccgui-size-block-whitespace;
+    }
+}
+.#{$eccgui}-contentgroup--padding-small {
+    + .#{$eccgui}-contentgroup {
+        margin-top: 0.5 * $eccgui-size-block-whitespace;
+    }
+    > .#{$eccgui}-contentgroup__content {
+        column-gap: 0.5 * $eccgui-size-block-whitespace;
+    }
+}
+.#{$eccgui}-contentgroup__content {
+    display: flex;
+}
+.#{$eccgui}-contentgroup__content__body {
+    flex-grow: 1;
+    flex-shrink: 1;
+    width: 100%;
+}

package/src/components/index.scss CHANGED Viewed

@@ -41,3 +41,4 @@
 @import "./Badge/badge";
 @import "./PropertyValuePair/propertyvalue";
 @import "./MultiSuggestField/multisuggestfield";
+@import "./ContentGroup/contentgroup";

package/src/components/index.ts CHANGED Viewed

@@ -48,5 +48,6 @@ export * from "./Tooltip/Tooltip";
 export * from "./Tree/Tree";
 export * from "./Typography";
 export * from "./Workspace";
+export * from "./ContentGroup/ContentGroup";
 export * from "./interfaces";