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

package/src/list/DotNew/DotNew.module.css

@@ -1,16 +1,22 @@
-.dotStyle {
+.medium {
   width: var(--zd_size6);
-  height: var(--zd_size6);
+  height: var(--zd_size6); 
+}
+.small{
+  width: var(--zd_size5);
+  height: var(--zd_size5); 
+}
+.container{
   border-radius: 50%;
-  background-color: var(--dot_bg_primary);
-  /* box-shadow: 0 0 15px rgba(10, 115, 235, 0.6); */
-  composes: inlineFlex from '../listCommon.module.css';
+  background-color: var(--zdt_dotnew_default_bg);
+  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  box-shadow: 0 0 15px 1px var(--zdt_dotnew_default_box_shadow);
+   /* animation: dotAnimation 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1); 
   box-shadow: 0 0 0 0 var(--dot_bg_catskillWhite),
-    0 0 0 0 rgba(10, 115, 235, 0.6);
-  animation: dotAnimation 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
+    0 0 0 0 rgba(10, 115, 235, 0.6); */
 }
 @keyframes dotAnimation {
   to {
-    box-shadow: 0 0 0 12px transparent, 0 0 0 8px rgba(255, 255, 255, 0);
+    box-shadow: 0 0 0 12px var(--zdt_dotnew_animate_box_shadow), 0 0 0 8px var(--zdt_dotnew_animate_to_box_shadow);
   }
 }

package/src/list/GridStencils/GridStencils.module.css

@@ -1,33 +1,22 @@
 .stenLoading {
-  background-color: var(--dot_bg_white);
-  border-bottom: 1px solid var(--zd_border_gallery1);
+  background-color: var(--zdt_gridstencils_default_bg);
+  border-bottom: 1px solid var(--zdt_gridstencils_default_border);
   padding: var(--zd_size13) var(--zd_size20) var(--zd_size11);
   position: relative;
   margin-bottom: var(--zd_size10);
 }
 .stenLoadbody {
-  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) var(--zd_size40);
+  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0;
 }
