@zohodesk/dot 1.4.0 → 1.4.1

package/es/v1/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -4,6 +4,8 @@ import propTypes from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import AlertClose from '../../alert/AlertClose/AlertClose';
 import AlertIcons from '../../alert/alertIcons/AlertIcons';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import Typography from '@zohodesk/components/es/v1/Typography/Typography';
 import style from '../../../version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css';
 export default function DesktopNotificationHeader(props) {
   let {
@@ -15,36 +17,70 @@ export default function DesktopNotificationHeader(props) {
     needIcon,
     title,
     renderAlertIcon,
-    needClose
+    needClose,
+    responsiveId
   } = props;
+
+  function responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 760
+      }])
+    };
+  }
+
   return /*#__PURE__*/React.createElement(Container, {
     align: "vertical",
     alignBox: "row",
     className: `${style.container} ${style[variant]} ${style[type]}`,
     isCover: false,
     wrap: "wrap"
-  }, needIcon ? /*#__PURE__*/React.createElement("div", {
-    className: style.iconContainer
-  }, renderAlertIcon ? renderAlertIcon() : /*#__PURE__*/React.createElement(AlertIcons, {
-    type: type
-  })) : null, /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, /*#__PURE__*/React.createElement(Container, {
-    alignBox: "row",
-    align: "center"
-  }, variant === 'primary' ? /*#__PURE__*/React.createElement(Box, {
-    className: style.title,
-    shrink: true
-  }, title) : /*#__PURE__*/React.createElement(Box, {
-    className: `${style.infoText}`
-  }, title))), needClose ? /*#__PURE__*/React.createElement(Box, {
-    className: style.close
-  }, /*#__PURE__*/React.createElement(AlertClose, {
-    onClose: onClose,
-    dataTitle: closeTitle,
-    dataId: dataId,
-    type: "light"
-  })) : null);
+  }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: responsiveId
+  }, _ref2 => {
+    let {
+      uptoTablet
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, needIcon ? /*#__PURE__*/React.createElement("div", {
+      className: style.iconContainer
+    }, renderAlertIcon ? renderAlertIcon() : /*#__PURE__*/React.createElement(AlertIcons, {
+      type: type
+    })) : null, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "center"
+    }, variant === 'primary' ? /*#__PURE__*/React.createElement(Box, {
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Typography, {
+      $i18n_dataTitle: title,
+      $ui_className: style.title,
+      $ui_tagName: "h1",
+      $ui_size: uptoTablet ? '16' : '18',
+      $ui_lineHeight: "20",
+      $ui_weight: "bold",
+      $flag_reset: true,
+      $ui_wordBreak: "breakWord"
+    }, title)) : /*#__PURE__*/React.createElement(Box, {
+      className: `${style.infoText}`
+    }, /*#__PURE__*/React.createElement(Typography, {
+      $i18n_dataTitle: title,
+      $ui_className: style.title,
+      $ui_size: "14",
+      $ui_wordBreak: "breakWord"
+    }, title)))), needClose ? /*#__PURE__*/React.createElement(Box, {
+      className: style.close
+    }, /*#__PURE__*/React.createElement(AlertClose, {
+      onClose: onClose,
+      dataTitle: closeTitle,
+      dataId: dataId,
+      type: "light"
+    })) : null);
+  }));
 }
 DesktopNotificationHeader.propTypes = propTypes;
 DesktopNotificationHeader.defaultProps = defaultProps; // if (__DOCS__) {

package/es/v1/notification/DesktopNotificationHeader/props/defaultProps.js

@@ -1,5 +1,7 @@
+import { getDotLibraryConfig } from '../../../../Provider/Config';
 export default {
   needIcon: true,
   variant: 'primary',
-  needClose: true
+  needClose: true,
+  responsiveId: getDotLibraryConfig('desktopNotificationResponsiveId')
 };

package/es/v1/notification/DesktopNotificationHeader/props/propTypes.js

@@ -8,5 +8,6 @@ export default {
   title: PropTypes.string,
   renderAlertIcon: PropTypes.func,
   type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
-  variant: PropTypes.oneOf(['primary', 'secondary'])
+  variant: PropTypes.oneOf(['primary', 'secondary']),
+  responsiveId: PropTypes.string
 };

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

