@occmundial/occ-atomic 2.0.0-beta.14 → 2.0.0-beta.16

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [2.0.0-beta.16](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.15...v2.0.0-beta.16) (2024-05-14)
+
+
+### Bug Fixes
+
+* Adjust icon in prev and next button ([8d78c19](https://github.com/occmundial/occ-atomic/commit/8d78c196ce2a27990084683fbeb95b0b9e49be02))
+* Change tabs to spaces ([ba606c3](https://github.com/occmundial/occ-atomic/commit/ba606c3951a779fd05937fed49f785cc529cd611))
+
+# [2.0.0-beta.15](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.14...v2.0.0-beta.15) (2024-05-10)
+
+
+### Features
+
+* Updated radio styles and documentation ([2c39496](https://github.com/occmundial/occ-atomic/commit/2c39496186092fe20434ce4a030c28e42cebff91))
+
 # [2.0.0-beta.14](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.13...v2.0.0-beta.14) (2024-05-07)
 
 

package/build/Pager/Pager.js

@@ -218,20 +218,28 @@ var Pager = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("ul", {
         className: "".concat(classes.pager).concat(className ? " ".concat(className) : '')
       }, /*#__PURE__*/_react["default"].createElement("li", {
-        className: "".concat(classes.btn, " ").concat(classes.prev).concat(selected == 1 ? " ".concat(classes.disabled) : ''),
+        className: "".concat(classes.btn, " ").concat(classes.listItemPrevious).concat(selected == 1 ? " ".concat(classes.disabled) : ''),
         tabIndex: "0",
         onClick: this.handlePrevPage
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.prev
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconName: "arrowDown",
+        iconName: "chevron-left",
+        width: 14,
+        height: 14,
         colors: ['#adb4bb']
-      }), " ", previousLabel), !hideNumbers && this.pagination(), /*#__PURE__*/_react["default"].createElement("li", {
-        className: "".concat(classes.btn, " ").concat(classes.next).concat(selected == pageCount ? " ".concat(classes.disabled) : ''),
+      }), previousLabel)), !hideNumbers && this.pagination(), /*#__PURE__*/_react["default"].createElement("li", {
+        className: "".concat(classes.btn, " ").concat(classes.listItemNext).concat(selected == pageCount ? " ".concat(classes.disabled) : ''),
         tabIndex: "0",
         onClick: this.handleNextPage
-      }, nextLabel, " ", /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconName: "arrowDown",
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.next
+      }, nextLabel, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        iconName: "chevron-right",
+        width: 14,
+        height: 14,
         colors: ['#adb4bb']
-      })));
+      }))));
     }
   }]);
 

package/build/Pager/Pager.test.js

@@ -30,10 +30,10 @@ describe("Pager", function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
       classes: classes
     }));
-    expect(wrapper.find('.prev').length).toBe(1);
-    expect(wrapper.find('.prev').text()).toEqual('<Jss(Icon) /> Previous');
-    expect(wrapper.find('.next').length).toBe(1);
-    expect(wrapper.find('.next').text()).toEqual('Next <Jss(Icon) />');
+    expect(wrapper.find('.listItemPrevious').length).toBe(1);
+    expect(wrapper.find('.listItemPrevious').text()).toEqual('<Jss(Icon) />Previous');
+    expect(wrapper.find('.listItemNext').length).toBe(1);
+    expect(wrapper.find('.listItemNext').text()).toEqual('Next<Jss(Icon) />');
   });
   it('changes to previous page', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
@@ -41,7 +41,7 @@ describe("Pager", function () {
       classes: classes
     }));
     expect(wrapper.state('selected')).toEqual(3);
-    wrapper.find('.prev').simulate('click', {
+    wrapper.find('.listItemPrevious').simulate('click', {
       target: {}
     });
     expect(wrapper.state('selected')).toEqual(2);
@@ -52,7 +52,7 @@ describe("Pager", function () {
       classes: classes
     }));
     expect(wrapper.state('selected')).toEqual(3);
-    wrapper.find('.next').simulate('click', {
+    wrapper.find('.listItemNext').simulate('click', {
       target: {}
     });
     expect(wrapper.state('selected')).toEqual(4);
@@ -84,11 +84,11 @@ describe("Pager", function () {
       initialPage: 1,
       classes: classes
     }));
-    expect(wrapper.find('.prev').hasClass('disabled')).toEqual(true);
+    expect(wrapper.find('.listItemPrevious').hasClass('disabled')).toEqual(true);
     wrapper.setProps({
       forcePage: 5
     });
-    expect(wrapper.find('.prev').hasClass('disabled')).toEqual(false);
+    expect(wrapper.find('.listItemPrevious').hasClass('disabled')).toEqual(false);
   });
   it('disables the next page button', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
@@ -96,11 +96,11 @@ describe("Pager", function () {
       initialPage: 5,
       classes: classes
     }));
