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

package/lib/LightNightMode/Colors.json

@@ -0,0 +1,398 @@
+[
+    {
+       "lightColor": "#c8cbdc",
+       "equalNightColors": ["#3e4d63, #5a616f, #c8cbdc, #384157, #828994"]
+    },
+    {
+       "lightColor": "#788190",
+       "equalNightColors": "#828994, #a8b0bd, #788190"
+    },
+    {
+       "lightColor": "#d5dde7",
+       "equalNightColors": "#384157, #2d3748, #d5dde7, #828994, #262f3d, rgba(255 255 255 / 0.2)"
+    },
+    {
+       "lightColor": "#0a73eb",
+       "equalNightColors": "#479dff, #828994, #334b68"
+    },
+    {
+       "lightColor": "#f6f8fb",
+       "equalNightColors": "#262f3d, #384157, #f6f8fb, #2e3642, #1b212b, #e2e4e6, rgba(255 255 255 / 0.03), #000"
+    },
+    {
+       "lightColor": "#f1f7fe",
+       "equalNightColors": "#2c3b4d"
+    },
+    {
+       "lightColor": "rgba(255 255 255 / 0.5)",
+       "equalNightColors": "rgba(22 27 35 / 0.5)"
+    },
+    {
+       "lightColor": "#000",
+       "equalNightColors": "#e2e4e6, #a8b0bd, #3e4d63"
+    },
+    {
+       "lightColor": "#fff",
+       "equalNightColors": "#232b38, #fff, #e2e4e6, #479dff, #433c32, #313d54, #272727"
+    },
+    {
+       "lightColor": "rgba(0 0 0 / 0.11)",
+       "equalNightColors": "rgba(255 255 255 / 0.14)"
+    },
+    {
+       "lightColor": "rgba(255 255 255 / 0.14)",
+       "equalNightColors": "rgba(0 0 0 / 0.11)"
+    },
+    {
+       "lightColor": "#0053b8",
+       "equalNightColors": "#6eb2ff, #0053b8, #1065cc"
+    },
+    {
+       "lightColor": "rgba(10 115 235 / 0.2)",
+       "equalNightColors": "rgba(10 115 235 / 0.2)"
+    },
+    {
+       "lightColor": "#5a616f",
+       "equalNightColors": "#a8b0bd, #2c3b4d"
+    },
+    {
+       "lightColor": "#de3535",
+       "equalNightColors": "#ff6b6b"
+    },
+    {
+       "lightColor": "#ab1a18",
+       "equalNightColors": "#cc302d"
+    },
+    {
+       "lightColor": "#26a942",
+       "equalNightColors": "#4ac064"
+    },
+    {
+       "lightColor": "#0e7526",
+       "equalNightColors": "#1b8c35"
+    },
+    {
+       "lightColor": "#f6b041",
+       "equalNightColors": "#f6b041"
+    },
+    {
+       "lightColor": "#e7ecf4",
+       "equalNightColors": "#161b23, #384157, #2d3748, #1b212b, rgba(255 255 255 / 0.03), #1c2534"
+    },
+    {
+       "lightColor": "#ebf0f5",
+       "equalNightColors": "#2d3748, #384157, #ebf0f5"
+    },
+    {
+       "lightColor": "rgba(0 0 0 / 0.95)",
+       "equalNightColors": "#3e4d63"
+    },
+    {
+       "lightColor": "#b7d1f0",
+       "equalNightColors": "#3f536b"
+    },
+    {
+       "lightColor": "#ecf4fd",
+       "equalNightColors": "#262f3d, #25333a"
+    },
+    {
+       "lightColor": "#fdf3f3",
+       "equalNightColors": "rgba(255 107 107 / 0.05), #31323f, #503348, #2e2e3b, rgba(255 128 31 / 0.05), rgba(255 107 107 / 0.05), #fdf3f3"
+    },
+    {
+       "lightColor": "rgba(0 0 0 / 0.02)",
+       "equalNightColors": "rgba(225 225 225 / 0.06)"
+    },
+    {
+       "lightColor": "rgba(0 0 0 / 0.12)",
+       "equalNightColors": "rgba(225 225 225 / 0.12)"
+    },
+    {
+       "lightColor": "rgba(225 225 225 / 0.15)",
+       "equalNightColors": "rgba(225 225 225 / 0.12)"
+    },
+    {
+       "lightColor": "rgba(0 0 0 / 0.16)",
+       "equalNightColors": "rgba(168 176 189 / 0.3)"
+    },
+    {
+       "lightColor": "rgba(225 225 225 / 0.17)",
+       "equalNightColors": "rgba(225 225 225 / 0.14)"
+    },
+    {
+       "lightColor": "rgba(44 51 77 / 0.1)",
+       "equalNightColors": "rgba(225 225 225 / 0.12)"
+    },
+    {
+       "lightColor": "rgba(225 225 225 / 0.12)",
+       "equalNightColors": "rgba(225 225 225 / 0.12)"
+    },
+    {
+       "lightColor": "rgba(225 225 225 / 0.06)",
+       "equalNightColors": "rgba(225 225 225 / 0.06)"
+    },
+    {
+       "lightColor": "#2381ed",
+       "equalNightColors": "rgba(255 255 255 / 0.15)"
+    },
+    {
+       "lightColor": "#ff6f00",
+       "equalNightColors": "#ff801f"
+    },
+    {
+       "lightColor": "#1e2633",
+       "equalNightColors": "#e2e4e6, #3e4d63, #1e2633"
+    },
+    {
+       "lightColor": "#f2faf5",
+       "equalNightColors": "#232b38, #28373f"
+    },
+    {
+       "lightColor": "#fcebeb",
+       "equalNightColors": "#583a45, #864654, #fcebeb"
+    },
+    {
+       "lightColor": "rgba(55 84 170 / 0.25)",
+       "equalNightColors": "rgba(0 0 0 / 0.3), rgba(0 0 0 / 0.4)"
+    },
+    {
+       "lightColor": "#5cc1a5",
+       "equalNightColors": "#5cc1a5, #4ac064"
+    },
+    {
+       "lightColor": "#010101",
+       "equalNightColors": "#ff6b6b, #e2e4e6"
+    },
+    {
+       "lightColor": "#bdd9f9",
+       "equalNightColors": "#2d3748, #2d4869"
+    },
+    {
+       "lightColor": "#f8eaae",
+       "equalNightColors": "#2d3748, #574c3d"
+    },
+    {
+       "lightColor": "#2c334d",
+       "equalNightColors": "#151c28, #1b212b"
+    },
+    {
+       "lightColor": "rgba(0 0 0 / 0.45)",
+       "equalNightColors": "rgba(0 0 0 / 0.8)"
+    },
+    {
+       "lightColor": "rgba(0 0 0 / 0.9)",
+       "equalNightColors": "rgba(0 0 0 / 0.8)"
+    },
+    {
+       "lightColor": "rgba(44 51 77 / 0.45)",
+       "equalNightColors": "rgba(44 51 77 / 0.75)"
+    },
+    {
+       "lightColor": "#f6f7f8",
+       "equalNightColors": "#262f3d"
+    },
+    {
+       "lightColor": "rgba(55 84 170 / 0.25)",
+       "equalNightColors": "rgba(0 0 0 / 0.4)"
+    },
+    {
+       "lightColor": "#e9f7ef",
+       "equalNightColors": "#2c4e42"
+    },
+    {
+       "lightColor": "#fff1e6",
+       "equalNightColors": "#583c2c"
+    },
+    {
+       "lightColor": "#fff6f0",
+       "equalNightColors": "#31333c"
+    },
+    {
+       "lightColor": "rgba(44 51 77 / 0.94)",
+       "equalNightColors": "rgba(27 33 43 / 0.9)"
+    },
+    {
+       "lightColor": "#221f1f",
+       "equalNightColors": "#479dff"
+    },
+    {
+       "lightColor": "rgba(10 115 235 / 0.25)",
+       "equalNightColors": "#334b68"
+    },
+    {
+       "lightColor": "#3f70b7",
+       "equalNightColors": "#479dff"
+    },
+    {
+       "lightColor": "#e56471",
+       "equalNightColors": "#ff6b6b"
+    },
+    {
+       "lightColor": "#a6add7",
+       "equalNightColors": "#828994"
+    },
+    {
+       "lightColor": "#3f70b7",
+       "equalNightColors": "#334b68"
+    },
+    {
+       "lightColor": "rgba(55 84 170 / 0.25)",
+       "equalNightColors": "rgba(0 0 0 / 0.3)"
+    },
+    {
+       "lightColor": "#dfe6f2",
+       "equalNightColors": "#384157"
+    },
+    {
+       "lightColor": "#eceff3",
+       "equalNightColors": "#1b212b"
+    },
+    {
+       "lightColor": "#e8f6ff",
+       "equalNightColors": "rgba(71 157 255 / 0.25)"
+    },
+    {
+       "lightColor": "#c2e9ff",
+       "equalNightColors": "#223b5a"
+    },
+    {
+       "lightColor": "rgba(178 190 197 / 0.38)",
+       "equalNightColors": "rgba(120 129 144 / 0.38)"
+    },
+    {
+       "lightColor": "rgba(120 129 144 / 40)",
+       "equalNightColors": "#384157"
+    },
+    {
+       "lightColor": "rgba(0 0 0 / 0.09)",
+       "equalNightColors": "rgba(0 0 0 / 0.4)"
+    },
+    {
+       "lightColor": "rgba(0 0 0 / 0.06)",
+       "equalNightColors": "rgba(0 0 0 / 0.4)"
+    },
+    {
+       "lightColor": "#edf4fd",
+       "equalNightColors": "transparent"
+    },
+    {
+       "lightColor": "#fefcf3",
+       "equalNightColors": "transparent"
+    },
+    {
+       "lightColor": "#e7f1fd",
+       "equalNightColors": "#253142"
+    },
+    {
+       "lightColor": "#fefae8",
+       "equalNightColors": "#2d3239"
+    },
+    {
+       "lightColor": "#f6a459",
+       "equalNightColors": "#f5b041"
+    },
+    {
+       "lightColor": "#f3f6f9",
+       "equalNightColors": "#2d3748"
+    },
+    {
+       "lightColor": "#fcfffb",
+       "equalNightColors": "#293242"
+    },
+    {
+       "lightColor": "#f4feef",
+       "equalNightColors": "#2a4042"
+    },
+    {
+       "lightColor": "#fdfdfd",
+       "equalNightColors": "#202937"
+    },
+    {
+       "lightColor": "#e6eaf0",
+       "equalNightColors": "#2f3744"
+    },
+    {
+       "lightColor": "#e7e9ec",
+       "equalNightColors": "#2d3748"
+    },
+    {
+       "lightColor": "#42485f",
+       "equalNightColors": "#2d3748"
+    },
+    {
+       "lightColor": "rgba(44 51 77 / 40)",
+       "equalNightColors": "rgba(27 33 43 / 40)"
+    },
+    {
+       "lightColor": "rgba(200 203 220 / 0.5)",
+       "equalNightColors": "#39414e"
+    },
+    {
+       "lightColor": "rgba(200 203 220 / 0.7)",
+       "equalNightColors": "#39414e"
+    },
+    {
+       "lightColor": "#383f57",
+       "equalNightColors": "#232b38"
+    },
+    {
+       "lightColor": "#444a61",
+       "equalNightColors": "#444a61"
+    },
+    {
+       "lightColor": "#444a61",
+       "equalNightColors": "#262f3d"
+    },
+    {
+       "lightColor": "#333a53",
+       "equalNightColors": "#232b38"
+    },
+    {
+       "lightColor": "#6cbbfc",
+       "equalNightColors": "#479dff"
+    },
+    {
+       "lightColor": "#61667a",
+       "equalNightColors": "#828994"
+    },
+    {
+       "lightColor": "#5f6478",
+       "equalNightColors": "#5f6478"
+    },
+    {
+       "lightColor": "#232b38",
+       "equalNightColors": "#383f57"
+    },
+    {
+       "lightColor": "#226db4",
+       "equalNightColors": "#e2e4e6"
+    },
+    {
+       "lightColor": "rgba(222 53 53 / 0.3)",
+       "equalNightColors": "#4f3842"
+    },
+    {
+       "lightColor": "#fef7ec",
+       "equalNightColors": "#433f39"
+    },
+    {
+       "lightColor": "rgba(131 134 146 / 0.9)",
+       "equalNightColors": "rgba(62 77 99 / 0.9)"
+    },
+    {
+       "lightColor": "rgba(131 134 146 / 1)",
+       "equalNightColors": "#3e4d63"
+    },
+    {
+       "lightColor": "#f1dbdb",
+       "equalNightColors": "#2d3748"
+    },
+    {
+       "lightColor": "#fdf4f4",
+       "equalNightColors": "rgba(255 107 107 / 0.05)"
+    },
+    {
+       "lightColor": "#f2f2f2",
+       "equalNightColors": "#262f3d"
+    }
+ ]

