@zohodesk/components 1.0.0-temp-70 → 1.0.0-temp-71

package/lib/DropDown/DropDownItem.js

@@ -9,9 +9,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = require("./props/propTypes");
-
-var _defaultProps = require("./props/defaultProps");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _DropDownItemModule = _interopRequireDefault(require("./DropDownItem.module.css"));
 
@@ -122,5 +120,20 @@ var DropDownItem = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = DropDownItem;
-DropDownItem.propTypes = _propTypes.DropDownItem_propTypes;
-DropDownItem.defaultProps = _defaultProps.DropDownItem_defaultProps;
+DropDownItem.propTypes = {
+  active: _propTypes["default"].bool,
+  children: _propTypes["default"].node,
+  dataId: _propTypes["default"].string,
+  getRef: _propTypes["default"].func,
+  hightlight: _propTypes["default"].bool,
+  id: _propTypes["default"].string,
+  index: _propTypes["default"].number,
+  onClick: _propTypes["default"].func,
+  onHover: _propTypes["default"].func,
+  value: _propTypes["default"].string,
+  customClass: _propTypes["default"].string
+};
+DropDownItem.defaultProps = {
+  active: false,
+  dataId: 'dropDwnItemContainer'
+};

package/lib/DropDown/DropDownSearch.js

@@ -9,16 +9,18 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = require("./props/propTypes");
-
-var _defaultProps = require("./props/defaultProps");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _TextBox = _interopRequireDefault(require("../TextBox/TextBox"));
 
 var _DropDownSearchModule = _interopRequireDefault(require("./DropDownSearch.module.css"));
 
+var _DropDownSearch$propT;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -110,5 +112,21 @@ var DropDownSearch = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = DropDownSearch;
-DropDownSearch.defaultProps = _defaultProps.DropDownSearch_defaultProps;
-DropDownSearch.propTypes = _propTypes.DropDownSearch_propTypes;
+DropDownSearch.defaultProps = {
+  size: 'medium',
+  textBoxSize: 'medium',
+  customClass: {}
+};
+DropDownSearch.propTypes = (_DropDownSearch$propT = {
+  getRef: _propTypes["default"].func,
+  id: _propTypes["default"].string,
+  maxLength: _propTypes["default"].string,
+  name: _propTypes["default"].string,
+  onBlur: _propTypes["default"].func,
+  onChange: _propTypes["default"].func,
+  onKeyDown: _propTypes["default"].func,
+  placeHolder: _propTypes["default"].string
+}, _defineProperty(_DropDownSearch$propT, "placeHolder", _propTypes["default"].string), _defineProperty(_DropDownSearch$propT, "size", _propTypes["default"].oneOf(['small', 'medium'])), _defineProperty(_DropDownSearch$propT, "textBoxSize", _propTypes["default"].string), _defineProperty(_DropDownSearch$propT, "value", _propTypes["default"].string), _defineProperty(_DropDownSearch$propT, "customClass", _propTypes["default"].shape({
+  searchClass: _propTypes["default"].string,
+  customTextBox: _propTypes["default"].string
+})), _DropDownSearch$propT);

package/lib/DropDown/DropDownSeparator.js

@@ -9,7 +9,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = require("./props/propTypes");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _DropDownSeparatorModule = _interopRequireDefault(require("./DropDownSeparator.module.css"));
 
@@ -61,4 +61,6 @@ var DropDownSeparator = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = DropDownSeparator;
-DropDownSeparator.propTypes = _propTypes.DropDownSeparator_propTypes;
+DropDownSeparator.propTypes = {
+  customClass: _propTypes["default"].string
+};

package/lib/Label/Label.js

@@ -9,9 +9,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _defaultProps = require("./props/defaultProps");
-
-var _propTypes = require("./props/propTypes");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _LabelModule = _interopRequireDefault(require("./Label.module.css"));
 
