@zohodesk/dot 1.0.0-beta.244 → 1.0.0-beta.246

package/README.md

@@ -2,6 +2,14 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.246
+
+- **AvatarWithTeam** - css variable changed due to the duplicate override issue
+
+# 1.0.0-beta.245
+
+- **Separator** - New component added.
+
 # 1.0.0-beta.244
 
 - **ActionButton** - button element margin issue fix(safari browser).

package/assets/Appearance/dark/mode/dotDarkMode.module.css

@@ -93,7 +93,7 @@
 	--zdt_avataruser_delete_text: var(--dot_ebonyclay);
 	
 	/* avatar with team */
-	--zdt_avatarteam_default_bg: var(--dot_ebonyclay);
+	--zdt_avatarwithteam_default_bg: var(--dot_ebonyclay);
 	
 	/* channel icon */
 	--zdt_channelIcon_icon: var(--dot_platinum);
@@ -533,4 +533,9 @@
 	--zdt_attachmentviewer_selected_box_shadow: rgba(0, 0, 0, 0.34);
 	--zdt_attachmentviewer_loader_border: #2a2e38;
 	--zdt_attachmentviewer_loader_border_top: #f3f3f3;
+	
+	/* separator */
+	--zdt_separator_default_text: var(--dot_riverbed);
+	--zdt_separator_primary_text: var(--zdt_cta_primary_text);
+	--zdt_separator_secondary_text: var(--dot_platinum);
 }

package/assets/Appearance/default/mode/dotDefaultMode.module.css

@@ -93,7 +93,7 @@
 	--zdt_avataruser_delete_text: var(--dot_white);
 	
 	/* avatar with team */
-	--zdt_avatarteam_default_bg: var(--dot_white);
+	--zdt_avatarwithteam_default_bg: var(--dot_white);
 	
 	/* channel icon */
 	--zdt_channelIcon_icon: var(--dot_black);
@@ -533,4 +533,9 @@
 	--zdt_attachmentviewer_selected_box_shadow: rgba(0, 0, 0, 0.34);
 	--zdt_attachmentviewer_loader_border: #2a2e38;
 	--zdt_attachmentviewer_loader_border_top: #f3f3f3;
+	
+	/* separator */
+	--zdt_separator_default_text: var(--zd_smoke12);
+	--zdt_separator_primary_text: var(--zdt_cta_primary_text);
+	--zdt_separator_secondary_text: var(--dot_black);
 }

package/assets/Appearance/pureDark/mode/dotPureDarkMode.module.css

@@ -93,7 +93,7 @@
 	--zdt_avataruser_delete_text: #212121;
 	
 	/* avatar with team */
-	--zdt_avatarteam_default_bg: #212121;
+	--zdt_avatarwithteam_default_bg: #212121;
 	
 	/* channel icon */
 	--zdt_channelIcon_icon: var(--dot_platinum);
@@ -533,4 +533,9 @@
 	--zdt_attachmentviewer_selected_box_shadow: rgba(0, 0, 0, 0.34);
 	--zdt_attachmentviewer_loader_border: #2a2e38;
 	--zdt_attachmentviewer_loader_border_top: #f3f3f3;
+	
+	/* separator */
+	--zdt_separator_default_text: #585858;
+	--zdt_separator_primary_text: var(--zdt_cta_primary_text);
+	--zdt_separator_secondary_text: var(--dot_platinum);
 }

package/es/Attachment/Attachment.js

@@ -78,8 +78,9 @@ export default class Attachment extends React.Component {
 }
 Attachment.propTypes = propTypes;
 Attachment.defaultProps = defaultProps;
-if (false) {
-  Attachment.docs = {
-    componentGroup: 'Attachment'
-  };
-}
+
+// if (__DOCS__) {
+//   Attachment.docs = {
+//     componentGroup: 'Attachment'
+//   };
+// }

package/es/AttachmentViewer/AttachmentViewer.js

@@ -1,18 +1,18 @@
-import React, { Component } from "react";
+import React, { Component } from 'react';
 import { AttachmentViewer_defaultProps } from './props/defaultProps';
 import { AttachmentViewer_propTypes } from './props/propTypes';
