@zohodesk/dot 1.4.0 → 1.4.2

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);

package/es/version2/notification/DesktopNotification/DesktopNotification.js

@@ -9,6 +9,7 @@ import AutoClose from '../../../actions/AutoClose';
 import Button from '@zohodesk/components/lib/Button/Button';
 import FormAction from '../../../FormAction/FormAction';
 import DesktopNotificationHeader from '../DesktopNotificationHeader/DesktopNotificationHeader';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import style from './DesktopNotification.module.css';
 let buttonPaletteObject = {
   success: {
@@ -60,7 +61,8 @@ export function DesktopNotificationUI(props) {
     needClose,
     customClass = {},
     i18nKeys = {},
-    customProps
+    customProps,
+    responsiveId
   } = props;
   let {
     closeTitle = 'Close'
@@ -89,66 +91,87 @@ export function DesktopNotificationUI(props) {
   let Zindex = isAnimate ? getNextIndex() : null;
   let uiVariantOne = title && (info || secondaryInfo);
   let uiVariantTwo = title && !(info || secondaryInfo) && !getSectionContainer;
+
+  function responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 760
+      }])
+    };
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: style.parentElement,
     style: needAutoZindex && isAnimate ? {
       zIndex: `${Zindex}`
     } : {},
     "data-selector-id": dataSelectorId
-  }, /*#__PURE__*/React.createElement(Container, _extends({
-    className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass} ${style[`${size}`] ? style[`${size}`] : ''} ${isShrinkView ? style.globalNotify : ''} ${containerClass}`,
-    isCover: false,
-    dataId: dataId,
-    isInline: uiVariantTwo
-  }, ExtraProps), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
-    type: type,
-    title: title,
-    variant: titleVariant,
-    needIcon: needIcon,
-    onClose: onClose,
-    closeTitle: closeTitle,
-    dataId: `${dataId}_close`,
-    needClose: needClose
-  })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
-    alignBox: "column"
-  }, uiVariantOne && /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${style.section} ${style.infoText}`
-  }, subTitle && /*#__PURE__*/React.createElement("div", {
-    className: `${style.subTitle} ${info || secondaryInfo ? style.subTitleMargin : ''}`
-  }, subTitle), info && /*#__PURE__*/React.createElement("div", null, info), secondaryInfo && /*#__PURE__*/React.createElement("div", {
-    className: `${info ? style.secondaryInfo : ''}`
-  }, secondaryInfo))), getSectionContainer && /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
-    className: style.footer
-  }, isMore ? /*#__PURE__*/React.createElement("div", {
-    className: `${style.message}`,
-    tagName: "p"
-  }, message) : null, /*#__PURE__*/React.createElement(FormAction, {
-    size: "small",
-    paddingLeftSize: "xmedium"
-  }, submitText ? /*#__PURE__*/React.createElement("div", {
-    onClick: onClickSubmit,
-    "data-id": `${dataId}_submitButton`,
-    "data-test-id": `${dataId}_submitButton`
-  }, /*#__PURE__*/React.createElement(Container, {
-    align: "vertical",
-    alignBox: "row"
-  }, getSubmitContainer ? /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, getSubmitContainer()) : /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, /*#__PURE__*/React.createElement(Button, {
-    text: submitText,
-    palette: submitType ? submitType : buttonPalette
-  })))) : null, cancelText ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    text: cancelText,
-    palette: "secondary",
-    dataId: `${dataId}_cancelButton`,
-    onClick: onClickCancel
-  })) : null))) : null)), getBottomContainer ? /*#__PURE__*/React.createElement(Box, null, getBottomContainer()) : null));
+  }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: responsiveId
+  }, _ref2 => {
+    let {
+      uptoTablet
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(Container, _extends({
+      className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass}
+            ${isShrinkView ? style.globalNotify : ''} ${containerClass}  ${uptoTablet ? style.tapWidth : style[`${size}`]}`,
+      isCover: false,
+      dataId: dataId,
+      isInline: uiVariantTwo
+    }, ExtraProps), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
+      type: type,
+      title: title,
+      variant: titleVariant,
+      needIcon: needIcon,
+      onClose: onClose,
+      closeTitle: closeTitle,
+      dataId: `${dataId}_close`,
+      needClose: needClose
+    })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
+    }, uiVariantOne && /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.section} ${style.infoText}`
+    }, subTitle && /*#__PURE__*/React.createElement("div", {
+      className: `${style.subTitle} ${info || secondaryInfo ? style.subTitleMargin : ''}`
+    }, subTitle), info && /*#__PURE__*/React.createElement("div", null, info), secondaryInfo && /*#__PURE__*/React.createElement("div", {
+      className: `${info ? style.secondaryInfo : ''}`
+    }, secondaryInfo))), getSectionContainer && /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+      className: style.footer
+    }, isMore ? /*#__PURE__*/React.createElement("div", {
+      className: `${style.message}`,
+      tagName: "p"
+    }, message) : null, /*#__PURE__*/React.createElement(FormAction, {
+      size: "small",
+      paddingLeftSize: "xmedium"
+    }, submitText ? /*#__PURE__*/React.createElement("div", {
+      onClick: onClickSubmit,
+      "data-id": `${dataId}_submitButton`,
+      "data-test-id": `${dataId}_submitButton`
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "vertical",
+      alignBox: "row"
+    }, getSubmitContainer ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, getSubmitContainer()) : /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: submitText,
+      palette: submitType ? submitType : buttonPalette
+    })))) : null, cancelText ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+      text: cancelText,
+      palette: "secondary",
+      dataId: `${dataId}_cancelButton`,
+      onClick: onClickCancel
+    })) : null))) : null)), getBottomContainer ? /*#__PURE__*/React.createElement(Box, null, getBottomContainer()) : null);
+  }));
 }
 DesktopNotificationUI.propTypes = DesktopNotificationUI_propTypes;
 export default function DesktopNotification(props) {

package/es/version2/notification/DesktopNotification/DesktopNotification.module.css

@@ -28,6 +28,7 @@
 }
 
 /* Size */
