@zohodesk/components 1.0.0-temp-46 → 1.0.0-temp-49

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

@@ -0,0 +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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'boxComponent').className.contains('scrollnone')).toBe(true);
+  });
+});

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

@@ -0,0 +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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('scrollnone')).toBe(true);
+  });
+});

package/lib/Layout/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Box", {
+  enumerable: true,
+  get: function get() {
+    return _Box["default"];
+  }
+});
+Object.defineProperty(exports, "Container", {
+  enumerable: true,
+  get: function get() {
+    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;

package/lib/Layout/utils.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ViewportSizeType = exports.ColumnSizeType = void 0;
+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) {
+    return key === 'children' || !propTypes[key];
+  }).forEach(function (key) {
+    return newProps[key] = props[key];
+  });
+  var className = classNames.filter(function (cn) {
+    return cn;
+  }).join(' ').trim();
+  return Object.assign({}, newProps, {
+    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) {
+    if (props[value]) {
+      childProps[values[value]] = props[value];
+    }
+  });
+  return childProps;
+}