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

package/es/Layout/docs/Layout__Hidden.docs.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Container, Box } from '../';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class Layout__Hidden extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '500px',
+        maxWidth: '1200px',
+        margin: '0 auto'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column",
+      style: {
+        background: '#f5f5f5'
+      }
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: {
+        background: '#f8f8f8'
+      }
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column",
+      style: {
+        background: '#f5f5f5'
+      }
+    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#666',
+        height: '45px'
+      }
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      style: {
+        background: '#f5f5f5'
+      }
+    }, /*#__PURE__*/React.createElement(Box, {
+      hidden: ['xs']
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: 'var(--dot_bg_black)',
+        width: '45px',
+        height: '100%'
+      }
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      hidden: ['md', 'xs']
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#4e524e',
+        height: '100%'
+      }
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#909090',
+        width: '100%',
+        height: '100%'
+      }
+    })))))), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#f1f1f1',
+        height: '28px'
+      }
+    })))));
+  }
+
+}
+Layout__Hidden.docs = {
+  componentGroup: 'Layout',
+  folderName: 'Style Guide',
+  description: ' ',
+  external: true
+};

package/es/Layout/docs/Layout__default.docs.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Container, Box } from '../';
+export default class Layout__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '500px',
+        maxWidth: '1200px',
+        margin: '0 auto'
+      }
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      style: {
+        background: '#f5f5f5'
+      },
+      scroll: "vertical",
+      wrap: true,
+      align: "both"
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: {
+        background: '#f8f8f8'
+      }
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      style: {
+        background: '#f5f5f5'
+      }
+    }, /*#__PURE__*/React.createElement(Box, {
+      hidden: ['xs']
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#999',
+        width: '220px',
+        height: '100%'
+      }
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true
+    })))));
+  }
+
+}
+Layout__default.docs = {
+  componentGroup: 'Layout',
+  folderName: 'Style Guide',
+  description: ' ',
+  external: true
+};

package/es/Layout/docs/Layout__four_Column.docs.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Container, Box } from '../';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class Layout__four_Column extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '500px',
+        maxWidth: '1200px',
+        margin: '0 auto'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column",
+      style: {
+        background: '#f5f5f5'
+      }
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: {
+        background: '#f8f8f8'
+      }
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column",
+      style: {
+        background: '#f5f5f5'
+      }
+    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#666',
+        height: '45px'
+      }
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      style: {
+        background: '#f5f5f5'
+      },
+      align: "top"
+    }, /*#__PURE__*/React.createElement(Box, {
+      hidden: ['xs']
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: 'var(--dot_bg_black)',
+        width: '220px',
+        height: '100%'
+      }
+    })), /*#__PURE__*/React.createElement(Box, {
+      hidden: ['xs']
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#4e524e',
+        width: '320px',
+        height: '100%'
+      }
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#909090',
+        height: '100%'
+      }
+    })), /*#__PURE__*/React.createElement(Box, {
+      hidden: ['sm', 'xs', 'md']
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#4e524e',
+        width: '320px',
+        height: '100%'
+      }
+    })))))), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#f1f1f1',
+        height: '28px'
+      }
+    })))));
+  }
+
+}
+Layout__four_Column.docs = {
+  componentGroup: 'Layout',
+  folderName: 'Style Guide',
+  description: ' ',
+  external: true
+};

package/es/Layout/docs/Layout__three_Column.docs.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Container, Box } from '../';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class Layout__three_Column extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '500px',
+        maxWidth: '1200px',
+        margin: '0 auto'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column",
+      style: {
+        background: '#f5f5f5'
+      }
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: {
+        background: '#f8f8f8'
+      }
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column",
+      style: {
+        background: '#f5f5f5'
+      }
+    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#666',
+        height: '45px'
+      }
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      style: {
+        background: '#f5f5f5'
+      }
+    }, /*#__PURE__*/React.createElement(Box, {
+      hidden: ['xs']
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: 'var(--dot_bg_black)',
+        width: '220px',
+        height: '100%'
+      }
+    })), /*#__PURE__*/React.createElement(Box, {
+      hidden: ['xs']
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#4e524e',
+        width: '320px',
+        height: '100%'
+      }
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#909090',
+        height: '100%'
+      }
+    })))))), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#f1f1f1',
+        height: '28px'
+      }
+    })))));
+  }
+
+}
+Layout__three_Column.docs = {
+  componentGroup: 'Layout',
+  folderName: 'Style Guide',
+  description: ' ',
+  external: true
+};

