@zohodesk/components 1.0.0-temp-107 → 1.0.0-temp-108

package/lib/Layout/Layout.module.css

@@ -0,0 +1,336 @@
+.flex {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.inflex {
+  display: inline-flex;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+}
+
+.cover {
+  width: 100%;
+  height: 100%;
+}
+
+/* .flex {
+  -webkit-box-flex: 0;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+} */
+
+.wrap {
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.wrapReverse {
+  -ms-flex-wrap: wrap-reverse;
+  flex-wrap: wrap-reverse;
+}
+
+.coldir {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.rowdir {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.rowReverse {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+
+.colReverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+  -webkit-flex-direction: column-reverse;
+  -ms-flex-direction: column-reverse;
+  flex-direction: column-reverse;
+}
+
+.grow {
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-height: 0;
+  min-width: 0;
+}
+
+.shrinkOff {
+  flex-shrink: 0;
+  -moz-flex-shrink: 0;
+  -webkit-flex-shrink: 0;
+  -ms-flex-shrink: 0;
+}
+
+.shrinkOn {
+  flex-shrink: 1;
+  -moz-flex-shrink: 1;
+  -webkit-flex-shrink: 1;
+  -ms-flex-shrink: 1;
+  min-width: 0;
+}
+
+.basis {
+  flex-basis: 0%;
+  -webkit-flex-basis: 0%;
+  -moz-flex-basis: 0%;
+  -ms-flex-basis: 0%;
+}
+
+.basisAuto {
+  flex-basis: auto;
+  -webkit-flex-basis: auto;
+  -moz-flex-basis: auto;
+  -ms-flex-basis: auto;
+}
+
+.scrolly {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.scrollx {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.scrollnone {
+  overflow: hidden;
+}
+
+.scrollboth {
+  overflow: auto;
+}
+
+.preventScrollBubbleX {
+  overscroll-behavior-x: contain;
+}
+
+.preventScrollBubbleY {
+  overscroll-behavior-y: contain;
+}
+
+.preventScrollBubbleBoth {
+  overscroll-behavior: contain;
+}
+
+/*Column Specification*/
+
+.col-1 {
+  -ms-flex-preferred-size: 8.33333333%;
+  flex-basis: 8.33333333%;
+  max-width: 8.33333333%;
+}
+
+.col-2 {
+  -ms-flex-preferred-size: 16.66666667%;
+  flex-basis: 16.66666667%;
+  max-width: 16.66666667%;
+}
+
+.col-3 {
+  -ms-flex-preferred-size: 25%;
+  flex-basis: 25%;
+  max-width: 25%;
+}
+
+.col-4 {
+  -ms-flex-preferred-size: 33.33333333%;
+  flex-basis: 33.33333333%;
+  max-width: 33.33333333%;
+}
+
+.col-5 {
+  -ms-flex-preferred-size: 41.66666667%;
+  flex-basis: 41.66666667%;
+  max-width: 41.66666667%;
+}
+
+.col-6 {
+  -ms-flex-preferred-size: 50%;
+  flex-basis: 50%;
+  max-width: 50%;
+}
+
+.col-7 {
+  -ms-flex-preferred-size: 58.33333333%;
+  flex-basis: 58.33333333%;
+  max-width: 58.33333333%;
+}
+
+.col-8 {
+  -ms-flex-preferred-size: 66.66666667%;
+  flex-basis: 66.66666667%;
+  max-width: 66.66666667%;
+}
+
+.col-9 {
+  -ms-flex-preferred-size: 75%;
+  flex-basis: 75%;
+  max-width: 75%;
+}
+
+.col-10 {
+  -ms-flex-preferred-size: 83.33333333%;
+  flex-basis: 83.33333333%;
+  max-width: 83.33333333%;
+}
+
+.col-11 {
+  -ms-flex-preferred-size: 91.66666667%;
+  flex-basis: 91.66666667%;
+  max-width: 91.66666667%;
+}
+
+.col-12 {
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+  max-width: 100%;
+}
+
+.hCenter {
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.vCenter {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.both {
+  composes: vCenter;
+  composes: hCenter;
+}
+
+.top {
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+}
+
+.bottom {
+  -webkit-box-align: end;
+  -ms-flex-align: end;
+  align-items: flex-end;
+}
+
+.left {
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
+.right {
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.around {
+  -ms-flex-pack: distribute;
+  justify-content: space-around;
+}
+
+.between {
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.baseline {
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+}
+
+.alignStart {
+  align-content: flex-start;
+}
+
+.alignEnd {
+  align-content: flex-end;
+}
+
+.alignCenter {
+  align-content: center;
+}
+
+.alignAround {
+  align-content: space-around;
+}
+
+.alignBetween {
+  align-content: space-between;
+}
+
+.first {
+  -ms-flex-order: -1;
+  order: -1;
+}
+
+.last {
+  -ms-flex-order: 1;
+  order: 1;
+}
+
+.selfStart {
+  align-self: flex-start;
+}
+
+.selfEnd {
+  align-self: flex-end;
+}
+
+.selfCenter {
+  align-self: center;
+}
+
+/*Hidden Responsive*/
+@media only screen and (max-width: 30em) {
+  .hidden-screen-xs {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: 30.063em) and (max-width: 48em) {
+  .hidden-screen-sm {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: 48.063em) and (max-width: 61.25em) {
+  .hidden-screen-md {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: 61.313em) and (max-width: 75em) {
+  .hidden-screen-lg {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: 75.063em) {
+  .hidden-screen-xl {
+    display: none;
+  }
+}

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

@@ -0,0 +1,105 @@
+"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,110 @@
+"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,30 @@
+"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/props/defaultProps.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContainerDefaultProps = exports.BoxDefaultProps = void 0;
+var BoxDefaultProps = {
+  dataId: 'boxComponent',
+  isScrollAttribute: false,
+  tagName: 'div'
+};
+exports.BoxDefaultProps = BoxDefaultProps;
+var ContainerDefaultProps = {
+  dataId: 'containerComponent',
+  isScrollAttribute: false,
+  isCover: true,
+  alignBox: 'column',
+  tagName: 'div'
+};
+exports.ContainerDefaultProps = ContainerDefaultProps;

package/lib/Layout/props/propTypes.js

@@ -0,0 +1,51 @@
+"use strict";
+
+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']),
+  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,
+  preventParentScroll: _propTypes["default"].PropTypes.oneOf(['vertical', 'horizontal', 'both'])
+};
+exports.BoxProps = BoxProps;
+var ContainerProps = {
+  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']),
+  preventParentScroll: _propTypes["default"].PropTypes.oneOf(['vertical', 'horizontal', 'both'])
+};
+exports.ContainerProps = ContainerProps;

package/lib/Layout/utils.js

@@ -0,0 +1,45 @@
+"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;
+}