@occmundial/occ-atomic 3.0.0-beta.6 → 3.0.0-beta.7

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [3.0.0-beta.7](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.6...v3.0.0-beta.7) (2024-06-06)
+
+
+### Bug Fixes
+
+* Fix radio styles and add a form nav behavior ([59f0320](https://github.com/occmundial/occ-atomic/commit/59f03207a45b1ec27e02970668cffe2cfd5931a9))
+* Ignore tab index if radio element is disabled ([e479098](https://github.com/occmundial/occ-atomic/commit/e4790982a127408a474f688a4647612ef8fbb446))
+
 # [3.0.0-beta.6](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.5...v3.0.0-beta.6) (2024-06-05)
 
 

package/build/Radio/Radio.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Text = _interopRequireDefault(require("../Text"));
 
+var _Tag = _interopRequireDefault(require("../Tag"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -75,6 +77,14 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         if (onChange) onChange(option.value);
       }
     }
+  }, {
+    key: "handleKeyDown",
+    value: function handleKeyDown(e, option) {
+      if (e.keyCode == 13 || e.keyCode == 32) {
+        e.preventDefault();
+        this.onChange(option);
+      }
+    }
   }, {
     key: "render",
     value: function render() {
@@ -87,6 +97,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           id = _this$props.id,
           textOverflow = _this$props.textOverflow,
           className = _this$props.className,
+          alignLeft = _this$props.alignLeft,
           style = _this$props.style;
       return /*#__PURE__*/_react["default"].createElement("div", {
         id: id
@@ -94,7 +105,10 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/_react["default"].createElement("div", _extends({
           id: option.trk,
           key: option.value,
-          tabIndex: -1,
+          tabIndex: option.disabled ? -1 : 0,
+          onKeyDown: function onKeyDown(e) {
+            return _this2.handleKeyDown(e, option);
+          },
           "data-testid": option.testId
         }, option.testId && {
           'data-value': selected == option.value ? 1 : 0
@@ -109,12 +123,15 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           id: option.trk
         }), option.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) : '')
         }, option.label), option.right && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
           tag: "label",
           corpSecondary: true,
           className: classes.right
-        }, option.right));
+        }, option.right), option.tag && /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+          theme: "link",
+          className: classes.tag
+        }, option.tag));
       }));
     }
   }]);
@@ -139,6 +156,7 @@ Radio.propTypes = {
     value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
     label: _propTypes["default"].string,
     right: _propTypes["default"].string,
+    tag: _propTypes["default"].string,
     trk: _propTypes["default"].string,
 
     /** The testId property adds the data attribute data-testid to
@@ -146,6 +164,9 @@ Radio.propTypes = {
     testId: _propTypes["default"].string
   })),
 
+  /** Align the content to the left */
+  alignLeft: _propTypes["default"].bool,
+
   /** Use this prop to overflow the text of the label, adding '...' and the end. */
   textOverflow: _propTypes["default"].bool,
 

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

@@ -15,6 +15,9 @@ Object {
       },
     },
   },
