@zohodesk/dot 1.0.0-temp-64 → 1.0.0-temp-65

package/es/form/fields/TagsMultiSelectField/docs/TagsMultiSelectField__default.docs.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import TagsMultiSelectField from '../TagsMultiSelectField';
+import Icon from '@zohodesk/icons/lib/Icon';
+
+const TagsMultiSelectField__default = () => {
+  let value = [{
+    name: 'Tag1',
+    tagType: 'MANUAL',
+    id: '5853000007033049'
+  }, {
+    name: 'Tag2',
+    tagType: 'MANUAL',
+    id: '5853000007033069'
+  }, {
+    name: 'Tag3',
+    tagType: 'MANUAL',
+    id: '5853000007033080'
+  }];
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      margin: '20px 20px 0'
+    }
+  }, /*#__PURE__*/React.createElement(TagsMultiSelectField, {
+    ePhiData: {
+      ePhiTitle: 'ehhweh',
+      ePhiText: 'ephi',
+      ePhiStatus: true
+    },
+    fieldProperties: {
+      id: 'tag',
+      name: 'tag',
+      labelName: 'Tags MultiSelect',
+      isReadOnly: false,
+      isDisabled: false,
+      value,
+      options: [],
+      selectedValueCount: '10'
+    },
+    styleProperties: {
+      labelPalette: 'secondary'
+    },
+    i18nKeys: {
+      newTagText: 'New Tag',
+      emptyTitleText: 'OOPS',
+      emptyDescription: 'No tag available',
+      deleteText: 'Delete tag',
+      lessText: 'Less',
+      moreText: 'More'
+    },
+    actions: {
+      onAdd: (tag, event) => {
+        console.log('Add Event=====', tag);
+      },
+      onDelete: (tag, event) => {
+        console.log('Delete Event=====', tag);
+      },
+      onChange: searchValue => {
+        console.log('Value Change Event------>>', searchValue);
+      },
+      onScroll: () => {}
+    },
+    isNewNeeded: true,
+    getTextBoxChildren: () => /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-SE-setpracket",
+      size: "18"
+    })
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: '13px',
+      marginLeft: '5px',
+      color: 'var(--dot_text_shuttleGrey)'
+    }
+  }, "shift+t")));
+};
+
+export default TagsMultiSelectField__default;
+
+if (false) {
+  TagsMultiSelectField__default.docs = {
+    componentGroup: 'TagsMultiSelectField'
+  };
+}

package/es/form/fields/TextBoxField/TextBoxField.js

@@ -97,7 +97,7 @@ export default class TextBoxField extends PureComponent {
     } = ePhiData;
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
@@ -105,7 +105,7 @@ export default class TextBoxField extends PureComponent {
       text: labelName,
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       htmlFor: uniqueId,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {

package/es/form/fields/TextBoxField/docs/TextBoxField__default.docs.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import TextBoxField from '../TextBoxField';
+import { Container } from '@zohodesk/components/lib/Layout';
+import Icon from '@zohodesk/icons/lib/Icon';
+export default class TextBoxField__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextBoxField, {
+      labelName: "Contact Name",
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      validationMessage: "Invalid Input"
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '30px 0 10px',
+        fontFamily: 'var(--zd_semibold)'
+      }
+    }, "Children Option"), /*#__PURE__*/React.createElement(TextBoxField, {
+      labelName: "Contact Name",
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      validationMessage: "Invalid Input"
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-SE-setpracket",
+      size: "18"
+    }))));
+  }
+
+}
+
+if (false) {
+  TextBoxField__default.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}

package/es/form/fields/TextEditor/TextEditor.js

