@zohodesk/dot 1.0.0-beta.212 → 1.0.0-beta.213

package/es/lookup/header/ViewDropDown/ViewDropDown.module.css

@@ -0,0 +1,50 @@
+.small {
+  max-height: var(--zd_size200);
+}
+.medium {
+  max-height: var(--zd_size348);
+}
+.large {
+  max-height: var(--zd_size400);
+}
+.emptyState {
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_viewdropdown_empty_text);
+  font-family: var(--zd_semibold);
+  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
+  padding: var(--zd_size12) var(--zd_size15);
+}
+.hide {
+  composes: vishidden from '~@zohodesk/components/lib/common/common.module.css';
+}
+.container {
+  position: relative;
+}
+.listItemContainer {
+  padding: var(--zd_size10) 0;
+}
+/* Label Style */
+.labelCnt {
+  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  line-height: var(--zd_size20);
+  color: var(--zdt_viewdropdown_label_text);
+  cursor: pointer;
+}
+.labelText {
+  font-size: var(--zd_font_size12);
+  max-width: var(--zd_size180);
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+[dir=ltr] .labelText {
+  margin-right: var(--zd_size5);
+}
+[dir=rtl] .labelText {
+  margin-left: var(--zd_size5);
+}
+.labelCnt:hover .arrowIcon {
+  color: var(--zdt_viewdropdown_hover_label_text);
+}
+
+.loader {
+  padding: var(--zd_size12) var(--zd_size15);
+}

package/es/lookup/header/lookupHeaderCommon.module.css

@@ -0,0 +1,35 @@
+.container {
+  min-height: var(--zd_size51);
+  position: relative;
+  background-color: var(--zdt_lookupheader_default_bg);
+  border-bottom: solid 1px var(--zdt_lookupheader_default_border);
+}[dir=ltr] .container {
+  padding: 0 var(--zd_size52) 0 var(--zd_size10);
+}[dir=rtl] .container {
+  padding: 0 var(--zd_size10) 0 var(--zd_size52);
+}
+.searchContainer, .title {
+  margin: 0 var(--zd_size20);
+}
+[dir=ltr] .searchContainer {
+  text-align: right;
+}
+[dir=rtl] .searchContainer {
+  text-align: left;
+}
+.closeContainer {
+  position: absolute;
+  top: 50%;
+  composes: middleY from '~@zohodesk/components/lib/common/common.module.css';
+}
+[dir=ltr] .closeContainer {
+  right: var(--zd_size30);
+}
+[dir=rtl] .closeContainer {
+  left: var(--zd_size30);
+}
+.para {
+  font-size: var(--zd_font_size12);
+  color: var(--zdt_lookupheader_para_text);
+  margin: 0 var(--zd_size20);
+}

package/es/lookup/header/lookupHeaderCommonResponsive.module.css

@@ -0,0 +1,24 @@
+/* Responsive */
+.extraSmall {
+  justify-content: normal;
+  flex-direction: column;
+  align-items: flex-start;
+}
+[dir=ltr] .extraSmall {
+  padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) 0;
+}
+[dir=rtl] .extraSmall {
+  padding: var(--zd_size12) 0 var(--zd_size12) var(--zd_size45);
+}
+
+[dir=ltr] .extraSmall .searchContainer {
+  text-align: left;
+}
+
+[dir=rtl] .extraSmall .searchContainer {
+  text-align: right;
+}
+.extraSmall .searchContainer input {
+  width: var(--zd_size193);
+  border-bottom: 1px solid var(--zdt_lookupheader_input_border);
+}

package/es/setup/header/Button/Button.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import GenButton from '@zohodesk/components/lib/Button/Button';
+import style from './HeaderButton.module.css';
+export default class Button extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      palette,
+      text,
+      onClick,
+      id
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.container
+    }, /*#__PURE__*/React.createElement(GenButton, {
+      id: id,
+      onClick: onClick,
+      palette: palette,
+      size: "medium",
+      text: text
+    }));
+  }
+
+}
+Button.defaultProps = {
+  palette: 'primaryFilled',
+  text: ''
+};
+Button.propTypes = {
+  id: PropTypes.string,
+  onClick: PropTypes.func,
+  palette: PropTypes.string,
+  text: PropTypes.string
+};
+
+if (false) {
+  Button.docs = {
+    componentGroup: 'Header',
+    folderName: 'Setup'
+  };
+}