@@ -79,8 +77,29 @@ var Label = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = Label;
-Label.defaultProps = _defaultProps.defaultProps;
-Label.propTypes = _propTypes.propTypes;
+Label.defaultProps = {
+  clipped: false,
+  dataId: 'label',
+  palette: 'default',
+  size: 'medium',
+  text: 'Label',
+  type: 'title',
+  variant: 'default',
+  customClass: ''
+};
+Label.propTypes = {
+  clipped: _propTypes["default"].bool,
+  dataId: _propTypes["default"].string,
+  htmlFor: _propTypes["default"].string,
+  onClick: _propTypes["default"].func,
+  palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory', 'disable', 'dark']),
+  size: _propTypes["default"].oneOf(['xsmall', 'small', 'medium', 'large']),
+  text: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  type: _propTypes["default"].oneOf(['title', 'subtitle']),
+  variant: _propTypes["default"].oneOf(['primary', 'default']),
+  customClass: _propTypes["default"].string
+};
 
 if (false) {
   Label.docs = {

package/lib/Layout/Box.js

@@ -8,9 +8,7 @@ exports.getBoxProps = getBoxProps;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = require("./props/propTypes");
-
-var _defaultProps = require("./props/defaultProps");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("./utils");
 
@@ -21,6 +19,29 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 /* eslint css-modules/no-unused-class: 0 */
 
 /* eslint-disable  react/no-unused-prop-types*/
+var propTypes = {
+  adjust: _propTypes["default"].bool,
+  align: _propTypes["default"].oneOf(['start', 'end', 'center']),
+  children: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].string]),
+  className: _propTypes["default"].string,
+  column: _propTypes["default"].oneOf(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']),
+  dataId: _propTypes["default"].string,
+  eleRef: _propTypes["default"].func,
+  flexible: _propTypes["default"].bool,
+  hidden: _propTypes["default"].arrayOf(function (propValue, key, componentName, location, propFullName) {
+    if (['xs', 'sm', 'md', 'lg', 'xl'].indexOf(propValue[key]) === -1) {
+      return new Error("Invalid prop `".concat(propFullName, "` supplied to") + " `".concat(componentName, "`. Validation failed."));
+    }
+  }),
+  isFirst: _propTypes["default"].bool,
+  isLast: _propTypes["default"].bool,
+  isScrollAttribute: _propTypes["default"].bool,
+  scroll: _propTypes["default"].PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
+  shrink: _propTypes["default"].bool,
+  tagName: _propTypes["default"].string,
+  tourId: _propTypes["default"].string
+};
+
 function getBoxClassNames(props) {
   var hidden = props.hidden,
       className = props.className,
@@ -31,8 +52,7 @@ function getBoxClassNames(props) {
       shrink = props.shrink,
       column = props.column,
       align = props.align,
-      scroll = props.scroll,
-      preventParentScroll = props.preventParentScroll;
+      scroll = props.scroll;
   var modificators = [className];
 
   if (flexible && !adjust) {
@@ -91,21 +111,11 @@ function getBoxClassNames(props) {
     modificators.push((0, _utils.getClass)(_LayoutModule["default"], scrollClass));
   }
 
-  if (preventParentScroll) {
-    var ParentScrollClassMapping = {
-      horizontal: 'preventScrollBubbleX',
-      vertical: 'preventScrollBubbleY',
-      both: 'preventScrollBubbleBoth'
-    };
-    var parentScrollClass = ParentScrollClassMapping[preventParentScroll];
-    modificators.push((0, _utils.getClass)(_LayoutModule["default"], parentScrollClass));
-  }
-
   return modificators;
 }
 
 function getBoxProps(props) {
-  return (0, _utils.createProps)(_propTypes.BoxProps, props, getBoxClassNames(props));
+  return (0, _utils.createProps)(propTypes, props, getBoxClassNames(props));
 }
 
 function Box(props) {
@@ -120,5 +130,9 @@ function Box(props) {
   return /*#__PURE__*/_react["default"].createElement(tagName, childProps);
 }
 
-Box.propTypes = _propTypes.BoxProps;
-Box.defaultProps = _defaultProps.BoxDefaultProps;
+Box.propTypes = propTypes;
+Box.defaultProps = {
+  dataId: 'boxComponent',
+  isScrollAttribute: false,
+  tagName: 'div'
+};

package/lib/Layout/Container.js

@@ -8,9 +8,7 @@ exports.getContainerProps = getContainerProps;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = require("./props/propTypes");
-
-var _defaultProps = require("./props/defaultProps");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("./utils");
 
@@ -21,6 +19,24 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 /* eslint css-modules/no-unused-class: 0 */
 
 /* eslint-disable  react/no-unused-prop-types*/
+var propTypes = {
+  align: _propTypes["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around', 'baseline']),
+  alignBox: _propTypes["default"].oneOf(['row', 'column', 'row-reverse', 'column-reverse']),
+  alignContent: _propTypes["default"].oneOf(['start', 'end', 'center', 'around', 'between']),
+  children: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].string]),
+  className: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  eleRef: _propTypes["default"].func,
+  hidden: _propTypes["default"].array,
+  isCover: _propTypes["default"].bool,
+  isInline: _propTypes["default"].bool,
+  isScrollAttribute: _propTypes["default"].bool,
+  scroll: _propTypes["default"].oneOf(['vertical', 'horizontal', 'both', 'none']),
+  tagName: _propTypes["default"].string,
+  tourId: _propTypes["default"].string,
+  wrap: _propTypes["default"].oneOf(['wrap', 'wrap-reverse', 'nowrap'])
+};
+
 function getContainerClassNames(props) {
   var hidden = props.hidden,
       className = props.className,
@@ -30,8 +46,7 @@ function getContainerClassNames(props) {
       alignContent = props.alignContent,
       wrap = props.wrap,
       align = props.align,
-      scroll = props.scroll,
-      preventParentScroll = props.preventParentScroll;
+      scroll = props.scroll;
   var modificators = [className];
 
   if (hidden) {
@@ -108,21 +123,11 @@ function getContainerClassNames(props) {
     modificators.push((0, _utils.getClass)(_LayoutModule["default"], scrollClass));
   }
 
-  if (preventParentScroll) {
-    var ParentScrollClassMapping = {
-      horizontal: 'preventScrollBubbleX',
-      vertical: 'preventScrollBubbleY',
-      both: 'preventScrollBubbleBoth'
-    };
-    var parentScrollClass = ParentScrollClassMapping[preventParentScroll];
-    modificators.push((0, _utils.getClass)(_LayoutModule["default"], parentScrollClass));
-  }
-
   return modificators;
 }
 
 function getContainerProps(props) {
-  return (0, _utils.createProps)(_propTypes.ContainerProps, props, getContainerClassNames(props));
+  return (0, _utils.createProps)(propTypes, props, getContainerClassNames(props));
 }
 
 function Container(props) {
@@ -137,5 +142,11 @@ function Container(props) {
   return /*#__PURE__*/_react["default"].createElement(tagName, childProps);
 }
 
-Container.propTypes = _propTypes.ContainerProps;
-Container.defaultProps = _defaultProps.ContainerDefaultProps;
+Container.propTypes = propTypes;
+Container.defaultProps = {
+  dataId: 'containerComponent',
+  isScrollAttribute: false,
+  isCover: true,
+  alignBox: 'column',
+  tagName: 'div'
+};

package/lib/Layout/Layout.module.css

@@ -118,18 +118,6 @@
   overflow: auto;
 }
 
-.preventScrollBubbleX {
-  overscroll-behavior-x: contain;
-}
-
-.preventScrollBubbleY {
-  overscroll-behavior-y: contain;
-}
-
-.preventScrollBubbleBoth {
-  overscroll-behavior: contain;
-}
-
 /*Column Specification*/
 
 .col-1 {
@@ -333,4 +321,4 @@
   .hidden-screen-xl {
     display: none;
   }
-}
+}

package/lib/Layout/docs/Layout__four_Column.docs.js

@@ -52,7 +52,8 @@ var Layout__four_Column = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           height: '500px',
-          width: '100%'
+          maxWidth: '1200px',
+          margin: '0 auto'
         }
       }, /*#__PURE__*/_react["default"].createElement(_CodeExtractor["default"], null, /*#__PURE__*/_react["default"].createElement(_.Container, {
         alignBox: "column",
@@ -69,51 +70,56 @@ var Layout__four_Column = /*#__PURE__*/function (_React$Component) {
         style: {
           background: '#f5f5f5'
         }
-      }, /*#__PURE__*/_react["default"].createElement(_.Box, {
+      }, /*#__PURE__*/_react["default"].createElement(_.Box, null, /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           background: '#666',
           height: '45px'
         }
-      }), /*#__PURE__*/_react["default"].createElement(_.Box, {
+      })), /*#__PURE__*/_react["default"].createElement(_.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_.Container, {
         alignBox: "row",
         style: {
           background: '#f5f5f5'
-        }
+        },
+        align: "top"
       }, /*#__PURE__*/_react["default"].createElement(_.Box, {
-        hidden: ['xs'],
+        hidden: ['xs']
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           background: 'var(--dot_black)',
           width: '220px',
           height: '100%'
         }
-      }), /*#__PURE__*/_react["default"].createElement(_.Box, {
-        flexible: true,
-        hidden: ['xs'],
+      })), /*#__PURE__*/_react["default"].createElement(_.Box, {
+        hidden: ['xs']
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           background: '#4e524e',
+          width: '320px',
           height: '100%'
         }
-      }), /*#__PURE__*/_react["default"].createElement(_.Box, {
-        flexible: true,
+      })), /*#__PURE__*/_react["default"].createElement(_.Box, {
+        flexible: true
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           background: '#909090',
           height: '100%'
         }
-      }), /*#__PURE__*/_react["default"].createElement(_.Box, {
-        hidden: ['sm', 'xs', 'md'],
+      })), /*#__PURE__*/_react["default"].createElement(_.Box, {
+        hidden: ['sm', 'xs', 'md']
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           background: '#4e524e',
+          width: '320px',
           height: '100%'
-        },
-        flexible: true
-      }))))), /*#__PURE__*/_react["default"].createElement(_.Box, {
+        }
+      })))))), /*#__PURE__*/_react["default"].createElement(_.Box, null, /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           background: '#f1f1f1',
           height: '28px'
         }
-      }))));
+      })))));
     }
   }]);