@widergy/energy-ui 3.67.1 → 3.67.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [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/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"));
@@ -29,6 +33,7 @@ const UTCheckbox = _ref => {
     disabled,
     indeterminate,
     isSimple = false,
+    meta,
     onChange = () => {},
     required,
     title,
@@ -50,6 +55,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
@@ -82,7 +89,10 @@ const UTCheckbox = _ref => {
     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),
@@ -96,6 +106,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.67.2",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",