@@ -21,8 +21,7 @@ export default class TextEditor extends Component {
     super(props);
     this.state = {
       isEditorLoad: false,
-      isResourceLoaded: false,
-      isEditorShow: false
+      isResourceLoaded: false
     };
     let methods = ['editorCallback', 'handleUpload', 'handleChange', 'focusCallback', 'handleInlineUpload', 'handleDropUpload', 'blurCallback', 'handleGetContent', 'initializeEditor', 'clearEditorData', 'plainTextSwitchCallback', 'onWindowClick', 'toggleEditor'];
     bind.apply(this, methods);
@@ -200,8 +199,7 @@ export default class TextEditor extends Component {
       isCustomScroll
     } = this.props;
     this.setState({
-      isEditorLoad: true,
-      isEditorShow: true
+      isEditorLoad: true
     });
     let {
       id
@@ -234,7 +232,7 @@ export default class TextEditor extends Component {
 
       if (isCustomScroll) {
         let link = document.createElement('style');
-        link.innerText = "body{font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 0}.scroll{--zd-scroll-width:12px;--zd-scroll-height:12px;--zd-scroll-bg:rgba(255,255,255,0.1);--zd-scroll-corner-bg:transparent;--zd-scroll-thump:rgba(44,51,77,0.2);--zd-scroll-thump-hoverbg:rgba(44,51,77,0.3);--zd-scroll-border:rgba(44,51,77,0.1)}.scroll[data-scroll-palette='dark'],.scroll [data-scroll-palette='dark']{--zd-scroll-thump:rgba(255,255,255,0.2);--zd-scroll-thump-hoverbg:rgba(255,255,255,0.4);--zd-scroll-border:rgba(255,255,255,0.07)}.scroll,.scroll *{scrollbar-color:var(--zd-scroll-thump) var(--zd-scroll-bg);scrollbar-width:thin;-ms-scrollbar-highlight-color:var(--zd-scroll-bg);-ms-scrollbar-face-color:var(--zd-scroll-thump)}.scroll::-webkit-scrollbar,.scroll ::-webkit-scrollbar{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-scrollbar:hover,.scroll ::-webkit-scrollbar:hover{background:var(--zd-scroll-bg)}.scroll::-webkit-scrollbar:horizontal,.scroll ::-webkit-scrollbar:horizontal{height:var(--zd-scroll-height)}.scroll::-webkit-scrollbar:vertical,.scroll ::-webkit-scrollbar:vertical{width:var(--zd-scroll-width)}.scroll::-webkit-scrollbar-button,.scroll ::-webkit-scrollbar-button{display:none;width:0;height:0}.scroll::-webkit-scrollbar-track:vertical,.scroll ::-webkit-scrollbar-track:vertical{border-left:1px solid transparent;border-right:1px solid transparent}.scroll::-webkit-scrollbar-track:vertical:hover,.scroll ::-webkit-scrollbar-track:vertical:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track:horizontal,.scroll ::-webkit-scrollbar-track:horizontal{border-top:1px solid transparent;border-bottom:1px solid transparent}.scroll::-webkit-scrollbar-track:horizontal:hover,.scroll ::-webkit-scrollbar-track:horizontal:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track-piece,.scroll ::-webkit-scrollbar-track-piece{background:inherit}.scroll::-webkit-scrollbar-thumb,.scroll ::-webkit-scrollbar-thumb{border-radius:10px;background:var(--zd-scroll-thump);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-thumb:hover,.scroll ::-webkit-scrollbar-thumb:hover{background:var(--zd-scroll-thump-hoverbg);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-corner,.scroll ::-webkit-scrollbar-corner{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-resizer,.scroll::-webkit-resizer{background:inherit}";
+        link.innerText = ".scroll{--zd-scroll-width:12px;--zd-scroll-height:12px;--zd-scroll-bg:rgba(255,255,255,0.1);--zd-scroll-corner-bg:transparent;--zd-scroll-thump:rgba(44,51,77,0.2);--zd-scroll-thump-hoverbg:rgba(44,51,77,0.3);--zd-scroll-border:rgba(44,51,77,0.1)}.scroll[data-scroll-palette='dark'],.scroll [data-scroll-palette='dark']{--zd-scroll-thump:rgba(255,255,255,0.2);--zd-scroll-thump-hoverbg:rgba(255,255,255,0.4);--zd-scroll-border:rgba(255,255,255,0.07)}.scroll,.scroll *{scrollbar-color:var(--zd-scroll-thump) var(--zd-scroll-bg);scrollbar-width:thin;-ms-scrollbar-highlight-color:var(--zd-scroll-bg);-ms-scrollbar-face-color:var(--zd-scroll-thump)}.scroll::-webkit-scrollbar,.scroll ::-webkit-scrollbar{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-scrollbar:hover,.scroll ::-webkit-scrollbar:hover{background:var(--zd-scroll-bg)}.scroll::-webkit-scrollbar:horizontal,.scroll ::-webkit-scrollbar:horizontal{height:var(--zd-scroll-height)}.scroll::-webkit-scrollbar:vertical,.scroll ::-webkit-scrollbar:vertical{width:var(--zd-scroll-width)}.scroll::-webkit-scrollbar-button,.scroll ::-webkit-scrollbar-button{display:none;width:0;height:0}.scroll::-webkit-scrollbar-track:vertical,.scroll ::-webkit-scrollbar-track:vertical{border-left:1px solid transparent;border-right:1px solid transparent}.scroll::-webkit-scrollbar-track:vertical:hover,.scroll ::-webkit-scrollbar-track:vertical:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track:horizontal,.scroll ::-webkit-scrollbar-track:horizontal{border-top:1px solid transparent;border-bottom:1px solid transparent}.scroll::-webkit-scrollbar-track:horizontal:hover,.scroll ::-webkit-scrollbar-track:horizontal:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track-piece,.scroll ::-webkit-scrollbar-track-piece{background:inherit}.scroll::-webkit-scrollbar-thumb,.scroll ::-webkit-scrollbar-thumb{border-radius:10px;background:var(--zd-scroll-thump);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-thumb:hover,.scroll ::-webkit-scrollbar-thumb:hover{background:var(--zd-scroll-thump-hoverbg);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-corner,.scroll ::-webkit-scrollbar-corner{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-resizer,.scroll::-webkit-resizer{background:inherit}";
         iframeHead.appendChild(link);
         iframe.classList.add('scroll');
       }
@@ -379,13 +377,12 @@ export default class TextEditor extends Component {
       isReadOnly
     } = this.props;
     let {
-      isEditorLoad,
-      isEditorShow
+      isEditorLoad
     } = this.state;
     let editorDoc = ImgLazyLoad && global.editor && global.editor[id] ? global.editor[id].doc : null;
     return /*#__PURE__*/React.createElement(Container, {
       className: `${styles.textEditor} ${styles[type]} ${styles[border]} 
-        ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''} ${!isEditorShow ? styles.editorHide : ''}`,
+        ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''}`,
       dataId: dataId,
       "data-isEditor": true
     }, loadingComponent && !isEditorLoad ? loadingComponent : null, /*#__PURE__*/React.createElement(Box, {

package/es/form/fields/TextEditor/TextEditor.module.css

@@ -649,7 +649,6 @@
   right: 0;
   left: 0;
 }
-.readOnly :global .KB_Editor_menus,
-.editorHide :global .KB_Editor {
+.readOnly :global .KB_Editor_menus {
   display: none !important;
 }

package/es/form/fields/TextEditorField/TextEditorField.js

@@ -108,7 +108,7 @@ export default class TextEditorField extends PureComponent {
       ePhiStatus = false
     } = ePhiData;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${className || ''}`
+      className: `${style.container} ${className}`
     }, /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       alignBox: "row",
@@ -119,7 +119,7 @@ export default class TextEditorField extends PureComponent {
       htmlFor: !isReadOnly && !isDisabled ? id : undefined,
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
       onClick: this.handleLabelClick,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps))), infoText ? /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-info",

package/es/form/fields/TextEditorField/docs/TextEditorField__default.docs.js

@@ -0,0 +1,43 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+/*** Components ***/
+
+import TextEditorField from '../TextEditorField';
+import { Box } from '@zohodesk/components/lib/Layout';
+export default class TextEditorField__default extends Component {
+  constructor(props) {
+    super(props);
+    this.handleEditorStyleOptions = this.handleEditorStyleOptions.bind(this);
+  }
+
+  handleEditorStyleOptions(ZohoDeskEditor_Init, hookToOrganize) {
+    ZohoDeskEditor_Init.toolbarOrder = [['bold', 'Bold (Ctrl+B)', '#KBEditortools_txtbold', 'KBEditortools-txtbold'], ['italic', 'Italic (Ctrl+I)', '#KBEditortools_txtitalic', 'KBEditortools-txtitalic'], ['underline', 'Underline (Ctrl+U)', '#KBEditortools_txtunderline', 'KBEditortools-txtunderline']];
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextEditorField, {
+      needEditor: false,
+      labelName: "TextArea"
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: {
+        fontSize: '12px',
+        color: 'var(--dot_text_primary)',
+        textAlign: 'right'
+      }
+    }, "Placeholders")), /*#__PURE__*/React.createElement(TextEditorField, {
+      id: "editor",
+      labelName: "TextEditor",
+      EDITORURL: "https://js.zohostatic.com/zde/v2.2.9/js/ZohoDeskEditor.js",
+      initCallback: this.handleEditorStyleOptions,
+      loadingComponent: /*#__PURE__*/React.createElement("div", null, "Loading...")
+    }));
+  }
+
+}
+
+if (false) {
+  TextEditorField__default.docs = {
+    componentGroup: 'Fields'
+  };
+}