-import { Container, Box } from "@zohodesk/components/lib/Layout";
-import Icon from "@zohodesk/icons/lib/Icon";
-import Avatar from "@zohodesk/components/lib/Avatar/Avatar";
-import { ResponsiveReceiver } from "@zohodesk/components/lib/Responsive/CustomResponsive";
-import { getUniqueId } from "@zohodesk/components/lib/Provider/IdProvider";
-import AttachmentImage from "./AttachmentImage";
-import Link from "../Link/Link";
-import IconButton from "../IconButton/IconButton";
-import FreezeLayer from "../FreezeLayer/FreezeLayer";
-import { isAudioFile, getExtensionFromFileName } from "./Attachment";
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import Icon from '@zohodesk/icons/lib/Icon';
+import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import AttachmentImage from './AttachmentImage';
+import Link from '../Link/Link';
+import IconButton from '../IconButton/IconButton';
+import FreezeLayer from '../FreezeLayer/FreezeLayer';
+import { isAudioFile, getExtensionFromFileName } from './Attachment';
 import { shallowDiff } from '../utils/General';
-import style from "./AttachmentViewer.module.css";
+import style from './AttachmentViewer.module.css';
 export default class AttachmentViewer extends Component {
   constructor(props) {
     super(props);
@@ -204,19 +204,19 @@ export default class AttachmentViewer extends Component {
         position = (i - selectedIndex) * 100;
         return {
           transform: `translateX(${parseInt(position)}%)`,
-          opacity: "0"
+          opacity: '0'
         };
       }
       if (i === selectedIndex) {
         return {
-          transform: "translateX(0%)",
-          opacity: "1"
+          transform: 'translateX(0%)',
+          opacity: '1'
         };
       }
       position = (selectedIndex - i) * 100 * -1;
       return {
         transform: `translateX(${parseInt(position)}%)`,
-        opacity: "0"
+        opacity: '0'
       };
     };
     return dataList.length && dataList.map(function () {
@@ -241,7 +241,7 @@ export default class AttachmentViewer extends Component {
         src: data.viewUrl,
         type: `audio/${getExtensionFromFileName(data.name)}`
       })) : null : /*#__PURE__*/React.createElement(AttachmentImage, {
-        className: `${style.img} ${selectedIndex == i && maintainZoom ? isZoomed ? style.zoomedImg : style.normalImg : ""}`,
+        className: `${style.img} ${selectedIndex == i && maintainZoom ? isZoomed ? style.zoomedImg : style.normalImg : ''}`,
         src: selectedImgUrl,
         onClick: isZoomed ? _this.zoomOut.bind(_this, i) : e => {
           _this.zoomIn(e, i, true);
@@ -314,8 +314,8 @@ export default class AttachmentViewer extends Component {
         className: uptoTablet ? style.mbleMenuBar : style.menuBar
       }, /*#__PURE__*/React.createElement(Container, {
         isInline: true,
-        alignBox: uptoTablet ? "column-reverse" : "row",
-        align: uptoTablet ? "bottom" : "center",
+        alignBox: uptoTablet ? 'column-reverse' : 'row',
+        align: uptoTablet ? 'bottom' : 'center',
         wrap: "wrap",
         isCover: false
       }, isZoomed ? /*#__PURE__*/React.createElement("div", {
@@ -398,7 +398,7 @@ export default class AttachmentViewer extends Component {
       }, /*#__PURE__*/React.createElement(Container, {
         alignBox: "row"
       }, /*#__PURE__*/React.createElement(Box, {
-        className: `${style.arrowBox}  ${uptoTablet ? style.mbleArrowBox : style.nrmlArrowBox} ${selectedIndex === 0 ? style.hidden : ""}`,
+        className: `${style.arrowBox}  ${uptoTablet ? style.mbleArrowBox : style.nrmlArrowBox} ${selectedIndex === 0 ? style.hidden : ''}`,
         onClick: this.changeSelectedIndex.bind(this, selectedIndex - 1),
         "data-title": i18nKeys.previousText,
         "data-title-position": "left"
@@ -420,7 +420,7 @@ export default class AttachmentViewer extends Component {
         scroll: "both",
         flexible: true
       }, this.imgPreviewView()), /*#__PURE__*/React.createElement(Box, {
-        className: `${style.arrowBox}  ${uptoTablet ? style.mbleArrowBox : style.nrmlArrowBox} ${totalLen === selectedIndex + 1 ? style.hidden : ""}`,
+        className: `${style.arrowBox}  ${uptoTablet ? style.mbleArrowBox : style.nrmlArrowBox} ${totalLen === selectedIndex + 1 ? style.hidden : ''}`,
         onClick: this.changeSelectedIndex.bind(this, selectedIndex + 1),
         "data-title": i18nKeys.nextText,
         "data-title-position": "right"
@@ -467,7 +467,7 @@ export default class AttachmentViewer extends Component {
         } = item;
         const isAudio = isAudioFile(name);
         return /*#__PURE__*/React.createElement(Box, {
-          className: `${style.imgItem} ${index === selectedIndex ? style.selected : ""}  ${isAudio ? style.isAudio : ""}`,
+          className: `${style.imgItem} ${index === selectedIndex ? style.selected : ''}  ${isAudio ? style.isAudio : ''}`,
           key: index,
           onClick: this.changeSelectedIndex.bind(this, index),
           eleRef: el => this[`img_${index}`] = el,
@@ -487,7 +487,7 @@ export default class AttachmentViewer extends Component {
         iconName: "ZD-GN-hideTab",
         iconSize: "14",
         hoverType: "border",
-        iconClass: `${style.thumpIcon} ${isPViewListOpen ? style.thumpIconActive : ""}`,
+        iconClass: `${style.thumpIcon} ${isPViewListOpen ? style.thumpIconActive : ''}`,
         className: style.button,
         a11y: {
           ariaLabel: i18nKeys.hideText
@@ -499,8 +499,9 @@ export default class AttachmentViewer extends Component {
 }
 AttachmentViewer.propTypes = AttachmentViewer_propTypes;
 AttachmentViewer.defaultProps = AttachmentViewer_defaultProps;
-if (false) {
-  AttachmentViewer.docs = {
-    componentGroup: "Molecule"
-  };
-}
+
+// if (__DOCS__) {
+//   AttachmentViewer.docs = {
+//     componentGroup: "Molecule"
+//   };
+// }

package/es/ChannelIcon/ChannelIcon.js

@@ -88,8 +88,8 @@ export default class ChannelIcon extends Component {
 }
 ChannelIcon.defaultProps = defaultProps;
 ChannelIcon.propTypes = propTypes;
-if (false) {
-  ChannelIcon.docs = {
-    componentGroup: 'Atom'
-  };
-}
+// if (__DOCS__) {
+//   ChannelIcon.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/Drawer/Drawer.js

@@ -12,7 +12,7 @@ import IconButton from '../IconButton/IconButton';
 import Icon from '@zohodesk/icons/lib/Icon';
 import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
 import style from './Drawer.module.css';
-import FocusScope from "@zohodesk/a11y/es/FocusScope/FocusScope";
+import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
 export class Header extends React.Component {
   render() {
     let {
@@ -261,8 +261,9 @@ export default class Drawer extends React.Component {
 }
 Drawer.propTypes = Drawer_propTypes;
 Drawer.defaultProps = Drawer_defaultProps;
-if (false) {
-  Drawer.docs = {
-    componentGroup: 'Template'
-  };
-}
+
+// if (__DOCS__) {
+//   Drawer.docs = {
+//     componentGroup: 'Template'
+//   };
+// }

package/es/ExternalLink/ExternalLink.js

@@ -40,8 +40,9 @@ export default class ExternalLink extends React.Component {
 }
 ExternalLink.defaultProps = defaultProps;
 ExternalLink.propTypes = propTypes;
-if (false) {
-  ExternalLink.docs = {
-    componentGroup: 'Atom'
-  };
-}
+
+// if (__DOCS__) {
+//   ExternalLink.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/FlipCard/FlipCard.js

@@ -131,8 +131,8 @@ export default class FlipCard extends Component {
 }
 FlipCard.propTypes = propTypes;
 FlipCard.defaultProps = defaultProps;
-if (false) {
-  FlipCard.docs = {
-    componentGroup: 'Molecule'
-  };
-}
+// if (__DOCS__) {
+//   FlipCard.docs = {
+//     componentGroup: 'Molecule'
+//   };
+// }

package/es/FormAction/FormAction.js

@@ -53,12 +53,14 @@ export default class FormAction extends React.Component {
     }, hasLeftChild ? /*#__PURE__*/React.createElement(Box, {
       flexible: hasRightChild ? true : false,
       shrink: !hasRightChild && hasLeftChild ? true : false
-    }, leftbuttonGroup.length > 1 ? leftbuttonGroup.map(item => /*#__PURE__*/React.createElement("div", {
-      className: style.marginRight
+    }, leftbuttonGroup.length > 1 ? leftbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
+      className: style.marginRight,
+      key: index
     }, item)) : leftbuttonGroup[0]) : null, hasRightChild ? /*#__PURE__*/React.createElement(Box, {
       shrink: hasRightChild && !hasLeftChild ? true : false
-    }, rightbuttonGroup.length > 1 ? rightbuttonGroup.map(item => /*#__PURE__*/React.createElement("div", {
-      className: style.marginRight
+    }, rightbuttonGroup.length > 1 ? rightbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
+      className: style.marginRight,
+      key: index
     }, item)) : rightbuttonGroup[0]) : null, hasCenterChild ? /*#__PURE__*/React.createElement(Box, null, centerbuttonGroup.length > 1 ? centerbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
       className: style.marginRight,
       key: index
@@ -67,8 +69,9 @@ export default class FormAction extends React.Component {
 }
 FormAction.propTypes = propTypes;
 FormAction.defaultProps = defaultProps;
-if (false) {
-  FormAction.docs = {
-    componentGroup: 'Atom'
-  };
-}
+
+// if (__DOCS__) {
+//   FormAction.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/FreezeLayer/FreezeLayer.js

@@ -119,9 +119,10 @@ export default class FreezeLayer extends Component {
 }
 FreezeLayer.propTypes = propTypes;
 FreezeLayer.defaultProps = defaultProps;
-if (false) {
-  FreezeLayer.docs = {
-    componentGroup: 'Atom',
-    folderName: 'General'
-  };
-}
+
+// if (__DOCS__) {
+//   FreezeLayer.docs = {
+//     componentGroup: 'Atom',
+//     folderName: 'General'
+//   };
+// }

package/es/IconButton/IconButton.js

@@ -133,8 +133,9 @@ export default class IconButton extends React.Component {
 }
 IconButton.propTypes = propTypes;
 IconButton.defaultProps = defaultProps;
-if (false) {
-  IconButton.docs = {
-    componentGroup: 'Atom'
-  };
-}
+
+// if (__DOCS__) {
+//   IconButton.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/Image/Image.js

@@ -31,8 +31,8 @@ export default class Image extends React.Component {
 }
 Image.propTypes = propTypes;
 Image.defaultProps = defaultProps;
-if (false) {
-  Image.docs = {
-    componentGroup: 'Atom'
-  };
-}
+// if (__DOCS__) {
+//   Image.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/ImportantNotes/ImportantNotes.js

@@ -39,9 +39,10 @@ export default class ImportantNotes extends React.Component {
 }
 ImportantNotes.propTypes = propTypes;
 ImportantNotes.defaultProps = defaultProps;
-if (false) {
-  ImportantNotes.docs = {
-    componentGroup: 'Common',
-    folderName: 'General'
-  };
-}
+
+// if (__DOCS__) {
+//   ImportantNotes.docs = {
+//     componentGroup: 'Common',
+//     folderName: 'General'
+//   };
+// }

package/es/Link/Link.js

@@ -86,8 +86,9 @@ export default class Link extends React.Component {
 Link.contextType = LinkContext;
 Link.defaultProps = defaultProps;
 Link.propTypes = propTypes;
-if (false) {
-  Link.docs = {
-    componentGroup: 'Atom'
-  };
-}
+
+// if (__DOCS__) {
+//   Link.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/Loader/Loader.js

@@ -17,8 +17,9 @@ export default class Loader extends React.Component {
     }));
   }
 }
-if (false) {
-  Loader.docs = {
-    componentGroup: 'Atom'
-  };
-}
+
+// if (__DOCS__) {
+//   Loader.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/Message/Message.js

@@ -42,11 +42,13 @@ export default class Message extends React.Component {
 }
 Message.propTypes = propTypes;
 Message.defaultProps = defaultProps;
-if (false) {
-  Message.docs = {
-    componentGroup: 'Atom'
-  };
-}
+
+// if (__DOCS__) {
+//   Message.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }
+
 export function MessageUI(props) {
   function onClose(e) {
     let {

package/es/MessageBanner/MessageBanner.js

@@ -52,8 +52,9 @@ export default class MessageBanner extends React.Component {
 }
 MessageBanner.defaultProps = defaultProps;
 MessageBanner.propTypes = propTypes;
-if (false) {
-  MessageBanner.docs = {
-    componentGroup: 'Atom'
-  };
-}
+
+// if (__DOCS__) {
+//   MessageBanner.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/NewStar/NewStar.js

@@ -62,8 +62,9 @@ export default class NewStar extends React.Component {
 }
 NewStar.propTypes = propTypes;
 NewStar.defaultProps = defaultProps;
-if (false) {
-  NewStar.docs = {
-    componentGroup: 'Atom'
-  };
-}
+
+// if (__DOCS__) {
+//   NewStar.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/PlusIcon/PlusIcon.js

@@ -34,9 +34,10 @@ export default class PlusIcon extends React.Component {
 }
 PlusIcon.defaultProps = defaultProps;
 PlusIcon.propTypes = propTypes;
-if (false) {
-  PlusIcon.docs = {
-    componentGroup: 'Common',
-    folderName: 'Ticket DetailView'
-  };
-}
+
+// if (__DOCS__) {
+//   PlusIcon.docs = {
+//     componentGroup: 'Common',
+//     folderName: 'Ticket DetailView'
+//   };
+// }

package/es/Separator/Separator.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from './Separator.module.css';
+export default class Separator extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    const {
+      children,
+      type,
+      customSeparatorType,
+      palette,
+      wrap,
+      shrink,
+      aligndirection,
+      customClass
+    } = this.props;
+    const {
+      customWrapper,
+      customSeparator,
+      customChildren
+    } = customClass;
+    const data = children.filter(el => el !== null && el !== undefined && el !== false);
+    return /*#__PURE__*/React.createElement(Container, {
+      alignBox: aligndirection,
+      align: aligndirection === 'row' ? 'vertical' : '',
+      wrap: wrap,
+      isCover: false,
+      className: `${style.varClass} ${customWrapper}`
+    }, data.map((child, i) => {
+      if (child) {
+        if (data.length - 1 == i || aligndirection == 'column') {
+          return child && /*#__PURE__*/React.createElement(Box, {
+            shrink: shrink,
+            key: i,
+            className: customChildren
+          }, child);
+        }
+        return child && /*#__PURE__*/React.createElement(React.Fragment, {
+          key: i
+        }, /*#__PURE__*/React.createElement(Box, {
+          shrink: shrink,
+          key: i,
+          className: customChildren
+        }, child), /*#__PURE__*/React.createElement(Box, {
+          className: `${style.separator} ${style[palette]} ${customSeparatorType ? '' : style[type]} ${customSeparator} `,
+          key: i
+        }, customSeparatorType ? customSeparatorType : type == 'slash' ? '/' : type == 'arrow' ? '>' : type == 'comma' ? ',' : '\u2022'));
+      }
+    }));
+  }
+}
+Separator.defaultProps = defaultProps;
+Separator.propTypes = propTypes;

package/es/Separator/Separator.module.css

@@ -0,0 +1,34 @@
+.varClass {
+  --separator_fontSize: var(--zd_font_size15);
+}
+.separator {
+  font-size: var(--separator_fontSize);
+  margin: 0 var(--zd_size5);
+}
+.dot {
+  --separator_fontSize: var(--zd_font_size8);
+}
+.slash {
+  --separator_fontSize: var(--zd_font_size10);
+  /* line-height: var(--zd_size10); */
+}
+.arrow {
+  --separator_fontSize: var(--zd_font_size8);
+  /* line-height: var(--zd_size7); */
+}
+.comma {
+  --separator_fontSize: var(--zd_font_size15);
+  /* line-height: var(--zd_size13); */
+}
+.none {
+  display: none;
+}
+.default {
+  color: var(--zdt_separator_default_text);
+}
+.primary {
+  color: var(--zdt_separator_primary_text);
+}
+.secondary {
+  color: var(--zdt_separator_secondary_text);
+}

package/es/Separator/props/defaultProps.js

@@ -0,0 +1,12 @@
+export const defaultProps = {
+  palette: 'default',
+  type: 'dot',
+  wrap: false,
+  shrink: false,
+  aligndirection: 'row',
+  customClass: {
+    customWrapper: '',
+    customSeparator: '',
+    customChildren: ''
+  }
+};

package/es/Separator/props/propTypes.js

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  aligndirection: PropTypes.string,
+  children: PropTypes.any,
+  palette: PropTypes.oneOf(['default', 'primary', 'secondary']),
+  shrink: PropTypes.bool,
+  type: PropTypes.oneOf(['dot', 'slash', 'arrow', 'comma', 'none']),
+  wrap: PropTypes.bool,
+  customClass: PropTypes.obj,
+  customSeparatorType: PropTypes.string
+};

package/es/ToastMessage/ToastMessage.js

@@ -190,8 +190,9 @@ export default function ToastMessage(props) {
 }
 ToastMessage.propTypes = propTypes;
 ToastMessage.defaultProps = defaultProps;
-if (false) {
-  ToastMessage.docs = {
-    componentGroup: 'Atom'
-  };
-}
+
+// if (__DOCS__) {
+//   ToastMessage.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/Upload/Upload.js

@@ -65,8 +65,9 @@ export default class Upload extends React.Component {
 }
 Upload.propTypes = propTypes;
 Upload.defaultProps = defaultProps;
-if (false) {
-  Upload.docs = {
-    componentGroup: 'Upload'
-  };
-}
+
+// if (__DOCS__) {
+//   Upload.docs = {
+//     componentGroup: 'Upload'
+//   };
+// }