@widergy/energy-ui 3.94.0 → 3.95.0

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 (7) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/components/UTDataCategory/README.md +100 -12
  3. package/dist/components/UTDataCategory/index.js +7 -5
  4. package/dist/components/UTDataElement/index.js +8 -8
  5. package/dist/components/UTDataElement/styles.module.scss +4 -2
  6. package/dist/utils/classesUtils.js +17 -1
  7. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [3.95.0](https://github.com/widergy/energy-ui/compare/v3.94.1...v3.95.0) (2025-07-29)
2
+
3
+
4
+ ### Features
5
+
6
+ * data category expanded ([#652](https://github.com/widergy/energy-ui/issues/652)) ([b25684c](https://github.com/widergy/energy-ui/commit/b25684c36bc99988ea321d8f4d9517b53bba41c3))
7
+
8
+ ## [3.94.1](https://github.com/widergy/energy-ui/compare/v3.94.0...v3.94.1) (2025-07-29)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * [SFPE-434] data element merge multiple classess ([#651](https://github.com/widergy/energy-ui/issues/651)) ([79052a9](https://github.com/widergy/energy-ui/commit/79052a993e67e9e671d2b23f2b9222b779b2d5fb))
14
+
1
15
  # [3.94.0](https://github.com/widergy/energy-ui/compare/v3.93.0...v3.94.0) (2025-07-29)
2
16
 
3
17
 
package/dist/components/UTDataCategory/README.md CHANGED
@@ -1,19 +1,107 @@
1
1
  # UTDataCategory
2
2
 
3
- UTDataCategory component
3
+ A collapsible container component that displays a list of data elements with an optional title and collapse functionality.
4
4
 
5
5
  ## Props
6
6
 
7
- | Name | Type | Default | Description |
8
- | ------------- | ------ | ------- | ------------------------------------------------------------ |
9
- | area | bool | `false` | Specifies whether the component has an area. |
10
- | collapsable | bool | `true` | Specifies if the data list is collapsable |
11
- | elements | array | | Array of items to be rendered as UTDataElement |
12
- | classNames | object | | Custom style for the component. |
13
- | title | string | | Title text displayed in the component. |
14
- | titleProps | object | | Additional props for customizing the title. |
15
- | elementsProps | object | {} | Additional props for customizing elements that apply to all. |
7
+ | Name | Type | Default | Description |
8
+ | ------------- | ------ | ------- | ---------------------------------------------------------------------------------- |
9
+ | area | bool | `false` | When true, applies background color and padding to create an area-like appearance. |
10
+ | areaProps | object | | Additional props for customizing the area styling (colorTheme, shade). |
11
+ | classes | object | | Theme-based styling classes. |
12
+ | classNames | object | | Custom CSS class names for styling the component. |
13
+ | collapsable | bool | `true` | Specifies if the data list is collapsible. |
14
+ | dataTestId | string | | Test ID for testing purposes. |
15
+ | elements | array | `[]` | Array of objects to be rendered as UTDataElement components. |
16
+ | elementsProps | object | `{}` | Additional props that apply to all UTDataElement components. |
17
+ | expanded | bool | `false` | Controls the initial expanded state of the component. |
18
+ | style | object | | Inline styles for the component. |
19
+ | title | string | | Title text displayed in the component header. |
20
+ | titleProps | object | | Additional props for customizing the title UTLabel component. |
16
21
 
17
- ### colapsable
22
+ ## Behavior
18
23
 
19
- The component is only collapsable if it has a title
24
+ - **Collapsible**: The component is only collapsible if it has a `title` and `collapsable` is `true`
25
+ - **Initial State**: The component starts collapsed by default unless `expanded` is `true`
26
+ - **Area Styling**: When `area` is `true`, the component gets background color and padding
27
+ - **Smooth Transitions**: Collapse/expand animations use CSS transitions for smooth UX
28
+
29
+ ## Elements Array
30
+
31
+ Each element in the `elements` array should be an object that will be passed as props to a `UTDataElement` component. Common props include:
32
+
33
+ - `title`: The main text label
34
+ - `Data`: The data content (can be string, component, or JSX)
35
+ - `Icon`: Icon name or component
36
+ - `badge`: Badge content
37
+ - `action`: Action button configuration
38
+ - `children`: Collapsible children content
39
+ - `orientation`: 'horizontal' or 'vertical' layout
40
+ - `paddingVertical`: 'small' or 'medium' padding
41
+ - `spacing`: 'small' or 'medium' spacing
42
+
43
+ ## Examples
44
+
45
+ ### Basic Usage
46
+
47
+ ```jsx
48
+ import UTDataCategory from '@energy/ui/UTDataCategory';
49
+
50
+ const dataElements = [
51
+ {
52
+ title: 'Name',
53
+ Data: 'John Doe',
54
+ Icon: 'IconUser'
55
+ },
56
+ {
57
+ title: 'Email',
58
+ Data: 'john.doe@example.com',
59
+ Icon: 'IconMail'
60
+ }
61
+ ];
62
+
63
+ <UTDataCategory title="User Information" elements={dataElements} />;
64
+ ```
65
+
66
+ ### With Area Styling
67
+
68
+ ```jsx
69
+ <UTDataCategory
70
+ title="Account Details"
71
+ elements={dataElements}
72
+ area={true}
73
+ areaProps={{
74
+ colorTheme: 'light',
75
+ shade: '03'
76
+ }}
77
+ />
78
+ ```
79
+
80
+ ### Custom Styling
81
+
82
+ ```jsx
83
+ <UTDataCategory
84
+ title="Custom Styled"
85
+ elements={dataElements}
86
+ classNames={{
87
+ container: 'custom-container',
88
+ element: 'custom-element'
89
+ }}
90
+ titleProps={{
91
+ weight: 'bold',
92
+ colorTheme: 'primary'
93
+ }}
94
+ />
95
+ ```
96
+
97
+ ### Non-collapsible
98
+
99
+ ```jsx
100
+ <UTDataCategory title="Always Visible" elements={dataElements} collapsable={false} />
101
+ ```
102
+
103
+ ### Initially Expanded
104
+
105
+ ```jsx
106
+ <UTDataCategory title="Pre-expanded" elements={dataElements} expanded={true} />
107
+ ```
package/dist/components/UTDataCategory/index.js CHANGED
@@ -29,12 +29,13 @@ const UTDataCategory = _ref => {
29
29
  dataTestId,
30
30
  elements = [],
31
31
  elementsProps = {},
32
+ expanded = false,
32
33
  title,
33
34
  titleProps
34
35
  } = _ref;
35
36
  const showTitle = !!title;
36
37
  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(theme, classNames), [classNames, theme]);
37
- const [isCollapsed, setIsCollapsed] = (0, _react.useState)(showTitle && collapsable);
38
+ const [isCollapsed, setIsCollapsed] = (0, _react.useState)(showTitle && collapsable && !expanded);
38
39
  const childrenRef = (0, _react.useRef)(null);
39
40
  const toggleCollapsed = () => setIsCollapsed(!isCollapsed);
40
41
  const containerClasses = "".concat(_stylesModule.default.container, " ").concat(classes.container || '', " ").concat(area ? classes.area : '');
@@ -79,14 +80,15 @@ const UTDataCategory = _ref => {
79
80
  UTDataCategory.propTypes = {
80
81
  area: _propTypes.bool,
81
82
  areaProps: _propTypes.object,
83
+ classes: (0, _propTypes.objectOf)(_propTypes.string),
84
+ classNames: (0, _propTypes.objectOf)(_propTypes.string),
82
85
  collapsable: _propTypes.bool,
86
+ dataTestId: _propTypes.string,
83
87
  elements: _propTypes.array,
84
88
  elementsProps: _propTypes.object,
89
+ expanded: _propTypes.bool,
85
90
  style: _propTypes.object,
86
91
  title: _propTypes.string,
87
- titleProps: _propTypes.object,
88
- classes: (0, _propTypes.objectOf)(_propTypes.string),
89
- classNames: (0, _propTypes.objectOf)(_propTypes.string),
90
- dataTestId: _propTypes.string
92
+ titleProps: _propTypes.object
91
93
  };
92
94
  var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTDataCategory);
package/dist/components/UTDataElement/index.js CHANGED
@@ -50,7 +50,7 @@ const UTDataElement = _ref => {
50
50
  title,
51
51
  titleProps = {}
52
52
  } = _ref;
53
- const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(theme, classNames), [classNames, theme]);
53
+ const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeMultipleClassNames)(_stylesModule.default, theme, classNames), [classNames, theme]);
54
54
  const [isCollapsed, setIsCollapsed] = (0, _react.useState)(true);