package/es/form/fields/TextEditorWrapper/TextEditorWrapper.js

@@ -70,7 +70,7 @@ export default class TextEditorWrapper extends Component {
         isEditorShow: true
       });
     } else {
-      if (!this.state.isEditorFocus && !this.props.isEditorDefaultOpen) {
+      if (!this.state.isEditorFocus) {
         this.setState({
           isEditorShow: false
         });

package/es/form/fields/TextareaField/TextareaField.js

@@ -95,7 +95,7 @@ export default class TextareaField extends PureComponent {
     } = customProps;
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
@@ -104,7 +104,7 @@ export default class TextareaField extends PureComponent {
       id: id,
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       htmlFor: uniqueId,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {

package/es/form/fields/TextareaField/docs/TextareaField__default.docs.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import TextareaField from '../TextareaField';
+export default class TextareaField__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(TextareaField, {
+      labelName: "Textarea",
+      onChange: () => {},
+      textBoxSize: "xsmall",
+      textBoxVariant: "primary",
+      validationMessage: "Invalid Input"
+    });
+  }
+
+}
+
+if (false) {
+  TextareaField__default.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import ValidationMessage from '../ValidationMessage';
+export default class ValidationMessage__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "default",
+      size: "small",
+      type: "secondary",
+      tooltip: "Information"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "primary",
+      size: "small",
+      type: "secondary"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "secondary",
+      size: "small",
+      type: "secondary",
+      tooltip: "Information"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "danger",
+      size: "small",
+      type: "secondary"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "mandatory",
+      size: "small",
+      type: "secondary",
+      tooltip: "Information"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "dark",
+      size: "small",
+      type: "secondary"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "disable",
+      size: "small",
+      type: "secondary",
+      tooltip: "Information"
+    }));
+  }
+
+}
+
+if (false) {
+  ValidationMessage__default.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'Style Guide'
+  };
+}