package/es/setup/header/Button/HeaderButton.module.css

@@ -0,0 +1,5 @@
+[dir=ltr] .container {
+  margin-right: var(--zd_size15);
+}[dir=rtl] .container {
+  margin-left: var(--zd_size15);
+}

package/es/setup/header/Link/HeaderLink.module.css

@@ -0,0 +1,21 @@
+.container {
+  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  color: var(--zdt_headerlink_text);
+  font-size: var(--zd_font_size12);
+}[dir=ltr] .container {
+  margin-right: var(--zd_size15);
+}[dir=rtl] .container {
+  margin-left: var(--zd_size15);
+}
+[dir=ltr] .icon {
+  margin-right: var(--zd_size5);
+}
+[dir=rtl] .icon {
+  margin-left: var(--zd_size5);
+}
+.container:hover .text {
+  border-bottom: 1px solid var(--zdt_headerlink_hover_text);
+}
+.text {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}

package/es/setup/header/Link/Link.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@zohodesk/icons/lib/Icon';
+import { Box } from '@zohodesk/components/lib/Layout';
+import ExternalLink from '../../../ExternalLink/ExternalLink';
+import style from './HeaderLink.module.css';
+export default class Link extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      url,
+      text,
+      iconName,
+      iconClass,
+      iconSize
+    } = this.props;
+    return /*#__PURE__*/React.createElement(ExternalLink, {
+      className: style.container,
+      href: url
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.icon
+    }, /*#__PURE__*/React.createElement(Icon, {
+      isBold: true,
+      name: iconName,
+      size: iconSize,
+      iconClass: iconClass ? iconClass : ''
+    })), /*#__PURE__*/React.createElement(Box, {
+      className: style.text,
+      flexible: true
+    }, text));
+  }
+
+}
+Link.defaultProps = {
+  iconName: 'ZD-newtab',
+  iconSize: 10
+};
+Link.propTypes = {
+  iconClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.number,
+  text: PropTypes.string,
+  url: PropTypes.string
+};
+
+if (false) {
+  Link.docs = {
+    componentGroup: 'Header',
+    folderName: 'Setup'
+  };
+}

