@zohodesk/dot 1.0.0-beta.20 → 1.0.0-beta.203

package/src/list/SecondryPanel/docs/SecondryPanel__default.docs.js

@@ -6,55 +6,79 @@ import SecondryPanel, {
 } from '../SecondryPanel';
 
 import style from './SecondryPanelDocs.module.css';
+
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+
 export default class SecondryPanel__default extends Component {
   constructor(props) {
     super(props);
+    this.responsiveFunc = this.responsiveFunc.bind(this);
+  }
+
+  responsiveFunc({ mediaQueryOR }) {
+     return {
+       uptoTablet : mediaQueryOR([{maxWidth: 640}])
+     }
   }
 
   render() {
     return (
-      <SecondryPanel className={style.layoutWrapper}>
-        <SecondryPanelUL className={style.layoutContainer}>
-          <SecondryPanelLI>
-            <SecondryPanelUL className={style.container}>
-              <SecondryPanelLI className={`${style.itemId}`}>
-                <span className={style.itemInner}>
-                  <span className={style.itemText}>#12303456789</span>
-                  <span className={style.itemDot} />
-                </span>
-              </SecondryPanelLI>
-              <SecondryPanelLI>
-                <span className={style.itemInner}>
-                  <span className={style.itemText}>Nicole Hawkins</span>
-                  <span className={style.itemDot} />
-                </span>
-              </SecondryPanelLI>
-              <SecondryPanelLI>
-                <span className={style.itemInner}>
-                  <span className={style.itemText}>Welcome to Diffchecker</span>
-                  <span className={style.itemDot} />
-                </span>
-              </SecondryPanelLI>
-            </SecondryPanelUL>
-          </SecondryPanelLI>
-          <SecondryPanelLI>
-            <SecondryPanelUL className={style.container}>
+      <ResponsiveReceiver query={this.responsiveFunc}>
+        {({ uptoTablet }) => (
+          <SecondryPanel className={style.layoutWrapper}>
+            <SecondryPanelUL
+              className={`${
+                uptoTablet
+                  ? style.minilayoutContainer
+                  : ''
+              }`}
+            >
               <SecondryPanelLI>
-                <span className={style.itemInner}>
-                  <span className={style.itemText}>28 Jun 2019</span>
-                  <span className={style.itemDot} />
-                </span>
+                <SecondryPanelUL className={style.container}>
+                  <SecondryPanelLI className={`${style.itemId}`}>
+                    <span className={style.itemInner}>
+                      <span className={style.itemText}>#12303456789</span>
+                      <span className={style.itemDot} />
+                    </span>
+                  </SecondryPanelLI>
+                  <SecondryPanelLI>
+                    <span className={style.itemInner}>
+                      <span className={style.itemText}>Nicole Hawkins</span>
+                      <span className={style.itemDot} />
+                    </span>
+                  </SecondryPanelLI>
+                  <SecondryPanelLI>
+                    <span className={style.itemInner}>
+                      <span className={style.itemText}>
+                        Welcome to Diffchecker
+                      </span>
+                      <span className={style.itemDot} />
+                    </span>
+                  </SecondryPanelLI>
+                </SecondryPanelUL>
               </SecondryPanelLI>
               <SecondryPanelLI>
-                <span className={style.itemInner}>
-                  <span className={style.itemText}>28 May 2019 07:41 PM</span>
-                  <span className={style.itemDot} />
-                </span>
+                <SecondryPanelUL className={style.container}>
+                  <SecondryPanelLI>
+                    <span className={style.itemInner}>
+                      <span className={style.itemText}>28 Jun 2019</span>
+                      <span className={style.itemDot} />
+                    </span>
+                  </SecondryPanelLI>
+                  <SecondryPanelLI>
+                    <span className={style.itemInner}>
+                      <span className={style.itemText}>
+                        28 May 2019 07:41 PM
+                      </span>
+                      <span className={style.itemDot} />
+                    </span>
+                  </SecondryPanelLI>
+                </SecondryPanelUL>
               </SecondryPanelLI>
             </SecondryPanelUL>
-          </SecondryPanelLI>
-        </SecondryPanelUL>
-      </SecondryPanel>
+          </SecondryPanel>
+        )}
+      </ResponsiveReceiver>
     );
   }
 }