package/es/form/layout/Field/docs/Field__default.docs.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import Field from '../Field';
+export default class Field__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(Field, {
+      column: "two",
+      rowBreak: true
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        textAlign: 'center'
+      }
+    }, "Chidren"));
+  }
+
+}
+
+if (false) {
+  Field__default.docs = {
+    componentGroup: 'ModuleAddForm'
+  };
+}

package/es/form/layout/Section/docs/Section__default.docs.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Section from '../Section';
+export default class Section__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(Section, {
+      title: "SectionTitle"
+    }, /*#__PURE__*/React.createElement("div", null, "Section children"));
+  }
+
+}
+
+if (false) {
+  Section__default.docs = {
+    componentGroup: 'ModuleAddForm'
+  };
+}

package/es/layout/SetupDetailLayout/docs/SetupDetailLayout__default.docs.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { SetupDetailLayout, SetupHeader, SetupFooter, SetupContent } from '../';
+import FormAction from '../../../FormAction/FormAction';
+export default class SetupDetailLayout__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(SetupDetailLayout, {
+      getHelpInfo: () => {},
+      needHelpInfo: true
+    }, /*#__PURE__*/React.createElement(SetupHeader, {
+      title: "Setup",
+      getLeftPlaceHolder: () => /*#__PURE__*/React.createElement("p", null, "setupLeft"),
+      getRightPlaceHolder: () => /*#__PURE__*/React.createElement("p", null, "setupRight")
+    }), /*#__PURE__*/React.createElement(SetupContent, null, /*#__PURE__*/React.createElement("span", null, "Content")), /*#__PURE__*/React.createElement(SetupFooter, null, /*#__PURE__*/React.createElement(FormAction, {
+      size: "large"
+    }, /*#__PURE__*/React.createElement("p", null, "Footer"))));
+  }
+
+}
+
+if (false) {
+  SetupDetailLayout__default.docs = {
+    componentGroup: 'Template'
+  };
+}

