@zohodesk/components 1.0.0-test-252 → 1.0.0

package/lib/Layout/Layout.module.css

@@ -11,8 +11,8 @@
 }
 
 .cover {
-  width: 100%;
-  height: 100%;
+  width: 100% ;
+  height: 100% ;
 }
 
 /* .flex {
@@ -67,8 +67,8 @@
   -webkit-box-flex: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
-  min-height: 0;
-  min-width: 0;
+  min-height: 0 ;
+  min-width: 0 ;
 }
 
 .shrinkOff {
@@ -83,18 +83,18 @@
   -moz-flex-shrink: 1;
   -webkit-flex-shrink: 1;
   -ms-flex-shrink: 1;
-  min-width: 0;
+  min-width: 0 ;
 }
 
 .basis {
-  flex-basis: 0%;
+  flex-basis: 0% ;
   -webkit-flex-basis: 0%;
   -moz-flex-basis: 0%;
   -ms-flex-basis: 0%;
 }
 
 .basisAuto {
-  flex-basis: auto;
+  flex-basis: auto ;
   -webkit-flex-basis: auto;
   -moz-flex-basis: auto;
   -ms-flex-basis: auto;
@@ -146,8 +146,8 @@
 
 .col-3 {
   -ms-flex-preferred-size: 25%;
-  flex-basis: 25%;
-  max-width: 25%;
+  flex-basis: 25% ;
+  max-width: 25% ;
 }
 
 .col-4 {
@@ -164,8 +164,8 @@
 
 .col-6 {
   -ms-flex-preferred-size: 50%;
-  flex-basis: 50%;
-  max-width: 50%;
+  flex-basis: 50% ;
+  max-width: 50% ;
 }
 
 .col-7 {
@@ -182,8 +182,8 @@
 
 .col-9 {
   -ms-flex-preferred-size: 75%;
-  flex-basis: 75%;
-  max-width: 75%;
+  flex-basis: 75% ;
+  max-width: 75% ;
 }
 
 .col-10 {
@@ -200,8 +200,8 @@
 
 .col-12 {
   -ms-flex-preferred-size: 100%;
-  flex-basis: 100%;
-  max-width: 100%;
+  flex-basis: 100% ;
+  max-width: 100% ;
 }
 
 .hCenter {

package/lib/Layout/__tests__/Box.spec.js

@@ -1,105 +1,121 @@
 "use strict";
 
 var _react = _interopRequireDefault(require("react"));
+
 var _Box = _interopRequireDefault(require("../Box"));
+
 var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 describe('Layout Component', function () {
   it('Should contains the data-scroll is true', function () {
     var _setup = setup(_Box["default"], {
-        isScrollAttribute: true
-      }),
-      props = _setup.props,
-      renderedDOM = _setup.renderedDOM;
+      isScrollAttribute: true
+    }),
+        props = _setup.props,
+        renderedDOM = _setup.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'boxComponent').getAttribute('data-scroll').contains(true)).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup2 = setup(_Box["default"], {
-        flexible: true
-      }),
-      props = _setup2.props,
-      renderedDOM = _setup2.renderedDOM;
+      flexible: true
+    }),
+        props = _setup2.props,
+        renderedDOM = _setup2.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'boxComponent').className.contains('grow basis')).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup3 = setup(_Box["default"], {
-        flexible: true,
-        adjust: true
-      }),
-      props = _setup3.props,
-      renderedDOM = _setup3.renderedDOM;
+      flexible: true,
+      adjust: true
+    }),
+        props = _setup3.props,
+        renderedDOM = _setup3.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'boxComponent').className.contains('grow')).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup4 = setup(_Box["default"], {
-        adjust: true
-      }),
-      props = _setup4.props,
-      renderedDOM = _setup4.renderedDOM;
+      adjust: true
+    }),
+        props = _setup4.props,
+        renderedDOM = _setup4.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'boxComponent').className.contains('basisAuto')).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup5 = setup(_Box["default"], {
-        shrink: false
-      }),
-      props = _setup5.props,
-      renderedDOM = _setup5.renderedDOM;
+      shrink: false
+    }),
+        props = _setup5.props,
+        renderedDOM = _setup5.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'boxComponent').className.contains('shrink')).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup6 = setup(_Box["default"], {
-        shrink: true
-      }),
-      props = _setup6.props,
-      renderedDOM = _setup6.renderedDOM;
+      shrink: true
+    }),
+        props = _setup6.props,
+        renderedDOM = _setup6.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'boxComponent').className.contains('shrinkOn')).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup7 = setup(_Box["default"], {
-        hidden: ['lg']
-      }),
-      props = _setup7.props,
-      renderedDOM = _setup7.renderedDOM;
+      hidden: ['lg']
+    }),
+        props = _setup7.props,
+        renderedDOM = _setup7.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'boxComponent').className.contains('hidden-screen-lg')).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup8 = setup(_Box["default"], {
-        column: '4'
-      }),
-      props = _setup8.props,
-      renderedDOM = _setup8.renderedDOM;
+      column: '4'
+    }),
+        props = _setup8.props,
+        renderedDOM = _setup8.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'boxComponent').className.contains('col-4')).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup9 = setup(_Box["default"], {
-        scroll: 'horizontal'
-      }),
-      props = _setup9.props,
-      renderedDOM = _setup9.renderedDOM;
+      scroll: 'horizontal'
+    }),
+        props = _setup9.props,
+        renderedDOM = _setup9.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'boxComponent').className.contains('scrollx')).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup10 = setup(_Box["default"], {
-        scroll: 'vertical'
-      }),
-      props = _setup10.props,
-      renderedDOM = _setup10.renderedDOM;
+      scroll: 'vertical'
+    }),
+        props = _setup10.props,
+        renderedDOM = _setup10.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'boxComponent').className.contains('scrolly')).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup11 = setup(_Box["default"], {
-        scroll: 'both'
-      }),
-      props = _setup11.props,
-      renderedDOM = _setup11.renderedDOM;
+      scroll: 'both'
+    }),
+        props = _setup11.props,
+        renderedDOM = _setup11.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'boxComponent').className.contains('scrollboth')).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup12 = setup(_Box["default"], {
-        scroll: 'none'
-      }),
-      props = _setup12.props,
-      renderedDOM = _setup12.renderedDOM;
+      scroll: 'none'
+    }),
+        props = _setup12.props,
+        renderedDOM = _setup12.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'boxComponent').className.contains('scrollnone')).toBe(true);
   });
 });

package/lib/Layout/__tests__/Container.spec.js

@@ -1,110 +1,127 @@
 "use strict";
 
 var _react = _interopRequireDefault(require("react"));
+
 var _Container = _interopRequireDefault(require("../Container"));
+
 var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 describe('Layout Component', function () {
   it('Should contains the data-scroll is true', function () {
     var _setup = setup(_Container["default"], {
-        isScrollAttribute: true
-      }),
-      props = _setup.props,
-      renderedDOM = _setup.renderedDOM;
+      isScrollAttribute: true
+    }),
+        props = _setup.props,
+        renderedDOM = _setup.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').getAttribute('data-scroll').contains(true)).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup2 = setup(_Container["default"]),
-      props = _setup2.props,
-      renderedDOM = _setup2.renderedDOM;
+        props = _setup2.props,
+        renderedDOM = _setup2.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('flex')).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup3 = setup(_Container["default"], {
-        alignBox: 'row'
-      }),
-      props = _setup3.props,
-      renderedDOM = _setup3.renderedDOM;
+      alignBox: 'row'
+    }),
+        props = _setup3.props,
+        renderedDOM = _setup3.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('rowdir')).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup4 = setup(_Container["default"], {
-        alignBox: 'row-reverse'
-      }),
-      props = _setup4.props,
-      renderedDOM = _setup4.renderedDOM;
+      alignBox: 'row-reverse'
+    }),
+        props = _setup4.props,
+        renderedDOM = _setup4.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('rowReverse')).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup5 = setup(_Container["default"], {
-        hidden: ['lg']
-      }),
-      props = _setup5.props,
-      renderedDOM = _setup5.renderedDOM;
+      hidden: ['lg']
+    }),
+        props = _setup5.props,
+        renderedDOM = _setup5.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('hidden-screen-lg')).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup6 = setup(_Container["default"], {
-        wrap: 'wrap'
-      }),
-      props = _setup6.props,
-      renderedDOM = _setup6.renderedDOM;
+      wrap: 'wrap'
+    }),
+        props = _setup6.props,
+        renderedDOM = _setup6.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('wrap')).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup7 = setup(_Container["default"], {
-        align: 'horizontal'
-      }),
-      props = _setup7.props,
-      renderedDOM = _setup7.renderedDOM;
+      align: 'horizontal'
+    }),
+        props = _setup7.props,
+        renderedDOM = _setup7.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('hCenter')).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup8 = setup(_Container["default"], {
-        align: 'vertical'
-      }),
-      props = _setup8.props,
-      renderedDOM = _setup8.renderedDOM;
+      align: 'vertical'
+    }),
+        props = _setup8.props,
+        renderedDOM = _setup8.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('vCenter')).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup9 = setup(_Container["default"], {
-        align: 'both'
-      }),
-      props = _setup9.props,
-      renderedDOM = _setup9.renderedDOM;
+      align: 'both'
+    }),
+        props = _setup9.props,
+        renderedDOM = _setup9.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('both')).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup10 = setup(_Container["default"], {
-        scroll: 'horizontal'
-      }),
-      props = _setup10.props,
-      renderedDOM = _setup10.renderedDOM;
+      scroll: 'horizontal'
+    }),
+        props = _setup10.props,
+        renderedDOM = _setup10.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('scrollx')).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup11 = setup(_Container["default"], {
-        scroll: 'vertical'
-      }),
-      props = _setup11.props,
-      renderedDOM = _setup11.renderedDOM;
+      scroll: 'vertical'
+    }),
+        props = _setup11.props,
+        renderedDOM = _setup11.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('scrolly')).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup12 = setup(_Container["default"], {
-        scroll: 'both'
-      }),
-      props = _setup12.props,
-      renderedDOM = _setup12.renderedDOM;
+      scroll: 'both'
+    }),
+        props = _setup12.props,
+        renderedDOM = _setup12.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('scrollboth')).toBe(true);
   });
   it('Should contains the default class', function () {
     var _setup13 = setup(_Container["default"], {
-        scroll: 'none'
-      }),
-      props = _setup13.props,
-      renderedDOM = _setup13.renderedDOM;
+      scroll: 'none'
+    }),
+        props = _setup13.props,
+        renderedDOM = _setup13.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('scrollnone')).toBe(true);
   });
 });

package/lib/Layout/index.js

@@ -15,16 +15,9 @@ Object.defineProperty(exports, "Container", {
     return _Container["default"];
   }
 });
-exports.Layout = void 0;
+
 var _Container = _interopRequireDefault(require("./Container"));
+
 var _Box = _interopRequireDefault(require("./Box"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var Layout = {
-  docs: {
-    componentGroup: 'Layout',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  }
-};
-exports.Layout = Layout;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/Layout/props/defaultProps.js

@@ -6,15 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.ContainerDefaultProps = exports.BoxDefaultProps = void 0;
 var BoxDefaultProps = {
   dataId: 'boxComponent',
+  testId: '',
   isScrollAttribute: false,
-  tagName: 'div'
+  tagName: 'div',
+  dataSelectorId: 'box'
 };
 exports.BoxDefaultProps = BoxDefaultProps;
 var ContainerDefaultProps = {
   dataId: 'containerComponent',
+  testId: '',
   isScrollAttribute: false,
   isCover: true,
   alignBox: 'column',
-  tagName: 'div'
+  tagName: 'div',
+  dataSelectorId: 'container'
 };
 exports.ContainerDefaultProps = ContainerDefaultProps;

package/lib/Layout/props/propTypes.js

@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ContainerProps = exports.BoxProps = void 0;
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var BoxProps = {
   adjust: _propTypes["default"].bool,
   align: _propTypes["default"].oneOf(['start', 'end', 'center']),
@@ -13,6 +16,8 @@ var BoxProps = {
   className: _propTypes["default"].string,
   column: _propTypes["default"].oneOf(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']),
   dataId: _propTypes["default"].string,
+  testId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   eleRef: _propTypes["default"].func,
   flexible: _propTypes["default"].bool,
   hidden: _propTypes["default"].arrayOf(function (propValue, key, componentName, location, propFullName) {
@@ -23,11 +28,11 @@ var BoxProps = {
   isFirst: _propTypes["default"].bool,
   isLast: _propTypes["default"].bool,
   isScrollAttribute: _propTypes["default"].bool,
-  scroll: _propTypes["default"].PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
+  scroll: _propTypes["default"].oneOf(['vertical', 'horizontal', 'both', 'none']),
   shrink: _propTypes["default"].bool,
   tagName: _propTypes["default"].string,
   tourId: _propTypes["default"].string,
-  preventParentScroll: _propTypes["default"].PropTypes.oneOf(['vertical', 'horizontal', 'both'])
+  preventParentScroll: _propTypes["default"].oneOf(['vertical', 'horizontal', 'both'])
 };
 exports.BoxProps = BoxProps;
 var ContainerProps = {
@@ -37,6 +42,8 @@ var ContainerProps = {
   children: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].string]),
   className: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
+  testId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   eleRef: _propTypes["default"].func,
   hidden: _propTypes["default"].array,
   isCover: _propTypes["default"].bool,
@@ -46,6 +53,6 @@ var ContainerProps = {
   tagName: _propTypes["default"].string,
   tourId: _propTypes["default"].string,
   wrap: _propTypes["default"].oneOf(['wrap', 'wrap-reverse', 'nowrap']),
-  preventParentScroll: _propTypes["default"].PropTypes.oneOf(['vertical', 'horizontal', 'both'])
+  preventParentScroll: _propTypes["default"].oneOf(['vertical', 'horizontal', 'both'])
 };
 exports.ContainerProps = ContainerProps;

package/lib/Layout/utils.js

@@ -8,15 +8,23 @@ exports.createProps = createProps;
 exports.getClass = getClass;
 exports.isInteger = isInteger;
 exports.setProps = setProps;
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var ColumnSizeType = _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].bool]);
+
 exports.ColumnSizeType = ColumnSizeType;
+
 var ViewportSizeType = _propTypes["default"].oneOf(['xs', 'sm', 'md', 'lg']);
+
 exports.ViewportSizeType = ViewportSizeType;
+
 function getClass(styles, className) {
   return styles && styles[className] ? styles[className] : className;
 }
+
 function createProps(propTypes, props, classNames) {
   var newProps = {};
   Object.keys(props).filter(function (key) {
@@ -31,13 +39,19 @@ function createProps(propTypes, props, classNames) {
     className: className
   });
 }
+
 function isInteger(value) {
   return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
 }
+
 function setProps(childProps, props) {
   var values = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  Object.keys(values).map(function (value) {
+  Object.keys(values).forEach(function (value) {
     if (props[value]) {
+      if (value === 'dataId') {
+        childProps['data-test-id'] = props[value];
+      }
+
       childProps[values[value]] = props[value];
     }
   });