@occmundial/occ-atomic 3.0.0-beta.4 → 3.0.0-beta.41

package/build/SlideDown/SlideDown.test.js

@@ -14,7 +14,7 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -44,23 +44,16 @@ describe('SlideDown', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_SlideDown["default"], {
       expanded: true,
       classes: classes,
-      title: "Title"
+      title: "Title",
+      testId: "slidedown-test"
     }));
-    expect(wrapper.find({
-      'data-testid': 'slidedown__arrow-down'
-    }).prop('style')).toEqual({
-      transform: 'rotate(180deg)',
-      transition: '0.3s all'
-    });
-    wrapper.setState({
-      toggled: false
-    });
-    expect(wrapper.find({
-      'data-testid': 'slidedown__arrow-down'
-    }).prop('style')).toEqual({
-      transform: '',
-      transition: '0.3s all'
+    expect(wrapper.find('Icon .rotateIcon').length).toBe(1);
+    wrapper.find({
+      "data-testid": 'slidedown-test'
+    }).simulate('click', {
+      stopPropagation: function stopPropagation() {}
     });
+    expect(wrapper.find('Icon .rotateIcon').length).toBe(0);
   });
   it('shows a Tag on the title', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_SlideDown["default"], {
@@ -75,31 +68,17 @@ describe('SlideDown', function () {
   it('renders the child content', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_SlideDown["default"], {
       classes: classes,
-      title: "Title"
-    }, "Children content"));
-    expect(wrapper.find('.content').length).toBe(0);
-    wrapper.setState({
-      expanded: true
-    });
-    expect(wrapper.find('.content').length).toBe(1);
-    expect(wrapper.find('.content').text()).toEqual('Children content');
-  });
-  it('correct render when prop expanded change', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_SlideDown["default"], {
-      classes: classes,
-      title: "Title"
+      title: "Title",
+      testId: "slidedown-test"
     }, "Children content"));
-    expect(wrapper.find('.content').length).toBe(0);
-    wrapper.setProps({
-      expanded: true
-    });
-    expect(wrapper.find('.content').length).toBe(1);
-    wrapper.setProps({
-      expanded: false
+    expect(wrapper.find('.showContent').length).toBe(0);
+    wrapper.find({
+      "data-testid": 'slidedown-test'
+    }).simulate('click', {
+      stopPropagation: function stopPropagation() {}
     });
-    setTimeout(function () {
-      expect(wrapper.find('.content').length).toBe(0);
-    }, 400);
+    expect(wrapper.find('.showContent').length).toBe(1);
+    expect(wrapper.find('.showContent').text()).toEqual('Children content');
   });
   it('Text have the right properties', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_SlideDown["default"], {
@@ -107,20 +86,46 @@ describe('SlideDown', function () {
       textSize: 'lg',
       title: "Title"
     }, "Children content"));
-    expect(wrapper.find(_Text["default"]).props().large).toEqual(true);
+    expect(wrapper.find(_Text["default"]).props().extraLarge).toEqual(true);
   });
   it('Text and Icon has theme color', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_SlideDown["default"], {
       classes: classes,
       title: "Title"
     }, "Children content"));
-    expect(wrapper.find(_Icon["default"]).props().colors).toEqual([_colors["default"].grey900]);
-    expect(wrapper.find(_Text["default"]).props().link).toBeFalsy();
+    expect(wrapper.find(_Icon["default"]).props().colors).toEqual([_colors["default"].icon["default"].bold]);
+    expect(wrapper.find(_Text["default"]).props().primary).toBeFalsy();
     wrapper.setProps({
       theme: 'blue'
     });