package/lib/ListItem/ListContainer.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Layout = require("../Layout");
+
+var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
+
+var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var ListContainer = function ListContainer(props) {
+  var size = props.size,
+      active = props.active,
+      highlight = props.highlight,
+      autoHover = props.autoHover,
+      palette = props.palette,
+      title = props.title,
+      disableTitle = props.disableTitle,
+      needTick = props.needTick,
+      isLink = props.isLink,
+      href = props.href,
+      target = props.target,
+      needBorder = props.needBorder,
+      isDisabled = props.isDisabled,
+      children = props.children,
+      dataId = props.dataId,
+      a11y = props.a11y,
+      customClass = props.customClass,
+      customProps = props.customProps,
+      onClick = props.onClick,
+      onMouseEnter = props.onMouseEnter,
+      onMouseOver = props.onMouseOver,
+      eleRef = props.eleRef;
+  var role = a11y.role,
+      ariaSelected = a11y.ariaSelected;
+  var options = {};
+
+  if (isLink) {
+    options.href = href;
+    options.target = "_".concat(target);
+  }
+
+  if (active) {
+    options['data-selected'] = active;
+  }
+
+  if (!isDisabled && !isLink && active) {
+    options.tabindex = '0';
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
+    role: role,
+    "aria-selected": ariaSelected,
+    isCover: false,
+    align: "vertical",
+    alignBox: "row",
+    className: "".concat(_ListItemModule["default"].list, " ").concat(_ListItemModule["default"][size], " ").concat(_ListItemModule["default"][palette], " ").concat(active ? _ListItemModule["default"]["active".concat(palette)] : highlight && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Hover")] : '', " ").concat(autoHover && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Effect")] : '', " ").concat(needTick ? _ListItemModule["default"]["".concat(size, "withTick")] : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? active ? _ListItemModule["default"].activewithBorder : _ListItemModule["default"].withBorder : '', " ").concat(customClass),
+    dataId: dataId,
+    onClick: !isDisabled && onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseOver: onMouseOver,
+    eleRef: eleRef,
+    tagName: isLink ? 'a' : 'li',
+    "data-title": isDisabled ? disableTitle : title
+  }, options, customProps), children);
+};
+
+ListContainer.defaultProps = {
+  active: false,
+  autoHover: false,
+  highlight: false,
+  needTick: false,
+  palette: 'default',
+  size: 'medium',
+  isLink: false,
+  target: 'blank',
+  needBorder: true,
+  a11y: {},
+  customClass: {},
+  customProps: {}
+};
+var _default = ListContainer;
+exports["default"] = _default;
+ListContainer.propTypes = {
+  active: _propTypes["default"].bool,
+  autoHover: _propTypes["default"].bool,
+  children: _propTypes["default"].node,
+  dataId: _propTypes["default"].string,
+  disableTitle: _propTypes["default"].string,
+  highlight: _propTypes["default"].bool,
+  href: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool,
+  isLink: _propTypes["default"].bool,
+  needBorder: _propTypes["default"].bool,
+  needTick: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func,
+  onMouseEnter: _propTypes["default"].func,
+  onMouseOver: _propTypes["default"].func,
+  palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'dark']),
+  size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
+  target: _propTypes["default"].oneOf(['blank', 'self']),
+  title: _propTypes["default"].string,
+  a11y: _propTypes["default"].shape({
+    role: _propTypes["default"].string,
+    ariaSelected: _propTypes["default"].bool
+  }),
+  customClass: _propTypes["default"].shape({
+    customListItem: _propTypes["default"].string,
+    customTickIcon: _propTypes["default"].string
+  }),
+  customProps: _propTypes["default"].shape({
+    ListItemProps: _propTypes["default"].object
+  })
+};
+
+if (false) {
+  ListContainer.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide'
+  };
+}