@widergy/energy-ui 3.67.1 → 3.68.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.68.0](https://github.com/widergy/energy-ui/compare/v3.67.2...v3.68.0) (2025-03-26)
+
+
+### Features
+
+* [UGENSA-1520] added customrow to checklist v1 ([#592](https://github.com/widergy/energy-ui/issues/592)) ([1823fb2](https://github.com/widergy/energy-ui/commit/1823fb20ea2c9f9a2e0179c890519a22bf4e15e5))
+
+## [3.67.2](https://github.com/widergy/energy-ui/compare/v3.67.1...v3.67.2) (2025-03-25)
+
+
+### Bug Fixes
+
+* [UGC-1195] checkbox error status ([#590](https://github.com/widergy/energy-ui/issues/590)) ([897e62f](https://github.com/widergy/energy-ui/commit/897e62f243d560fe15216b1afe39b219b5b5b082))
+
 ## [3.67.1](https://github.com/widergy/energy-ui/compare/v3.67.0...v3.67.1) (2025-03-25)
 
 

package/dist/components/UTCheckList/versions/V1/README.MD

@@ -10,6 +10,7 @@
 | ----------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
 | actions           | object           |         | Actions to render within `UTFieldLabel`.                                                                                                         |
 | classNames        | objectOf(string) |         | Custom class names to apply to different elements of the checklist (`root`, `header`, `checkboxesContainer`, `item`, `selectAll`).               |
+| CustomRow         | elementType      |         | Custom component to render data of every checkbox                                                                                                |
 | disabled          | bool             | false   | Disables all checkboxes in the checklist when true.                                                                                              |
 |                   |
 | error             | string           |         | Error message to display.                                                                                                                        |

package/dist/components/UTCheckList/versions/V1/index.js

@@ -23,6 +23,7 @@ const UTCheckList = _ref => {
   let {
     actions,
     classNames = {},
+    CustomRow,
     dataTestId,
     disabled,
     error,
@@ -125,6 +126,10 @@ const UTCheckList = _ref => {
       weight: "medium"
     }, category.toUpperCase()), categoryOptions.map((item, index) => /*#__PURE__*/_react.default.createElement(_UTCheckbox.default, {
       classNames: classNames.item,
+      CustomComponent: CustomRow ? /*#__PURE__*/_react.default.createElement(CustomRow, {
+        item: item,
+        isChecked: (0, _utils2.isChecked)(item, value)
+      }) : undefined,
       dataTestId: itemDataTestId ? "".concat(itemDataTestId, ".category_").concat(catIndex, ".").concat(index) : null,
       disabled: item.disabled || disabled,
       isSimple: isSimple,
@@ -142,6 +147,7 @@ const UTCheckList = _ref => {
 UTCheckList.propTypes = {
   actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  CustomRow: _propTypes.elementType,
   dataTestId: _propTypes.string,
   disabled: _propTypes.bool,
   error: _propTypes.string,

package/dist/components/UTCheckbox/versions/V1/README.md

@@ -11,6 +11,7 @@
 | actions            | object           |           | Actions to render within `UTFieldLabel`.                                              |
 | checkboxDataTestId | string           |           | Box `data-testid`.                                                                    |
 | classNames         | objectOf(string) |           | Additional class names to apply for further styling.                                  |
+| CustomComponent    | elementType      |           | Custom component to render data next to the checkbox                                  |
 | dataTestId         | string           |           | Whole component `data-testid`.                                                        |
 | disabled           | bool             | false     | Disables the checkbox, making it unclickable.                                         |
 | indeterminate      | bool             | false     | Indicates if the checkbox is in an indeterminate state.                               |

package/dist/components/UTCheckbox/versions/V1/index.js

@@ -6,12 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
+var _form = require("@widergy/web-utils/lib/form");
 var _classesUtils = require("../../../../utils/classesUtils");
 var _UTFieldLabel = _interopRequireDefault(require("../../../UTFieldLabel"));
 var _UTIcon = _interopRequireDefault(require("../../../UTIcon"));
 var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
 var _UTTouchableWithoutFeedback = _interopRequireDefault(require("../../../UTTouchableWithoutFeedback"));
 var _buttonTypes = require("../../../../types/buttonTypes");
+var _formTypes = require("../../../../types/formTypes");
+var _utils = require("../../../UTValidation/utils");
+var _UTValidation = _interopRequireDefault(require("../../../UTValidation"));
 var _constants = require("./constants");
 var _theme = require("./theme");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
@@ -25,10 +29,12 @@ const UTCheckbox = _ref => {
     checkboxDataTestId,
     classes: theme,
     classNames,
+    CustomComponent,
     dataTestId,
     disabled,
     indeterminate,
     isSimple = false,
+    meta,
     onChange = () => {},
     required,
     title,
@@ -50,6 +56,8 @@ const UTCheckbox = _ref => {
   const BoxContainerComponent = variant === _constants.BUTTON_VARIANT ? 'div' : _UTTouchableWithoutFeedback.default;
   const rootComponentProps = variant === _constants.BUTTON_VARIANT ? touchableProps : {};
   const boxContainerProps = variant === _constants.BUTTON_VARIANT ? {} : touchableProps;
+  const error = meta && (0, _form.shouldShowErrors)(meta) && meta.error || '';
+  const validationData = (0, _utils.formatErrorToValidation)(error);
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, withUpperTitle && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
     actions: actions,
     required: required
@@ -78,17 +86,21 @@ const UTCheckbox = _ref => {
     colorTheme: "light",
     name: iconName,
     size: 16
-  })))), /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
+  })))), CustomComponent || /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
     className: classes.title,
     highlighted: shouldHighlightLabel,
     required: required
-  }, title)));
+  }, title), error && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
+    className: classes.validation,
+    validationData: validationData
+  })));
 };
 UTCheckbox.propTypes = {
   actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),
   checkboxDataTestId: _propTypes.string,
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  CustomComponent: _propTypes.elementType,
   dataTestId: _propTypes.string,
   disabled: _propTypes.bool,
   indeterminate: _propTypes.bool,
