@widergy/energy-ui 3.87.2 → 3.89.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.89.0](https://github.com/widergy/energy-ui/compare/v3.88.0...v3.89.0) (2025-07-16)
+
+
+### Features
+
+* [SFPE-404] add UTDataCategory ([#635](https://github.com/widergy/energy-ui/issues/635)) ([52ce4c6](https://github.com/widergy/energy-ui/commit/52ce4c6eeeb4fa29b9236473c1173e18da3248a6))
+
+# [3.88.0](https://github.com/widergy/energy-ui/compare/v3.87.2...v3.88.0) (2025-07-15)
+
+
+### Features
+
+* [SFPE-405] UTDataElement ([#633](https://github.com/widergy/energy-ui/issues/633)) ([5c9084b](https://github.com/widergy/energy-ui/commit/5c9084bff7986202a8a0bece3af8021e8cf57aaa))
+
 ## [3.87.2](https://github.com/widergy/energy-ui/compare/v3.87.1...v3.87.2) (2025-07-15)
 
 

package/dist/components/UTDataCategory/README.md

@@ -0,0 +1,19 @@
+# UTDataCategory
+
+UTDataCategory component
+
+## Props
+
+| Name          | Type   | Default | Description                                                  |
+| ------------- | ------ | ------- | ------------------------------------------------------------ |
+| area          | bool   | `false` | Specifies whether the component has an area.                 |
+| collapsable   | bool   | `true`  | Specifies if the data list is collapsable                    |
+| elements      | array  |         | Array of items to be rendered as UTDataElement               |
+| classNames    | object |         | Custom style for the component.                              |
+| title         | string |         | Title text displayed in the component.                       |
+| titleProps    | object |         | Additional props for customizing the title.                  |
+| elementsProps | object | {}      | Additional props for customizing elements that apply to all. |
+
+### colapsable
+
+The component is only collapsable if it has a title

package/dist/components/UTDataCategory/index.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireWildcard(require("react"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _UTDataElement = _interopRequireDefault(require("../UTDataElement"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _classesUtils = require("../../utils/classesUtils");
+var _testIds = require("../../constants/testIds");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _theme = require("./theme");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const {
+  dataCategory
+} = _testIds.TEST_IDS;
+const UTDataCategory = _ref => {
+  let {
+    area,
+    classes: theme,
+    classNames,
+    collapsable = true,
+    dataTestId,
+    elements = [],
+    elementsProps = {},
+    title,
+    titleProps
+  } = _ref;
+  const showTitle = !!title;
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(theme, classNames), [classNames, theme]);
+  const [isCollapsed, setIsCollapsed] = (0, _react.useState)(showTitle && collapsable);
+  const childrenRef = (0, _react.useRef)(null);
+  const toggleCollapsed = () => setIsCollapsed(!isCollapsed);
+  const containerClasses = "".concat(_stylesModule.default.container, " ").concat(classes.container || '', " ").concat(area ? classes.area : '');
+  const collapseButtonClasses = "".concat(_stylesModule.default.collapseButton, " ").concat(isCollapsed ? _stylesModule.default.collapsed : '');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: containerClasses,
+    "data-testid": dataTestId ? "".concat(dataTestId, ".").concat(dataCategory.container) : undefined
+  }, title && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.title
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    colorTheme: "gray",
+    weight: "medium"
+  }, titleProps), title), collapsable && /*#__PURE__*/_react.default.createElement("div", {
+    className: collapseButtonClasses
+  }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    Icon: "IconChevronUp",
+    variant: "text",
+    onClick: toggleCollapsed,
+    size: "small",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataCategory.collapseButton) : undefined
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      gridTemplateRows: isCollapsed ? '0fr' : '1fr',
+      marginTop: isCollapsed || !showTitle ? 0 : 16
+    },
+    className: _stylesModule.default.children
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: childrenRef,
+    className: _stylesModule.default.childrenContent
+  }, elements.map((element, index) => {
+    const {
+      key,
+      ...dataElementProps
+    } = element;
+    return /*#__PURE__*/_react.default.createElement(_UTDataElement.default, _extends({
+      key: key || index,
+      dataTestId: dataTestId ? "".concat(dataTestId, ".dataElement.").concat(index) : "".concat(dataCategory.dataElement, ".").concat(index),
+      classNames: classes.element
+    }, elementsProps, dataElementProps));
+  }))));
+};
+UTDataCategory.propTypes = {
+  area: _propTypes.bool,
+  areaProps: _propTypes.object,
+  collapsable: _propTypes.bool,
+  elements: _propTypes.array,
+  elementsProps: _propTypes.object,
+  style: _propTypes.object,
+  title: _propTypes.string,
+  titleProps: _propTypes.object,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  dataTestId: _propTypes.string
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTDataCategory);