+  "alignLeft": Object {
+    "flex": "none",
+  },
   "cont": Object {
     "&$active": Object {
       "&:active": Object {
@@ -24,7 +27,6 @@ Object {
         "& $radio:before": Object {
           "borderColor": "#0047A5",
           "borderWidth": "3px",
-          "boxShadow": "initial",
         },
       },
       "&:focus $radio:before": Object {
@@ -37,7 +39,6 @@ Object {
         },
         "& $radio:before": Object {
           "borderColor": "#0047A5",
-          "boxShadow": "initial",
         },
       },
     },
@@ -56,7 +57,7 @@ Object {
         "boxShadow": "initial",
       },
     },
-    "alignItems": "start",
+    "alignItems": "center",
     "boxSizing": "border-box",
     "cursor": "pointer",
     "display": "flex",
@@ -122,8 +123,11 @@ Object {
       "position": "absolute",
       "top": "50%",
       "transform": "translate(-50%, -50%)",
+      "transition": "0.3s all",
       "width": 20,
     },
+    "alignItems": "center",
+    "display": "flex",
     "height": "24px",
     "position": "relative",
     "width": "24px",
@@ -131,6 +135,11 @@ Object {
   "right": Object {
     "float": "right",
     "marginLeft": "8px",
+    "pointerEvents": "none",
+  },
+  "tag": Object {
+    "marginLeft": "8px",
+    "pointerEvents": "none",
   },
 }
 `;

package/build/Radio/styles.js

@@ -20,7 +20,7 @@ var _default = {
     paddingBottom: _spacing["default"]['size-2'],
     boxSizing: 'border-box',
     display: 'flex',
-    alignItems: 'start',
+    alignItems: 'center',
     cursor: 'pointer',
     outline: '0',
     '&$active': {
@@ -30,8 +30,7 @@ var _default = {
       },
       '&:hover': {
         '& $radio:before': {
-          borderColor: radio['selected']['border']['hover'],
-          boxShadow: 'initial'
+          borderColor: radio['selected']['border']['hover']
         },
         '& $radio:after': {
           background: radio['selected']['bg']['hover']
@@ -40,8 +39,7 @@ var _default = {
       '&:active': {
         '& $radio:before': {
           borderColor: radio['selected']['border']['hover'],
-          borderWidth: '3px',
-          boxShadow: 'initial'
+          borderWidth: '3px'
         },
         '& $radio:after': {
           background: radio['selected']['bg']['hover']
@@ -49,10 +47,6 @@ var _default = {
       }
     },
     '&:not($active)': {
-      '&:focus $radio:before': {
-        borderColor: radio['unselected']['border']['default'],
-        boxShadow: _shadows["default"]['focus-bright-blue']
-      },
       '&:hover $radio:before': {
         borderColor: radio['unselected']['border']['hover'],
         boxShadow: 'initial'
@@ -61,6 +55,10 @@ var _default = {
         borderColor: radio['unselected']['border']['hover'],
         borderWidth: '2px',
         boxShadow: 'initial'
+      },
+      '&:focus $radio:before': {
+        borderColor: radio['unselected']['border']['default'],
+        boxShadow: _shadows["default"]['focus-bright-blue']
       }
     }
   },
@@ -68,6 +66,8 @@ var _default = {
     width: _spacing["default"]['size-5'],
     height: _spacing["default"]['size-5'],
     position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
     '&:before': {
       content: '""',
       boxSizing: 'border-box',
@@ -79,7 +79,8 @@ var _default = {
       left: '50%',
       transform: 'translate(-50%, -50%)',
       border: "1px solid ".concat(radio['unselected']['border']['default']),
-      background: radio['bg']['default']
+      background: radio['bg']['default'],
+      transition: '0.3s all'
     },
     '&:after': {
       content: '""',
@@ -136,12 +137,20 @@ var _default = {
   },
   right: {
     marginLeft: _spacing["default"]['size-2'],
-    "float": 'right'
+    "float": 'right',
+    pointerEvents: 'none'
   },
   overflow: {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap'
+  },
+  tag: {
+    marginLeft: _spacing["default"]['size-2'],
+    pointerEvents: 'none'
+  },
+  alignLeft: {
+    flex: 'none'
   }
 };
 exports["default"] = _default;

package/build/tokens/colors.json

@@ -343,7 +343,7 @@
     },
     "info": {
       "bg": "#e3efff",
-      "border": "#e3efff"
+      "border": "#b9d7ff"
     },
     "neutral": {
       "bg": "#000",
@@ -402,7 +402,7 @@
     },
     "info": {
       "bg": "#e3efff",
-      "border": "#e3efff"
+      "border": "#b9d7ff"
     },
     "featured": {
       "border": "rgba(255,255,255,0.2)",
@@ -567,7 +567,7 @@
       "subtle": "#d7f6e3"
     },
     "info": {
-      "subtle": "#e3efff"
+      "subtle": "#b9d7ff"
     }
   },
   "text": {

package/package.json

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