-    expect(wrapper.find('.next').hasClass('disabled')).toEqual(true);
+    expect(wrapper.find('.listItemNext').hasClass('disabled')).toEqual(true);
     wrapper.setProps({
       forcePage: 1
     });
-    expect(wrapper.find('.next').hasClass('disabled')).toEqual(false);
+    expect(wrapper.find('.listItemNext').hasClass('disabled')).toEqual(false);
   });
   it('calls the onPageChange function', function () {
     var onPageChange = jest.fn();
@@ -108,7 +108,7 @@ describe("Pager", function () {
       onPageChange: onPageChange,
       classes: classes
     }));
-    wrapper.find('.next').simulate('click', {
+    wrapper.find('.listItemNext').simulate('click', {
       target: {}
     });
     expect(onPageChange.mock.calls.length).toBe(1);

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

@@ -15,7 +15,6 @@ Object {
     "border": "1px solid #bfbfbf",
     "borderRadius": "5px",
     "cursor": "pointer",
-    "display": "inline-block",
     "fontFamily": "'OccText', sans-serif",
     "outline": "0",
     "padding": "3px 13px",
@@ -25,24 +24,28 @@ Object {
     "opacity": "0.4",
     "pointerEvents": "none",
   },
-  "next": Object {
-    "& span": Object {
-      "transform": "rotate(-90deg)",
-    },
+  "listItemNext": Object {
     "marginLeft": "15px",
   },
+  "listItemPrevious": Object {
+    "marginRight": "15px",
+  },
+  "next": Object {
+    "alignItems": "center",
+    "display": "flex",
+  },
   "pager": Object {
+    "alignItems": "center",
     "color": "#727272",
+    "display": "flex",
     "fontFamily": "'OccText', sans-serif",
     "fontSize": "14px",
     "listStyle": "none",
     "paddingLeft": "0",
   },
   "prev": Object {
-    "& span": Object {
-      "transform": "rotate(90deg)",
-    },
-    "marginRight": "15px",
+    "alignItems": "center",
+    "display": "flex",
   },
 }
 `;

package/build/Pager/styles.js

@@ -15,12 +15,13 @@ var _default = {
   pager: {
     listStyle: 'none',
     paddingLeft: '0',
+    display: 'flex',
+    alignItems: 'center',
     fontFamily: _fonts["default"].body,
     color: _colors["default"].grey7,
     fontSize: '14px'
   },
   btn: {
-    display: 'inline-block',
     fontFamily: _fonts["default"].body,
     border: "1px solid ".concat(_colors["default"].grey1),
     borderRadius: '5px',
@@ -37,16 +38,18 @@ var _default = {
     }
   },
   prev: {
-    marginRight: '15px',
-    '& span': {
-      transform: 'rotate(90deg)'
-    }
+    display: 'flex',
+    alignItems: 'center'
+  },
+  listItemPrevious: {
+    marginRight: '15px'
   },
   next: {
-    marginLeft: '15px',
-    '& span': {
-      transform: 'rotate(-90deg)'
-    }
+    display: 'flex',
+    alignItems: 'center'
+  },
+  listItemNext: {
+    marginLeft: '15px'
   },
   disabled: {
     pointerEvents: 'none',

package/build/Radio/Radio.js

@@ -94,6 +94,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/_react["default"].createElement("div", _extends({
           id: option.trk,
           key: option.value,
+          tabIndex: -1,
           "data-testid": option.testId
         }, option.testId && {
           'data-value': selected == option.value ? 1 : 0
@@ -111,7 +112,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           className: "".concat(classes.label).concat(textOverflow ? " ".concat(classes.overflow) : '')
         }, option.label), option.right && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
           tag: "label",
-          mid: true,
+          corpSecondary: true,
           className: classes.right
         }, option.right));
       }));
@@ -147,8 +148,14 @@ Radio.propTypes = {
 
   /** Use this prop to overflow the text of the label, adding '...' and the end. */
   textOverflow: _propTypes["default"].bool,
+
+  /** Id of the component */
   id: _propTypes["default"].string,
+
+  /** Adds class(es) to each option container */
   className: _propTypes["default"].string,
+
+  /** Adds style(s) to each option container */
   style: _propTypes["default"].object
 };
 var _default = Radio;

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

@@ -5,39 +5,92 @@ exports[`Radio matches the snapshot 1`] = `ShallowWrapper {}`;
 exports[`Radio styles matches the snapshot 1`] = `
 Object {
   "active": Object {
-    "& $radio:after": Object {
-      "background": Array [
-        "#083cae",
-        "!important",
-      ],
+    "& $radio": Object {
+      "&:after": Object {
+        "background": "#0059CD",
+      },
+      "&:before": Object {
+        "borderColor": "#0059CD",
+        "borderWidth": 2,
+      },
     },
   },
   "cont": Object {
-    "&:after": Object {
-      "clear": "both",
-      "content": "\\"\\"",
-      "display": "table",
+    "&$active": Object {
+      "&:active": Object {
+        "& $radio:after": Object {
+          "background": "#0047A5",
+        },
+        "& $radio:before": Object {
+          "borderColor": "#0047A5",
+          "borderWidth": "3px",
+          "boxShadow": "initial",
+        },
+      },
+      "&:focus $radio:before": Object {
+        "borderColor": "#0059CD",
+        "boxShadow": undefined,
+      },
+      "&:hover": Object {
+        "& $radio:after": Object {
+          "background": "#0047A5",
+        },
+        "& $radio:before": Object {
+          "borderColor": "#0047A5",
+          "boxShadow": "initial",
+        },
+      },
     },
-    "&:hover $radio:after": Object {
-      "background": "#dddddd",
+    "&:not($active)": Object {
+      "&:active $radio:before": Object {
+        "borderColor": "#6C6F89",
+        "borderWidth": "2px",
+        "boxShadow": "initial",
+      },
+      "&:focus $radio:before": Object {
+        "borderColor": "#D3D4DC",
+        "boxShadow": undefined,
+      },
+      "&:hover $radio:before": Object {
+        "borderColor": "#6C6F89",
+        "boxShadow": "initial",
+      },
     },
     "alignItems": "start",
     "boxSizing": "border-box",
     "cursor": "pointer",
     "display": "flex",
     "outline": "0",
-    "paddingBottom": 8,
-    "paddingTop": 8,
+    "paddingBottom": "8px",
+    "paddingTop": "8px",
   },
   "disabled": Object {
-    "opacity": 0.4,
+    "& :not($radio)": Object {
+      "opacity": 0.4,
+    },
+    "&$active": Object {
+      "& $radio:after": Object {
+        "background": "#8DA5DA",
+      },
+      "& $radio:before": Object {
+        "borderColor": "#8DA5DA",
+      },
+    },
+    "&:not($active)": Object {
+      "& $radio:after": Object {
+        "background": "#EDEDF1",
+      },
+      "& $radio:before": Object {
+        "background": "#EDEDF1",
+      },
+    },
     "pointerEvents": "none",
   },
   "label": Object {
     "cursor": "pointer",
     "flex": "1",
     "float": "left",
-    "marginLeft": 8,
+    "marginLeft": "8px",
   },
   "overflow": Object {
     "overflow": "hidden",
@@ -46,36 +99,38 @@ Object {
   },
   "radio": Object {
     "&:after": Object {
-      "background": "transparent",
+      "background": "#fff",
       "borderRadius": "50%",
+      "boxSizing": "border-box",
       "content": "\\"\\"",
-      "height": 6,
+      "height": 10,
       "left": "50%",
       "position": "absolute",
       "top": "50%",
       "transform": "translate(-50%, -50%)",
       "transition": "0.3s all",
-      "width": 6,
+      "width": 10,
     },
     "&:before": Object {
-      "background": "#ffffff",
-      "border": "1px solid #dddddd",
+      "background": "#fff",
+      "border": "1px solid #D3D4DC",
       "borderRadius": "50%",
+      "boxSizing": "border-box",
       "content": "\\"\\"",
-      "height": 16,
+      "height": 20,
       "left": "50%",
       "position": "absolute",
       "top": "50%",
       "transform": "translate(-50%, -50%)",
-      "width": 16,
+      "width": 20,
     },
-    "height": 24,
+    "height": "24px",
     "position": "relative",
-    "width": 24,
+    "width": "24px",
   },
   "right": Object {
     "float": "right",
-    "marginLeft": 8,
+    "marginLeft": "8px",
   },
 }
 `;

package/build/Radio/styles.js

@@ -5,76 +5,135 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var radio = _colors["default"].radio;
 var _default = {
   cont: {
-    paddingTop: _spacing["default"].tiny,
-    paddingBottom: _spacing["default"].tiny,
+    paddingTop: _spacing["default"]['size-2'],
+    paddingBottom: _spacing["default"]['size-2'],
     boxSizing: 'border-box',
     display: 'flex',
     alignItems: 'start',
     cursor: 'pointer',
     outline: '0',
-    '&:after': {
-      content: '""',
-      display: 'table',
-      clear: 'both'
+    '&$active': {
+      '&:focus $radio:before': {
+        borderColor: radio['selected']['border']['default'],
+        boxShadow: _colors["default"]['focus-bright-blue']
+      },
+      '&:hover': {
+        '& $radio:before': {
+          borderColor: radio['selected']['border']['hover'],
+          boxShadow: 'initial'
+        },
+        '& $radio:after': {
+          background: radio['selected']['bg']['hover']
+        }
+      },
+      '&:active': {
+        '& $radio:before': {
+          borderColor: radio['selected']['border']['hover'],
+          borderWidth: '3px',
+          boxShadow: 'initial'
+        },
+        '& $radio:after': {
+          background: radio['selected']['bg']['hover']
+        }
+      }
     },
-    '&:hover $radio:after': {
-      background: _colors["default"].grey200
+    '&:not($active)': {
+      '&:focus $radio:before': {
+        borderColor: radio['unselected']['border']['default'],
+        boxShadow: _colors["default"]['focus-bright-blue']
+      },
+      '&:hover $radio:before': {
+        borderColor: radio['unselected']['border']['hover'],
+        boxShadow: 'initial'
+      },
+      '&:active $radio:before': {
+        borderColor: radio['unselected']['border']['hover'],
+        borderWidth: '2px',
+        boxShadow: 'initial'
+      }
     }
   },
   radio: {
-    width: _spacing["default"].base,
-    height: _spacing["default"].base,
+    width: _spacing["default"]['size-5'],
+    height: _spacing["default"]['size-5'],
     position: 'relative',
     '&:before': {
       content: '""',
-      width: _spacing["default"].small,
-      height: _spacing["default"].small,
+      boxSizing: 'border-box',
+      width: 20,
+      height: 20,
       borderRadius: '50%',
       position: 'absolute',
       top: '50%',
       left: '50%',
       transform: 'translate(-50%, -50%)',
-      border: "1px solid ".concat(_colors["default"].grey200),
-      background: _colors["default"].bgWhite
+      border: "1px solid ".concat(radio['unselected']['border']['default']),
+      background: radio['bg']['default']
     },
     '&:after': {
       content: '""',
-      width: 6,
-      height: 6,
+      boxSizing: 'border-box',
+      width: 10,
+      height: 10,
       borderRadius: '50%',
       position: 'absolute',
       top: '50%',
       left: '50%',
       transform: 'translate(-50%, -50%)',
       transition: '0.3s all',
-      background: 'transparent'
+      background: radio['bg']['default']
     }
   },
   active: {
-    '& $radio:after': {
-      background: [_colors["default"].prim, '!important']
+    '& $radio': {
+      '&:before': {
+        borderWidth: 2,
+        borderColor: radio['selected']['border']['default']
+      },
+      '&:after': {
+        background: radio['selected']['bg']['default']
+      }
     }
   },
   disabled: {
-    opacity: 0.4,
-    pointerEvents: 'none'
+    pointerEvents: 'none',
+    '& :not($radio)': {
+      opacity: 0.4
+    },
+    '&$active': {
+      '& $radio:before': {
+        borderColor: radio['selected']['border']['disabled']
+      },
+      '& $radio:after': {
+        background: radio['selected']['bg']['disabled']
+      }
+    },
+    '&:not($active)': {
+      '& $radio:before': {
+        background: radio['bg']['disabled']
+      },
+      '& $radio:after': {
+        background: radio['bg']['disabled']
+      }
+    }
   },
   label: {
-    marginLeft: _spacing["default"].tiny,
+    marginLeft: _spacing["default"]['size-2'],
     cursor: 'pointer',
     "float": 'left',
     flex: '1'
   },
   right: {
-    marginLeft: _spacing["default"].tiny,
+    marginLeft: _spacing["default"]['size-2'],
     "float": 'right'
   },
   overflow: {

package/package.json

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