-
-.stenLoadbody::before {
-  border: 1px solid var(--zd_border_smoke3);
-  content: '';
-  height: var(--zd_size18);
-  width: var(--zd_size18);
-  left: var(--zd_size20);
-  top: var(--zd_size20);
-  position: absolute;
-}
-
 .stenLoadbody::after {
   content: '';
   height: var(--zd_size22);
   width: var(--zd_size22);
   right: var(--zd_size20);
-  top: var(--zd_size20);
+  top: var(--zd_size15);
   border-radius: 50%;
   position: absolute;
-  background-color: var(--zd_bg_smoke4);
+  background-color: var(--zdt_gridstencils_after_bg);
 }
 
 .lineBar {
@@ -47,42 +36,24 @@
   border-radius: var(--zd_size5);
 }
 .stenListBAr {
-  -webkit-animation-duration: 1s;
+  -webkit-animation-duration:var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-name: placeHolderShimmer;
   -webkit-animation-timing-function: linear;
-  background: #f6f7f8;
-
-  background-image: linear-gradient(
-      left,
-      #f6f7f8 0,
-      #edeef1 20%,
-      #f6f7f8 40%,
-      #f6f7f8 100%
-    )
-    ;
-
+  background: var(--zdt_gridstencils_listbar_bg);
+  background-image: var(--zdt_gridstencils_listbar_gradient_bg);
   background-repeat: no-repeat;
   position: relative;
 }
 .stenListBAr {
-  -webkit-animation-duration: 1s;
+  -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-name: placeHolderShimmer;
   -webkit-animation-timing-function: linear;
-  background: #f6f7f8;
-
-  background-image: linear-gradient(
-      left,
-      #f6f7f8 0,
-      #edeef1 20%,
-      #f6f7f8 40%,
-      #f6f7f8 100%
-    )
-   ;
-
+  background: var(--zdt_gridstencils_listbar_bg);
+  background-image: var(--zdt_gridstencils_listbar_gradient_bg);
   background-repeat: no-repeat;
 }
 @keyframes placeHolderShimmer {
@@ -100,7 +71,7 @@
 }
 
 .threeLayout .stenLoadbody {
-  margin: var(--zd_size8) var(--zd_size20);
+  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0 ;
 }
 .threeLayout .stenLoadbody::after {
   right: var(--zd_size20);

package/src/list/Icons/AddNewIcon.js

@@ -1,53 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import style from './Icons.module.css';
-import {
-  licensePermissionCheckHOC,
-  RestrictionValidator
-} from '@zohodesk/permissions';
 import Icon from '@zohodesk/icons/lib/Icon';
+import style from './Icons.module.css';
 
-class AddNewComponent extends React.Component {
+export default class AddNewIcon extends React.Component {
   render() {
-    let {
-      features,
-      onClick,
-      dataId,
-      dataTitle,
-      iconClass,
-      className
-    } = this.props;
+    let { onClick, dataId, dataTitle, iconClass, className } = this.props;
     return (
-      <RestrictionValidator
-        module='contacts'
-        features={features}
-        action='add_tickets'
+      <span
+        onClick={onClick}
+        className={`${style.iconStyle} ${style.blueHover} ${
+          className ? className : ''
+        }`}
+        data-id={dataId}
+        data-title={dataTitle}
       >
-        <span
-          onClick={onClick}
-          className={`${style.iconStyle} ${style.blueHover} ${
-            className ? className : ''
-          }`}
-          data-id={dataId}
-          data-title={dataTitle}
-        >
-          <Icon name='ZD-addNew' iconClass={iconClass} />
-        </span>
-      </RestrictionValidator>
+        <Icon name='ZD-SE-addTickets' iconClass={iconClass?iconClass:''} />
+      </span>
     );
   }
 }
-AddNewComponent.propTypes = {
+AddNewIcon.propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
-  features: PropTypes.array,
   iconClass: PropTypes.string,
   onClick: PropTypes.func
 };
-export default licensePermissionCheckHOC({
-  component: {
-    license: '*',
-    permission: 'tickets_create'
-  }
-})(AddNewComponent);

package/src/list/Icons/CompleteIcon.js

@@ -1,54 +1,30 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import style from './Icons.module.css';
-import {
-  licensePermissionCheckHOC,
-  RestrictionValidator
-} from '@zohodesk/permissions';
 import Icon from '@zohodesk/icons/lib/Icon';
-
-const Complete = ({ onClick, dataId, dataTitle, iconClass, className }) => (
-  <span
-    onClick={onClick}
-    className={`${style.iconStyle} ${style.blueHover} ${
-      className ? className : ''
-    }`}
-    data-id={dataId}
-    data-title={dataTitle}
-  >
-    <Icon name='ZD-tick8' iconClass={iconClass} />
-  </span>
-);
-Complete.propTypes = {
+import style from './Icons.module.css';
+export default class CompleteIcon extends React.Component {
+  render() {
+    let { onClick, dataId, dataTitle, iconClass, className, iconSize } =
+      this.props;
+    return (
+      <span
+        onClick={onClick}
+        className={`${style.iconStyle} ${style.blueHover} ${
+          className ? className : ''
+        }`}
+        data-id={dataId}
+        data-title={dataTitle}
+      >
+        <Icon name='ZD-GN-checkbox' iconClass={iconClass?iconClass:''} size={iconSize} />
+      </span>
+    );
+  }
+}
+CompleteIcon.propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
-  features: PropTypes.array,
   iconClass: PropTypes.string,
-  module: PropTypes.string,
+  iconSize: PropTypes.string,
   onClick: PropTypes.func
 };
-const CompleteComponent = props => {
-  let { module, features = [] } = props;
-  return (
-    <RestrictionValidator module={module} features={features} action='create'>
-      <Complete {...props} />
-    </RestrictionValidator>
-  );
-};
-CompleteComponent.propTypes = {
-  features: PropTypes.array,
-  module: PropTypes.string
-};
-function CompleteIcon(module) {
-  return licensePermissionCheckHOC({
-    component: {
-      license: '*',
-      permission: `${module}_edit`
-    }
-  })(CompleteComponent);
-}
-
-export const TaskCompleteIcon = CompleteIcon('tasks');
-export const CallCompleteIcon = CompleteIcon('calls');
-export const EventCompleteIcon = CompleteIcon('events');

package/src/list/Icons/DeleteIcon.js

@@ -1,36 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import style from './Icons.module.css';
-import {
-  licensePermissionCheckHOC,
-  RestrictionValidator
-} from '@zohodesk/permissions';
 import Icon from '@zohodesk/icons/lib/Icon';
 
 export default class DeleteComponent extends React.Component {
   render() {
-    let {
-      module,
-      features,
-      onClick,
-      dataId,
-      dataTitle,
-      iconClass,
-      className
-    } = this.props;
+    let { onClick, dataId, dataTitle, iconClass, iconSize, className } =
+      this.props;
     return (
-      <RestrictionValidator module={module} features={features} action='delete'>
-        <span
-          onClick={onClick}
-          className={`${style.iconStyle} ${style.redHover} ${
-            className ? className : ''
-          }`}
-          data-id={dataId}
-          data-title={dataTitle}
-        >
-          <Icon name='ZD-delete2' iconClass={iconClass} />
-        </span>
-      </RestrictionValidator>
+      <span
+        onClick={onClick}
+        className={`${style.iconStyle} ${style.redHover} ${
+          className ? className : ''
+        }`}
+        data-id={dataId}
+        data-title={dataTitle}
+      >
+        <Icon name='ZD-GN-delete' iconClass={iconClass?iconClass:''} size={iconSize} />
+      </span>
     );
   }
 }
@@ -38,24 +25,7 @@ DeleteComponent.propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
-  features: PropTypes.array,
   iconClass: PropTypes.string,
-  module: PropTypes.string,
+  iconSize: PropTypes.string,
   onClick: PropTypes.func
 };
-function DeleteIcon(module) {
-  return licensePermissionCheckHOC({
-    component: {
-      license: '*',
-      permission: `${module}_delete`
-    }
-  })(DeleteComponent);
-}
-
-export const TicketDeleteIcon = DeleteIcon('tickets');
-export const ContactDeleteIcon = DeleteIcon('contacts');
-export const TaskDeleteIcon = DeleteIcon('tasks');
-export const CallDeleteIcon = DeleteIcon('calls');
-export const EventDeleteIcon = DeleteIcon('events');
-export const AccountDeleteIcon = DeleteIcon('accounts');
-export const ProductDeleteIcon = DeleteIcon('products');

package/src/list/Icons/EditIcon.js

@@ -1,61 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import style from './Icons.module.css';
-import {
-  RestrictionValidator,
-  licensePermissionCheckHOC
-} from '@zohodesk/permissions';
 import Icon from '@zohodesk/icons/lib/Icon';
 
-class EditComponent extends React.Component {
+export default class EditIcon extends React.Component {
   render() {
-    let {
-      module,
-      features = [],
-      onClick,
-      dataId,
-      dataTitle,
-      iconClass,
-      className
-    } = this.props;
+    let { onClick, dataId, dataTitle, iconClass, iconSize, className } =
+      this.props;
     return (
-      <RestrictionValidator module={module} features={features} action='edit'>
-        <span
-          onClick={onClick}
-          className={`${style.iconStyle} ${style.blueHover} ${
-            className ? className : ''
-          }`}
-          data-id={dataId}
-          data-title={dataTitle}
-        >
-          <Icon name='ZD-pen2' iconClass={iconClass} />
-        </span>
-      </RestrictionValidator>
+      <span
+        onClick={onClick}
+        className={`${style.iconStyle} ${style.blueHover} ${
+          className ? className : ''
+        }`}
+        data-id={dataId}
+        data-title={dataTitle}
+      >
+        <Icon name='ZD-GN-edit' iconClass={iconClass?iconClass:''} size={iconSize} />
+      </span>
     );
   }
 }
-EditComponent.propTypes = {
+EditIcon.propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
-  features: PropTypes.array,
   iconClass: PropTypes.string,
-  module: PropTypes.string,
+  iconSize: PropTypes.string,
   onClick: PropTypes.func
 };
-function EditIcon(module) {
-  return licensePermissionCheckHOC({
-    component: {
-      license: '*',
-      permission: `${module}_edit`
-    }
-  })(EditComponent);
-}
-
-export const TicketEditIcon = EditIcon('tickets');
-export const ContactEditIcon = EditIcon('contacts');
-export const TaskEditIcon = EditIcon('tasks');
-export const CallEditIcon = EditIcon('calls');
-export const EventEditIcon = EditIcon('events');
-export const AccountEditIcon = EditIcon('accounts');
-export const ProductEditIcon = EditIcon('products');

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);
+  color: var(--zdt_icons_default);
+  padding: 0 var(--zd_size8);
+  width: var(--zd_size33);
   cursor: pointer;
-  color: var(--dot_text_shuttleGrey);
 }
 .blueHover:hover {
-  color: var(--dot_text_primary);
+  color: var(--zdt_icons_hover_blue);
 }
 .redHover:hover {
-  color: var(--dot_text_brightRed);
-}
+  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

