@zohodesk/dot 1.0.0-temp-39 → 1.0.0-temp-43

package/src/form/fields/TextEditorField/TextEditorField.js

@@ -34,8 +34,14 @@ export default class TextEditorField extends PureComponent {
   }
 
   handleLabelClick() {
-    let { isFocusOnLabelClick } = this.props;
-    if (isFocusOnLabelClick && this.textEditor && this.textEditor.focus) {
+    let { isFocusOnLabelClick, isDisabled, isReadOnly } = this.props;
+    if (
+      isFocusOnLabelClick &&
+      !isDisabled &&
+      !isReadOnly &&
+      this.textEditor &&
+      this.textEditor.focus
+    ) {
       this.textEditor.focus();
     }
   }
@@ -99,7 +105,7 @@ export default class TextEditorField extends PureComponent {
               <Label
                 text={labelName}
                 size={fieldSize === 'small' ? 'small' : 'medium'}
-                id={id}
+                htmlFor={!isReadOnly && !isDisabled ? id : undefined}
                 palette={
                   isMandatory
                     ? 'mandatory'

package/src/form/fields/ValidationMessage/ValidationMessage.js

@@ -1,12 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import style from './ValidationMessage.module.css';
 import Label from '@zohodesk/components/lib/Label/Label';
+import colors from '@zohodesk/components/lib/Label/LabelColors.module.css';
+import style from './ValidationMessage.module.css';
+import Icon from '@zohodesk/icons/lib/Icon';
 
 export default class ValidationMessage extends React.Component {
   render() {
-    let { palette, text, htmlFor, onClick, type, size, dataId, clipped, a11y } =
-      this.props;
+    let {
+      palette,
+      text,
+      htmlFor,
+      onClick,
+      type,
+      size,
+      dataId,
+      clipped,
+      a11y,
+      tooltip
+    } = this.props;
     let { role = 'alert' } = a11y;
     return (
       <div
@@ -23,7 +35,16 @@ export default class ValidationMessage extends React.Component {
           dataId={dataId}
           clipped={clipped}
           title={clipped ? text : ''}
+          customClass={style.lable}
         />
+        {tooltip ? (
+          <span
+            className={`${style.icon} ${colors[palette]}`}
+            data-title={tooltip}
+          >
+            <Icon name='ZD-information57' size='14' />
+          </span>
+        ) : null}
       </div>
     );
   }
@@ -38,7 +59,8 @@ ValidationMessage.propTypes = {
   type: PropTypes.oneOf(['primary', 'secondary']),
   a11y: PropTypes.shape({
     role: PropTypes.string
-  })
+  }),
+  tooltip: PropTypes.string
 };
 ValidationMessage.defaultProps = {
   palette: 'mandatory',

package/src/form/fields/ValidationMessage/ValidationMessage.module.css

@@ -1,9 +1,22 @@
+.basic{
+  font-size: 0;
+}
+.lable{
+  display: inline;
+}
+.icon{
+  margin: 0 var(--zd_size5);
+  color:var(--label_text_color);
+  display: inline-block;
+}
 .primary {
   position: absolute;
   top: 100%;
   left: 0;
   margin-top: var(--zd_size5);
+  composes:basic;
 }
 .secondary {
   margin-top: var(--zd_size5);
+  composes:basic;
 }

package/src/form/fields/ValidationMessage/docs/ValidationMessage__default.docs.js

@@ -7,7 +7,54 @@ export default class ValidationMessage__default extends React.Component {
 
   render() {
     return (
-      <ValidationMessage text='validation' type='secondary' size='small' />
+      <div>
+        <ValidationMessage
+          text='validation'
+          palette='default'
+          size='small'
+          type='secondary'
+          tooltip='Information'
+        />
+        <ValidationMessage
+          text='validation'
+          palette='primary'
+          size='small'
+          type='secondary'
+        />
+        <ValidationMessage
+          text='validation'
+          palette='secondary'
+          size='small'
+          type='secondary'
+          tooltip='Information'
+        />
+        <ValidationMessage
+          text='validation'
+          palette='danger'
+          size='small'
+          type='secondary'
+        />
+        <ValidationMessage
+          text='validation'
+          palette='mandatory'
+          size='small'
+          type='secondary'
+          tooltip='Information'
+        />
+        <ValidationMessage
+          text='validation'
+          palette='dark'
+          size='small'
+          type='secondary'
+        />
+        <ValidationMessage
+          text='validation'
+          palette='disable'
+          size='small'
+          type='secondary'
+          tooltip='Information'
+        />
+      </div>
     );
   }
 }

package/src/list/Icons/AddNewIcon.js

@@ -15,7 +15,7 @@ export default class AddNewIcon extends React.Component {
         data-id={dataId}
         data-title={dataTitle}
       >
-        <Icon name='ZD-SE-addTickets' iconClass={iconClass} />
+        <Icon name='ZD-SE-addTickets' iconClass={iconClass?iconClass:''} />
       </span>
     );
   }

package/src/list/Icons/CompleteIcon.js

@@ -4,14 +4,8 @@ import Icon from '@zohodesk/icons/lib/Icon';
 import style from './Icons.module.css';
 export default class CompleteIcon extends React.Component {
   render() {
-    let {
-      onClick,
-      dataId,
-      dataTitle,
-      iconClass,
-      className,
-      iconSize
-    } = this.props;
+    let { onClick, dataId, dataTitle, iconClass, className, iconSize } =
+      this.props;
     return (
       <span
         onClick={onClick}
@@ -21,7 +15,7 @@ export default class CompleteIcon extends React.Component {
         data-id={dataId}
         data-title={dataTitle}
       >
-        <Icon name='ZD-GN-checkbox' iconClass={iconClass} size={iconSize} />
+        <Icon name='ZD-GN-checkbox' iconClass={iconClass?iconClass:''} size={iconSize} />
       </span>
     );
   }

package/src/list/Icons/DeleteIcon.js

@@ -5,14 +5,8 @@ import Icon from '@zohodesk/icons/lib/Icon';
 
 export default class DeleteComponent extends React.Component {
   render() {
-    let {
-      onClick,
-      dataId,
-      dataTitle,
-      iconClass,
-      iconSize,
-      className
-    } = this.props;
+    let { onClick, dataId, dataTitle, iconClass, iconSize, className } =
+      this.props;
     return (
       <span
         onClick={onClick}
@@ -22,7 +16,7 @@ export default class DeleteComponent extends React.Component {
         data-id={dataId}
         data-title={dataTitle}
       >
-        <Icon name='ZD-GN-delete' iconClass={iconClass} size={iconSize} />
+        <Icon name='ZD-GN-delete' iconClass={iconClass?iconClass:''} size={iconSize} />
       </span>
     );
   }

package/src/list/Icons/EditIcon.js

@@ -5,14 +5,8 @@ import Icon from '@zohodesk/icons/lib/Icon';
 
 export default class EditIcon extends React.Component {
   render() {
-    let {
-      onClick,
-      dataId,
-      dataTitle,
-      iconClass,
-      iconSize,
-      className
-    } = this.props;
+    let { onClick, dataId, dataTitle, iconClass, iconSize, className } =
+      this.props;
     return (
       <span
         onClick={onClick}
@@ -22,7 +16,7 @@ export default class EditIcon extends React.Component {
         data-id={dataId}
         data-title={dataTitle}
       >
-        <Icon name='ZD-GN-edit' iconClass={iconClass} size={iconSize} />
+        <Icon name='ZD-GN-edit' iconClass={iconClass?iconClass:''} size={iconSize} />
       </span>
     );
   }

package/src/list/Icons/FloatingIcons.js

@@ -18,7 +18,7 @@ export default class FloatingIcons extends Component {
   }
 }
 FloatingIcons.propTypes = {
-  children: PropTypes.element,
+  children: PropTypes.arrayOf(PropTypes.element),
   iconClass: PropTypes.string
 };
 FloatingIcons.defaultProps = {
@@ -29,4 +29,4 @@ if (__DOCS__) {
     folderName: 'List',
     componentGroup: 'FloatingIcons'
   };
-}
+}

package/src/list/Icons/Icons.module.css

@@ -3,13 +3,14 @@
   composes: inlineFlex from '../listCommon.module.css';
 }
 .iconStyle {
-  padding: 0 var(--zd_size9);
-  cursor: pointer;
   color: var(--zdt_icons_default);
+  padding: 0 var(--zd_size8);
+  width: var(--zd_size33);
+  cursor: pointer;
 }
 .blueHover:hover {
   color: var(--zdt_icons_hover_blue);
 }
 .redHover:hover {
   color: var(--zdt_icons_hover_red);
-}
+}

package/src/list/Icons/ReadUnreadIcon.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@zohodesk/icons/lib/Icon';
+import style from './Icons.module.css';
+
+export default class ReadUnreadIcon extends React.Component {
+  render() {
+    let { onClick, dataId, dataTitle, iconClassName, iconClass, className, isRead, iconSize } =
+      this.props;
+    return (
+      <span
+        onClick={onClick}
+        className={`${style.iconStyle} ${style.blueHover} ${
+          className ? className : ''
+        }`}
+        data-id={dataId}
+        data-title={dataTitle}
+      >
+        <Icon
+          name={isRead ? 'ZD-GN-read' : 'ZD-GN-unread'}
+          size={iconSize}
+          iconClass={`${iconClassName?iconClassName:''} ${iconClass?iconClass:''}`}
+        />
+      </span>
+    );
+  }
+}
+
+ReadUnreadIcon.defaultProps = {
+  isRead: false
+};
+
+ReadUnreadIcon.propTypes = {
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  iconClassName: PropTypes.string,
+  iconClass:PropTypes.string,
+  onClick: PropTypes.func,
+  isRead: PropTypes.bool,
+  iconSize: PropTypes.string
+};

package/src/list/Icons/SmartIcon.js

@@ -15,7 +15,7 @@ export default class SmartIcon extends Component {
         data-id={dataId}
         data-title={dataTitle}
       >
-        <Icon name='ZD-TK-peek' iconClass={iconClass} />
+        <Icon name='ZD-TK-peek' iconClass={iconClass?iconClass:''} />
       </span>
     );
   }

package/src/list/Icons/docs/FloatingIcons__default.docs.js

@@ -3,11 +3,14 @@ import FloatingIcons from '../FloatingIcons';
 import EditIcon from '../EditIcon';
 import DeleteIcon from '../DeleteIcon';
 import SmartIcon from '../SmartIcon';
+import ReadUnreadIcon from '../ReadUnreadIcon';
 
 export default class FloatingIcons__default extends Component {
   render() {
     return (
       <FloatingIcons>
+        <ReadUnreadIcon isRead iconSize="15" />
+        <ReadUnreadIcon iconSize="15" />
         <EditIcon />
         <DeleteIcon />
         <SmartIcon />

package/src/list/SecondaryText/AccountName.js

@@ -26,8 +26,10 @@ export default class AccountName extends Component {
       fontWeight,
       secondaryAccountHref,
       secondaryAccountClick,
-      secondaryAccountText
+      secondaryAccountText,
+      customProps
     } = this.props;
+    let {LinkProps={}, TextProps={},SecondaryTextProps={}}=customProps;
     return (
       <Container
         alignBox='row'
@@ -52,7 +54,7 @@ export default class AccountName extends Component {
                   onClick={onClick}
                   dataId={`${dataId}_link`}
                   className={style.link}
-                  
+                  {...LinkProps}
                 >
                  <div className={`${style.textStyle} ${
                     style[`font_${fontWeight}`]
@@ -65,6 +67,7 @@ export default class AccountName extends Component {
                 } ${
                   className ? className : ''
                 } ${notAccessible ? style.disable : ''}`}
+                {...TextProps}
               >
                 {text}
               </div>
@@ -80,7 +83,8 @@ export default class AccountName extends Component {
                     >
                       <div className={`${style.textStyle} ${
                         style[`font_${fontWeight}`]
-                      } ${className ? className : ''}`}>{secondaryAccountText}</div>
+                      } ${className ? className : ''}`} {...SecondaryTextProps}>
+                        {secondaryAccountText}</div>
                     </Link>
                   </Box>
                 )
@@ -106,11 +110,17 @@ AccountName.propTypes = {
   secondaryAccountHref: PropTypes.string,
   secondaryAccountClick: PropTypes.func,
   secondaryAccountText: PropTypes.string,
+  customProps:PropTypes.shape({
+    LinkProps:PropTypes.object,
+    TextProps:PropTypes.object,
+    SecondaryTextProps:PropTypes.object
+  })
 };
 AccountName.defaultProps = {
   isLink: true,
   dataId: 'accountName',
   fontWeight: 'regular',
+  customProps:{}
 };
 if (__DOCS__) {
   AccountName.docs = {

package/src/list/SecondaryText/ContactName.js

@@ -22,7 +22,8 @@ export default class ContactName extends Component {
       href,
       notAccessible = false,
       fontWeight,
-      i18nKeys
+      i18nKeys,
+      customProps
     } = this.props;
     let {
       sentimentTitles = {
@@ -33,6 +34,7 @@ export default class ContactName extends Component {
       paidTitle = 'Paid User'
     } = i18nKeys;
     let sentimentDataTitle = sentimentTitles[sentimentType];
+    let {LinkProps={}, TextProps={}}=customProps;
     return (
       <Container
         alignBox='row'
@@ -55,6 +57,7 @@ export default class ContactName extends Component {
               title={dataTitle}
               dataId={`${dataId}_link`}
               className={style.link}
+              {...LinkProps}
             >
               <div
                 className={`${style.textStyle} ${style[`font_${fontWeight}`]} ${
@@ -72,6 +75,7 @@ export default class ContactName extends Component {
                 notAccessible ? style.disable : ''
               }`}
               data-title={dataTitle}
+              {...TextProps}
             >
               {text}
             </div>
@@ -111,6 +115,10 @@ ContactName.propTypes = {
       neutral: PropTypes.string
     }),
     paidTitle: PropTypes.string
+  }),
+  customProps:PropTypes.shape({
+    LinkProps:PropTypes.object,
+    TextProps:PropTypes.object
   })
 };
 ContactName.defaultProps = {
@@ -118,7 +126,8 @@ ContactName.defaultProps = {
   isLink: true,
   dataId: 'contactName',
   fontWeight: 'regular',
-  i18nKeys: {}
+  i18nKeys: {},
+  customProps:{}
 };
 if (__DOCS__) {
   ContactName.docs = {

package/src/list/SecondaryText/Email.js

@@ -20,8 +20,10 @@ export default class Email extends Component {
       href,
       isLink,
       target,
-      fontWeight
+      fontWeight,
+      customProps
     } = this.props;
+    let {LinkProps={},TextProps={}}=customProps;
     return (
       <React.Fragment>
         {isLink ? (
@@ -32,6 +34,7 @@ export default class Email extends Component {
             urlName={urlName}
             target={target}
             className={style.link}
+            {...LinkProps}
           >
             <div className={`${style.textStyle} ${
               style[`font_${fontWeight}`]
@@ -43,6 +46,7 @@ export default class Email extends Component {
               style[`font_${fontWeight}`]
             } ${className ? className : ''}`}
             data-title={title}
+            {...TextProps}
           >
             {text}
           </div>
@@ -61,12 +65,17 @@ Email.propTypes = {
   text: PropTypes.string,
   title: PropTypes.string,
   urlData: PropTypes.object,
-  urlName: PropTypes.string
+  urlName: PropTypes.string,
+  customProps:PropTypes.shape({
+    LinkProps:PropTypes.object,
+    TextProps:PropTypes.object
+  })
 };
 
 Email.defaultProps = {
   isLink: true,
-  fontWeight: 'regular'
+  fontWeight: 'regular',
+  customProps:{}
 };
 
 if (__DOCS__) {

package/src/list/SecondaryText/PhoneNumber.js

@@ -22,8 +22,10 @@ export default class PhoneNumber extends Component {
       isLink,
       target,
       hasReload,
-      fontWeight
+      fontWeight,
+      customProps
     } = this.props;
+    let {LinkProps={}, TextProps={}}=customProps;
     return (
       <React.Fragment>
         {isLink ? (
@@ -36,6 +38,7 @@ export default class PhoneNumber extends Component {
             target={target}
             hasReload={hasReload}
             className={style.link}
+            {...LinkProps}
           >
             <div className={`${style.phoneNumber} ${
               style[`font_${fontWeight}`]
@@ -47,6 +50,7 @@ export default class PhoneNumber extends Component {
               style[`font_${fontWeight}`]
             } ${className ? className : ''}`}
             data-title={title}
+            {...TextProps}
           >
             {text}
           </div>
@@ -67,13 +71,18 @@ PhoneNumber.propTypes = {
   text: PropTypes.string,
   title: PropTypes.string,
   urlData: PropTypes.object,
-  urlName: PropTypes.string
+  urlName: PropTypes.string,
+  customProps:PropTypes.shape({
+    LinkProps:PropTypes.object,
+    TextProps:PropTypes.object
+  })
 };
 
 PhoneNumber.defaultProps = {
   isLink: true,
   hasReload: false,
-  fontWeight: 'regular'
+  fontWeight: 'regular',
+  customProps:{}
 };
 
 if (__DOCS__) {

package/src/list/SecondaryText/TicketId.js

@@ -18,8 +18,10 @@ export default class TicketId extends Component {
       url,
       target,
       urlName,
-      urlData
+      urlData,
+      customProps
     } = this.props;
+    let {LinkProps={},TicketIdProps={}}=customProps;
     return (
       <div
         className={`${style.ticketId} ${isLink ? style.ticketIdLink : ''} ${
@@ -28,6 +30,7 @@ export default class TicketId extends Component {
         data-id={dataId}
         data-title={dataTitle}
         onClick={!isLink && onClick}
+        {...TicketIdProps}
       >
         {isLink ? (
           <Link
@@ -36,6 +39,7 @@ export default class TicketId extends Component {
             href={url}
             target={target}
             onClick={onClick}
+            {...LinkProps}
           >
             {text}
           </Link>
@@ -56,10 +60,15 @@ TicketId.propTypes = {
   text: PropTypes.string,
   url: PropTypes.string,
   urlData: PropTypes.string,
-  urlName: PropTypes.string
+  urlName: PropTypes.string,
+  customProps:PropTypes.shape({
+    TicketIdProps:PropTypes.object,
+    LinkProps:PropTypes.object
+  })
 };
 TicketId.defaultProps = {
-  dataId: 'ticketId'
+  dataId: 'ticketId',
+  customProps:{}
 };
 if (__DOCS__) {
   TicketId.docs = {

package/src/list/Subject/Subject.js

@@ -21,8 +21,10 @@ export default class Subject extends Component {
       fontWeight,
       className,
       isDotted,
-      children
+      children,
+      customProps
     } = this.props;
+    let {LinkProps={},TextProps={}}=customProps;
     return (
       <React.Fragment>
         {isLink ? (
@@ -35,7 +37,7 @@ export default class Subject extends Component {
             dataId={dataId}
             title={text}
             target={target}
-            
+            {...LinkProps}
           >
             {children? children:text}
           </Link>
@@ -44,6 +46,7 @@ export default class Subject extends Component {
             className={`${style.subject} ${isDotted ? style.dotted : ''} ${className} ${style[`font_${  fontWeight}`]}`}
             data-title={text}
             data-id={dataId}
+            {...TextProps}
           >
             {text}
           </span>
@@ -64,13 +67,18 @@ Subject.propTypes = {
   urlData: PropTypes.object,
   urlName: PropTypes.string,
   isDotted: PropTypes.bool,
-  children:PropTypes.node
+  children:PropTypes.node,
+  customProps:PropTypes.shape({
+    LinkProps:PropTypes.object,
+    TextProps:PropTypes.object
+  })
 };
 Subject.defaultProps = {
   isLink: false,
   fontWeight: 'regular',
   className: '',
-  isDotted: true
+  isDotted: true,
+  customProps:{}
 };
 if (__DOCS__) {
   Subject.docs = {

package/src/list/UserTime/UserTime.js

@@ -111,7 +111,7 @@ export default class UserTime extends Component {
 UserTime.propTypes = {
   ago: PropTypes.string,
   containerClass: PropTypes.string,
-  dataId: PropTypes.dtring,
+  dataId: PropTypes.string,
   format: PropTypes.func,
   icon: PropTypes.oneOf([
     'closedTime',

package/src/list/status/StatusDropdown/StatusDropdown.js

@@ -285,13 +285,7 @@ export class StatusDropdown extends React.Component {
           tagName='button'
           alignBox='row'
           className={`${style.container} ${containerClass} ${btnStyle.buttonReset}`}
-          onMouseDown={
-            !showOnHover &&
-            !isDisabled &&
-            !isReadOnly &&
-            isEditable &&
-            this.handleTogglePopup
-          }
+          onMouseDown={(!showOnHover && !isDisabled && !isReadOnly && isEditable ) ? this.handleTogglePopup : null }
           eleRef={getTargetRef}
           align={targetAlign}
           isCover={false}