@@ -3,34 +3,22 @@ import { defaultProps } from '../../../../setup/header/Button/props/defaultProps
 import { propTypes } from '../../../../setup/header/Button/props/propTypes';
 import GenButton from '@zohodesk/components/es/v1/Button/Button';
 import style from '../../../../setup/header/Button/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
-    }));
-  }
-
+export default function Button(props) {
+  let {
+    palette,
+    text,
+    onClick,
+    id
+  } = 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 = defaultProps;
-Button.propTypes = propTypes; // if (__DOCS__) {
-//   Button.docs = {
-//     componentGroup: 'Header',
-//     folderName: 'Setup'
-//   };
-// }
+Button.propTypes = propTypes;

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

@@ -5,40 +5,28 @@ import { Icon } from '@zohodesk/icons';
 import { Box } from '@zohodesk/components/es/v1/Layout';
 import ExternalLink from '../../../ExternalLink/ExternalLink';
 import style from '../../../../setup/header/Link/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));
-  }
-
+export default function Link(props) {
+  let {
+    url,
+    text,
+    iconName,
+    iconClass,
+    iconSize
+  } = 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 = defaultProps;
-Link.propTypes = propTypes; // if (__DOCS__) {
-//   Link.docs = {
-//     componentGroup: 'Header',
-//     folderName: 'Setup'
-//   };
-// }
+Link.propTypes = propTypes;

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

@@ -1,81 +1,55 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { defaultProps } from '../../../../setup/header/Search/props/defaultProps';
 import { propTypes } from '../../../../setup/header/Search/props/propTypes';
 import { Icon } from '@zohodesk/icons';
 import TextBox from '@zohodesk/components/es/v1/TextBox/TextBox';
 import style from '../../../../setup/header/Search/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);
-  }
+export default function Search(props) {
+  let {
+    placeHolder,
+    maxLength,
+    value,
+    onChange,
+    onKeyPress,
+    onFocus,
+    onBlur,
+    customClass
+  } = props;
+  let [isFocus, setIsFocus] = useState(false);
+  let [resetValue] = useState(value || '');
 
-  onFocus(id, name, value) {
-    let {
-      onFocus
-    } = this.props;
-    this.setState({
-      isFocus: true
-    });
+  const handleFocus = (id, name, value) => {
+    setIsFocus(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);
-  }
+  const handleBlur = (id, name, value) => {
+    if (resetValue == '') {
+      setIsFocus(false);
+    }
 
-  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);
-  }
+    onBlur && onBlur(id, name, value);
+  };
 
+  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: handleFocus,
+    needAppearance: false,
+    onBlur: handleBlur
+  }), value != '' && value ? /*#__PURE__*/React.createElement("span", {
+    className: style.icon,
+    onClick: handleBlur
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-close",
+    size: "19"
+  })) : null);
 }
 Search.propTypes = propTypes;
-Search.defaultProps = defaultProps; // if (__DOCS__) {
-//   Search.docs = {
-//     componentGroup: 'Header',
-//     folderName: 'Setup'
-//   };
-// }
+Search.defaultProps = defaultProps;

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

@@ -3,44 +3,32 @@ import { defaultProps } from '../../../../setup/header/Views/props/defaultProps'
 import { propTypes } from '../../../../setup/header/Views/props/propTypes';
 import style from '../../../../setup/header/Views/Views.module.css';
 import { Icon } from '@zohodesk/icons';
-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 : null,
-      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 : null,
-      onClick: onGridClick
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-grid",
-      size: "11"
-    })));
-  }
-
+export default function Views(props) {
+  let {
+    isGrid,
+    isList,
+    gridTitle,
+    listTitle,
+    onListClick,
+    onGridClick
+  } = 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 : null,
+    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 : null,
+    onClick: onGridClick
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-grid",
+    size: "11"
+  })));
 }
 Views.propTypes = propTypes;
-Views.defaultProps = defaultProps; // if (__DOCS__) {
-//   Views.docs = {
-//     componentGroup: 'Header',
-//     folderName: 'Setup'
-//   };
-// }
+Views.defaultProps = defaultProps;

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