package/es/Layout/docs/Layout__two_Column.docs.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Container, Box } from '../';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class Layout__two_Column extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '500px',
+        maxWidth: '1200px',
+        margin: '0 auto'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column",
+      style: {
+        background: '#f5f5f5'
+      }
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: {
+        background: '#f8f8f8'
+      }
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column",
+      style: {
+        background: '#f5f5f5'
+      }
+    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#666',
+        height: '45px'
+      }
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      style: {
+        background: '#f5f5f5'
+      }
+    }, /*#__PURE__*/React.createElement(Box, {
+      hidden: ['xs']
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#4e524e',
+        width: '320px',
+        height: '100%'
+      }
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#909090',
+        width: '100%',
+        height: '100%'
+      }
+    })))))), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#f1f1f1',
+        height: '28px'
+      }
+    })))));
+  }
+
+}
+Layout__two_Column.docs = {
+  componentGroup: 'Layout',
+  folderName: 'Style Guide',
+  description: ' ',
+  external: true
+};

package/es/Layout/utils.js

@@ -15,7 +15,8 @@ export function createProps(propTypes, props, classNames) {
 export function isInteger(value) {
   return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
 }
-export function setProps(childProps, props, values = {}) {
+export function setProps(childProps, props) {
+  let values = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   Object.keys(values).map(value => {
     if (props[value]) {
       childProps[values[value]] = props[value];

package/es/LightNightMode/docs/AlternativeColors.docs.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import Container from '../../Layout/Container';
+import Box from '../../Layout/Box';
+import Colors from './../Colors.json';
+import style from '../../common/docStyle.module.css';
+export default class AlternativeColors extends React.Component {
+  render() {
+    const {
+      colors = Colors
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Container, {
+      className: style.m20,
+      isCover: false
+    }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Box, {
+      className: style.para
+    }, "Note: In some places, for single light mode color we used multipe night mode color values based on the places. Here in this docs, you can see the gold-border highlighted color in each row. So, that gold-highlighted is the ", /*#__PURE__*/React.createElement("b", null, "primary night mode color"), ". For more details kindly check this ", /*#__PURE__*/React.createElement("a", {
+      target: "_blank",
+      href: "https://sheet.zoho.com/sheet/open/122xr236d82d3bc7c4b8d9bff2e160a9ae7a4"
+    }, /*#__PURE__*/React.createElement("b", null, "sheet")), ".")), /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      className: style.head
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.lft
+    }, "Light Mode Colors"), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      className: style.rgt
+    }, "Alternate Night Mode Colors")), /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      className: style.content
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, colors.map((index, i) => /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      key: i,
+      isCover: false,
+      className: style.trow
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.lft
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        backgroundColor: `${index.lightColor}`
+      },
+      className: style.rect
+    }), /*#__PURE__*/React.createElement("span", {
+      className: style.colorvalue,
+      onClick: () => navigator.clipboard.writeText(index.lightColor),
+      "data-title": `Copy ${index.lightColor}`
+    }, index.lightColor)), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      className: style.rgt
+    }, index.equalNightColors.toString().split(", ").map((clrValue, j) => {
+      return /*#__PURE__*/React.createElement("div", {
+        className: style.nestedDiv,
+        key: j
+      }, /*#__PURE__*/React.createElement("span", {
+        style: {
+          backgroundColor: `${clrValue}`
+        },
+        className: `${style.rect} ${style.gold}`
+      }), /*#__PURE__*/React.createElement("span", {
+        className: style.colorvalue,
+        onClick: () => navigator.clipboard.writeText(clrValue),
+        "data-title": `Copy ${clrValue}`
+      }, clrValue));
+    }))))))));
+  }
+
+}
+
+if (false) {
+  AlternativeColors.docs = {
+    componentGroup: 'LightNightMode'
+  };
+}

package/es/ListItem/ListItem.js

@@ -1,15 +1,13 @@
-import "core-js/modules/es.string.replace";
-
 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); }
 
 /**** Libraries ****/
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '../Layout';
-import ListContainer from './ListContainer';
+import { Container, Box } from '../Layout';
 /**** Components ****/
 
 import Icon from '@zohodesk/icons/lib/Icon';
+import CssProvider from '../Provider/CssProvider';
 /**** CSS ****/
 
 import style from './ListItem.module.css';