package/dist/components/UTDataCategory/styles.module.scss

@@ -0,0 +1,30 @@
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 8px;
+  width: 100%;
+}
+
+.collapseButton {
+  transition: transform 0.3s ease-in-out;
+
+  &.collapsed {
+    transform: rotate(180deg);
+  }
+}
+
+.children {
+  display: grid;
+  transition: grid-template-rows 0.3s ease-in-out, margin-top 0.3s ease-in-out;
+}
+
+.childrenContent {
+  overflow: hidden;
+  min-height: 0;
+}

package/dist/components/UTDataCategory/theme.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = exports.backgroundColor = void 0;
+var _Palette = require("../../constants/Palette");
+const backgroundColor = function (theme, area) {
+  var _theme$Palette;
+  let areaProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const colorTheme = areaProps.colorTheme || _Palette.COLOR_THEMES.light;
+  const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
+  const areaColor = actionPaletteColors[colorTheme];
+  const shade = areaProps.shade || (_Palette.COLOR_THEMES.light === colorTheme ? '03' : '01');
+  return {
+    backgroundColor: area ? areaColor[shade] : 'transparent'
+  };
+};
+exports.backgroundColor = backgroundColor;
+const retrieveStyle = _ref => {
+  let {
+    area,
+    theme,
+    areaProps
+  } = _ref;
+  const areaBackgroundColor = backgroundColor(theme, area, areaProps);
+  return {
+    area: {
+      ...areaBackgroundColor,
+      padding: 16,
+      borderRadius: 8
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTDataElement/README.md

@@ -0,0 +1,136 @@
+# UTDataElement
+
+A versatile data component that can be customized with various themes, sizes, icons, data elements, and actions. It supports both horizontal and vertical layouts, collapsible content, and different types of actions including buttons and switches.
+
+## Props
+
+| Name            | Type              | Default      | Description                                                        |
+| --------------- | ----------------- | ------------ | ------------------------------------------------------------------ |
+| action          | object            |              | Action configuration for button or switch. See Action Types below. |
+| area            | bool              | `false`      | Specifies whether the component has a background area.             |
+| badge           | string \| number  |              | Displays a badge with text or number.                              |
+| badgeProps      | object            | `{}`         | Additional props for customizing the badge.                        |
+| children        | element           |              | Collapsible content displayed below the main component.            |
+| classes         | objectOf(string)  |              | Theme classes for styling.                                         |
+| classNames      | objectOf(string)  |              | Additional class names for custom styling.                         |
+| Data            | element \| string |              | Data content to display (can be a React element or string).        |
+| dataProps       | object            | `{}`         | Additional props for configuring the data element.                 |
+| forceShowBadge  | bool              | `false`      | Forces the badge to be displayed even when empty.                  |
+| Icon            | element \| string |              | Icon to display (can be a UTIcon name or custom React element).    |
+| iconProps       | object            | `{}`         | Additional props for the icon element.                             |
+| orientation     | string            | `horizontal` | Defines the layout orientation.                                    |
+| paddingVertical | string            | `medium`     | Vertical padding applied to the component.                         |
+| prefix          | string            |              | Text or symbol displayed before the title.                         |
+| prefixProps     | object            | `{}`         | Additional props for customizing the prefix.                       |
+| spacing         | string            | `medium`     | Defines the spacing between elements.                              |
+| title           | string            |              | Title text displayed in the component.                             |
+| titleProps      | object            | `{}`         | Additional props for customizing the title.                        |
+
+## Action Types
+
+The `action` prop supports two types of actions:
+
+### Button Action
+
+```javascript
+{
+  type: 'button',
+  onClick: () => console.log('Button clicked'),
+  Icon: 'IconEdit',
+  // ... other UTButton props
+}
+```
+
+### Switch Action
+
+```javascript
+{
+  type: 'switch',
+  onChange: (value) => console.log('Switch toggled:', value),
+  value: true,
+  // ... other UTSwitch props
+}
+```
+
+## Orientation
+
+The value of `orientation` must be one of the following:
+
+- `horizontal` - Elements are arranged in a row
+- `vertical` - Elements are arranged in a column
+
+## Padding & Spacing
+
+The values of `paddingVertical` and `spacing` must be one of the following:
+
+- `small` - 8px spacing/padding
+- `medium` - 16px spacing/padding
+
+## Collapsible Content
+
+If the component has any `children`, it will automatically become collapsible with a chevron button to expand/collapse the content.
+
+## Examples
+
+### Basic Usage
+
+```javascript
+<UTDataElement title="User Information" Data="John Doe" Icon="IconUser" />
+```
+
+### With Action and Badge
+
+```javascript
+<UTDataElement
+  title="Status"
+  Data="Active"
+  badge="New"
+  action={{
+    type: 'button',
+    onClick: () => console.log('Edit clicked'),
+    Icon: 'IconEdit'
+  }}
+/>
+```
+
+### With Switch Action
+
+```javascript
+<UTDataElement
+  title="Notifications"
+  Data="Email notifications enabled"
+  action={{
+    type: 'switch',
+    onChange: value => setNotifications(value),
+    value: notificationsEnabled
+  }}
+/>
+```
+
+### With Collapsible Content
+
+```javascript
+<UTDataElement title="Details" Data="Click to expand" Icon="IconInfo">
+  <UTLabel>Additional information here</UTLabel>
+  <UTIcon name="IconBeach" colorTheme="success" />
+</UTDataElement>
+```
+
+### With Custom Data Component
+
+```javascript
+<UTDataElement
+  title="Status"
+  Data={
+    <UTStatus variant="information" Icon="IconPlanet">
+      Online
+    </UTStatus>
+  }
+/>
+```
+
+### With Area Background
+
+```javascript
+<UTDataElement area title="Highlighted Item" Data="Important information" Icon="IconStar" />
+```

package/dist/components/UTDataElement/components/MainAction/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _testIds = require("../../../../constants/testIds");
+var _UTSwitch = _interopRequireDefault(require("../../../UTSwitch"));
+var _UTButton = _interopRequireDefault(require("../../../UTButton"));
+var _constants = require("../../constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const {
+  dataElement
+} = _testIds.TEST_IDS;
+const MainAction = _ref => {
+  let {
+    type = _constants.ACTION_TYPE.BUTTON,
+    onChange,
+    value,
+    onClick,
+    dataTestId,
+    id,
+    ...props
+  } = _ref;
+  return type === _constants.ACTION_TYPE.SWITCH && onChange ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container
+  }, /*#__PURE__*/_react.default.createElement(_UTSwitch.default, _extends({
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataElement.switchAction) : undefined,
+    input: {
+      onChange,
+      value
+    },
+    field: {
+      key: "".concat(id)
+    }
+  }, props, {
+    classNames: {
+      container: _stylesModule.default.switchContainer,
+      slider: _stylesModule.default.slider,
+      sliderContainer: _stylesModule.default.sliderContainer,
+      sliderHover: _stylesModule.default.sliderHover
+    }
+  }))) : type === _constants.ACTION_TYPE.BUTTON && onClick ? /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataElement.buttonAction) : undefined,
+    variant: "text",
+    onClick: onClick
+  }, props)) : null;
+};
+MainAction.propTypes = {
+  dataTestId: _propTypes.string,
+  id: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number]),
+  onChange: _propTypes.func,
+  onClick: _propTypes.func,
+  type: (0, _propTypes.oneOf)(Object.values(_constants.ACTION_TYPE)),
+  value: _propTypes.bool
+};
+var _default = exports.default = MainAction;