@@ -1,24 +1,12 @@
 import React from 'react';
 import { propTypes } from '../../../../setup/helptips/Description/props/propTypes';
 import style from '../../../../setup/helptips/Description/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);
-  }
-
+export default function Description(props) {
+  let {
+    text
+  } = props;
+  return /*#__PURE__*/React.createElement("p", {
+    className: style.text
+  }, text);
 }
-Description.propTypes = propTypes; // if (__DOCS__) {
-//   Description.docs = {
-//     componentGroup: 'HelpTips',
-//     folderName: 'Setup'
-//   };
-// }
+Description.propTypes = propTypes;

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

@@ -2,40 +2,28 @@ import React from 'react';
 import { propTypes } from '../../../../setup/helptips/Link/props/propTypes';
 import style from '../../../../setup/helptips/Link/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
-        }
-      });
-    }
+export default function Link(props) {
+  let {
+    text,
+    url,
+    onClick,
+    isDangerous = false
+  } = props;
 
-    return /*#__PURE__*/React.createElement(ExternalLink, {
-      href: url,
+  if (isDangerous) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.container,
       onClick: onClick,
-      className: style.text
-    }, text);
+      dangerouslySetInnerHTML: {
+        __html: text
+      }
+    });
   }
 
+  return /*#__PURE__*/React.createElement(ExternalLink, {
+    href: url,
+    onClick: onClick,
+    className: style.text
+  }, text);
 }
-Link.propTypes = propTypes; // if (__DOCS__) {
-//   Link.docs = {
-//     componentGroup: 'HelpTips',
-//     folderName: 'Setup'
-//   };
-// }
+Link.propTypes = propTypes;

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

@@ -1,39 +1,27 @@
 import React from 'react';
 import { propTypes } from '../../../../setup/helptips/ListGroup/props/propTypes';
 import style from '../../../../setup/helptips/ListGroup/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)));
-    }
+export default function ListGroup(props) {
+  let {
+    isOrder,
+    data
+  } = props;
 
-    return /*#__PURE__*/React.createElement("ul", {
-      className: style.container
+  if (isOrder) {
+    return /*#__PURE__*/React.createElement("ol", {
+      className: style.container,
+      type: "1"
     }, data.map((text, index) => /*#__PURE__*/React.createElement("li", {
-      className: style.unOrderData,
+      className: style.orderData,
       key: index
-    }, data)));
+    }, text)));
   }
 
+  return /*#__PURE__*/React.createElement("ul", {
+    className: style.container
+  }, data.map((text, index) => /*#__PURE__*/React.createElement("li", {
+    className: style.unOrderData,
+    key: index
+  }, text)));
 }
-ListGroup.propTypes = propTypes; // if (__DOCS__) {
-//   ListGroup.docs = {
-//     componentGroup: 'HelpTips',
-//     folderName: 'Setup'
-//   };
-// }
+ListGroup.propTypes = propTypes;

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

@@ -1,24 +1,12 @@
 import React from 'react';
 import { propTypes } from '../../../../setup/helptips/Title/props/propTypes';
 import style from '../../../../setup/helptips/Title/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);
-  }
-
+export default function Title(props) {
+  let {
+    text
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.title
+  }, text);
 }
-Title.propTypes = propTypes; // if (__DOCS__) {
-//   Title.docs = {
-//     componentGroup: 'HelpTips',
-//     folderName: 'Setup'
-//   };
-// }
+Title.propTypes = propTypes;

package/es/version2/GlobalNotification/GlobalNotification.module.css

@@ -29,6 +29,9 @@
 .container {
   position: relative;
   pointer-events: initial;
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   color: var(--globalnotification_text_color);
   max-width: var(--zd_size490) ;
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';

package/es/version2/lookup/AlertHeader/css/AlertHeaderNew.module.css

@@ -4,6 +4,7 @@
 .container {
   composes: varClass;
   position: relative;
+  /* css:theme-validation:ignore */
   background-color: var(--zdt_alertlookup_bg);
   border-style: solid;
   border-color: var(--commonalert_border_color);