55
55
  const [childrenHeight, setChildrenHeight] = (0, _react.useState)(0);
56
56
  const childrenRef = (0, _react.useRef)(null);
@@ -64,11 +64,11 @@ const UTDataElement = _ref => {
64
64
  const IconComponent = (0, _componentUtils.isUTIcon)(Icon) ? _UTIcon.default : Icon;
65
65
  const DataComponent = (0, _componentUtils.isUTLabel)(Data) ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, dataProps, Data) : Data;
66
66
  const showBadge = forceShowBadge || (0, _isString.default)(badge) && !(0, _isEmpty.default)(badge) || (0, _isFinite.default)(badge);
67
- const contentClasses = "".concat(_stylesModule.default.content, " ").concat(_stylesModule.default["spacing".concat((0, _componentUtils.capitalize)(spacing))]);
68
- const infoClasses = "".concat(_stylesModule.default.info, " ").concat(orientation === _constants.ORIENTATION.VERTICAL && _stylesModule.default.vertical);
69
- const iconCollapseButtonClasses = "".concat(_stylesModule.default.iconCollapseButton, " ").concat(isCollapsed && _stylesModule.default.collapsed);
67
+ const contentClasses = "".concat(classes.content, " ").concat(_stylesModule.default["spacing".concat((0, _componentUtils.capitalize)(spacing))]);
68
+ const infoClasses = "".concat(classes.info, " ").concat(orientation === _constants.ORIENTATION.VERTICAL && classes.vertical);
69
+ const iconCollapseButtonClasses = "".concat(classes.iconCollapseButton, " ").concat(isCollapsed && classes.collapsed);
70
70
  return /*#__PURE__*/_react.default.createElement("div", {
71
- className: "".concat(_stylesModule.default.container, " ").concat(classes.container, " ").concat(area ? classes.area : '', " ").concat(_stylesModule.default["padding".concat((0, _componentUtils.capitalize)(paddingVertical))]),
71
+ className: "".concat(classes.container, " ").concat(area ? classes.area : '', " ").concat(classes["padding".concat((0, _componentUtils.capitalize)(paddingVertical))]),
72
72
  "data-testid": dataTestId ? "".concat(dataTestId, ".").concat(dataElement.container) : undefined
73
73
  }, /*#__PURE__*/_react.default.createElement("div", {
74
74
  className: contentClasses
@@ -78,14 +78,14 @@ const UTDataElement = _ref => {
78
78
  }, iconProps)), /*#__PURE__*/_react.default.createElement("div", {
79
79
  className: infoClasses
80
80
  }, (prefix || title || showBadge) && /*#__PURE__*/_react.default.createElement("div", {
81
- className: _stylesModule.default.topInfo
81
+ className: classes.topInfo
82
82
  }, prefix && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
83
83
  colorTheme: "gray"
84
84
  }, prefixProps), prefix), title && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