package/dist/components/UTDataElement/components/MainAction/styles.module.scss

@@ -0,0 +1,23 @@
+.container {
+  display: flex;
+  width: 41px;
+}
+
+.switchContainer {
+  height: 20px !important;
+  width: 40px !important;
+
+  & input:checked ~ .sliderContainer > {
+    .slider {
+      transform: translateX(20px) !important;
+    }
+  }
+}
+
+.slider {
+  margin-left: -20px !important;
+}
+
+.sliderHover {
+  display: none;
+}

package/dist/components/UTDataElement/constants.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SPACING = exports.PADDING = exports.ORIENTATION = exports.ACTION_TYPE = void 0;
+const ORIENTATION = exports.ORIENTATION = {
+  HORIZONTAL: 'horizontal',
+  VERTICAL: 'vertical'
+};
+const PADDING = exports.PADDING = {
+  SMALL: 'small',
+  MEDIUM: 'medium'
+};
+const SPACING = exports.SPACING = {
+  SMALL: 'small',
+  MEDIUM: 'medium'
+};
+const ACTION_TYPE = exports.ACTION_TYPE = {
+  SWITCH: 'switch',
+  BUTTON: 'button'
+};

package/dist/components/UTDataElement/index.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireWildcard(require("react"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _isString = _interopRequireDefault(require("lodash/isString"));
+var _isFinite = _interopRequireDefault(require("lodash/isFinite"));
+var _UTBadge = _interopRequireDefault(require("../UTBadge"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _UTIcon = _interopRequireDefault(require("../UTIcon"));
+var _componentUtils = require("../../utils/componentUtils");
+var _classesUtils = require("../../utils/classesUtils");
+var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _testIds = require("../../constants/testIds");
+var _theme = require("./theme");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _constants = require("./constants");
+var _MainAction = _interopRequireDefault(require("./components/MainAction"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const {
+  dataElement
+} = _testIds.TEST_IDS;
+const UTDataElement = _ref => {
+  let {
+    action,
+    area,
+    badge,
+    badgeProps = {},
+    children,
+    classes: theme,
+    classNames,
+    Data,
+    dataProps = {},
+    dataTestId,
+    forceShowBadge = false,
+    Icon,
+    iconProps = {},
+    orientation = _constants.ORIENTATION.HORIZONTAL,
+    paddingVertical = _constants.PADDING.MEDIUM,
+    prefix,
+    prefixProps = {},
+    spacing = _constants.SPACING.MEDIUM,
+    title,
+    titleProps = {}
+  } = _ref;
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(theme, classNames), [classNames, theme]);
+  const [isCollapsed, setIsCollapsed] = (0, _react.useState)(true);
+  const [childrenHeight, setChildrenHeight] = (0, _react.useState)(0);
+  const childrenRef = (0, _react.useRef)(null);
+  const toggleCollapsed = (0, _react.useCallback)(() => setIsCollapsed(!isCollapsed), [isCollapsed]);
+  (0, _react.useEffect)(() => {
+    if (childrenRef.current) {
+      const rect = childrenRef.current.getBoundingClientRect();
+      setChildrenHeight(rect.height);
+    }
+  }, [children]);
+  const IconComponent = (0, _componentUtils.isUTIcon)(Icon) ? _UTIcon.default : Icon;
+  const DataComponent = (0, _componentUtils.isUTLabel)(Data) ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, dataProps, Data) : Data;
+  const showBadge = forceShowBadge || (0, _isString.default)(badge) && !(0, _isEmpty.default)(badge) || (0, _isFinite.default)(badge);
+  const contentClasses = "".concat(_stylesModule.default.content, " ").concat(_stylesModule.default["spacing".concat((0, _componentUtils.capitalize)(spacing))]);
+  const infoClasses = "".concat(_stylesModule.default.info, " ").concat(orientation === _constants.ORIENTATION.VERTICAL && _stylesModule.default.vertical);
+  const iconCollapseButtonClasses = "".concat(_stylesModule.default.iconCollapseButton, " ").concat(isCollapsed && _stylesModule.default.collapsed);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.container, " ").concat(classes.container, " ").concat(area ? classes.area : '', " ").concat(_stylesModule.default["padding".concat((0, _componentUtils.capitalize)(paddingVertical))]),
+    "data-testid": dataTestId ? "".concat(dataTestId, ".").concat(dataElement.container) : undefined
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: contentClasses
+  }, IconComponent && /*#__PURE__*/_react.default.createElement(IconComponent, _extends({
+    name: Icon,
+    colorTheme: "gray"
+  }, iconProps)), /*#__PURE__*/_react.default.createElement("div", {
+    className: infoClasses
+  }, (prefix || title || showBadge) && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.topInfo
+  }, prefix && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    colorTheme: "gray"
+  }, prefixProps), prefix), title && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    colorTheme: "gray"
+  }, titleProps), title), showBadge && /*#__PURE__*/_react.default.createElement(_UTBadge.default, _extends({
+    colorTheme: "accent",
+    className: _stylesModule.default.badge
+  }, badgeProps), forceShowBadge ? null : badge)), DataComponent && DataComponent), action && /*#__PURE__*/_react.default.createElement(_MainAction.default, _extends({
+    dataTestId: dataTestId
+  }, action)), children && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      icon: iconCollapseButtonClasses
+    },
+    Icon: "IconChevronUp",
+    onClick: toggleCollapsed,
+    size: "small",
+    variant: "text",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataElement.collapseButton) : undefined
+  })), children && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      maxHeight: isCollapsed ? 0 : childrenHeight,
+      marginTop: isCollapsed ? 0 : 16
+    },
+    className: _stylesModule.default.children
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: childrenRef
+  }, children)));
+};
+UTDataElement.propTypes = {
+  action: _propTypes.object,
+  area: _propTypes.bool,
+  badge: _propTypes.string,
+  badgeProps: _propTypes.object,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  Data: (0, _propTypes.oneOfType)([_propTypes.element, _propTypes.string]),
+  dataProps: _propTypes.object,
+  dataTestId: _propTypes.string,
+  forceShowBadge: _propTypes.bool,
+  Icon: (0, _propTypes.oneOfType)([_propTypes.element, _propTypes.string]),
+  iconProps: _propTypes.object,
+  orientation: _propTypes.string,
+  paddingVertical: _propTypes.string,
+  prefix: _propTypes.string,
+  prefixProps: _propTypes.object,
+  spacing: _propTypes.string,
+  title: _propTypes.string,
+  titleProps: _propTypes.object
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTDataElement);

