@zohodesk/components 1.0.0-temp-118 → 1.0.0-temp-120

package/README.md

@@ -32,6 +32,10 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-257
+
+- **Avatar** - Avatar initial render issue and image border issue  solved
+
 # 1.0.0-alpha-256
 
  - **Button** - Safari browser focus issue fix and `customProps` validation.

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

@@ -23,13 +23,14 @@
 	--zdt_avatar_info_bg: var(--dot_mirror);
 	
 	/* avatar team */
-	--zdt_avatarteam_default_bg: var(--dot_mirror);
+	--zdt_avatarteam_default_bg: var(--dot_ebonyclay);
 	--zdt_avatarteam_default_border: var(--dot_mirror);
 	--zdt_avatarteam_primary_bg: var(--zdt_cta_grey_40_bg);
 	--zdt_avatarteam_primary_hover_bg: var(--dot_oslogrey);
 	--zdt_avatarteam_secondary_bg: var(--dot_ebonyclay);
 	--zdt_avatarteam_nofill_border: var(--zdt_cta_grey_40_border);
 	--zdt_avatarteam_nofill_hover_border: var(--dot_oslogrey);
+	--zdt_avatarteam_innerCircle: var(--dot_ebonyclay);
 	
 	/* button */
 	--zdt_button_default_text: var(--zdt_cta_alpha_text);

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

@@ -23,13 +23,14 @@
 	--zdt_avatar_info_bg: var(--dot_mirror);
 	
 	/* avatar team */
-	--zdt_avatarteam_default_bg: var(--dot_mirror);
+	--zdt_avatarteam_default_bg: var(--dot_white);
 	--zdt_avatarteam_default_border: var(--dot_mirror);
 	--zdt_avatarteam_primary_bg: var(--zdt_cta_grey_40_bg);
 	--zdt_avatarteam_primary_hover_bg: var(--dot_slateGrey);
 	--zdt_avatarteam_secondary_bg: var(--dot_white);
 	--zdt_avatarteam_nofill_border: var(--zdt_cta_grey_40_border);
 	--zdt_avatarteam_nofill_hover_border: var(--dot_slateGrey);
+	--zdt_avatarteam_innerCircle: var(--dot_white);
 	
 	/* button */
 	--zdt_button_default_text: var(--zdt_cta_alpha_text);

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

@@ -23,13 +23,14 @@
 	--zdt_avatar_info_bg: var(--dot_mirror);
 	
 	/* avatar team */
-	--zdt_avatarteam_default_bg: var(--dot_mirror);
+	--zdt_avatarteam_default_bg: #212121;
 	--zdt_avatarteam_default_border: var(--dot_mirror);
 	--zdt_avatarteam_primary_bg: var(--zdt_cta_grey_40_bg);
 	--zdt_avatarteam_primary_hover_bg: var(--dot_oslogrey);
 	--zdt_avatarteam_secondary_bg: #212121;
 	--zdt_avatarteam_nofill_border: var(--zdt_cta_grey_40_border);
 	--zdt_avatarteam_nofill_hover_border: var(--dot_oslogrey);
+	--zdt_avatarteam_innerCircle: #212121;
 	
 	/* button */
 	--zdt_button_default_text: var(--zdt_cta_alpha_text);

package/es/Accordion/Accordion.js

@@ -67,9 +67,10 @@ export default class Accordion extends React.Component {
 }
 Accordion.propTypes = Accordion_propTypes;
 Accordion.defaultProps = Accordion_defaultProps;