package/es/layout/SubtabLayout/docs/SubtabLayout__default.docs.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { SubtabLayout, SubtabHeader, SubtabContent, SubtabFooter } from '../';
+export default class SubtabLayout__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      needBorder: true,
+      needShadow: false
+    };
+    this.onScroll = this.onScroll.bind(this);
+    this.interval = null;
+  }
+
+  onScroll() {
+    this.setState({
+      needBorder: true,
+      needShadow: true
+    });
+    this.interval = null;
+    let intern = setTimeout(() => {
+      clearInterval(this.interval);
+      this.setState({
+        needBorder: true,
+        needShadow: false
+      });
+    }, 500);
+    this.interval = intern;
+  }
+
+  render() {
+    let boxStyle = {
+      padding: 'var(--zd_size21)'
+    };
+    let {
+      needShadow,
+      needBorder
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '100vh',
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement(SubtabLayout, null, /*#__PURE__*/React.createElement(SubtabHeader, {
+      needShadow: needShadow,
+      needBorder: needBorder
+    }), /*#__PURE__*/React.createElement(SubtabContent, null, /*#__PURE__*/React.createElement("div", {
+      onScroll: this.onScroll,
+      style: {
+        height: '100%',
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, "box 1"), /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, "box 1"), /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, "box 2"))), /*#__PURE__*/React.createElement(SubtabFooter, null, "Footer")));
+  }
+
+}
+
+if (false) {
+  SubtabLayout__default.docs = {
+    componentGroup: 'Template'
+  };
+}

package/es/list/AvatarFlip/docs/AvatarFlip__default.docs.js

@@ -0,0 +1,100 @@
+import React, { Component } from 'react';
+import AvatarFlip from '../AvatarFlip';
+export default class AvatarFlip__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '20px'
+      }
+    }, /*#__PURE__*/React.createElement("h2", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, "Task Module Icon"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(AvatarFlip, {
+      id: "taskIcon",
+      noNeedFlip: false,
+      size: "xmedium",
+      name: "email",
+      icon: "ZD-taskNone"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(AvatarFlip, {
+      id: "taskMeeting",
+      noNeedFlip: false,
+      size: "xmedium",
+      name: "email",
+      icon: "ZD-taskMeeting"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(AvatarFlip, {
+      id: "taskCall",
+      noNeedFlip: false,
+      size: "xmedium",
+      name: "email",
+      icon: "ZD-taskCall"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(AvatarFlip, {
+      id: "taskDemo",
+      noNeedFlip: false,
+      size: "xmedium",
+      name: "email",
+      icon: "ZD-taskDemo"
+    }))), /*#__PURE__*/React.createElement("h2", {
+      style: {
+        marginBottom: '10px',
+        marginTop: '10px'
+      }
+    }, "Customers Module Icon"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(AvatarFlip, {
+      id: "portalUser",
+      noNeedFlip: false,
+      size: "xmedium",
+      name: "Antro J",
+      isPortalUser: true
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(AvatarFlip, {
+      id: "paidUser",
+      noNeedFlip: false,
+      size: "xmedium",
+      name: "Antro J",
+      isPaidUser: true
+    }))));
+  }
+
+}
+
+if (false) {
+  AvatarFlip__default.docs = {
+    folderName: 'List',
+    componentGroup: 'AvatarFlip'
+  };
+}

package/es/list/BluePrintStatus/BluePrintStatus.module.css

@@ -6,10 +6,10 @@
   padding-left: var(--zd_size5);
 }
 /* .danger {
-  color: var(--dot_brightRed);
+  color: var(--dot_text_brightRed);
 }
 .default {
-  color: var(--dot_shuttleGrey);
+  color: var(--dot_text_shuttleGrey);
 } */
 .iconStyle {
   display: block;

package/es/list/BluePrintStatus/docs/BluePrintStatus__default.docs.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import BluePrintStatus from '../BluePrintStatus';
+export default class BluePrintStatus__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(BluePrintStatus, null);
+  }
+
+}
+
+if (false) {
+  BluePrintStatus__default.docs = {
+    componentGroup: ''
+  };
+}