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

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.0.0-beta.13](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.12...v3.0.0-beta.13) (2024-06-13)
+
+
+### Bug Fixes
+
+* Add form nav behavior to SwitchToggle ([e1e74ed](https://github.com/occmundial/occ-atomic/commit/e1e74edf8306250d0ae7a723b758c9426593c295))
+
+# [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/build/SlideToggle/SlideToggle.js

@@ -79,9 +79,19 @@ var SlideToggle = /*#__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 value = this.state.value;
       var _this$props2 = this.props,
           classes = _this$props2.classes,
@@ -95,14 +105,17 @@ var SlideToggle = /*#__PURE__*/function (_React$Component) {
           testId = _this$props2.testId;
       return /*#__PURE__*/_react["default"].createElement("div", {
         id: id,
-        tabIndex: -1,
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: function onKeyDown(e) {
+          return _this2.handleKeyDown(e);
+        },
+        onClick: this.toggle,
         className: "".concat(classes.cont).concat(disabled ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : ''),
         style: style
       }, /*#__PURE__*/_react["default"].createElement("div", _extends({
         id: trk,
         name: name,
         className: "".concat(classes["switch"]).concat(value ? " ".concat(classes.checked) : ''),
-        onClick: this.toggle,
         "data-testid": testId
       }, testId && {
         'data-value': value ? 1 : 0

package/build/SlideToggle/SlideToggle.test.js

@@ -48,7 +48,7 @@ describe("SlideToggle", function () {
       classes: classes
     }));
     expect(wrapper.find('.cont').exists()).toEqual(true);
-    wrapper.find('.switch').simulate('click');
+    wrapper.simulate('click');
     expect(wrapper.find('.switch').hasClass('checked')).toEqual(true);
   });
   it('calls onChange function', function () {
@@ -57,7 +57,7 @@ describe("SlideToggle", function () {
       classes: classes,
       onChange: onChange
     }));
-    wrapper.find('.switch').simulate('click');
+    wrapper.simulate('click');
     expect(onChange.mock.calls.length).toBe(1);
   });
   it('shows the label', function () {

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

@@ -53,12 +53,12 @@ Object {
     "width": "100%",
   },
   "label": Object {
+    "cursor": "pointer",
     "marginLeft": "8px",
   },
   "slider": Object {
     "background": "#fff",
     "borderRadius": "50%",
-    "cursor": "pointer",
     "height": 20,
     "left": 2,
     "position": "absolute",

package/build/SlideToggle/styles.js

@@ -62,7 +62,6 @@ var _default = {
   },
   slider: {
     position: 'absolute',
-    cursor: 'pointer',
     top: 2,
     left: 2,
     width: 20,
@@ -88,7 +87,8 @@ var _default = {
     pointerEvents: 'none'
   },
   label: {
-    marginLeft: _spacing["default"]['size-2']
+    marginLeft: _spacing["default"]['size-2'],
+    cursor: 'pointer'
   }
 };
 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.13",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",
@@ -120,5 +120,8 @@
     "roots": [
       "<rootDir>/lib/"
     ]
+  },
+  "volta": {
+    "node": "16.18.0"
   }
 }