@occmundial/occ-atomic 3.0.0-beta.11 → 3.0.0-beta.12

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.0.0-beta.12](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.11...v3.0.0-beta.12) (2024-06-07)
+
+
+### Bug Fixes
+
+* Add form nav behavior to checkbox ([6b2c664](https://github.com/occmundial/occ-atomic/commit/6b2c664e165bb4617dc53874be69bb9d8c8e6bc3))
+
 # [3.0.0-beta.11](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.10...v3.0.0-beta.11) (2024-06-07)
 
 

package/build/Checkbox/Checkbox.js

@@ -81,9 +81,19 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         if (onChange) onChange(value, id);
       }
     }
+  }, {
+    key: "handleKeyDown",
+    value: function handleKeyDown(e) {
+      if (e.keyCode == 13 || e.keyCode == 32) {
+        e.preventDefault();
+        this.toggle();
+      }
+    }
   }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _this$state = this.state,
           value = _this$state.value,
           undetermined = _this$state.undetermined;
@@ -96,12 +106,16 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
           id = _this$props2.id,
           className = _this$props2.className,
           style = _this$props2.style,
+          alignLeft = _this$props2.alignLeft,
           trk = _this$props2.trk,
           testId = _this$props2.testId;
       var iconClass = undetermined ? " ".concat(classes.undetermined) : value ? " ".concat(classes.active) : '';
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
         id: id,
-        tabIndex: -1,
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: function onKeyDown(e) {
+          return _this2.handleKeyDown(e);
+        },
         className: "".concat(classes.cont).concat(iconClass).concat(disabled ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : ''),
         onClick: this.toggle,
         style: style,
@@ -113,7 +127,7 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         id: trk
       }), label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
         tag: "label",
-        className: "".concat(classes.label).concat(textOverflow ? " ".concat(classes.overflow) : '')
+        className: "".concat(classes.label).concat(textOverflow ? " ".concat(classes.overflow) : '').concat(alignLeft ? " ".concat(classes.alignLeft) : '')
       }, label), right && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
         tag: "label",
         mid: true,
@@ -149,6 +163,9 @@ Checkbox.propTypes = {
   /** Use this prop to overflow the text of the label, adding '...' and the end. */
   textOverflow: _propTypes["default"].bool,
 
+  /** Align the content to the left */
+  alignLeft: _propTypes["default"].bool,
+
   /** Id for catching selected element for tracking. */
   trk: _propTypes["default"].string,
   id: _propTypes["default"].string,

package/build/Checkbox/__snapshots__/Checkbox.test.js.snap

@@ -13,6 +13,9 @@ Object {
       "borderColor": "rgba(255,255,255,0.2)",
     },
   },
+  "alignLeft": Object {
+    "flex": "none",
+  },
   "check": Object {
     "&:after": Object {
       "background": "transparent",
@@ -38,6 +41,7 @@ Object {
       "position": "absolute",
       "top": "50%",
       "transform": "translate(-50%, -50%)",
+      "transition": "0.3s all",
       "width": 20,
     },
     "height": "24px",
@@ -110,6 +114,7 @@ Object {
   "right": Object {
     "float": "right",
     "marginLeft": "8px",
+    "pointerEvents": "none",
   },
   "undetermined": Object {
     "& $check:after": Object {

package/build/Checkbox/styles.js

@@ -66,7 +66,8 @@ var _default = {
       left: '50%',
       transform: 'translate(-50%, -50%)',
       border: "1px solid ".concat(checkbox['unselected']['border']['default']),
-      background: checkbox['unselected']['bg']['default']
+      background: checkbox['unselected']['bg']['default'],
+      transition: '0.3s all'
     },
     '&:after': {
       content: '""',
@@ -130,12 +131,16 @@ var _default = {
   },
   right: {
     marginLeft: _spacing["default"]['size-2'],
-    "float": 'right'
+    "float": 'right',
+    pointerEvents: 'none'
   },
   overflow: {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap'
+  },
+  alignLeft: {
+    flex: 'none'
   }
 };
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "3.0.0-beta.11",
+  "version": "3.0.0-beta.12",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",