@zohodesk/dot 1.0.0-temp-214 → 1.0.0-temp-216

package/README.md

@@ -2,6 +2,29 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.7.24
+
+- **Timer**
+  - timer_default_text css variable added.
+
+# 1.7.23
+
+- introduced AudioPlayer & Timer comopnent.
+
+
+# 1.7.22
+
+- **useDragger**
+  - While using the dragger, it was triggering even on a simple click inside the draggable element. The fixed position should only apply during an actual drag. To handle this, we added a drag distance threshold to accurately detect dragging and prevent the CSS from applying on click. 
+
+# 1.7.20, 1.7.21
+
+- **PhoneField**
+  - RTL unicode-bidi issue fixed
+- **Attachment**  
+  - dataId added for fileName and fileSize element
+- lib imports migrated to es  
+
 
 # 1.7.19
 

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

@@ -34,6 +34,16 @@
 	--zdt_attachment_download_hover_bg: var(--zdt_cta_grey_35_bg);
 	--zdt_avataruser_delete_text: hsla(217, 23.08%, calc(17.84% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* audio player */
+	--zdt_audioplayer_default_bg: var(--zdt_cta_grey_15_bg);
+	--zdt_audioplayer_line_text: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_audioplayer_input_bg: var(--zdt_cta_grey_35_bg);
+	--zdt_audioplayer_pauseicon_text: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_audioplayer_loading_bg: var(--zdtm_cta_primary_bg_default_inverse_lower);
+	
+	/* timer */
+	--zdt_timer_default_text: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
 	/* avatar close */
 	--zdt_avatarclose_pop_bg: hsla(0, 0.00%, calc(0.00% + var(--zdc_default)), calc( 0.75 + var(--zdc_alpha_high)));
 	--zdt_avatarclose_pop_text: hsla(30, 1.64%, calc(76.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -221,7 +231,7 @@
 	--zdt_gridstencils_default_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_gridstencils_after_bg: hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_gridstencils_listbar_bg: hsla(217, 23.23%, calc(19.41% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_gridstencils_listbar_gradient_bg: linear-gradient(to left, #383f55 0, #414961 20%, #414961 40%, #383f55 100%);
+	--zdt_gridstencils_listbar_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0, #414961 20%, #414961 40%, #383f55 100%);
 	
 	/* icons */
 	--zdt_icons_default: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/light/mode/Dot_LightMode.module.css

@@ -34,6 +34,16 @@
 	--zdt_attachment_download_hover_bg: var(--zdt_cta_grey_35_bg);
 	--zdt_avataruser_delete_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* audio player */
+	--zdt_audioplayer_default_bg: var(--zdt_cta_grey_15_bg);
+	--zdt_audioplayer_line_text: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_audioplayer_input_bg: var(--zdt_cta_grey_35_bg);
+	--zdt_audioplayer_pauseicon_text: hsla(217, 25.93%, calc(15.88% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_audioplayer_loading_bg: var(--zdtm_cta_primary_bg_default_inverse_lower);
+	
+	/* timer */
+	--zdt_timer_default_text: hsla(217, 25.93%, calc(15.88% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
 	/* avatar close */
 	--zdt_avatarclose_pop_bg: hsla(0, 0.00%, calc(0.00% + var(--zdc_default)), calc( 0.75 + var(--zdc_alpha_high)));
 	--zdt_avatarclose_pop_text: hsla(30, 1.64%, calc(76.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -221,7 +231,7 @@
 	--zdt_gridstencils_default_border: hsla(0, 0.00%, calc(94.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_gridstencils_after_bg: hsla(0, 0.00%, calc(92.16% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_gridstencils_listbar_bg: hsla(210, 12.50%, calc(96.86% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_gridstencils_listbar_gradient_bg: linear-gradient(to left, var(--zd_smoke78) 0, #edeef1 20%, var(--zd_smoke78) 40%, var(--zd_smoke78) 100%);
+	--zdt_gridstencils_listbar_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, var(--zd_smoke78) 0, #edeef1 20%, var(--zd_smoke78) 40%, var(--zd_smoke78) 100%);
 	
 	/* icons */
 	--zdt_icons_default: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

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

@@ -34,6 +34,16 @@
 	--zdt_attachment_download_hover_bg: var(--zdt_cta_grey_35_bg);
 	--zdt_avataruser_delete_text: hsla(0, 0.00%, calc(12.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* audio player */
+	--zdt_audioplayer_default_bg: var(--zdt_cta_grey_15_bg);
+	--zdt_audioplayer_line_text: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_audioplayer_input_bg: var(--zdt_cta_grey_35_bg);
+	--zdt_audioplayer_pauseicon_text: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_audioplayer_loading_bg: var(--zdtm_cta_primary_bg_default_inverse_lower);
+	
+	/* timer */
+	--zdt_timer_default_text: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
 	/* avatar close */
 	--zdt_avatarclose_pop_bg: hsla(0, 0.00%, calc(0.00% + var(--zdc_default)), calc( 0.75 + var(--zdc_alpha_high)));
 	--zdt_avatarclose_pop_text: hsla(30, 1.64%, calc(76.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -221,7 +231,7 @@
 	--zdt_gridstencils_default_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_gridstencils_after_bg: hsla(0, 0.00%, calc(16.86% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_gridstencils_listbar_bg: hsla(0, 0.00%, calc(16.86% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_gridstencils_listbar_gradient_bg: linear-gradient(to left, #212121 0, #262626 20%, #262626 40%, #212121 100%);
+	--zdt_gridstencils_listbar_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0, #262626 20%, #262626 40%, #212121 100%);
 	
 	/* icons */
 	--zdt_icons_default: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/es/ActionButton/ActionButton.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import Popup from '@zohodesk/components/lib/Popup/Popup';
+import Popup from '@zohodesk/components/es/Popup/Popup';
 import { Icon } from '@zohodesk/icons';
-import Button from '@zohodesk/components/lib/Button/Button';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
-import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
+import Button from '@zohodesk/components/es/Button/Button';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import ResponsiveDropBox from '@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox';
+import CssProvider from '@zohodesk/components/es/Provider/CssProvider';
 import style from "./ActionButton.module.css";
-import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
+import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 export class ActionButton extends React.Component {
   constructor(props) {
     super(props);

package/es/AlphabeticList/AlphabeticList.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { AlphabeticList_defaultProps, AlphabeticListItem_defaultProps } from "./props/defaultProps";
 import { AlphabeticList_propTypes, AlphabeticListItem_propTypes, AlphabeticCharacters, NumberList, AlphabeticCharactersWithHash } from "./props/propTypes";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 /*** CSS ***/
 
 import style from "./AlphabeticList.module.css";

package/es/Attachment/Attachment.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import Link from "../Link/Link";
 import style from "./Attachment.module.css";
 export default class Attachment extends React.Component {
@@ -49,7 +49,8 @@ export default class Attachment extends React.Component {
       align: "horizontal"
     }, fileName ? /*#__PURE__*/React.createElement(Box, {
       className: style.atatchName,
-      "data-title": fileName
+      "data-title": fileName,
+      dataId: `${dataId}_filename`
     }, fileName) : null, /*#__PURE__*/React.createElement(Box, {
       className: style.footer
     }, /*#__PURE__*/React.createElement(Container, {
@@ -60,14 +61,16 @@ export default class Attachment extends React.Component {
       className: style.attachSize,
       adjust: true,
       shrink: true,
-      "data-title": fileSize
+      "data-title": fileSize,
+      dataId: `${dataId}_filesize`
     }, fileSize) : null, fileInfo ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
       className: style.dot
     }), /*#__PURE__*/React.createElement(Box, {
       className: style.attachSize,
       adjust: true,
       shrink: true,
-      "data-title": fileInfo
+      "data-title": fileInfo,
+      dataId: `${dataId}_fileinfo`
     }, fileInfo)) : null)))), downloadLink && !isDisabled ? /*#__PURE__*/React.createElement(Link, {
       target: "_self",
       href: downloadLink,

package/es/Attachment/__tests__/Attachment.spec.js

@@ -8,4 +8,28 @@ describe('Attachment', () => {
     } = render( /*#__PURE__*/React.createElement(Attachment, null));
     expect(asFragment()).toMatchSnapshot();
   });
+});
+describe('Attachment with props', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Attachment, {
+      onClick: jest.fn(),
+      dataId: "test_id",
+      size: "medium",
+      iconName: "test_icon",
+      fileName: "test_file",
+      fileSize: "10MB",
+      downloadLink: "http://example.com",
+      palette: "default",
+      tooltip: "test_tooltip",
+      fileInfo: "test_info",
+      i18nKeys: {
+        downloadTitle: 'Download'
+      },
+      dataSelectorId: "test_selector",
+      isDisabled: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/Attachment/__tests__/__snapshots__/Attachment.spec.js.snap

@@ -39,3 +39,108 @@ exports[`Attachment rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Attachment with props rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="attachment  attachmentHover palette_default medium inflex rowdir"
+    data-id="test_id"
+    data-selector-id="test_selector"
+    data-test-id="test_id"
+    data-title="test_tooltip"
+    tabindex="0"
+  >
+    <div
+      class="attachleft shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      />
+    </div>
+    <div
+      class="attachright grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover coldir hCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="atatchName shrinkOff"
+          data-id="test_id_filename"
+          data-selector-id="box"
+          data-test-id="test_id_filename"
+          data-title="test_file"
+        >
+          test_file
+        </div>
+        <div
+          class="footer shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir baseline"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="attachSize basisAuto shrinkOn"
+              data-id="test_id_filesize"
+              data-selector-id="box"
+              data-test-id="test_id_filesize"
+              data-title="10MB"
+            >
+              10MB
+            </div>
+            <div
+              class="dot shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            />
+            <div
+              class="attachSize basisAuto shrinkOn"
+              data-id="test_id_fileinfo"
+              data-selector-id="box"
+              data-test-id="test_id_fileinfo"
+              data-title="test_info"
+            >
+              test_info
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <a
+      class="container  attachDownload"
+      data-id="test_id_download"
+      data-test-id="test_id_download"
+      data-title="Download"
+      href="http://example.com"
+      rel="noopener noreferrer"
+      target="_self"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-download-new  downIcon  "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </a>
+  </div>
+</DocumentFragment>
+`;

package/es/AttachmentViewer/AttachmentViewer.js

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import { AttachmentViewer_defaultProps } from "./props/defaultProps";
 import { AttachmentViewer_propTypes } from "./props/propTypes";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import { Icon } from '@zohodesk/icons';
-import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
-import Typography from '@zohodesk/components/lib/Typography/Typography';
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import Avatar from '@zohodesk/components/es/Avatar/Avatar';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
+import Typography from '@zohodesk/components/es/Typography/Typography';
+import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import Button from '@zohodesk/components/es/Button/Button';
 import AttachmentImage from "./AttachmentImage";
 import Link from "../Link/Link";

package/es/AttachmentViewer/AttachmentViewer.module.css

@@ -378,7 +378,7 @@
 
 .previewIconDiv {
     width: var(--zd_size60) ;
-    composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
+    composes: dflex from '~@zohodesk/components/es/common/common.module.css';
 }
 
 .prevFooterIcon {

package/es/AttachmentViewer/__tests__/__snapshots__/AttachmentViewer.spec.js.snap

@@ -237,7 +237,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                 data-test-id="containerComponent"
               >
                 <div
-                  class="imgItem selected shrinkOff"
+                  class="imgItem selected  shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -254,7 +254,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem  shrinkOff"
+                  class="imgItem   shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -271,7 +271,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem  shrinkOff"
+                  class="imgItem   shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -288,7 +288,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem  shrinkOff"
+                  class="imgItem   shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -305,7 +305,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem  shrinkOff"
+                  class="imgItem   shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -322,7 +322,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem  shrinkOff"
+                  class="imgItem   shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -339,21 +339,20 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem  shrinkOff"
+                  class="imgItem  previewIconDiv shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
                   data-title="slack5.mp3"
                 >
-                  <div
-                    class="spinLoad"
-                    data-id="AttachmentImage_loader"
-                    data-test-id="AttachmentImage_loader"
-                  >
-                    <div
-                      class="loader"
-                    />
-                  </div>
+                  <i
+                    aria-hidden="true"
+                    class="zd_font_icons basic icon-fileMp3  prevFooterIcon  "
+                    data-id="fontIcon"
+                    data-selector-id="fontIcon"
+                    data-test-id="fontIcon"
+                    style="--zd-iconfont-size: var(--zd_font_size40);"
+                  />
                 </div>
               </div>
             </div>