@occmundial/occ-atomic 3.0.0-beta.15 → 3.0.0-beta.16

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

@@ -6,12 +6,11 @@ exports[`Radio styles matches the snapshot 1`] = `
 Object {
   "active": Object {
     "& $radio": Object {
-      "&:after": Object {
+      "& $radioInner": Object {
         "background": "#0059CD",
       },
-      "&:before": Object {
-        "borderColor": "#0059CD",
-        "borderWidth": 2,
+      "& $radioOuter": Object {
+        "boxShadow": "inset 0 0 0 2px #0059CD",
       },
     },
   },
@@ -21,77 +20,68 @@ Object {
   "cont": Object {
     "&$active": Object {
       "&:active": Object {
-        "& $radio:after": Object {
+        "& $radio $radioInner": Object {
           "background": "#083CAE",
         },
-        "& $radio:before": Object {
-          "borderColor": "#0047A5",
-          "borderWidth": "3px",
+        "& $radio $radioOuter": Object {
+          "boxShadow": "inset 0 0 0 3px #0047A5 !important",
         },
       },
-      "&:focus $radio:before": Object {
-        "borderColor": "#0059CD",
-        "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
-      },
       "&:hover": Object {
-        "& $radio:after": Object {
+        "& $radio $radioInner": Object {
           "background": "#083CAE",
         },
-        "& $radio:before": Object {
-          "borderColor": "#0047A5",
+        "& $radio $radioOuter": Object {
+          "boxShadow": "inset 0 0 0 2px #0047A5",
         },
       },
     },
-    "&:not($active)": Object {
-      "&:active $radio:before": Object {
-        "borderColor": "#6C6F89",
-        "borderWidth": "2px",
-        "boxShadow": "initial",
-      },
-      "&:focus $radio:before": Object {
-        "borderColor": "#D3D4DC",
-        "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
-      },
-      "&:hover $radio:before": Object {
-        "borderColor": "#6C6F89",
-        "boxShadow": "initial",
-      },
+    "&:active $radio $radioOuter": Object {
+      "boxShadow": "inset 0 0 0 2px #6C6F89",
     },
-    "alignItems": "center",
+    "&:focus-visible $radio": Object {
+      "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
+    },
+    "&:hover $radio $radioOuter": Object {
+      "boxShadow": "inset 0 0 0 1px #6C6F89",
+    },
+    "alignItems": "flex-start",
     "boxSizing": "border-box",
     "cursor": "pointer",
     "display": "flex",
     "outline": "0",
-    "paddingBottom": "8px",
-    "paddingTop": "8px",
   },
   "disabled": Object {
-    "& :not($radio)": Object {
-      "opacity": 0.4,
+    "& $radio $radioInner": Object {
+      "background": "#EDEDF1",
+    },
+    "& $radio $radioOuter": Object {
+      "background": "#EDEDF1",
     },
     "&$active": Object {
-      "& $radio:after": Object {
+      "& $radio $radioInner": Object {
         "background": "#8DA5DA",
       },
-      "& $radio:before": Object {
-        "borderColor": "#8DA5DA",
-      },
-    },
-    "&:not($active)": Object {
-      "& $radio:after": Object {
-        "background": "#EDEDF1",
-      },
-      "& $radio:before": Object {
-        "background": "#EDEDF1",
+      "& $radio $radioOuter": Object {
+        "boxShadow": "inset 0 0 0 2px #8DA5DA",
       },
     },
     "pointerEvents": "none",
   },
   "label": Object {
     "cursor": "pointer",
-    "flex": "1",
-    "float": "left",
-    "marginLeft": "8px",
+    "flex": 1,
+    "marginLeft": "12px",
+    "pointerEvents": "none",
+  },
+  "labelWrap": Object {
+    "alignItems": "center",
+    "display": "flex",
+    "flex": 1,
+    "minHeight": 48,
+    "overflow": "hidden",
+    "paddingBottom": "4px",
+    "paddingTop": "4px",
   },
   "overflow": Object {
     "overflow": "hidden",
@@ -99,41 +89,43 @@ Object {
     "whiteSpace": "nowrap",
   },
   "radio": Object {
-    "&:after": Object {
-      "background": "#fff",
-      "borderRadius": "50%",
-      "boxSizing": "border-box",
-      "content": "\\"\\"",
-      "height": 10,
-      "left": "50%",
-      "position": "absolute",
-      "top": "50%",
-      "transform": "translate(-50%, -50%)",
-      "transition": "0.3s all",
-      "width": 10,
-    },
-    "&:before": Object {
-      "background": "#fff",
-      "border": "1px solid #D3D4DC",
-      "borderRadius": "50%",
-      "boxSizing": "border-box",
-      "content": "\\"\\"",
-      "height": 20,
-      "left": "50%",
-      "position": "absolute",
-      "top": "50%",
-      "transform": "translate(-50%, -50%)",
-      "transition": "0.3s all",
-      "width": 20,
-    },
+    "alignItems": "center",
+    "borderRadius": "9999px",
+    "display": "grid",
+    "height": 20,
+    "justifyContent": "center",
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+    "width": 20,
+  },
+  "radioInner": Object {
+    "background": "#fff",
+    "borderRadius": "9999px",
+    "gridColumnStart": 1,
+    "gridRowStart": 1,
+    "height": 10,
+    "margin": 5,
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+    "width": 10,
+  },
+  "radioOuter": Object {
+    "background": "#fff",
+    "borderRadius": "9999px",
+    "boxShadow": "inset 0 0 0 1px #D3D4DC",
+    "gridColumnStart": 1,
+    "gridRowStart": 1,
+    "height": 20,
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+    "width": 20,
+  },
+  "radioWrap": Object {
     "alignItems": "center",
     "display": "flex",
-    "height": "24px",
-    "position": "relative",
-    "width": "24px",
+    "flexShrink": 0,
+    "height": 48,
+    "justifyContent": "center",
+    "width": 52,
   },
   "right": Object {
-    "float": "right",
     "marginLeft": "8px",
     "pointerEvents": "none",
   },

package/build/Radio/styles.js

@@ -11,133 +11,132 @@ var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
 var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
 
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var radio = _colors["default"].radio;
+var transition = 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s';
+var contentHeight = 48;
+var radioWidth = 52;
+var radioSize = 20;
+var radioInnerSize = 10;
 var _default = {
   cont: {
-    paddingTop: _spacing["default"]['size-2'],
-    paddingBottom: _spacing["default"]['size-2'],
     boxSizing: 'border-box',
     display: 'flex',
-    alignItems: 'center',
+    alignItems: 'flex-start',
     cursor: 'pointer',
     outline: '0',
+    '&:focus-visible $radio': {
+      boxShadow: _shadows["default"]['focus-bright-blue']
+    },
+    '&:hover $radio $radioOuter': {
+      boxShadow: "inset 0 0 0 1px ".concat(radio.unselected.border.hover)
+    },
+    '&:active $radio $radioOuter': {
+      boxShadow: "inset 0 0 0 2px ".concat(radio.unselected.border.hover)
+    },
     '&$active': {
-      '&:focus $radio:before': {
-        borderColor: radio['selected']['border']['default'],
-        boxShadow: _shadows["default"]['focus-bright-blue']
-      },
       '&:hover': {
-        '& $radio:before': {
-          borderColor: radio['selected']['border']['hover']
+        '& $radio $radioOuter': {
+          boxShadow: "inset 0 0 0 2px ".concat(radio.selected.border.hover)
         },
-        '& $radio:after': {
-          background: radio['selected']['bg']['hover']
+        '& $radio $radioInner': {
+          background: radio.selected.bg.hover
         }
       },
       '&:active': {
-        '& $radio:before': {
-          borderColor: radio['selected']['border']['hover'],
-          borderWidth: '3px'
+        '& $radio $radioOuter': {
+          boxShadow: "inset 0 0 0 3px ".concat(radio.selected.border.hover, " !important")
         },
-        '& $radio:after': {
-          background: radio['selected']['bg']['hover']
+        '& $radio $radioInner': {
+          background: radio.selected.bg.hover
         }
       }
-    },
-    '&:not($active)': {
-      '&:hover $radio:before': {
-        borderColor: radio['unselected']['border']['hover'],
-        boxShadow: 'initial'
-      },
-      '&:active $radio:before': {
-        borderColor: radio['unselected']['border']['hover'],
-        borderWidth: '2px',
-        boxShadow: 'initial'
-      },
-      '&:focus $radio:before': {
-        borderColor: radio['unselected']['border']['default'],
-        boxShadow: _shadows["default"]['focus-bright-blue']
-      }
     }
   },
-  radio: {
-    width: _spacing["default"]['size-5'],
-    height: _spacing["default"]['size-5'],
-    position: 'relative',
+  radioWrap: {
+    width: radioWidth,
+    height: contentHeight,
     display: 'flex',
     alignItems: 'center',
-    '&:before': {
-      content: '""',
-      boxSizing: 'border-box',
-      width: 20,
-      height: 20,
-      borderRadius: '50%',
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      border: "1px solid ".concat(radio['unselected']['border']['default']),
-      background: radio['bg']['default'],
-      transition: '0.3s all'
-    },
-    '&:after': {
-      content: '""',
-      boxSizing: 'border-box',
-      width: 10,
-      height: 10,
-      borderRadius: '50%',
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      transition: '0.3s all',
-      background: radio['bg']['default']
-    }
+    justifyContent: 'center',
+    flexShrink: 0
+  },
+  radio: {
+    width: radioSize,
+    height: radioSize,
+    borderRadius: _borderRadius["default"]['br-full'],
+    transition: transition,
+    display: 'grid',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  radioOuter: {
+    width: radioSize,
+    height: radioSize,
+    borderRadius: _borderRadius["default"]['br-full'],
+    boxShadow: "inset 0 0 0 1px ".concat(radio.unselected.border["default"]),
+    background: radio.bg["default"],
+    transition: transition,
+    gridRowStart: 1,
+    gridColumnStart: 1
+  },
+  radioInner: {
+    width: radioInnerSize,
+    height: radioInnerSize,
+    margin: 5,
+    borderRadius: _borderRadius["default"]['br-full'],
+    background: radio.bg["default"],
+    transition: transition,
+    gridRowStart: 1,
+    gridColumnStart: 1
   },
   active: {
     '& $radio': {
-      '&:before': {
-        borderWidth: 2,
-        borderColor: radio['selected']['border']['default']
+      '& $radioOuter': {
+        boxShadow: "inset 0 0 0 2px ".concat(radio.selected.border["default"])
       },
-      '&:after': {
-        background: radio['selected']['bg']['default']
+      '& $radioInner': {
+        background: radio.selected.bg["default"]
       }
     }
   },
   disabled: {
     pointerEvents: 'none',
-    '& :not($radio)': {
-      opacity: 0.4
+    '& $radio $radioOuter': {
+      background: radio.bg.disabled
     },
-    '&$active': {
-      '& $radio:before': {
-        borderColor: radio['selected']['border']['disabled']
-      },
-      '& $radio:after': {
-        background: radio['selected']['bg']['disabled']
-      }
+    '& $radio $radioInner': {
+      background: radio.bg.disabled
     },
-    '&:not($active)': {
-      '& $radio:before': {
-        background: radio['bg']['disabled']
+    '&$active': {
+      '& $radio $radioOuter': {
+        boxShadow: "inset 0 0 0 2px ".concat(radio.selected.border.disabled)
       },
-      '& $radio:after': {
-        background: radio['bg']['disabled']
+      '& $radio $radioInner': {
+        background: radio.selected.bg.disabled
       }
     }
   },
+  labelWrap: {
+    minHeight: contentHeight,
+    display: 'flex',
+    alignItems: 'center',
+    paddingTop: _spacing["default"]['size-1'],
+    paddingBottom: _spacing["default"]['size-1'],
+    overflow: 'hidden',
+    flex: 1
+  },
   label: {
-    marginLeft: _spacing["default"]['size-2'],
+    marginLeft: _spacing["default"]['size-3'],
+    pointerEvents: 'none',
     cursor: 'pointer',
-    "float": 'left',
-    flex: '1'
+    flex: 1
   },
   right: {
     marginLeft: _spacing["default"]['size-2'],
-    "float": 'right',
     pointerEvents: 'none'
   },
   overflow: {

package/build/SlideToggle/SlideToggle.js

@@ -13,6 +13,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Text = _interopRequireDefault(require("../Text"));
 
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
 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); }
@@ -103,6 +107,7 @@ var SlideToggle = /*#__PURE__*/function (_React$Component) {
           name = _this$props2.name,
           trk = _this$props2.trk,
           testId = _this$props2.testId;
+      var iconColor = disabled ? _colors["default"].icon["default"].disabled : value ? _colors["default"].icon.brand.bold : _colors["default"].icon.brand.disabled;
       return /*#__PURE__*/_react["default"].createElement("div", {
         id: id,
         tabIndex: disabled ? -1 : 0,
@@ -112,6 +117,8 @@ var SlideToggle = /*#__PURE__*/function (_React$Component) {
         onClick: this.toggle,
         className: "".concat(classes.cont).concat(disabled ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : ''),
         style: style
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.switchWrap
       }, /*#__PURE__*/_react["default"].createElement("div", _extends({
         id: trk,
         name: name,
@@ -119,14 +126,22 @@ var SlideToggle = /*#__PURE__*/function (_React$Component) {
         "data-testid": testId
       }, testId && {
         'data-value': value ? 1 : 0
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        className: classes.slider
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.switchBg
       }, /*#__PURE__*/_react["default"].createElement("span", {
+        className: classes.slider
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        iconName: value ? 'check' : 'x',
+        width: 16,
+        height: 16,
+        colors: [iconColor],
         className: classes.icon
-      }))), label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+      }))))), label && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.labelWrap
+      }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
         tag: "label",
         className: classes.label
-      }, label));
+      }, label)));
     }
   }]);
 

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

@@ -5,76 +5,91 @@ exports[`SlideToggle matches the snapshot 1`] = `ShallowWrapper {}`;
 exports[`SlideToggle styles matches the snapshot 1`] = `
 Object {
   "checked": Object {
-    "& $icon": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiMwMDZFRkYiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
-    },
     "& $slider": Object {
-      "left": 16,
+      "left": "calc(100% - 28px)",
+    },
+    "& $switchBg": Object {
+      "background": "#0059CD",
     },
-    "background": "#0059CD",
   },
   "cont": Object {
-    "&:focus $switch$checked": Object {
-      "background": "#0059CD",
-      "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
+    "&:active $switch $switchBg": Object {
+      "boxShadow": "inset 0 0 0 2px rgba(255,255,255,0.2)",
     },
-    "&:focus $switch:not($checked)": Object {
-      "background": "#E9EEF8",
+    "&:focus-visible $switch": Object {
       "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
     },
-    "&:hover $switch$checked, &:active $switch$checked": Object {
-      "background": "#083CAE",
+    "&:focus-visible $switch$checked": Object {
+      "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
     },
-    "&:hover $switch:not($checked), &:active $switch:not($checked)": Object {
-      "background": "#CAD5EE !important",
+    "&:hover $switch $switchBg, &:active $switch $switchBg": Object {
+      "background": "#CAD5EE",
+    },
+    "&:hover $switch$checked $switchBg, &:active $switch$checked $switchBg": Object {
+      "background": "#083CAE",
     },
-    "alignItems": "start",
+    "alignItems": "flex-start",
     "boxSizing": "border-box",
     "cursor": "pointer",
     "display": "flex",
     "outline": 0,
-    "paddingBottom": "8px",
-    "paddingTop": "8px",
   },
   "disabled": Object {
-    "& $icon": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgIAkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogICAgICAgIDxwYXRoIGZpbGw9IiNEM0Q0REMiIGQ9Ik0xMi4xLDEwLjhsNC42LTQuNkwxOCw3LjRMMTMuNCwxMmw0LjYsNC42TDE2LjcsMThsLTQuNi00LjZMNy40LDE4bC0xLjMtMS4zbDQuNi00LjZMNi4yLDcuNGwxLjMtMS4zTDEyLjEsMTAuOHoiLz4KICAgICAgICA8L3N2Zz4=)",
-    },
-    "& $switch": Object {
+    "& $switch $switchBg": Object {
       "background": "#EDEDF1",
+      "boxShadow": "inset 0 0 0 1px #D3D4DC",
     },
     "pointerEvents": "none",
   },
   "icon": Object {
-    "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgIAkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogICAgICAgIDxwYXRoIGZpbGw9IiM4REE1REEiIGQ9Ik0xMi4xLDEwLjhsNC42LTQuNkwxOCw3LjRMMTMuNCwxMmw0LjYsNC42TDE2LjcsMThsLTQuNi00LjZMNy40LDE4bC0xLjMtMS4zbDQuNi00LjZMNi4yLDcuNGwxLjMtMS4zTDEyLjEsMTAuOHoiLz4KICAgICAgICA8L3N2Zz4=)",
-    "display": "block",
-    "height": "100%",
-    "transition": "0.3s all",
-    "width": "100%",
+    "margin": 4,
   },
   "label": Object {
     "cursor": "pointer",
-    "marginLeft": "8px",
+    "marginLeft": "12px",
+  },
+  "labelWrap": Object {
+    "alignItems": "center",
+    "display": "flex",
+    "minHeight": 48,
+    "overflow": "hidden",
+    "paddingBottom": "4px",
+    "paddingTop": "4px",
   },
   "slider": Object {
     "background": "#fff",
     "borderRadius": "50%",
-    "height": 20,
-    "left": 2,
+    "height": 24,
+    "left": 4,
     "position": "absolute",
-    "top": 2,
-    "transition": "0.3s all",
-    "width": 20,
+    "top": "50%",
+    "transform": "translateY(-50%)",
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+    "width": 24,
   },
   "switch": Object {
-    "background": "#E9EEF8",
-    "borderRadius": 34,
+    "borderRadius": "9999px",
     "display": "inline-block",
     "flexShrink": 0,
-    "height": "24px",
+    "height": 32,
     "position": "relative",
-    "transition": "0.3s all",
-    "width": 38,
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+    "width": 52,
+  },
+  "switchBg": Object {
+    "background": "#E9EEF8",
+    "borderRadius": "9999px",
+    "boxShadow": "inset 0 0 0 1px rgba(255,255,255,0.2)",
+    "height": 32,
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+    "width": 52,
+  },
+  "switchWrap": Object {
+    "alignItems": "center",
+    "display": "flex",
+    "flexShrink": 0,
+    "height": 48,
+    "width": 52,
   },
 }
 `;