-if (false) {
-  Accordion.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   Accordion.docs = {
+//     componentGroup: 'Animation',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/Accordion/AccordionItem.js

@@ -50,9 +50,9 @@ export default class AccordionItem extends React.Component {
 }
 AccordionItem.propTypes = AccordionItem_propTypes;
 AccordionItem.defaultProps = AccordionItem_defaultProps;
-if (false) {
-  AccordionItem.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Style Guide'
-  };
-}
+// if (__DOCS__) {
+//   AccordionItem.docs = {
+//     componentGroup: 'Animation',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/Animation/Animation.js

@@ -123,11 +123,12 @@ export default class Animation extends React.Component {
 }
 Animation.propTypes = propTypes;
 Animation.defaultProps = defaultProps;
-if (false) {
-  Animation.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}
+
+// if (__DOCS__) {
+//   Animation.docs = {
+//     componentGroup: 'Animation',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+// }

package/es/AppContainer/AppContainer.js

@@ -104,9 +104,10 @@ export default class AppContainer extends React.Component {
 }
 AppContainer.propTypes = propTypes;
 AppContainer.defaultProps = defaultProps;
-if (false) {
-  AppContainer.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   AppContainer.docs = {
+//     componentGroup: 'Template',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/Avatar/Avatar.js

@@ -124,7 +124,9 @@ export default class Avatar extends React.Component {
       customClass,
       alternateSrc,
       isAnimate,
-      customProps
+      customProps,
+      needInnerborder,
+      needDefaultBorder
     } = this.props;
     let {
       AvatarProps = {}
@@ -134,11 +136,12 @@ export default class Avatar extends React.Component {
     initial = initial || this.getInitialByFullName(name);
     let isInvalidImageList = Avatar.invalidImageURLs.indexOf(src) !== -1;
     let isValidImageList = Avatar.validImageURLs.indexOf(src) !== -1;
-    let border = borderOnHover || onClick;
-    let borderStyle = (!src || src && isInvalidImageList || !isValidImageList) && needBorder ? `${style.border} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ` : '';
     let showAvatar = src && !isInvalidImageList;
-    let showInitial = !showAvatar || showAvatar && !isValidImageList;
+    let showInitial = !showAvatar || showAvatar && isInvalidImageList;
     const showAlternateAvatar = alternateSrc ? showInitial : false;
+    let border = borderOnHover || onClick;
+    let showDefaultBorder = src && !isInvalidImageList && needDefaultBorder;
+    let borderStyle = (!src || !showAvatar || showInitial || showDefaultBorder) && needBorder ? `${style.border} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ` : '';
     borderStyle = showAlternateAvatar ? '' : borderStyle;
     return /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${customClass ? customClass : ''}`,
@@ -148,26 +151,26 @@ export default class Avatar extends React.Component {
     }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
       className: `${style.initial}`,
       "data-id": `${dataId}_AvatarInitial`
-    }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
-      className: `${style.image} ${isAnimate ? style.animate : ''}`,
+    }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: `${style.shadow} ${textStyle} `
+    }, /*#__PURE__*/React.createElement("img", {
+      className: `${style.image} ${isAnimate ? style.animate : ''} ${needInnerborder ? style.innerBorder : ''}`,
       "data-id": `${dataId}_AvatarImg`,
       name: name,
       onError: this.putInvalidImageURLJSON,
       onLoad: this.putValidImageURLJSON,
       src: showAlternateAvatar ? alternateSrc : src,
       alt: name
-    }), !isValidImageList && !showAlternateAvatar ? null : /*#__PURE__*/React.createElement("span", {
-      className: `${style.shadow} ${textStyle} `
-    })));
+    }))));
   }
 }
 Avatar.defaultProps = defaultProps;
 Avatar.propTypes = propTypes;
 Avatar.invalidImageURLs = [];
 Avatar.validImageURLs = [];
-if (false) {
-  Avatar.docs = {
-    componentGroup: 'Avatar Group',
-    folderName: 'Style Guide'
-  };
-}
+// if (__DOCS__) {
+//   Avatar.docs = {
+//     componentGroup: 'Avatar Group',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/Avatar/Avatar.module.css

@@ -79,6 +79,9 @@
 [dir=rtl] .animate{
   animation-duration: var(--zd_transition2);
 }
+.innerBorder{
+  border: 1px solid var(--zdt_avatarteam_innerCircle);
+}
 .square_small {
   --avatar_border_radius: 4px;
 }

package/es/Avatar/props/defaultProps.js

@@ -10,5 +10,7 @@ export const defaultProps = {
   borderOnActive: false,
   borderOnHover: false,
   customProps: {},
-  isAnimate: true
+  isAnimate: true,
+  needInnerborder: false,
+  needDefaultBorder: false
 };

package/es/Avatar/props/propTypes.js

@@ -19,5 +19,7 @@ export const propTypes = {
   customProps: PropTypes.shape({
     AvatarProps: PropTypes.object
   }),
-  isAnimate: PropTypes.bool
+  isAnimate: PropTypes.bool,
+  needInnerborder: PropTypes.bool,
+  needDefaultBorder: PropTypes.bool
 };

package/es/AvatarTeam/AvatarTeam.js

@@ -31,7 +31,10 @@ export default class AvatarTeam extends React.Component {
       customClass,
       borderOnActive,
       borderOnHover,
-      customProps
+      needInnerborder,
+      needBorder,
+      customProps,
+      needDefaultBorder
     } = this.props;
     let {
       AvatarTeamProps = {},
@@ -56,7 +59,10 @@ export default class AvatarTeam extends React.Component {
       needTitle: needTitle,
       customClass: customAvatar,
       borderOnActive: borderOnActive,
-      borderOnHover: border
+      borderOnHover: border,
+      needInnerborder: needInnerborder,
+      needBorder: needBorder,
+      needDefaultBorder: needDefaultBorder
     }, AvatarProps)), /*#__PURE__*/React.createElement("span", {
       className: `${style.team} ${isFilled ? `${style[`${palette}Filled`]}` : style.nofill} 
           ${style[`${size}team`]} ${customAvatarTeam}`
@@ -65,10 +71,11 @@ export default class AvatarTeam extends React.Component {
 }
 AvatarTeam.defaultProps = defaultProps;
 AvatarTeam.propTypes = propTypes;
-if (false) {
-  AvatarTeam.docs = {
-    componentGroup: 'Avatar Group',
-    folderName: 'Style Guide',
-    external: true
-  };
-}
+
+// if (__DOCS__) {
+//   AvatarTeam.docs = {
+//     componentGroup: 'Avatar Group',
+//     folderName: 'Style Guide',
+//     external: true
+//   };
+// }

package/es/AvatarTeam/AvatarTeam.module.css

@@ -3,6 +3,9 @@
   --avatarteam_border_width: var(--zd_size1);
   --avatarteam_border_style: solid;
   --avatarteam_border_color: var(--zdt_avatarteam_default_border);
+  --avatarteam_outline_width: var(--zd_size1);
+  --avatarteam_outline_style: solid;
+  --avatarteam_outline_color: var(--zdt_avatarteam_innerCircle);
   --avatarteam_bg_color: var(--zdt_avatarteam_default_bg);
   --avatarteam_width: var(--zd_size5);
   --avatarteam_height: var(--zd_size5);
@@ -23,6 +26,9 @@
   top: var(--avatarteam_top_top);
   width: var(--avatarteam_width);
   height: var(--avatarteam_height);
+  outline-width: var(--avatarteam_outline_width);
+  outline-style: var(--avatarteam_outline_style);
+  outline-color: var(--avatarteam_outline_color);
   border-width: var(--avatarteam_border_width);
   border-style: var(--avatarteam_border_style);
   border-color: var(--avatarteam_border_color);
@@ -64,6 +70,9 @@
   height: inherit;
   width: inherit;
   top: var(--avatarteam_bottom_top);
+  outline-width: var(--avatarteam_outline_width);
+  outline-style: var(--avatarteam_outline_style);
+  outline-color: var( --avatarteam_outline_color);
 }
 .team:after, .team:before {
   border: inherit;

package/es/AvatarTeam/props/defaultProps.js

@@ -9,5 +9,8 @@ export const defaultProps = {
   customClass: {},
   borderOnActive: false,
   borderOnHover: false,
-  customProps: {}
+  customProps: {},
+  needInnerborder: true,
+  needBorder: true,
+  needDefaultBorder: true
 };

package/es/AvatarTeam/props/propTypes.js

@@ -9,6 +9,7 @@ export const propTypes = {
   size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
   src: PropTypes.string,
   textPalette: PropTypes.oneOf(['white', 'black']),
+  needBorder: PropTypes.bool,
   title: PropTypes.string,
   customClass: PropTypes.shape({
     customAvatar: PropTypes.string,
@@ -16,6 +17,8 @@ export const propTypes = {
   }),
   borderOnActive: PropTypes.bool,
   borderOnHover: PropTypes.bool,
+  needInnerborder: PropTypes.bool,
+  needDefaultBorder: PropTypes.bool,
   customProps: PropTypes.shape({
     AvatarTeamProps: PropTypes.object,
     AvatarProps: PropTypes.object

package/es/Button/Button.js

@@ -56,9 +56,10 @@ export default class Button extends React.Component {
 }
 Button.defaultProps = defaultProps;
 Button.propTypes = propTypes;
-if (false) {
-  Button.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   Button.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/Buttongroup/Buttongroup.js

@@ -28,15 +28,18 @@ export default class Buttongroup extends React.Component {
 }
 Buttongroup.defaultProps = defaultProps;
 Buttongroup.propTypes = propTypes;
-if (false) {
-  Buttongroup.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide',
-    external: false,
-    description: ' ',
-    images: [{
-      view: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/ButtonGroup/v1/ButtonGroup.png',
-      psd: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/ButtonGroup/v1/ButtonGroup.psd'
-    }]
-  };
-}
+
+// if (__DOCS__) {
+//   Buttongroup.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide',
+//     external: false,
+//     description: ' ',
+//     images: [
+//       {
+//         view: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/ButtonGroup/v1/ButtonGroup.png',
+//         psd: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/ButtonGroup/v1/ButtonGroup.psd'
+//       }
+//     ]
+//   };
+// }

package/es/Card/Card.js

@@ -225,14 +225,16 @@ export default class Card extends Component {
 }
 Card.propTypes = Card_propTypes;
 Card.defaultProps = Card_defaultProps;
-if (false) {
-  Card.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}
+
+// if (__DOCS__) {
+//   Card.docs = {
+//     componentGroup: 'Template',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+// }
+
 export class CardFooter extends Component {
   render() {
     let {

package/es/CheckBox/CheckBox.js

@@ -148,9 +148,10 @@ export default class CheckBox extends React.Component {
 }
 CheckBox.defaultProps = defaultProps;
 CheckBox.propTypes = propTypes;
-if (false) {
-  CheckBox.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   CheckBox.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/DateTime/DateWidget.js

@@ -920,8 +920,7 @@ class DateWidgetComponent extends React.Component {
       targetOffset,
       isRestrictScroll,
       dropBoxPortalId,
-      a11y,
-      boxSize
+      a11y
     } = this.props;
     const {
       selected: value = '',
@@ -1007,8 +1006,7 @@ class DateWidgetComponent extends React.Component {
       positionsOffset: positionsOffset,
       targetOffset: targetOffset,
       isRestrictScroll: isRestrictScroll,
-      dropBoxPortalId: dropBoxPortalId,
-      boxSize: boxSize
+      dropBoxPortalId: dropBoxPortalId
     }));
   }
 }
@@ -1018,14 +1016,15 @@ const DateWidget = Popup(DateWidgetComponent);
 DateWidget.defaultProps = DateWidgetComponent.defaultProps;
 
 // eslint-disable-next-line no-undef
-if (false) {
-  DateWidgetComponent.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-  // eslint-disable-next-line react/forbid-foreign-prop-types
-  DateWidget.propTypes = DateWidgetComponent.propTypes;
-}
+// if (__DOCS__) {
+//   DateWidgetComponent.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+//   // eslint-disable-next-line react/forbid-foreign-prop-types
+//   DateWidget.propTypes = DateWidgetComponent.propTypes;
+// }
+
 export default DateWidget;

package/es/DropBox/DropBox.js

@@ -237,11 +237,11 @@ export default class DropBox extends React.Component {
 DropBox.propTypes = propTypes;
 DropBox.contextType = LibraryContext;
 DropBox.defaultProps = defaultProps;
-if (false) {
-  DropBox.docs = {
-    componentGroup: 'Atom',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}
+// if (__DOCS__) {
+//   DropBox.docs = {
+//     componentGroup: 'Atom',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+// }

package/es/DropDown/DropDown.js

@@ -15,12 +15,14 @@ export default class DropDown extends React.Component {
   }
 }
 DropDown.propTypes = DropDown_propTypes;
-if (false) {
-  DropDown.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   DropDown.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }
+
 export class DropDownTarget extends React.Component {
   render() {
     let {

package/es/DropDown/DropDownHeading.js

@@ -31,9 +31,10 @@ export default class DropDownHeading extends React.Component {
 }
 DropDownHeading.propTypes = DropDownHeading_propTypes;
 DropDownHeading.defaultProps = DropDownHeading_defaultProps;
-if (false) {
-  DropDownHeading.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   DropDownHeading.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/Heading/Heading.js

@@ -26,9 +26,10 @@ export default class Heading extends React.Component {
 }
 Heading.propTypes = propTypes;
 Heading.defaultProps = defaultProps;
-if (false) {
-  Heading.docs = {
-    folderName: 'Style Guide',
-    componentGroup: 'Accessibility'
-  };
-}
+
+// if (__DOCS__) {
+//   Heading.docs = {
+//     folderName: 'Style Guide',
+//     componentGroup: 'Accessibility'
+//   };
+// }

package/es/Label/Label.js

@@ -35,9 +35,10 @@ export default class Label extends React.Component {
 }
 Label.defaultProps = defaultProps;
 Label.propTypes = propTypes;
-if (false) {
-  Label.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   Label.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/ListItem/ListContainer.js

@@ -85,9 +85,10 @@ const ListContainer = props => {
 ListContainer.defaultProps = ListContainerDefaultProps;
 ListContainer.propTypes = ListContainer_Props;
 export default ListContainer;
-if (false) {
-  ListContainer.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   ListContainer.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/ListItem/ListItem.js

@@ -119,9 +119,10 @@ export default class ListItem extends React.Component {
 }
 ListItem.defaultProps = ListItemDefaultProps;
 ListItem.propTypes = ListItem_Props;
-if (false) {
-  ListItem.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   ListItem.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/ListItem/ListItemWithAvatar.js

@@ -141,9 +141,9 @@ export default class ListItemWithAvatar extends React.PureComponent {
 }
 ListItemWithAvatar.defaultProps = ListItemWithAvatarDefaultProps;
 ListItemWithAvatar.propTypes = ListItemWithAvatar_Props;
-if (false) {
-  ListItemWithAvatar.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide'
-  };
-}
+// if (__DOCS__) {
+//   ListItemWithAvatar.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/ListItem/ListItemWithCheckBox.js

@@ -102,9 +102,9 @@ export default class ListItemWithCheckBox extends React.Component {
 }
 ListItemWithCheckBox.defaultProps = ListItemWithCheckBoxDefaultProps;
 ListItemWithCheckBox.propTypes = ListItemWithCheckBox_Props;
-if (false) {
-  ListItemWithCheckBox.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide'
-  };
-}
+// if (__DOCS__) {
+//   ListItemWithCheckBox.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }