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

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,
   },
 }
 `;

package/build/SlideToggle/styles.js

@@ -5,89 +5,108 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _icons = _interopRequireDefault(require("../subatomic/icons"));
-
 var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
 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 toggle = _colors["default"]["switch"],
-    icon = _colors["default"].icon;
+var toggle = _colors["default"]["switch"];
+var transition = 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s';
+var contentHeight = 48;
+var toggleWidth = 52;
+var toggleHeight = 32;
+var sliderSize = 24;
 var _default = {
   cont: {
-    paddingTop: _spacing["default"]['size-2'],
-    paddingBottom: _spacing["default"]['size-2'],
     boxSizing: 'border-box',
     display: 'flex',
-    alignItems: 'start',
+    alignItems: 'flex-start',
     cursor: 'pointer',
     outline: 0,
-    '&:hover $switch$checked, &:active $switch$checked': {
-      background: toggle['selected']['bg']['hover']
+    '&:hover $switch $switchBg, &:active $switch $switchBg': {
+      background: toggle.unselected.bg.hover
     },
-    '&:focus $switch$checked': {
-      boxShadow: _shadows["default"]['focus-bright-blue'],
-      background: toggle['selected']['bg']['default']
+    '&:focus-visible $switch': {
+      boxShadow: _shadows["default"]['focus-indigo']
     },
-    '&:hover $switch:not($checked), &:active $switch:not($checked)': {
-      background: "".concat(toggle['unselected']['bg']['hover'], " !important")
+    '&:hover $switch$checked $switchBg, &:active $switch$checked $switchBg': {
+      background: toggle.selected.bg.hover
     },
-    '&:focus $switch:not($checked)': {
-      background: toggle['unselected']['bg']['default'],
-      boxShadow: _shadows["default"]['focus-indigo']
+    '&:active $switch $switchBg': {
+      boxShadow: "inset 0 0 0 2px ".concat(_colors["default"]["switch"].border["default"])
+    },
+    '&:focus-visible $switch$checked': {
+      boxShadow: _shadows["default"]['focus-bright-blue']
     }
   },
+  switchWrap: {
+    width: toggleWidth,
+    height: contentHeight,
+    display: 'flex',
+    alignItems: 'center',
+    flexShrink: 0
+  },
   "switch": {
     position: 'relative',
     display: 'inline-block',
-    width: 38,
+    width: toggleWidth,
+    height: toggleHeight,
     flexShrink: 0,
-    height: _spacing["default"]['size-5'],
-    background: toggle['unselected']['bg']['default'],
-    borderRadius: 34,
-    transition: '0.3s all'
+    borderRadius: _borderRadius["default"]['br-full'],
+    transition: transition
+  },
+  switchBg: {
+    width: toggleWidth,
+    height: toggleHeight,
+    background: toggle.unselected.bg["default"],
+    boxShadow: "inset 0 0 0 1px ".concat(_colors["default"]["switch"].border["default"]),
+    borderRadius: _borderRadius["default"]['br-full'],
+    transition: transition
   },
   checked: {
-    background: toggle['selected']['bg']['default'],
-    '& $slider': {
-      left: 16
+    '& $switchBg': {
+      background: toggle.selected.bg["default"]
     },
-    '& $icon': {
-      background: _icons["default"].base(_icons["default"].check.icon([icon.brand.bold]))
+    '& $slider': {
+      left: "calc(100% - 28px)"
     }
   },
   slider: {
     position: 'absolute',
-    top: 2,
-    left: 2,
-    width: 20,
-    height: 20,
+    top: '50%',
+    transform: 'translateY(-50%)',
+    left: 4,
+    width: sliderSize,
+    height: sliderSize,
     borderRadius: '50%',
-    background: toggle['bg']['default'],
-    transition: '0.3s all'
+    background: toggle.bg["default"],
+    transition: transition
   },
   icon: {
-    width: '100%',
-    height: '100%',
-    display: 'block',
-    background: _icons["default"].base(_icons["default"].cross.icon([icon.brand.disabled])),
-    transition: '0.3s all'
+    margin: 4
   },
   disabled: {
-    '& $switch': {
-      background: toggle['bg']['disabled']
-    },
-    '& $icon': {
-      background: _icons["default"].base(_icons["default"].cross.icon([icon["default"].disabled]))
+    '& $switch $switchBg': {
+      boxShadow: "inset 0 0 0 1px ".concat(_colors["default"]["switch"].border.disabled),
+      background: toggle.bg.disabled
     },
     pointerEvents: 'none'
   },
+  labelWrap: {
+    minHeight: contentHeight,
+    display: 'flex',
+    alignItems: 'center',
+    paddingTop: _spacing["default"]['size-1'],
+    paddingBottom: _spacing["default"]['size-1'],
+    overflow: 'hidden'
+  },
   label: {
-    marginLeft: _spacing["default"]['size-2'],
+    marginLeft: _spacing["default"]['size-3'],
     cursor: 'pointer'
   }
 };

package/package.json

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