package/es/setup/header/Search/Search.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@zohodesk/icons/lib/Icon';
+import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
+import style from './Search.module.css';
+export default class Search extends React.Component {
+  constructor(props) {
+    super(props);
+    let {
+      value
+    } = this.props;
+    this.state = {
+      value: value || '',
+      isFocus: false
+    };
+    this.onFocus = this.onFocus.bind(this);
+    this.onBlur = this.onBlur.bind(this);
+  }
+
+  onFocus(id, name, value) {
+    let {
+      onFocus
+    } = this.props;
+    this.setState({
+      isFocus: true
+    });
+    onFocus && onFocus(id, name, value);
+  }
+
+  onBlur(id, name, value) {
+    let {
+      onBlur
+    } = this.props;
+    this.state.value == '' && this.setState({
+      isFocus: false
+    });
+    onBlur && onBlur(id, name, value);
+  }
+
+  render() {
+    let {
+      placeHolder,
+      maxLength,
+      value,
+      onChange,
+      onKeyPress,
+      customClass
+    } = this.props;
+    let {
+      isFocus
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.container} ${isFocus ? style.active : ''} ${customClass}`
+    }, /*#__PURE__*/React.createElement(TextBox, {
+      placeHolder: placeHolder,
+      customClass: style.input,
+      maxLength: maxLength,
+      value: value,
+      onChange: onChange,
+      onKeyUp: onKeyPress,
+      onFocus: this.onFocus,
+      needAppearance: false,
+      onBlur: this.onBlur
+    }), value != '' && value ? /*#__PURE__*/React.createElement("span", {
+      className: style.icon,
+      onClick: this.onBlur
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-close",
+      size: "19"
+    })) : null);
+  }
+
+}
+Search.propTypes = {
+  customClass: PropTypes.string,
+  maxLength: PropTypes.number,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  placeHolder: PropTypes.string,
+  value: PropTypes.string
+};
+Search.defaultProps = {
+  placeHolder: 'Search',
+  maxLength: 150,
+  customClass: ''
+};
+
+if (false) {
+  Search.docs = {
+    componentGroup: 'Header',
+    folderName: 'Setup'
+  };
+}

package/es/setup/header/Search/Search.module.css

@@ -0,0 +1,68 @@
+.container {
+  position: relative;
+  transition: width var(--zd_transition3);
+  width: var(--zd_size90);
+}[dir=ltr] .container {
+  margin-right: var(--zd_size15);
+}[dir=rtl] .container {
+  margin-left: var(--zd_size15);
+}
+.active {
+  width: var(--zd_size180);
+}
+.active .input, .input:hover {
+  border-bottom-color: var(--zdt_search_input_border);
+}
+.icon {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  color: var(--zdt_search_icon);
+  line-height: var(--zd_size26);
+  cursor: pointer;
+}
+[dir=ltr] .icon {
+  right: 0;
+}
+[dir=rtl] .icon {
+  left: 0;
+}
+.icon:hover {
+  color: var(--zdt_search_hover_icon);
+}
+.input {
+  height: var(--zd_size26);
+  font-size: var(--zd_font_size13);
+  width: 100%;
+  letter-spacing: 0.2px;
+  transition: all var(--zd_transition3) ease;
+  color: var(--zdt_search_input_text);
+  font-family: var(--zd_regular);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: 0;
+  border-bottom: 1px solid transparent;
+  background: var(--zdt_search_input_bg);
+}
+[dir=ltr] .input {
+  padding-right: var(--zd_size20);
+}
+[dir=rtl] .input {
+  padding-left: var(--zd_size20);
+}
+.input::placeholder {
+  color: var(--zdt_search_placeholder_text);
+}
+.input::-webkit-placeholder {
+  color: var(--zdt_search_placeholder_text);
+}
+.input::-moz-placeholder {
+  color: var(--zdt_search_placeholder_text);
+}
+.input::-ms-placeholder {
+  color: var(--zdt_search_placeholder_text);
+}
+.input:focus, .active .input:focus {
+  border-bottom-color: var(--zdt_search_input_focus_border);
+}

package/es/setup/header/Views/Views.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import style from './Views.module.css';
+import Icon from '@zohodesk/icons/lib/Icon';
+export default class Views extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      isGrid,
+      isList,
+      gridTitle,
+      listTitle,
+      onListClick,
+      onGridClick
+    } = this.props;
+    return /*#__PURE__*/React.createElement("span", {
+      className: style.container
+    }, /*#__PURE__*/React.createElement("span", {
+      className: `${style.icon} ${style.first} ${isList ? style.active : ''}`,
+      "data-title": !isList ? listTitle : '',
+      onClick: onListClick
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-list22",
+      size: "10"
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.icon} ${style.last}  ${isGrid ? style.active : ''}`,
+      "data-title": !isGrid ? gridTitle : '',
+      onClick: onGridClick
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-grid",
+      size: "11"
+    })));
+  }
+
+}
+Views.propTypes = {
+  gridTitle: PropTypes.string,
+  isGrid: PropTypes.bool,
+  isList: PropTypes.bool,
+  listTitle: PropTypes.string,
+  onGridClick: PropTypes.func,
+  onListClick: PropTypes.func
+};
+Views.defaultProps = {
+  isList: true,
+  isGrid: false,
+  listTitle: 'List View',
+  gridTitle: 'Grid View'
+};
+
+if (false) {
+  Views.docs = {
+    componentGroup: 'Header',
+    folderName: 'Setup'
+  };
+}

package/es/setup/header/Views/Views.module.css

@@ -0,0 +1,37 @@
+.container {
+  display: inline-block;
+}[dir=ltr] .container {
+  margin-right: var(--zd_size15);
+}[dir=rtl] .container {
+  margin-left: var(--zd_size15);
+}
+.icon {
+  display: inline-block;
+  color: var(--zdt_views_icon);
+  height: var(--zd_size28);
+  width: var(--zd_size28);
+  line-height: var(--zd_size26);
+  text-align: center;
+  cursor: pointer;
+  border: 1px solid var(--zdt_views_border);
+}
+[dir=ltr] .first {
+  border-radius: 2px 0 0 2px;
+}
+[dir=rtl] .first {
+  border-radius: 0 2px 2px 0;
+}
+[dir=ltr] .last {
+  border-radius: 0 2px 2px 0;
+  border-left-width: 0;
+}
+[dir=rtl] .last {
+  border-radius: 2px 0 0 2px;
+  border-right-width: 0;
+}
+.icon:hover {
+  color: var(--zdt_views_hover_icon);
+}
+.icon.active {
+  color: var(--zdt_views_active_icon);
+}

