@zohodesk/components 1.0.0-temp-666 → 1.0.0-temp-69

package/lib/index.js

@@ -8,6 +8,14 @@ var _exportNames = {
   ReactDOM: true,
   renderToStaticMarkup: true,
   _provider: true,
+  Grid__default: true,
+  Grid__Basic_Detail_Layout: true,
+  Grid__Auto_Flow_Row: true,
+  Grid__Area_Based_Detail_Layout: true,
+  Grid__Line_Based_Detail_Layout: true,
+  Grid__Area_Based_List_Layout: true,
+  Grid__Line_Based_List_Layout: true,
+  Grid__Box_Alignment: true,
   Layout__default: true,
   Layout__two_Column: true,
   Layout__three_Column: true,
@@ -150,11 +158,8 @@ var _exportNames = {
   Provider__Zindex_For_FunctionComponent: true,
   SemanticButton: true,
   SemanticButton__default: true,
-  FocusScope: true,
-  FocusScope__default: true,
-  FocusRing: true,
-  FocusRing__default: true,
-  LightNightMode__AlternativeColors: true
+  LightNightMode__AlternativeColors: true,
+  ResponsiveDropBox: true
 };
 Object.defineProperty(exports, "Accordion", {
   enumerable: true,
@@ -468,28 +473,52 @@ Object.defineProperty(exports, "DropDownHeading__Heading", {
     return _DropDownHeading__default["default"];
   }
 });
-Object.defineProperty(exports, "FocusRing", {
+Object.defineProperty(exports, "Grid__Area_Based_Detail_Layout", {
   enumerable: true,
   get: function get() {
-    return _FocusRing["default"];
+    return _Grid__Area_Based_Detail_Layout["default"];
   }
 });
-Object.defineProperty(exports, "FocusRing__default", {
+Object.defineProperty(exports, "Grid__Area_Based_List_Layout", {
   enumerable: true,
   get: function get() {
-    return _FocusRing__default["default"];
+    return _Grid__Area_Based_List_Layout["default"];
   }
 });
-Object.defineProperty(exports, "FocusScope", {
+Object.defineProperty(exports, "Grid__Auto_Flow_Row", {
   enumerable: true,
   get: function get() {
-    return _FocusScope["default"];
+    return _Grid__Auto_Flow_Row["default"];
   }
 });
-Object.defineProperty(exports, "FocusScope__default", {
+Object.defineProperty(exports, "Grid__Basic_Detail_Layout", {
   enumerable: true,
   get: function get() {
-    return _FocusScope__default["default"];
+    return _Grid__Basic_Detail_Layout["default"];
+  }
+});
+Object.defineProperty(exports, "Grid__Box_Alignment", {
+  enumerable: true,
+  get: function get() {
+    return _Grid__Box_Alignment["default"];
+  }
+});
+Object.defineProperty(exports, "Grid__Line_Based_Detail_Layout", {
+  enumerable: true,
+  get: function get() {
+    return _Grid__Line_Based_Detail_Layout["default"];
+  }
+});
+Object.defineProperty(exports, "Grid__Line_Based_List_Layout", {
+  enumerable: true,
+  get: function get() {
+    return _Grid__Line_Based_List_Layout["default"];
+  }
+});
+Object.defineProperty(exports, "Grid__default", {
+  enumerable: true,
+  get: function get() {
+    return _Grid__default["default"];
   }
 });
 Object.defineProperty(exports, "GroupSelect", {
@@ -786,6 +815,12 @@ Object.defineProperty(exports, "ReactDOM", {
     return _reactDom["default"];
   }
 });
+Object.defineProperty(exports, "ResponsiveDropBox", {
+  enumerable: true,
+  get: function get() {
+    return _ResponsiveDropBox["default"];
+  }
+});
 Object.defineProperty(exports, "Responsive__Custom", {
   enumerable: true,
   get: function get() {
@@ -1087,6 +1122,36 @@ Object.keys(_Layout).forEach(function (key) {
   });
 });
 
+var _Grid = require("./ucl/Grid");
+
+Object.keys(_Grid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Grid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Grid[key];
+    }
+  });
+});
+
+var _Grid__default = _interopRequireDefault(require("./ucl/Grid/docs/Grid__default.docs"));
+
+var _Grid__Basic_Detail_Layout = _interopRequireDefault(require("./ucl/Grid/docs/Grid__Basic_Detail_Layout.docs"));
+
+var _Grid__Auto_Flow_Row = _interopRequireDefault(require("./ucl/Grid/docs/Grid__Auto_Flow_Row.docs"));
+
+var _Grid__Area_Based_Detail_Layout = _interopRequireDefault(require("./ucl/Grid/docs/Grid__Area_Based_Detail_Layout.docs"));
+
+var _Grid__Line_Based_Detail_Layout = _interopRequireDefault(require("./ucl/Grid/docs/Grid__Line_Based_Detail_Layout.docs"));
+
+var _Grid__Area_Based_List_Layout = _interopRequireDefault(require("./ucl/Grid/docs/Grid__Area_Based_List_Layout.docs"));
+
+var _Grid__Line_Based_List_Layout = _interopRequireDefault(require("./ucl/Grid/docs/Grid__Line_Based_List_Layout.docs"));
+
+var _Grid__Box_Alignment = _interopRequireDefault(require("./ucl/Grid/docs/Grid__Box_Alignment.docs"));
+
 var _Layout__default = _interopRequireDefault(require("./Layout/docs/Layout__default.docs"));
 
 var _Layout__two_Column = _interopRequireDefault(require("./Layout/docs/Layout__two_Column.docs"));
@@ -1399,14 +1464,8 @@ var _Button2 = _interopRequireDefault(require("./semantic/Button/Button"));
 
 var _Button__defaultDocs = _interopRequireDefault(require("./semantic/Button/docs/Button__default.docs.js"));
 
-var _FocusScope = _interopRequireDefault(require("./a11y/FocusScope/FocusScope"));
-
-var _FocusScope__default = _interopRequireDefault(require("./a11y/FocusScope/docs/FocusScope__default.docs"));
-
-var _FocusRing = _interopRequireDefault(require("./beta/FocusRing/FocusRing"));
-
-var _FocusRing__default = _interopRequireDefault(require("./beta/FocusRing/docs/FocusRing__default.docs"));
-
 var _AlternativeColors = _interopRequireDefault(require("./LightNightMode/docs/AlternativeColors.docs"));
 
+var _ResponsiveDropBox = _interopRequireDefault(require("./ResponsiveDropBox/ResponsiveDropBox"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/semantic/Button/Button.js

@@ -9,7 +9,9 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
 
 var _semanticButtonModule = _interopRequireDefault(require("./semanticButton.module.css"));
 
@@ -92,43 +94,8 @@ var Button = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = Button;
-Button.defaultProps = {
-  children: null,
-  autoFocus: false,
-  dataId: 'semanticButton',
-  disabled: false,
-  palette: 'primary',
-  text: 'Button',
-  type: 'button',
-  value: 'text',
-  customClass: '',
-  a11y: {}
-};
-Button.propTypes = {
-  ariaControls: _propTypes["default"].bool,
-  ariaExpanded: _propTypes["default"].bool,
-  ariaHaspopup: _propTypes["default"].bool,
-  ariaLabel: _propTypes["default"].string,
-  autofocus: _propTypes["default"].bool,
-  children: _propTypes["default"].node,
-  customClass: _propTypes["default"].string,
-  dataId: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool,
-  name: _propTypes["default"].string,
-  onClick: _propTypes["default"].func,
-  ref: _propTypes["default"].func,
-  text: _propTypes["default"].string,
-  title: _propTypes["default"].string,
-  type: _propTypes["default"].oneOf(['submit', 'reset', 'button']),
-  value: _propTypes["default"].string,
-  a11y: _propTypes["default"].shape({
-    ariaLabel: _propTypes["default"].string,
-    ariaHaspopup: _propTypes["default"].bool,
-    ariaExpanded: _propTypes["default"].bool,
-    ariaControls: _propTypes["default"].string,
-    ariaLabelledby: _propTypes["default"].string
-  })
-};
+Button.defaultProps = _defaultProps.defaultProps;
+Button.propTypes = _propTypes.propTypes;
 
 if (false) {
   Button.docs = {

package/lib/semantic/Button/props/defaultProps.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  children: null,
+  autoFocus: false,
+  dataId: 'semanticButton',
+  disabled: false,
+  palette: 'primary',
+  text: 'Button',
+  type: 'button',
+  value: 'text',
+  customClass: '',
+  a11y: {}
+};
+exports.defaultProps = defaultProps;

package/lib/semantic/Button/props/propTypes.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  ariaControls: _propTypes["default"].bool,
+  ariaExpanded: _propTypes["default"].bool,
+  ariaHaspopup: _propTypes["default"].bool,
+  ariaLabel: _propTypes["default"].string,
+  autofocus: _propTypes["default"].bool,
+  children: _propTypes["default"].node,
+  customClass: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  name: _propTypes["default"].string,
+  onClick: _propTypes["default"].func,
+  ref: _propTypes["default"].func,
+  text: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  type: _propTypes["default"].oneOf(['submit', 'reset', 'button']),
+  value: _propTypes["default"].string,
+  a11y: _propTypes["default"].shape({
+    ariaLabel: _propTypes["default"].string,
+    ariaHaspopup: _propTypes["default"].bool,
+    ariaExpanded: _propTypes["default"].bool,
+    ariaControls: _propTypes["default"].string,
+    ariaLabelledby: _propTypes["default"].string
+  })
+};
+exports.propTypes = propTypes;

package/lib/ucl/Grid/Grid.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _theme = require("@zohodesk/theme");
+
+var _GridModule = _interopRequireDefault(require("./css/Grid.module.css"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _propConstants = _interopRequireDefault(require("./props/propConstants"));
+
+var _cssJSLogic = _interopRequireDefault(require("./css/cssJSLogic"));
+
+var _componentNames = _interopRequireDefault(require("./componentNames"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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; }
+
+var additionStyle = ['base'];
+
+var Grid = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+  var tagName = props.tagName,
+      customStyle = props.customStyle,
+      customId = props.customId,
+      tagAttributes = props.tagAttributes,
+      tagGeneralAttributes = props.tagGeneralAttributes,
+      children = props.children,
+      a11y = props.a11y;
+  /* external customization - need memorize?*/
+
+  var newStyle = (0, _useMergeStyle["default"])(_GridModule["default"], customStyle, additionStyle);
+  /* css classname added based on logic */
+
+  var className = (0, _cssJSLogic["default"])(props, newStyle);
+  return /*#__PURE__*/_react["default"].createElement(tagName, _objectSpread(_objectSpread(_objectSpread({}, tagGeneralAttributes), {}, {
+    'data-id': customId,
+    className: className,
+    ref: ref
+  }, tagAttributes), a11y), children);
+});
+
+Grid.displayName = 'Grid';
+Grid.defaultProps = _defaultProps["default"];
+Grid.propTypes = _propTypes["default"];
+Grid.constantProps = _propConstants["default"];
+
+var _default = (0, _theme.withTheme)(Grid, _componentNames["default"].GridLayout);
+
+exports["default"] = _default;
+Grid.docs = {
+  componentGroup: 'Grid',
+  folderName: 'Style Guide',
+  description: ' ',
+  external: false
+};

package/lib/ucl/Grid/componentNames.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  "GridLayout": "GridLayout",
+  "NileLayout": "NileLayout",
+  "AmazonLayout": "AmazonLayout",
+  "YangtzeLayout": "YangtzeLayout"
+};
+exports["default"] = _default;

package/lib/ucl/Grid/css/Grid.module.css

@@ -0,0 +1,217 @@
+.cover {
+  height: 100%;
+  width: 100%;
+}
+
+/*Container Props */
+
+.grid {
+  display: grid;
+}
+
+.inlineGrid {
+  display: inline-grid;
+}
+
+.row {
+  grid-auto-flow: row;
+}
+
+.column {
+  grid-auto-flow: column;
+}
+
+.dense {
+  grid-auto-flow: dense;
+}
+
+.rowDense {
+  grid-auto-flow: row dense;
+}
+
+.colDense {
+  grid-auto-flow: column dense;
+}
+
+/* align-items props start */
+
+.alignItems_start {
+  align-items: start;
+}
+
+.alignItems_end {
+  align-items: end;
+}
+
+.alignItems_center {
+  align-items: center;
+}
+
+.alignItems_stretch {
+  align-items: stretch;
+}
+
+.alignItems_baseline {
+  align-items: baseline;
+}
+
+/* align-items props end */
+
+/* align-self props start */
+
+.alignSelf_start {
+  align-self: start;
+}
+
+.alignSelf_end {
+  align-self: end;
+}
+
+.alignSelf_center {
+  align-self: center;
+}
+
+.alignSelf_stretch {
+  align-self: stretch;
+}
+
+.alignSelf_baseline {
+  align-self: baseline;
+}
+
+/* align-self props End */
+
+/* align-content props start*/
+
+.alignContent_start {
+  align-content: start;
+}
+
+.alignContent_end {
+  align-content: end;
+}
+
+.alignContent_center {
+  align-content: center;
+}
+
+.alignContent_stretch {
+  align-content: stretch;
+}
+
+.alignContent_baseline {
+  align-content: baseline;
+}
+
+.alignContent_spaceBetween {
+  align-content: space-between;
+}
+
+.alignContent_spaceAround {
+  align-content: space-around;
+}
+
+.alignContent_spaceEvenly {
+  align-content: space-evenly;
+}
+
+/* align-content props end*/
+
+
+/* justify-items props start */
+
+.justifyItems_start {
+  justify-items: start;
+}
+
+.justifyItems_end {
+  justify-items: end;
+}
+
+.justifyItems_center {
+  justify-items: center;
+}
+
+.justifyItems_stretch {
+  justify-items: stretch;
+}
+
+.justifyItems_baseline {
+  justify-items: baseline;
+}
+
+/* justify-items props end */
+
+/* justify-self props start */
+
+.justifySelf_start {
+  justify-self: start;
+}
+
+.justifySelf_end {
+  justify-self: end;
+}
+
+.justifySelf_center {
+  justify-self: center;
+}
+
+.justifySelf_stretch {
+  justify-self: stretch;
+}
+
+.justifySelf_baseline {
+  justify-self: baseline;
+}
+
+/* justify-self props end */
+
+/* justify-content props start */
+
+.justifyContent_start {
+  justify-content: start;
+}
+
+.justifyContent_end {
+  justify-content: end;
+}
+
+.justifyContent_center {
+  justify-content: center;
+}
+
+.justifyContent_stretch {
+  justify-content: stretch;
+}
+
+.justifyContent_spaceBetween {
+  justify-content: space-between;
+}
+
+.justifyContent_spaceAround {
+  justify-content: space-around;
+}
+
+.justifyContent_spaceEvenly {
+  justify-content: space-evenly;
+}
+
+/* justify-content props end */
+
+.scroll_y {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.scroll_x {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.scroll_none {
+  overflow: hidden;
+}
+
+.scroll_both {
+  overflow: auto;
+}

package/lib/ucl/Grid/css/cssJSLogic.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = _default;
+
+var _utils = require("@zohodesk/utils");
+
+var _propConstants = _interopRequireDefault(require("../props/propConstants"));
+
+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; }
+
+/**
+ * container classname based on js state
+ * @param {object} props flex props
+ * @param {object} flex style object
+ * @returns {string} classnames string with space separate
+ */
+function _default(props, newStyle) {
+  var _compileClassNames;
+
+  var display = props.display,
+      flow = props.flow,
+      alignItems = props.alignItems,
+      alignSelf = props.alignSelf,
+      alignContent = props.alignContent,
+      justifyItems = props.justifyItems,
+      justifySelf = props.justifySelf,
+      justifyContent = props.justifyContent,
+      overFlowScroll = props.overFlowScroll,
+      isCover = props.isCover,
+      className = props.className;
+  var alignItemsClassname = "alignItems_".concat(alignItems);
+  var alignSelfClassname = "alignSelf_".concat(alignSelf);
+  var alignContentClassname = "alignContent_".concat(alignContent);
+  var justifyItemsClassname = "justifyItems_".concat(justifyItems);
+  var justifySelfClassname = "justifySelf_".concat(justifySelf);
+  var justifyContentClassname = "justifyContent_".concat(justifyContent);
+  var overFlow = "scroll_".concat(overFlowScroll);
+  return (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, newStyle.base, true), _defineProperty(_compileClassNames, newStyle.grid, display === _propConstants["default"].display.grid), _defineProperty(_compileClassNames, newStyle.inlineGrid, display === _propConstants["default"].display.inline), _defineProperty(_compileClassNames, newStyle[flow], flow && display), _defineProperty(_compileClassNames, newStyle[alignItemsClassname], alignItems && display), _defineProperty(_compileClassNames, newStyle[justifyItemsClassname], justifyItems && display), _defineProperty(_compileClassNames, newStyle[alignContentClassname], alignContent && display), _defineProperty(_compileClassNames, newStyle[justifyContentClassname], justifyContent && display), _defineProperty(_compileClassNames, newStyle[alignSelfClassname], alignSelf), _defineProperty(_compileClassNames, newStyle[justifySelfClassname], justifySelf), _defineProperty(_compileClassNames, newStyle[overFlow], overFlowScroll), _defineProperty(_compileClassNames, newStyle.cover, isCover), _defineProperty(_compileClassNames, className, className), _compileClassNames));
+}