@@ -1,22 +1,27 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import style from './Icons.module.css';
-import { RestrictionValidator } from '@zohodesk/permissions';
 import Icon from '@zohodesk/icons/lib/Icon';
 
-const Smart = ({ onClick, dataId, dataTitle, iconClass, className }) => (
-  <span
-    onClick={onClick}
-    className={`${style.iconStyle} ${style.blueHover} ${
-      className ? className : ''
-    }`}
-    data-id={dataId}
-    data-title={dataTitle}
-  >
-    <Icon name='ZD-smartviewIcon' iconClass={iconClass} />
-  </span>
-);
-Smart.propTypes = {
+export default class SmartIcon extends Component {
+  render() {
+    let { onClick, dataId, dataTitle, iconClass, className } = this.props;
+    return (
+      <span
+        onClick={onClick}
+        className={`${style.iconStyle} ${style.blueHover} ${
+          className ? className : ''
+        }`}
+        data-id={dataId}
+        data-title={dataTitle}
+      >
+        <Icon name='ZD-TK-peek' iconClass={iconClass?iconClass:''} />
+      </span>
+    );
+  }
+}
+
+SmartIcon.propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
@@ -25,16 +30,3 @@ Smart.propTypes = {
   module: PropTypes.string,
   onClick: PropTypes.func
 };
-const SmartIcon = props => {
-  let { module, features } = props;
-  return (
-    <RestrictionValidator module={module} features={features} action='peek'>
-      <Smart {...props} />
-    </RestrictionValidator>
-  );
-};
-SmartIcon.propTypes = {
-  features: PropTypes.array,
-  module: PropTypes.string
-};
-export default SmartIcon;

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

@@ -1,35 +1,24 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import FloatingIcons from '../FloatingIcons';
-import { I18NProvider } from '@zohodesk/i18n';
-import { TicketEditIcon } from '../EditIcon';
-import { TicketDeleteIcon } from '../DeleteIcon';
+import EditIcon from '../EditIcon';
+import DeleteIcon from '../DeleteIcon';
 import SmartIcon from '../SmartIcon';
+import ReadUnreadIcon from '../ReadUnreadIcon';
 
 export default class FloatingIcons__default extends Component {
-  constructor( props ) {
-    super( props );
-  }
-
   render() {
-    let permission = {
-      tickets: {
-        edit: true,
-        delete: true
-      }
-    };
     return (
-      <I18NProvider permission={permission} license={{}}>
-        <FloatingIcons>
-          <TicketEditIcon />
-          <TicketDeleteIcon />
-          <SmartIcon />
-        </FloatingIcons>
-      </I18NProvider>
+      <FloatingIcons>
+        <ReadUnreadIcon isRead iconSize="15" />
+        <ReadUnreadIcon iconSize="15" />
+        <EditIcon />
+        <DeleteIcon />
+        <SmartIcon />
+      </FloatingIcons>
     );
   }
 }
-if ( __DOCS__ ) {
+if (__DOCS__) {
   FloatingIcons__default.docs = {
     folderName: 'List',
     componentGroup: 'FloatingIcons'