@@ -74,40 +72,48 @@ export default class ListItem extends React.Component {
       customProps
     } = this.props;
     let {
-      ListItemProps = {},
-      ContainerProps = {}
+      ListItemProps = {}
     } = customProps;
     let {
       customListItem = '',
       customTickIcon = ''
     } = customClass;
     let {
+      role,
+      ariaSelected,
       ariaHidden = true
     } = a11y;
     let tickIconPalette = style[`${palette}Tick`] ? style[`${palette}Tick`] : '';
+    let options = {};
+
+    if (isLink) {
+      options.href = href;
+      options.target = `_${target}`;
+    }
+
+    if (active) {
+      options['data-selected'] = active;
+    }
+
+    if (!isDisabled && !isLink && active) {
+      options.tabindex = '0';
+    }
+
     let dataIdString = dataId ? dataId : value ? String(value).replace("'", '_') : 'listItem';
-    return /*#__PURE__*/React.createElement(ListContainer, _extends({
-      a11y: a11y,
-      size: size,
-      palette: palette,
-      highlight: highlight,
-      isDisabled: isDisabled,
-      active: active,
-      autoHover: autoHover,
-      needTick: needTick,
-      needBorder: needBorder,
-      customClass: customListItem,
+    return /*#__PURE__*/React.createElement(Container, _extends({
+      role: role,
+      "aria-selected": ariaSelected,
+      isCover: false,
+      align: "vertical",
+      alignBox: "row",
+      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customListItem}`,
       dataId: dataIdString,
-      isLink: isLink,
-      href: href,
-      target: target,
-      disableTitle: disableTitle,
-      title: title,
-      onClick: this.handleClick,
+      onClick: !isDisabled && this.handleClick,
       onMouseEnter: this.handleMouseEnter,
       eleRef: this.getRef,
-      customProps: ListItemProps
-    }, ContainerProps), value ? /*#__PURE__*/React.createElement(Box, {
+      tagName: isLink ? 'a' : 'li',
+      "data-title": isDisabled ? disableTitle : title
+    }, options, ListItemProps), value ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
       className: style.value

package/es/ListItem/ListItemWithAvatar.js

@@ -3,13 +3,13 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 /**** Libraries ****/
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '../Layout';
-import ListContainer from './ListContainer';
+import { Container, Box } from '../Layout';
 /**** Components ****/
 
 import Avatar from '../Avatar/Avatar';
 import AvatarTeam from '../AvatarTeam/AvatarTeam';
 import Icon from '@zohodesk/icons/lib/Icon';
+import CssProvider from '../Provider/CssProvider';
 /**** CSS ****/
 
 import style from './ListItem.module.css';
@@ -76,38 +76,44 @@ export default class ListItemWithAvatar extends React.PureComponent {
       customProps
     } = this.props;
     let {
-      ListItemProps = {},
-      ContainerProps = {}
+      ListItemProps = {}
     } = customProps;
     let {
       customListItem = '',
       customAvatar = '',
       customAvatarTeam = ''
     } = customClass;
+    let options = {};
     let {
+      role,
+      ariaSelected,
       ariaHidden = true
     } = a11y;
     let isDarkPalette = palette === 'dark';
+
+    if (active) {
+      options['data-selected'] = active;
+    }
+
+    if (!isDisabled && active) {
+      options.tabindex = '0';
+    }
+
     let dataIdString = value ? value : dataId;
-    return /*#__PURE__*/React.createElement(ListContainer, _extends({
-      a11y: a11y,
-      size: size,
-      palette: palette,
-      highlight: highlight,
-      isDisabled: isDisabled,
-      active: active,
-      autoHover: autoHover,
-      needTick: needTick,
-      needBorder: needBorder,
-      customClass: customListItem,
-      dataId: `${dataIdString}_ListItemWithAvatar`,
-      onClick: this.handleClick,
+    return /*#__PURE__*/React.createElement(Container, _extends({
+      role: role,
+      "aria-selected": ariaSelected,
+      isCover: false,
+      align: "vertical",
+      alignBox: "row",
+      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customListItem}`,
+      onClick: !isDisabled && this.handleClick,
       onMouseEnter: this.handleMouseEnter,
       eleRef: this.getRef,
-      disableTitle: disableTitle,
-      title: null,
-      customProps: ListItemProps
-    }, ContainerProps), name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
+      tagName: "li",
+      dataId: `${dataIdString}_ListItemWithAvatar`,
+      "data-title": isDisabled ? disableTitle : null
+    }, options, ListItemProps), name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
       className: style.leftAvatar
     }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
       name: name,