package/dist/components/UTDataElement/styles.module.scss

@@ -0,0 +1,65 @@
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.paddingSmall {
+  padding: 8px 0;
+}
+
+.paddingMedium {
+  padding: 16px 0;
+}
+
+.content {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+
+.spacingSmall {
+  grid-gap: 8px;
+}
+
+.spacingMedium {
+  grid-gap: 16px;
+}
+
+.info {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 8px;
+  justify-content: space-between;
+  flex: 1;
+}
+
+.vertical {
+  flex-direction: column;
+}
+
+.topInfo {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  grid-gap: 8px;
+}
+
+.iconCollapseButton {
+  transition: transform 0.3s ease-in-out;
+
+  &.collapsed {
+    transform: rotate(180deg);
+  }
+}
+
+.children {
+  overflow: hidden;
+  transition:
+    max-height 0.3s ease,
+    margin-top 0.3s ease;
+}
+
+.badge {
+  width: fit-content !important;
+}

package/dist/components/UTDataElement/theme.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = exports.backgroundColor = void 0;
+var _Palette = require("../../constants/Palette");
+const backgroundColor = (theme, area) => {
+  var _theme$Palette;
+  const colorTheme = _Palette.COLOR_THEMES.light;
+  const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
+  const areaColor = actionPaletteColors[colorTheme];
+  return {
+    backgroundColor: area ? areaColor['03'] : 'transparent'
+  };
+};
+exports.backgroundColor = backgroundColor;
+const retrieveStyle = _ref => {
+  let {
+    area,
+    theme
+  } = _ref;
+  const areaBackgroundColor = backgroundColor(theme, area);
+  return {
+    area: {
+      ...areaBackgroundColor,
+      paddingLeft: 16,
+      paddingRight: 16,
+      borderRadius: 8
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTLabel/README.md

@@ -7,7 +7,7 @@ Component used for displaying text values and markdown.
 
 | Name              | Type   | Default                                  | Description                                                                                                                                                                                                                 |
 | ------------------- | -------- | ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| align             | string | 'left'                                   | Alignment of the text content. Accepts values like 'left', 'center', 'right', or 'justify'.                                                                                                                                 |
+| align             | string |                                    | Alignment of the text content. Accepts values like 'left', 'center', 'right', or 'justify'.                                                                                                                                 |
 | className         | string |                                          | Additional classes.                                                                                                                                                                                                         |
 | classes           | string |                                          | Classes returned by UTLabel's own[theme](./theme.js#L40) `retrieveStyle`.                                                                                                                                                   |
 | colorTheme        | string | 'primary'                                | Color theme to style the UTLabel. Has to be defined in the proyect theme.[Example](#colortheme).                                                                                                                            |

package/dist/constants/testIds.js

@@ -17,7 +17,9 @@ const ID_CONSTANTS = exports.ID_CONSTANTS = {
   STATUS_MESSAGE: 'statusMessage',
   TABLE: 'table',
   TABLE_ROW: 'tableRow',
-  WORKFLOW_CONTAINER: 'workflowContainer'
+  WORKFLOW_CONTAINER: 'workflowContainer',
+  DATA_CATEGORY: 'dataCategory',
+  DATA_ELEMENT: 'dataElement'
 };
 const TEST_IDS = exports.TEST_IDS = {
   barChart: {
@@ -38,6 +40,17 @@ const TEST_IDS = exports.TEST_IDS = {
     expires: "".concat(ID_CONSTANTS.CREDIT_CARD, ".expires"),
     nameField: "".concat(ID_CONSTANTS.CREDIT_CARD, ".nameField")
   },
+  dataCategory: {
+    container: "".concat(ID_CONSTANTS.DATA_CATEGORY, ".container"),
+    collapseButton: "".concat(ID_CONSTANTS.DATA_CATEGORY, ".collapseButton"),
+    dataElement: "".concat(ID_CONSTANTS.DATA_CATEGORY, ".dataElement")
+  },
+  dataElement: {
+    container: "".concat(ID_CONSTANTS.DATA_ELEMENT, ".container"),
+    collapseButton: "".concat(ID_CONSTANTS.DATA_ELEMENT, ".collapseButton"),
+    switchAction: "".concat(ID_CONSTANTS.DATA_ELEMENT, ".actionSwitch"),
+    buttonAction: "".concat(ID_CONSTANTS.DATA_ELEMENT, ".actionButton")
+  },
   dialog: {
     acceptButton: "".concat(ID_CONSTANTS.DIALOG, ".acceptButton"),
     cancelButton: "".concat(ID_CONSTANTS.DIALOG, ".cancelButton"),

package/dist/utils/componentUtils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.valueExists = exports.isUTIcon = exports.getDefaultColorShade = exports.default = exports.capitalize = void 0;
+exports.valueExists = exports.isUTLabel = exports.isUTIcon = exports.getDefaultColorShade = exports.default = exports.capitalize = void 0;
 var _Palette = require("../constants/Palette");
 const A_CHAR_CODE = 65;
 const Z_CHAR_CODE = 90;
@@ -19,6 +19,8 @@ const getAvatarColors = (userName, colors) => {
 const getFirstLetter = userName => (userName === null || userName === void 0 ? void 0 : userName.trim().slice(0, 1).toUpperCase()) || 'A';
 const isUTIcon = icon => typeof icon === 'string';
 exports.isUTIcon = isUTIcon;
+const isUTLabel = label => typeof label === 'string' || typeof label === 'number';
+exports.isUTLabel = isUTLabel;
 const getDefaultColorShade = colorTheme => colorTheme === _Palette.COLOR_THEMES.gray ? _Palette.COLOR_SHADES.shade04 : colorTheme === _Palette.COLOR_THEMES.light ? _Palette.COLOR_SHADES.shade01 : _Palette.COLOR_SHADES.shade05;
 exports.getDefaultColorShade = getDefaultColorShade;
 const valueExists = value => value !== undefined && value !== null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.87.2",
+  "version": "3.89.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",