+
 .medium {
   width: var(--zd_size452) ;
 }
@@ -35,6 +36,10 @@
 .large {
   width: var(--zd_size580) ;
 }
+.tapWidth{
+  max-width: 100% ;
+  min-width: 100% ;
+}
 
 /* Animation Style */
 .closeAnimation {
@@ -76,12 +81,12 @@
 /* Container Style */
 .message {
   position: relative;
-  color: var(--zd_smoke18);
+  color: var(--zdt_desktopnotification_message_text);
   font-size: var(--zd_font_size11) ;
   composes: dotted textCap from '~@zohodesk/components/lib/common/common.module.css';
   height: var(--zd_size33) ;
   transition: padding var(--zd_transition3), height var(--zd_transition3);
-  border-top: 1px solid var(--zd_smoke1);
+  border-top: 1px solid var(--zdt_desktopnotification_message_border);
   cursor: pointer;
 }
 [dir=ltr] .message {
@@ -92,7 +97,7 @@
 }
 
 .message:hover {
-  background: var(--zd_alabaster);
+  background: var(--zdt_desktopnotification_message_hover_bg);
 }
 
 /* Section */
@@ -100,6 +105,7 @@
   padding: var(--zd_size15) var(--zd_size30) var(--zd_size30) ;
 }
 
+
 .subTitle {
   font-size: var(--zd_font_size15) ;
   line-height: var(--zd_size20);
@@ -124,4 +130,4 @@
 .footer {
   overflow: hidden;
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
-}
+}

package/es/version2/notification/DesktopNotification/props/defaultProps.js

@@ -1,3 +1,4 @@
+import { getDotLibraryConfig } from '../../../../Provider/Config';
 export const defaultProps = {
   isMore: false,
   isAnimate: true,
@@ -11,5 +12,6 @@ export const defaultProps = {
   isShrinkView: false,
   needClose: true,
   customProps: {},
-  dataSelectorId: 'desktopNotification'
+  dataSelectorId: 'desktopNotification',
+  responsiveId: getDotLibraryConfig('desktopNotificationResponsiveId')
 };

package/es/version2/notification/DesktopNotification/props/propTypes.js

@@ -4,7 +4,8 @@ export const propTypes = {
   onPortalClose: PropTypes.func,
   autoClose: PropTypes.bool,
   hideTime: PropTypes.string,
-  Element: PropTypes.element
+  Element: PropTypes.element,
+  responsiveId: PropTypes.string
 };
 export const DesktopNotificationUI_propTypes = {
   type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),

package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -4,6 +4,8 @@ import { propTypes } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import AlertClose from '../../AlertClose/AlertClose';
 import AlertIcons from '../../alertIcons/AlertIcons';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import Typography from '@zohodesk/components/es/v1/Typography/Typography';
 import style from './DesktopNotificationHeader.module.css';
 export default class DesktopNotificationHeader extends Component {
   constructor(props) {
@@ -19,36 +21,70 @@ export default class DesktopNotificationHeader extends Component {
       type = '',
       needIcon,
       title,
-      needClose
+      needClose,
+      responsiveId
     } = this.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
-    }, /*#__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
+      }, /*#__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);
+    }));
   }
 
 }