85
85
  colorTheme: "gray"
86
86
  }, titleProps), title), showBadge && /*#__PURE__*/_react.default.createElement(_UTBadge.default, _extends({
87
87
  colorTheme: "accent",
88
- className: _stylesModule.default.badge
88
+ className: classes.badge
89
89
  }, badgeProps), forceShowBadge ? null : badge)), DataComponent && DataComponent), action && /*#__PURE__*/_react.default.createElement(_MainAction.default, _extends({
90
90
  dataTestId: dataTestId
91
91
  }, action)), children && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
@@ -102,7 +102,7 @@ const UTDataElement = _ref => {
102
102
  maxHeight: isCollapsed ? 0 : childrenHeight,
103
103
  marginTop: isCollapsed ? 0 : 16
104
104
  },
105
- className: _stylesModule.default.children
105
+ className: classes.children
106
106
  }, /*#__PURE__*/_react.default.createElement("div", {
107
107
  ref: childrenRef
108
108
  }, children)));
package/dist/components/UTDataElement/styles.module.scss CHANGED
@@ -4,11 +4,13 @@
4
4
  }
5
5
 
6
6
  .paddingSmall {
7
- padding: 8px 0;
7
+ padding-bottom: 8px;
8
+ padding-top: 8px;
8
9
  }
9
10
 
10
11
  .paddingMedium {
11
- padding: 16px 0;
12
+ padding-bottom: 16px;
13
+ padding-top: 16px;
12
14
  }
13
15
 
14
16
  .content {
package/dist/utils/classesUtils.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.withImportant = exports.resolveCssValue = exports.mergeClasses = void 0;
6
+ exports.withImportant = exports.resolveCssValue = exports.mergeMultipleClassNames = exports.mergeClasses = void 0;
7
7
  const mergeClasses = (themeClasses, classNames) => {
8
8
  if (!classNames) return themeClasses;
9
9
  const classes = {};
@@ -14,6 +14,22 @@ const mergeClasses = (themeClasses, classNames) => {
14
14
  return classes;
15
15
  };
16
16
  exports.mergeClasses = mergeClasses;
17
+ const mergeMultipleClassNames = function () {
18
+ for (var _len = arguments.length, classSources = new Array(_len), _key = 0; _key < _len; _key++) {
19
+ classSources[_key] = arguments[_key];
20
+ }
21
+ const classes = {};
22
+ const allKeysClassNames = new Set();
23
+ classSources.forEach(source => {
24
+ if (source) Object.keys(source).forEach(key => allKeysClassNames.add(key));
25
+ });
26
+ allKeysClassNames.forEach(key => {
27
+ const mergedClass = classSources.map(source => (source === null || source === void 0 ? void 0 : source[key]) || '').join(' ').trim();
28
+ if (mergedClass) classes[key] = mergedClass;
29
+ });
30
+ return classes;
31
+ };
32
+ exports.mergeMultipleClassNames = mergeMultipleClassNames;
17
33
  const withImportant = style => style && "".concat(style, " !important");
18
34
  exports.withImportant = withImportant;
19
35
  const resolveCssValue = value => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@widergy/energy-ui",
3
- "version": "3.94.0",
3
+ "version": "3.95.0",
4
4
  "description": "Widergy Web Components",
5
5
  "author": "widergy",
6
6
  "license": "MIT",