@widergy/energy-ui 3.71.0 → 3.72.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.72.0](https://github.com/widergy/energy-ui/compare/v3.71.1...v3.72.0) (2025-05-05)
+
+
+### Features
+
+* [AUT-642 multi flow new ids] ([#611](https://github.com/widergy/energy-ui/issues/611)) ([6788952](https://github.com/widergy/energy-ui/commit/67889520f150a60a346f5660878dc914b7e77f7a))
+
+## [3.71.1](https://github.com/widergy/energy-ui/compare/v3.71.0...v3.71.1) (2025-05-05)
+
+
+### Bug Fixes
+
+* visual fixes on chart legends ([#612](https://github.com/widergy/energy-ui/issues/612)) ([657129a](https://github.com/widergy/energy-ui/commit/657129a7a743dcc27953de2056e1d15adde2ec51))
+
 # [3.71.0](https://github.com/widergy/energy-ui/compare/v3.70.0...v3.71.0) (2025-05-05)
 
 

package/dist/components/UTActionCard/components/AdditionalMessage/index.js

@@ -15,6 +15,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 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 AdditionalMessage = _ref => {
   let {
+    dataTestId,
     icon,
     iconProps = {},
     labelProps = {},
@@ -22,19 +23,23 @@ const AdditionalMessage = _ref => {
     size
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.additionalMessageContainer, " ").concat(_stylesModule.default[size])
+    className: "".concat(_stylesModule.default.additionalMessageContainer, " ").concat(_stylesModule.default[size]),
+    "data-testid": dataTestId
   }, icon && /*#__PURE__*/_react.default.createElement(_UTIcon.default, _extends({
     area: true,
     colorTheme: "gray",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".icon") : undefined,
     name: icon,
     size: 16
   }, iconProps)), /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
     colorTheme: "gray",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".message") : undefined,
     variant: "small",
     withMarkdown: true
   }, labelProps), message));
 };
 AdditionalMessage.propTypes = {
+  dataTestId: _propTypes.string,
   icon: _propTypes.string,
   iconProps: (0, _propTypes.shape)({
     colorTheme: _propTypes.string,

package/dist/components/UTActionCard/components/Header/index.js

@@ -28,6 +28,7 @@ const Header = _ref => {
     size,
     status,
     statusAlignment,
+    statusDataTestId,
     statusLabel,
     title,
     titleProps
@@ -45,6 +46,7 @@ const Header = _ref => {
     colorTheme: "gray"
   }, descriptionProps), description))), status ? /*#__PURE__*/_react.default.createElement(_UTStatus.default, _extends({
     className: "".concat(_stylesModule.default["placeSelf-".concat(statusAlignment)]),
+    labelDataTestId: statusDataTestId,
     type: "light"
   }, (0, _utils.statusPropsMapper)(status)), statusLabel || status) : null, !(0, _array.isEmpty)(headerActions) && /*#__PURE__*/_react.default.createElement(_HeaderActions.default, {
     headerActions,
@@ -84,6 +86,7 @@ Header.propTypes = {
   size: (0, _propTypes.oneOf)([_constants.SIZES.MEDIUM, _constants.SIZES.SMALL]),
   status: _propTypes.string,
   statusAlignment: (0, _propTypes.oneOf)([_constants.PLACE_SELF_TYPES.CENTER, _constants.PLACE_SELF_TYPES.END, _constants.PLACE_SELF_TYPES.START]),
+  statusDataTestId: _propTypes.string,
   statusLabel: _propTypes.string,
   title: _propTypes.string,
   titleProps: (0, _propTypes.shape)({

package/dist/components/UTActionCard/index.js

@@ -37,18 +37,26 @@ const UTActionCard = _ref => {
     status,
     statusAlignment,
     statusLabel,
+    testIds = {},
     title,
     titleProps = {},
     withBodyPadding = true
   } = _ref;
   const [mainActionHoverVisible, setMainActionHoverVisible] = (0, _react.useState)(true);
+  const {
+    backgroundDataTestId,
+    containerDataTestId,
+    statusDataTestId
+  } = testIds;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.cardContainer, " ").concat(classNames.container)
   }, /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
     className: "".concat(_stylesModule.default.innerContainer, " ").concat(classNames.innerContainer, " ").concat(!mainAction ? _stylesModule.default.withoutMainAction : "".concat(_stylesModule.default.withMainAction, " ").concat(mainActionHoverVisible && "".concat(_stylesModule.default.mainActionHover, " ").concat(classNames.mainActionHover))),
+    dataTestId: containerDataTestId,
     onClick: () => mainAction === null || mainAction === void 0 ? void 0 : mainAction()
   }, BackgroundImage && /*#__PURE__*/_react.default.createElement(BackgroundImage, {
-    className: "".concat(_stylesModule.default.backgroundImage, " ").concat(classNames.backgroundImage)
+    className: "".concat(_stylesModule.default.backgroundImage, " ").concat(classNames.backgroundImage),
+    "data-testid": backgroundDataTestId
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.headerAndChildrenContainer, " ").concat(classNames.headerAndChildrenContainer)
   }, /*#__PURE__*/_react.default.createElement(_Header.default, {
@@ -63,6 +71,7 @@ const UTActionCard = _ref => {
     size,
     status,
     statusAlignment,
+    statusDataTestId,
     statusLabel,
     title,
     titleProps
@@ -132,6 +141,11 @@ UTActionCard.propTypes = {
   status: _propTypes.string,
   statusLabel: _propTypes.string,
   statusAlignment: (0, _propTypes.oneOf)([_constants.PLACE_SELF_TYPES.CENTER, _constants.PLACE_SELF_TYPES.END, _constants.PLACE_SELF_TYPES.START]),
+  testIds: (0, _propTypes.shape)({
+    backgroundDataTestId: _propTypes.string,
+    containerDataTestId: _propTypes.string,
+    statusDataTestId: _propTypes.string
+  }),
   title: _propTypes.string,
   titleProps: (0, _propTypes.shape)({
     variant: _propTypes.string,

package/dist/components/UTBarChart/components/Bars/components/Bar/index.js

@@ -8,10 +8,14 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _UTTooltip = _interopRequireDefault(require("../../../../../UTTooltip"));
 var _types = require("../../../../types");
+var _testIds = require("../../../../../../constants/testIds");
 var _Rect = _interopRequireDefault(require("./components/Rect"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 var _constants = require("./constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  barTooltipId
+} = _testIds.COMPONENT_IDS.barChartIds;
 const Bar = _ref => {
   let {
     width,
@@ -32,10 +36,11 @@ const Bar = _ref => {
     transitionDuration
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+    className: tooltipClassName,
     content: tooltipContent,
+    dataTestId: "".concat(barTooltipId).concat(id),
     interactive: false,
-    stringContentClassName: _stylesModule.default.tooltip,
-    className: tooltipClassName
+    stringContentClassName: _stylesModule.default.tooltip
   }, /*#__PURE__*/_react.default.createElement("g", {
     className: "".concat(clickable && _stylesModule.default.clickable, " ").concat(_stylesModule.default.rect),
     onClick: clickable ? () => onClick(index, data) : _constants.NO_OP

package/dist/components/UTBarChart/components/Legend/constants.js

@@ -3,21 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.displayOptions = exports.MODAL_KEY = exports.BLOCK_KEY = void 0;
-var _reactPerfectScrollbar = _interopRequireDefault(require("react-perfect-scrollbar"));
-var _UTDialog = _interopRequireDefault(require("../../../UTDialog"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+exports.MODAL_KEY = exports.BLOCK_KEY = void 0;
 const BLOCK_KEY = exports.BLOCK_KEY = 'block';
-const MODAL_KEY = exports.MODAL_KEY = 'modal';
-const options = {
-  [BLOCK_KEY]: {
-    Component: _reactPerfectScrollbar.default,
-    withButton: false
-  },
-  [MODAL_KEY]: {
-    Component: _UTDialog.default,
-    withButton: true
-  }
-};
-const displayOptions = displayAs => options[displayAs] || options[BLOCK_KEY];
-exports.displayOptions = displayOptions;
+const MODAL_KEY = exports.MODAL_KEY = 'modal';

package/dist/components/UTBarChart/components/Legend/index.js

@@ -44,10 +44,6 @@ const Legend = _ref => {
     linear: flatLinearData = [],
     levels = []
   } = flatData || {};
-  const {
-    Component: Wrapper,
-    withButton
-  } = (0, _constants.displayOptions)(displayAs);
   const getReferencesToShow = () => {
     let referencesToShow = new Set();
     flatBarData.forEach(item => barReferences.forEach(_ref2 => {
@@ -97,23 +93,11 @@ const Legend = _ref => {
   };
   const referencesToShow = getReferencesToShow(flatData);
   const hasReferences = !(0, _array.isEmpty)(referencesToShow);
-  const wrapperProps = displayAs === _constants.MODAL_KEY ? {
-    acceptButton: {
-      onClick: () => setShowLegend(false),
-      text: referencesModalButton || ''
-    },
-    isOpen: showLegend,
-    onRequestClose: () => setShowLegend(false),
-    title: referencesModalTitle,
-    withCloseButton: true
-  } : {
-    className: _stylesModule.default.scrollbar
-  };
   return /*#__PURE__*/_react.default.createElement("div", {
     style: style
   }, title && /*#__PURE__*/_react.default.createElement(_.UTLabel, {
     className: "".concat(_stylesModule.default.title, " ").concat(classes.title)
-  }, title), withButton && /*#__PURE__*/_react.default.createElement(_.UTButton, _extends({
+  }, title), displayAs === _constants.MODAL_KEY ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_.UTButton, _extends({
     classNames: {
       icon: classes.showLegendIcon,
       root: "".concat(_stylesModule.default.button, " ").concat(classes.showLegendButton),
@@ -122,14 +106,25 @@ const Legend = _ref => {
     disabled: !hasReferences,
     Icon: _InfoOutlined.default,
     onClick: () => setShowLegend(true)
-  }, buttonProps), showReferencesLabel), /*#__PURE__*/_react.default.createElement(Wrapper, wrapperProps, referencesToShow.map(row => /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default["row".concat(displayAs)]
-  }, row.map(item => referenceRenderer(item))))));
+  }, buttonProps), showReferencesLabel), /*#__PURE__*/_react.default.createElement(_.UTDialog, {
+    acceptButton: {
+      onClick: () => setShowLegend(false),
+      text: referencesModalButton || ''
+    },
+    isOpen: showLegend,
+    onRequestClose: () => setShowLegend(false),
+    title: referencesModalTitle,
+    withCloseButton: true
+  }, referencesToShow.map(row => /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.rowmodal
+  }, row.map(item => referenceRenderer(item)))))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.referencesContainer
+  }, referencesToShow.map(row => row.map(item => referenceRenderer(item)))));
 };
 Legend.propTypes = {
   buttonProps: _types.buttonPropsTypes,
   classes: _commonTypes.classesType,
-  displayAs: _propTypes.string,
+  displayAs: (0, _propTypes.oneOf)([_constants.BLOCK_KEY, _constants.MODAL_KEY]),
   flatData: (0, _propTypes.shape)({
     bar: (0, _propTypes.arrayOf)(_types.barType),
     linear: (0, _propTypes.arrayOf)(_types.linearType),

package/dist/components/UTBarChart/components/Legend/styles.module.scss

@@ -3,17 +3,16 @@
   width: fit-content;
 }
 
-.scrollbar {
+.referencesContainer {
+  align-items: center;
   display: flex;
+  flex-wrap: wrap;
+  grid-gap: 16px;
 }
 
 .itemblock {
   align-items: center;
   display: flex;
-
-  & + div {
-    margin-left: 16px;
-  }
 }
 
 .itemmodal {
@@ -21,7 +20,7 @@
   display: flex;
 
   & + div {
-    margin-top: 15px;
+    margin-top: 16px;
   }
 }
 
@@ -29,21 +28,12 @@
   white-space: nowrap;
 }
 
-.rowblock {
-  align-items: center;
-  display: flex;
-
-  & + div {
-    margin-left: 15px;
-  }
-}
-
 .rowmodal {
   display: flex;
   flex-direction: column;
 
   & + div {
-    margin-top: 15px;
+    margin-top: 16px;
   }
 }
 

package/dist/components/UTBarChart/components/XAxis/components/AxisElement/index.js

@@ -11,28 +11,31 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 const AxisElement = _ref => {
   var _textRef$getBoundingC, _textRef$getBoundingC2, _textRef$getBoundingC3, _textRef$getBoundingC4, _textRef$getBoundingC5;
   let {
-    x,
-    graphYStart,
+    barRef,
+    circle,
     className,
+    color,
+    graphYStart,
+    labelBackgroundPadding,
+    labelYOffset,
     mainLabel,
+    mainLabelDataTestId,
     mainLabelStyles,
     secondaryLabel,
-    color,
-    yOffset,
-    labelYOffset,
-    circle,
-    square,
+    secondaryLabelDataTestId,
     selected,
     selectedLabelBackground,
-    labelBackgroundPadding,
-    barRef
+    square,
+    x,
+    yOffset
   } = _ref;
   const y = graphYStart + yOffset;
   const [textRef, setTextRef] = (0, _react.useState)();
   return /*#__PURE__*/_react.default.createElement("g", null, secondaryLabel && /*#__PURE__*/_react.default.createElement("text", {
     className: className,
-    textAnchor: "middle",
+    "data-testid": secondaryLabelDataTestId,
     fill: color,
+    textAnchor: "middle",
     x: x,
     y: y
   }, secondaryLabel), mainLabel && /*#__PURE__*/_react.default.createElement("g", null, circle && /*#__PURE__*/_react.default.createElement("circle", _extends({
@@ -60,32 +63,35 @@ const AxisElement = _ref => {
     fill: selectedLabelBackground,
     rx: "14"
   }), /*#__PURE__*/_react.default.createElement("text", _extends({
-    ref: el => setTextRef(el),
     className: className,
-    textAnchor: "middle",
+    "data-testid": mainLabelDataTestId,
     fill: color,
+    ref: el => setTextRef(el),
+    textAnchor: "middle",
     x: x,
     y: y + yOffset + labelYOffset
   }, mainLabelStyles), mainLabel)));
 };
 AxisElement.propTypes = {
-  secondaryLabel: _propTypes.string,
-  mainLabel: _propTypes.string,
-  mainLabelStyles: _propTypes.object,
-  x: _propTypes.number,
-  graphYStart: _propTypes.number,
-  yOffset: _propTypes.number,
-  labelYOffset: _propTypes.number,
+  barRef: _propTypes.object,
+  borderSelector: _propTypes.object,
+  circle: _propTypes.object,
   className: _propTypes.string,
   color: _propTypes.string,
   graphYEnd: _propTypes.number,
+  graphYStart: _propTypes.number,
   isActive: _propTypes.bool,
-  circle: _propTypes.object,
-  borderSelector: _propTypes.object,
-  square: _propTypes.object,
+  labelBackgroundPadding: _propTypes.number,
+  labelYOffset: _propTypes.number,
+  mainLabel: _propTypes.string,
+  mainLabelDataTestId: _propTypes.string,
+  mainLabelStyles: _propTypes.object,
+  secondaryLabel: _propTypes.string,
+  secondaryLabelDataTestId: _propTypes.string,
   selected: _propTypes.bool,
   selectedLabelBackground: _propTypes.string,
-  labelBackgroundPadding: _propTypes.number,
-  barRef: _propTypes.object
+  square: _propTypes.object,
+  x: _propTypes.number,
+  yOffset: _propTypes.number
 };
 var _default = exports.default = AxisElement;

package/dist/components/UTBarChart/components/XAxis/index.js

@@ -7,13 +7,18 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
 var _utils = require("../../utils");
-var _commonTypes = require("../../../../types/commonTypes");
 var _types = require("../../types");
+var _commonTypes = require("../../../../types/commonTypes");
+var _testIds = require("../../../../constants/testIds");
 var _AxisElement = _interopRequireDefault(require("./components/AxisElement"));
 var _Decoration = _interopRequireDefault(require("./components/Decoration"));
 var _constants = require("./constants");
 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); }
+const {
+  xAxisSecondaryLabelId,
+  xAxisMainLabelId
+} = _testIds.COMPONENT_IDS.barChartIds;
 const XAxis = _ref => {
   let {
     data,
@@ -73,21 +78,22 @@ const XAxis = _ref => {
     } = _ref2;
     const selected = index === currentLabel;
     return /*#__PURE__*/_react.default.createElement(_AxisElement.default, {
-      className: "".concat(classes.xAxisMainLabel, " ").concat(selected && classes.xAxisSelectedLabel),
+      barRef: barRef,
       barWidth: barWidth,
-      mainLabel: mainLabel,
-      mainLabelStyles: mainLabelStyles,
+      circle: circle,
+      className: "".concat(classes.xAxisMainLabel, " ").concat(selected && classes.xAxisSelectedLabel),
       color: color || '',
-      x: fullSizeBars ? graphXEnd / 2 + customXOffset : xAxis(index) + xOffset,
       graphYStart: graphYStart,
-      yOffset: _constants.Y_OFFSET,
+      labelBackgroundPadding: labelBackgroundPadding,
       labelYOffset: labelYOffset,
-      circle: circle,
-      square: square,
+      mainLabel: mainLabel,
+      mainLabelDataTestId: "".concat(xAxisMainLabelId).concat(index),
+      mainLabelStyles: mainLabelStyles,
       selected: selected,
       selectedLabelBackground: selectedLabelBackground,
-      labelBackgroundPadding: labelBackgroundPadding,
-      barRef: barRef
+      square: square,
+      x: fullSizeBars ? graphXEnd / 2 + customXOffset : xAxis(index) + xOffset,
+      yOffset: _constants.Y_OFFSET
     });
   })), /*#__PURE__*/_react.default.createElement("g", null, xAxisDefinition.map((_ref3, index) => {
     let {
@@ -95,12 +101,13 @@ const XAxis = _ref => {
       color
     } = _ref3;
     return /*#__PURE__*/_react.default.createElement(_AxisElement.default, {
-      className: classes.xAxisSecondaryLabel,
       barWidth: barWidth,
-      secondaryLabel: secondaryLabel,
+      className: classes.xAxisSecondaryLabel,
       color: color || '',
-      x: xAxis(index) + xOffset,
       graphYStart: graphYStart,
+      secondaryLabel: secondaryLabel,
+      secondaryLabelDataTestId: "".concat(xAxisSecondaryLabelId).concat(index),
+      x: xAxis(index) + xOffset,
       yOffset: _constants.Y_OFFSET
     });
   })))), /*#__PURE__*/_react.default.createElement("g", null, formattedDecorators.map(decoration => /*#__PURE__*/_react.default.createElement(_Decoration.default, {

package/dist/components/UTCreditCard/index.js

@@ -95,6 +95,7 @@ const UTCreditCard = _ref => {
     onFocus: () => setFocused(_constants.fields.NUMBER),
     required: true,
     title: numberTitle,
+    validationDataTestId: "".concat(cardFieldId, ".validation"),
     value: values[cardField],
     version: "V1"
   }), /*#__PURE__*/_react.default.createElement("div", {
@@ -109,6 +110,7 @@ const UTCreditCard = _ref => {
     onFocus: () => setFocused(_constants.fields.EXPIRY),
     required: true,
     title: expiryTitle,
+    validationDataTestId: "".concat(expiresId, ".validation"),
     value: values[expires],
     version: "V1"
   }), /*#__PURE__*/_react.default.createElement(_UTPasswordField.default, {
@@ -122,6 +124,7 @@ const UTCreditCard = _ref => {
     title: cvcTitle,
     required: true,
     onFocus: () => setFocused(_constants.fields.CVC),
+    validationDataTestId: "".concat(cvcFieldId, ".validation"),
     value: values[cvcField],
     version: "V1"
   })), /*#__PURE__*/_react.default.createElement(_UTTextInput.default, {
@@ -131,6 +134,7 @@ const UTCreditCard = _ref => {
     required: true,
     onFocus: () => setFocused(_constants.fields.NAME),
     title: nameTitle,
+    validationDataTestId: "".concat(nameFieldId, ".validation"),
     value: values[nameFiled],
     version: "V1"
   })));

package/dist/constants/testIds.js

@@ -17,6 +17,11 @@ const STATUS_MESSAGE = exports.STATUS_MESSAGE = 'statusMessage';
 const TABLE = exports.TABLE = 'table';
 const TABLE_ROW = exports.TABLE_ROW = 'tableRow';
 const COMPONENT_IDS = exports.COMPONENT_IDS = {
+  barChartIds: {
+    xAxisSecondaryLabelId: 'barChart.xAxis.secondaryLabel.',
+    xAxisMainLabelId: 'barChart.xAxis.mainLabel.',
+    barTooltipId: 'barChart.bar.tooltip.'
+  },
   breadcrumbsIds: {
     buttonId: 'breadcrumbs.item'
   },

package/package.json

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