@@ -96,6 +108,7 @@ UTCheckbox.propTypes = {
    * @deprecated The "isSimple" prop is deprecated and will be removed in a future release. Please do not use it.
    */
   isSimple: _propTypes.bool,
+  meta: _formTypes.metaPropTypes.isRequired,
   onChange: _propTypes.func,
   required: _propTypes.bool,
   reversed: _propTypes.bool,

package/dist/components/UTCheckbox/versions/V1/theme.js

@@ -4,13 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.retrieveStyle = void 0;
+var _form = require("@widergy/web-utils/lib/form");
 var _constants = require("./constants");
 const MEDIUM_SPACING = 16;
 const SMALL_SPACING = 8;
 const baseCheckBoxTheme = theme => ({
   container: {
     alignItems: 'center !important',
-    display: 'flex'
+    display: 'flex',
+    flexWrap: 'wrap',
+    rowGap: '12px'
   },
   iconContainer: {
     border: "2px solid ".concat(theme.Palette.gray['04']),
@@ -25,6 +28,9 @@ const baseCheckBoxTheme = theme => ({
     borderRadius: 25,
     overflow: 'hidden',
     padding: 6
+  },
+  validation: {
+    flexBasis: '100%'
   }
 });
 const conditionalStyles = _ref => {
@@ -36,7 +42,8 @@ const conditionalStyles = _ref => {
     spacing,
     variant,
     theme,
-    disabled
+    disabled,
+    error
   } = _ref;
   const spacingValue = spacing === _constants.SPACING.SMALL ? SMALL_SPACING : MEDIUM_SPACING;
   return {
@@ -51,12 +58,16 @@ const conditionalStyles = _ref => {
       ...(variant === _constants.BUTTON_VARIANT && {
         borderRadius: '8px',
         padding: spacing === 'small' ? '8px 12px' : '12px 16px',
+        backgroundColor: error ? theme.Palette.error['01'] : 'transparent',
         '&:active': {
-          backgroundColor: theme.Palette.light['04']
+          backgroundColor: error ? theme.Palette.error['02'] : theme.Palette.light['04']
         }
       })
     },
     iconContainer: {
+      ...(error && {
+        borderColor: theme.Palette.error['04']
+      }),
       ...((value === true || indeterminate) && {
         backgroundColor: ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.accent['04']) || theme.Palette.accent['04'],
         borderColor: ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.accent['04']) || theme.Palette.accent['04']
@@ -93,9 +104,11 @@ const retrieveStyle = _ref2 => {
     reversed,
     spacing,
     theme,
-    variant
+    variant,
+    meta
   } = _ref2;
   const baseThemeStyles = baseCheckBoxTheme(theme);
+  const error = meta && (0, _form.shouldShowErrors)(meta);
   const {
     container,
     iconContainer,
@@ -108,7 +121,8 @@ const retrieveStyle = _ref2 => {
     reversed,
     spacing,
     variant,
-    theme
+    theme,
+    error
   });
   return {
     box: baseThemeStyles.box,
@@ -121,7 +135,8 @@ const retrieveStyle = _ref2 => {
       ...iconContainer
     },
     boxContainer,
-    title
+    title,
+    validation: baseThemeStyles.validation
   };
 };
 exports.retrieveStyle = retrieveStyle;

package/package.json

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