package/es/setup/helptips/Description/Description.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import style from './HelpTipsDescription.module.css';
+export default class Description extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      text
+    } = this.props;
+    return /*#__PURE__*/React.createElement("p", {
+      className: style.text
+    }, text);
+  }
+
+}
+Description.propTypes = {
+  text: PropTypes.string
+};
+
+if (false) {
+  Description.docs = {
+    componentGroup: 'HelpTips',
+    folderName: 'Setup'
+  };
+}

package/es/setup/helptips/Description/HelpTipsDescription.module.css

@@ -0,0 +1,6 @@
+.text {
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_helptips_text);
+  line-height: var(--zd_size24);
+  margin: var(--zd_size10) 0;
+}

package/es/setup/helptips/Link/HelpTipsLink.module.css

@@ -0,0 +1,7 @@
+.container > a,
+.text {
+  color: var(--zdt_helptipslink_text);
+  font-size: var(--zd_font_size14);
+}.container > a, .text {
+  margin: var(--zd_size10) 0;
+}

package/es/setup/helptips/Link/Link.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import style from './HelpTipsLink.module.css';
+import ExternalLink from '../../../ExternalLink/ExternalLink';
+export default class Link extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      text,
+      url,
+      onClick,
+      isDangerous = false
+    } = this.props;
+
+    if (isDangerous) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: style.container,
+        onClick: onClick,
+        dangerouslySetInnerHTML: {
+          __html: text
+        }
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(ExternalLink, {
+      href: url,
+      onClick: onClick,
+      className: style.text
+    }, text);
+  }
+
+}
+Link.propTypes = {
+  isDangerous: PropTypes.bool,
+  onClick: PropTypes.func,
+  text: PropTypes.string,
+  url: PropTypes.string
+};
+
+if (false) {
+  Link.docs = {
+    componentGroup: 'HelpTips',
+    folderName: 'Setup'
+  };
+}

package/es/setup/helptips/ListGroup/ListGroup.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import style from './ListGroup.module.css';
+export default class ListGroup extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      isOrder,
+      data
+    } = this.props;
+
+    if (isOrder) {
+      return /*#__PURE__*/React.createElement("ol", {
+        className: style.container,
+        type: "1"
+      }, data.map((text, index) => /*#__PURE__*/React.createElement("li", {
+        className: style.orderData,
+        key: index
+      }, text)));
+    }
+
+    return /*#__PURE__*/React.createElement("ul", {
+      className: style.container
+    }, data.map((text, index) => /*#__PURE__*/React.createElement("li", {
+      className: style.unOrderData,
+      key: index
+    }, data)));
+  }
+
+}
+ListGroup.propTypes = {
+  data: PropTypes.array,
+  isOrder: PropTypes.bool
+};
+
+if (false) {
+  ListGroup.docs = {
+    componentGroup: 'HelpTips',
+    folderName: 'Setup'
+  };
+}

package/es/setup/helptips/ListGroup/ListGroup.module.css

@@ -0,0 +1,22 @@
+.container {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.unOrderData,
+.orderData {
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_listgroup_text);
+}
+[dir=ltr] .unOrderData, [dir=ltr] .orderData {
+  margin: var(--zd_size15) 0 var(--zd_size15) var(--zd_size7);
+}
+[dir=rtl] .unOrderData, [dir=rtl] .orderData {
+  margin: var(--zd_size15) var(--zd_size7) var(--zd_size15) 0;
+}
+.orderData {
+  list-style: decimal;
+}
+.unOrderData {
+  list-style: disc;
+}

package/es/setup/helptips/Title/HelpTipsTitle.module.css

@@ -0,0 +1,5 @@
+.title {
+  font-size: var(--zd_font_size17);
+  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
+  color: var(--zdt_helptipstitle_text);
+}

package/es/setup/helptips/Title/Title.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import style from './HelpTipsTitle.module.css';
+export default class Title extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      text
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.title
+    }, text);
+  }
+
+}
+Title.propTypes = {
+  text: PropTypes.string
+};
+
+if (false) {
+  Title.docs = {
+    componentGroup: 'HelpTips',
+    folderName: 'Setup'
+  };
+}