package/src/list/SentimentStatus/SentimentStatus.module.css

@@ -1,7 +1,7 @@
 .container {
   margin: 0 0 0 var(--zd_size5);
   vertical-align: middle;
-  font-size: var(--zd_size10);
+  font-size: var(--zd_font_size10);
 }
 
 .sentimentIcon {

package/src/list/Subject/Subject.js

@@ -11,15 +11,20 @@ export default class Subject extends Component {
   render() {
     let {
       text,
-      isBold,
       dataId,
       urlName,
       href,
       urlData,
       onClick,
       isLink,
-      target
+      target,
+      fontWeight,
+      className,
+      isDotted,
+      children,
+      customProps
     } = this.props;
+    let {LinkProps={},TextProps={}}=customProps;
     return (
       <React.Fragment>
         {isLink ? (
@@ -28,18 +33,20 @@ export default class Subject extends Component {
             href={href}
             urlData={urlData}
             onClick={onClick}
-            className={`${style.subject} ${isBold ? style.bold : ''}`}
+            className={`${style.subject} ${isDotted ? style.dotted : ''} ${className} ${style[`font_${  fontWeight}`]} ${style.cursorPointer}`}
             dataId={dataId}
             title={text}
             target={target}
+            {...LinkProps}
           >
-            {text}
+            {children? children:text}
           </Link>
         ) : (
           <span
-            className={`${style.subject} ${isBold ? style.bold : ''}`}
+            className={`${style.subject} ${isDotted ? style.dotted : ''} ${className} ${style[`font_${  fontWeight}`]}`}
             data-title={text}
             data-id={dataId}
+            {...TextProps}
           >
             {text}
           </span>
@@ -49,19 +56,29 @@ export default class Subject extends Component {
   }
 }
 Subject.propTypes = {
+  className: PropTypes.string,
   dataId: PropTypes.string,
+  fontWeight: PropTypes.oneOf(['regular', 'semibold', 'bold']),
   href: PropTypes.string,
-  isBold: PropTypes.bool,
   isLink: PropTypes.bool,
   onClick: PropTypes.func,
   target: PropTypes.oneOf(['_blank', '_self']),
   text: PropTypes.string,
   urlData: PropTypes.object,
-  urlName: PropTypes.string
+  urlName: PropTypes.string,
+  isDotted: PropTypes.bool,
+  children:PropTypes.node,
+  customProps:PropTypes.shape({
+    LinkProps:PropTypes.object,
+    TextProps:PropTypes.object
+  })
 };
 Subject.defaultProps = {
-  isBold: false,
-  isLink: false
+  isLink: false,
+  fontWeight: 'regular',
+  className: '',
+  isDotted: true,
+  customProps:{}
 };
 if (__DOCS__) {
   Subject.docs = {

package/src/list/Subject/Subject.module.css

@@ -1,9 +1,27 @@
+.varClass {
+  --subject_text: var(--zdt_subject_text);
+}
 .subject {
-  color: var(--dot_text_black);
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  composes: varClass;
+  color: var(--subject_text);
   display: block;
 }
-.bold {
+.dotted {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+.font_regular {
+  font-family: var(--zd_regular);
+}
+.font_semibold {
   font-family: var(--zd_semibold);
+}
+.font_bold {
+  font-family: var(--zd_bold);
+}
+.font_semibold,
+.font_bold {
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
 }
+.cursorPointer {
+  cursor: pointer;
+}

package/src/list/Subject/docs/Subject__default.docs.js

@@ -8,12 +8,19 @@ export default class Subject__default extends Component {
 
   render() {
     return (
-      <div>
+      <div style={{ margin: '10px' }}>
+        <div>Font Variant</div>
         <div style={{ margin: '10px' }}>
           <Subject text='MacBook Pro - A touch of genius' />
         </div>
         <div style={{ margin: '10px' }}>
-          <Subject text='MacBook Pro - A touch of genius' isBold />
+          <Subject
+            text='MacBook Pro - A touch of genius'
+            fontWeight='semibold'
+          />
+        </div>
+        <div style={{ margin: '10px' }}>
+          <Subject text='MacBook Pro - A touch of genius' fontWeight='bold' />
         </div>
       </div>
     );

package/src/list/TagNew/TagNew.js

@@ -7,13 +7,14 @@ export default class TagNew extends Component {
   }
 
   render() {
-    let { className, text, animate, onClick } = this.props;
+    let { className, text, animate, onClick, dataId } = this.props;
     return (
       <div
         className={`${style.tagStyle} ${animate ? style.bounceIn : ''} ${
           className ? className : ''
         }`}
         onClick={onClick}
+        data-id={dataId}
       >
         {text}
       </div>
@@ -23,11 +24,13 @@ export default class TagNew extends Component {
 TagNew.propTypes = {
   animate: PropTypes.bool,
   className: PropTypes.string,
+  dataId: PropTypes.string,
   onClick: PropTypes.func,
   text: PropTypes.string
 };
 TagNew.defaultProps = {
-  animate: false
+  animate: false,
+  dataId: 'TagNew'
 };
 if (__DOCS__) {
   TagNew.docs = {

package/src/list/TagNew/TagNew.module.css

@@ -1,16 +1,16 @@
 .tagStyle {
   border-radius: var(--zd_size14);
-  background-color: var(--zd_bg_primary);
-  box-shadow: 0 8px 30px 0 rgba(10, 115, 235, 0.4);
+  background-color: var(--zdt_tagnew_default_bg);
+  box-shadow: 0 8px 30px 0 var(--zdt_tagnew_default_box_shadow);
   min-width: var(--zd_size70);
   height: var(--zd_size28);
-  font-size: var(--zd_size13);
-  color: var(--dot_text_white);
+  font-size: var(--zd_font_size13);
+  color: var(--zdt_tagnew_default_text);
   padding: 0 var(--zd_size15);
   composes: inlineFlex from '../listCommon.module.css';
   composes: alignHorizontal from '~@zohodesk/components/lib/common/common.module.css';
   transform: scale(0);
-  transition: all 0.25s ease 0s;
+  transition: all var(--zd_transition2) ease 0s;
   opacity: 0;
   visibility: hidden;
   cursor: pointer;

package/src/list/Thread/Thread.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Icon from '@zohodesk/icons/lib/Icon';
+import Button from '@zohodesk/components/lib/semantic/Button/Button';
 import style from './Thread.module.css';
 export default class Thread extends Component {
   constructor(props) {
@@ -8,26 +9,32 @@ export default class Thread extends Component {
   }
 
   render() {
-    let { count: threadCount, className, iconTitle, dataId } = this.props;
+    let { count: threadCount, className, iconTitle, dataId, align } = this.props;
     let count = threadCount === '0' ? '1' : threadCount;
+
     return (
-      <span
-        className={`${style.container} ${className ? className : ''}`}
-        data-title={iconTitle}
-        data-id={dataId}
+      <Button
+        customClass={`${style.container} ${style[`align_${align}`]} ${className}`}
+        title={iconTitle}
+        dataId={dataId}
       >
-        <Icon name='ZD-reqcount2' iconClass={style.iconSize} />
+        <Icon name='ZD-TK-thread' size='9' />
         <span className={style.count}>{count}</span>
-      </span>
+      </Button>
     );
   }
 }
 Thread.propTypes = {
+  align: PropTypes.oneOf(['left', 'right']),
   className: PropTypes.string,
   count: PropTypes.string,
   dataId: PropTypes.string,
   iconTitle: PropTypes.string
 };
+Thread.defaultProps = {
+  align: 'left',
+  className: ''
+};
 if (__DOCS__) {
   Thread.docs = {
     folderName: 'List',

package/src/list/Thread/Thread.module.css

@@ -1,15 +1,31 @@
+.varClass {
+  --icon_color: var(--zdt_thread_iconText);
+}
 .container {
+  composes: varClass;
   position: relative;
-  color: var(--dot_text_shuttleGrey);
+  color: var(--icon_color);
   cursor: pointer;
 }
+.container:hover {
+  --icon_color: var(--zdt_thread_hover_iconText);
+}
 .count {
-  left: var(--zd_size8);
-  top: var(--zd_size3);
-  font-size: var(--zd_size9);
+  font-size: var(--zd_font_size9);
+}
+.align_left .count {
   position: absolute;
   line-height: normal;
+  text-align: left;
+  left: var(--zd_size8);
+  top: var(--zd_size3);
 }
-.iconSize {
-  font-size: var(--zd_size8);
+.align_right {
+  composes: dInflex alignFend from '~@zohodesk/components/lib/common/common.module.css';
 }
+.align_right .count {
+  position: relative;
+  bottom: var(--zd_size2);
+  right: var(--zd_size5);
+  float: right;
+}

package/src/list/UserTime/UserTime.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import Icon from '@zohodesk/icons/lib/Icon';
 import { Box } from '@zohodesk/components/lib/Layout';
 import { UserTimeDiffFormat } from '@zohodesk/i18n';
-
 import style from './UserTime.module.css';
 export default class UserTime extends Component {
   constructor(props) {
@@ -12,13 +11,12 @@ export default class UserTime extends Component {
 
   render() {
     let {
+      type,
+      page,
+      isNeedTime,
       icon,
       iconColor,
       to,
-      today,
-      yesterday,
-      tomorrow,
-      others,
       ago,
       later,
       format,
@@ -26,7 +24,8 @@ export default class UserTime extends Component {
       textClass,
       iconClass,
       containerClass,
-      dataId
+      dataId,
+      isOverdue
     } = this.props;
     return (
       <div
@@ -35,52 +34,74 @@ export default class UserTime extends Component {
         data-id={dataId}
       >
         {icon && (
-          <Box className={`${style[iconColor]}`}>
+          <Box
+            className={`${style.iconColor} ${style[iconColor] ? style[iconColor] : ''}`}
+          >
             {icon === 'closedTime' ? (
               <Icon
                 iconClass={`${style.iconStyle} ${style.closedTime} ${
                   style.f8
-                  } ${iconClass ? iconClass : ''}`}
+                } ${iconClass ? iconClass : ''}`}
                 name='ZD-closedtime1'
+
               />
             ) : icon === 'overdue' ? (
               <Icon
-                name='ZD-overdue'
-                iconClass={`${style.iconStyle} ${style.f8} ${
+                name='ZD-TK-sandClock'
+                iconClass={`${style.iconStyle} ${style.f10} ${
                   iconClass ? iconClass : ''
-                  }`}
+                }`}
               />
             ) : icon === 'createdTime' ? (
               <Icon
                 name='ZD-createdtime2'
                 iconClass={`${style.iconStyle} ${style.f8} ${
                   iconClass ? iconClass : ''
-                  }`}
+                }`}
               />
             ) : icon === 'completedTask' ? (
               <Icon
                 iconClass={`${style.iconStyle} ${style.f8} ${
                   style.completedTask
-                  } ${iconClass ? iconClass : ''}`}
+                } ${iconClass ? iconClass : ''}`}
                 name='ZD-completedTask1'
               />
-            ) : (
-                      <Icon
-                        name='ZD-dueTime'
-                        iconClass={`${style.iconStyle} ${style.f8} ${
-                          iconClass ? iconClass : ''
-                          }`}
-                      />
-                    )}
+            ) : icon === 'onholdTime' ? (
+              <Icon
+                iconClass={`${style.iconStyle} ${style.f10} ${
+                  iconClass ? iconClass : ''
+                }`}
+                name='ZD-onHold'
+              />
+            ) : icon === 'responseDueDate' ?
+              (
+                <Icon
+                  name='ZD-responsiveIconFinal'
+                  iconClass={`${style.iconStyle} ${style.f8} ${
+                    iconClass ? iconClass : ''
+                  }`}
+                />
+              ):(
+                <Icon
+                  name='ZD-dueTime'
+                  iconClass={`${style.iconStyle} ${style.f8} ${
+                    iconClass ? iconClass : ''
+                  }`}
+                />
+              )}
           </Box>
         )}
         <Box flexible>
           <UserTimeDiffFormat
+            type={type}
+            page={page}
+            isNeedTime={isNeedTime}
             ago={ago}
             className={`${style.textStyle} ${textClass ? textClass : ''}`}
             format={format}
             later={later}
             to={to}
+            isOverdue={isOverdue}
           />
         </Box>
       </div>
@@ -90,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',
@@ -102,25 +123,12 @@ UserTime.propTypes = {
   iconClass: PropTypes.string,
   iconColor: PropTypes.oneOf(['red', 'green', 'orange', 'gray']),
   later: PropTypes.string,
-  others: PropTypes.func,
   textClass: PropTypes.string,
   title: PropTypes.string,
-  to: PropTypes.string,
-  today: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object,
-    PropTypes.func
-  ]),
-  tomorrow: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object,
-    PropTypes.func
-  ]),
-  yesterday: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object,
-    PropTypes.func
-  ])
+  to: PropTypes.string
+};
+UserTime.defaultProps = {
+  dataId: 'userTime'
 };
 if (__DOCS__) {
   UserTime.docs = {

package/src/list/UserTime/UserTime.module.css

@@ -1,42 +1,52 @@
+.varClass {
+  --text_color: var(--zdt_usertime_timeText);
+  --icon_color: var(--zdt_usertime_icon_gray);
+}
 .container {
-  composes: inlineFlex from '../listCommon.module.css';
-  composes: alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dInflex alignBaseline from '~@zohodesk/components/lib/common/common.module.css';
   max-width: 100%;
+  composes: varClass;
 }
 .f8 {
-  font-size: var(--zd_size8);
+  font-size: var(--zd_font_size8);
 }
 .f9 {
-  font-size: var(--zd_size9);
+  font-size: var(--zd_font_size9);
+}
+.f10 {
+  font-size: var(--zd_font_size10);
 }
 .closedTime span:last-child:before,
 .completedTask span:first-child:before {
   color: inherit;
 }
 .closedTime span:first-child:before {
-  color: var(--zd_text_olive10);
+  color: var(--zdt_usertime_icon_green);
 }
 .textStyle {
-  font-size: var(--zd_size11);
-  color: var(--dot_text_shuttleGrey);
+  font-size: var(--zd_font_size12);
+  color: var(--text_color);
   display: block;
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
-
 .iconStyle {
   display: block;
   margin-right: var(--zd_size3);
+  margin-left: var(--zd_size1);
 }
 /* colors */
+.iconColor {
+  color: var(--icon_color)
+}
 .red {
-  color: var(--dot_text_brightRed);
+  --icon_color: var(--zdt_usertime_icon_red);
 }
 .green {
-  color: var(--dot_text_strongGreen);
+  --icon_color: var(--zdt_usertime_icon_green);
 }
 .orange {
-  color: var(--dot_text_vividOrange);
+  --icon_color: var(--zdt_usertime_icon_orange);
 }
 .gray {
-  color: var(--dot_text_shuttleGrey);
+  --icon_color: var(--zdt_usertime_icon_gray);
 }