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

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.0.0-beta.14](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.13...v3.0.0-beta.14) (2024-06-13)
+
+
+### Bug Fixes
+
+* Fix toggle background on focus when hovered ([8c35f96](https://github.com/occmundial/occ-atomic/commit/8c35f96b77fdb3d1692d864159561842a3213bba))
+
+# [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)
 
 

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

@@ -26,7 +26,7 @@ Object {
       "background": "#083CAE",
     },
     "&:hover $switch:not($checked), &:active $switch:not($checked)": Object {
-      "background": "#CAD5EE",
+      "background": "#CAD5EE !important",
     },
     "alignItems": "start",
     "boxSizing": "border-box",
@@ -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

@@ -34,7 +34,7 @@ var _default = {
       background: toggle['selected']['bg']['default']
     },
     '&:hover $switch:not($checked), &:active $switch:not($checked)': {
-      background: toggle['unselected']['bg']['hover']
+      background: "".concat(toggle['unselected']['bg']['hover'], " !important")
     },
     '&:focus $switch:not($checked)': {
       background: toggle['unselected']['bg']['default'],
@@ -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.12",
+  "version": "3.0.0-beta.14",
   "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"
   }
 }