-    expect(wrapper.find(_Text["default"]).props().link).toEqual(true);
-    expect(wrapper.find(_Icon["default"]).props().colors).toEqual([_colors["default"].textLink]);
+    expect(wrapper.find(_Text["default"]).props().primary).toEqual(true);
+    expect(wrapper.find(_Icon["default"]).props().colors).toEqual([_colors["default"].icon.brand["default"]]);
+  });
+  it('render a custom title', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_SlideDown["default"], {
+      customTitle: /*#__PURE__*/_react["default"].createElement("div", {
+        "data-testid": "custom-title",
+        style: {
+          display: 'flex',
+          gap: '24px',
+          alignItems: 'center'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("p", {
+        style: {
+          margin: 0
+        }
+      }, "Custom ", /*#__PURE__*/_react["default"].createElement("b", null, "SlideDown"), " Title"), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        iconName: "search",
+        width: 16,
+        height: 16
+      })),
+      title: "This title should not render",
+      classes: classes
+    }, "Children content"));
+    expect(wrapper.find({
+      "data-testid": 'custom-title'
+    }).exists()).toEqual(true);
+    expect(wrapper.find('label').exists()).toEqual(false);
   });
 });
 describe('SlideDownJSS', function () {

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

@@ -7,34 +7,65 @@ Object {
   "button": Object {
     "cursor": "pointer",
   },
+  "buttonPadding": Object {
+    "paddingLeft": "16px",
+    "paddingRight": "16px",
+  },
   "content": Object {
-    "transition": "0.3s all ease-out",
+    "overflow": "hidden",
+    "transform": "translateY(-10px)",
+    "transition": "transform cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
   },
-  "hide": Object {
-    "marginBottom": 16,
-    "marginTop": -16,
+  "contentWrapper": Object {
+    "display": "grid",
+    "gridTemplateRows": "0fr",
     "opacity": 0,
-    "pointerEvents": "none",
+    "transition": "grid-template-rows cubic-bezier(0.25,0.46,0.45,0.94) 0.2s 0.05s, opacity cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+  },
+  "divider": Object {
+    "border": "1px solid #EDEDF1",
+    "marginTop": "-2px",
+  },
+  "flexContainer": Object {
+    "gap": "16px",
   },
   "icon": Object {
-    "marginLeft": 8,
-    "marginTop": 4,
+    "transition": "rotate cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+  },
+  "largePadding": Object {
+    "paddingBottom": "16px",
+    "paddingTop": "16px",
+  },
+  "leftIcon": Object {
+    "marginRight": "8px",
+  },
+  "normalPadding": Object {
+    "paddingBottom": "12px",
+    "paddingTop": "12px",
+  },
+  "rotateIcon": Object {
+    "transform": "rotate(-180deg)",
+  },
+  "showContent": Object {
+    "marginBottom": "12px",
+    "transform": "translateY(0px)",
+    "transition": "transform cubic-bezier(0.25,0.46,0.45,0.94) 0.2s 0.05s",
   },
-  "show": Object {
-    "marginBottom": 0,
-    "marginTop": 0,
+  "showContentWrapper": Object {
+    "gridTemplateRows": "1fr",
     "opacity": 1,
+    "transition": "grid-template-rows cubic-bezier(0.25,0.46,0.45,0.94) 0.2s, opacity cubic-bezier(0.25,0.46,0.45,0.94) 0.2s 0.05s",
   },
   "tag": Object {
-    "marginLeft": 8,
-    "marginTop": 4,
+    "marginLeft": "8px",
+    "marginTop": "4px",
     "pointerEvents": "none",
   },
   "text": Object {
     "cursor": "pointer",
   },
   "wrapper": Object {
-    "marginBottom": 16,
+    "marginBottom": "16px",
   },
 }
 `;

package/build/SlideDown/styles.js

@@ -5,42 +5,75 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   wrapper: {
-    marginBottom: _spacing["default"].small
+    marginBottom: _spacing["default"]['size-4']
   },
   button: {
     cursor: 'pointer'
   },
+  normalPadding: {
+    paddingTop: _spacing["default"]['size-3'],
+    paddingBottom: _spacing["default"]['size-3']
+  },
+  largePadding: {
+    paddingTop: _spacing["default"]['size-4'],
+    paddingBottom: _spacing["default"]['size-4']
+  },
+  buttonPadding: {
+    paddingLeft: _spacing["default"]['size-4'],
+    paddingRight: _spacing["default"]['size-4']
+  },
   text: {
     cursor: 'pointer'
   },
+  tag: {
+    marginTop: _spacing["default"]['size-1'],
+    marginLeft: _spacing["default"]['size-2'],
+    pointerEvents: 'none'
+  },
+  icon: {
+    transition: 'rotate cubic-bezier(0.25,0.46,0.45,0.94) 0.2s'
+  },
+  leftIcon: {
+    marginRight: _spacing["default"]['size-2']
+  },
+  rotateIcon: {
+    transform: 'rotate(-180deg)'
+  },
   content: {
-    transition: '0.3s all ease-out'
+    overflow: 'hidden',
+    transform: 'translateY(-10px)',
+    transition: 'transform cubic-bezier(0.25,0.46,0.45,0.94) 0.2s'
   },
-  hide: {
-    opacity: 0,
-    marginTop: -_spacing["default"].small,
-    marginBottom: _spacing["default"].small,
-    pointerEvents: 'none'
+  showContent: {
+    transform: 'translateY(0px)',
+    transition: 'transform cubic-bezier(0.25,0.46,0.45,0.94) 0.2s 0.05s',
+    marginBottom: _spacing["default"]['size-3']
   },
-  show: {
+  contentWrapper: {
+    display: 'grid',
+    gridTemplateRows: '0fr',
+    transition: 'grid-template-rows cubic-bezier(0.25,0.46,0.45,0.94) 0.2s 0.05s, opacity cubic-bezier(0.25,0.46,0.45,0.94) 0.2s',
+    opacity: 0
+  },
+  showContentWrapper: {
     opacity: 1,
-    marginTop: 0,
-    marginBottom: 0
+    gridTemplateRows: '1fr',
+    transition: 'grid-template-rows cubic-bezier(0.25,0.46,0.45,0.94) 0.2s, opacity cubic-bezier(0.25,0.46,0.45,0.94) 0.2s 0.05s'
   },
-  tag: {
-    marginTop: _spacing["default"].xTiny,
-    marginLeft: _spacing["default"].tiny,
-    pointerEvents: 'none'
+  divider: {
+    border: "1px solid ".concat(_colors["default"].border["default"].subtle),
+    marginTop: "-".concat(_spacing["default"]['size-0'])
   },
-  icon: {
-    marginTop: _spacing["default"].xTiny,
-    marginLeft: _spacing["default"].tiny
+  flexContainer: {
+    gap: _spacing["default"]['size-4']
   }
 };
 exports["default"] = _default;

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); }
@@ -52,6 +56,7 @@ var SlideToggle = /*#__PURE__*/function (_React$Component) {
       value: props.value
     };
     _this.toggle = _this.toggle.bind(_assertThisInitialized(_this));
+    _this.handleKeyUp = _this.handleKeyUp.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -79,6 +84,20 @@ 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();
+      }
+    }
+  }, {
+    key: "handleKeyUp",
+    value: function handleKeyUp(e) {
+      if (e.keyCode == 13 || e.keyCode == 32) {
+        this.toggle();
+      }
+    }
   }, {
     key: "render",
     value: function render() {
@@ -93,27 +112,40 @@ 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: -1,
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: this.handleKeyDown,
+        onKeyUp: this.handleKeyUp,
+        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,
         className: "".concat(classes["switch"]).concat(value ? " ".concat(classes.checked) : ''),
-        onClick: this.toggle,
         "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/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

@@ -5,75 +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 {
+    "&:hover $switch $switchBg, &:active $switch $switchBg": Object {
       "background": "#CAD5EE",
     },
-    "alignItems": "start",
+    "&:hover $switch$checked $switchBg, &:active $switch$checked $switchBg": Object {
+      "background": "#083CAE",
+    },
+    "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 {
-    "marginLeft": "8px",
+    "cursor": "pointer",
+    "marginLeft": "12px",
+  },
+  "labelWrap": Object {
+    "alignItems": "center",
+    "display": "flex",
+    "minHeight": 48,
+    "overflow": "hidden",
+    "paddingBottom": "4px",
+    "paddingTop": "4px",
   },
   "slider": Object {
     "background": "#fff",
     "borderRadius": "50%",
-    "cursor": "pointer",
-    "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",
-    "height": "24px",
+    "flexShrink": 0,
+    "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,
   },
 }
 `;