@zohodesk/dot 1.0.0-temp-230.4 → 1.0.0-temp-232.1

package/es/AttachmentViewer/AttachmentViewer.module.css

@@ -1,8 +1,8 @@
 .header {
-    height: var(--zd_size48) ;
+    height: var(--zd_size40) ;
     position: relative;
     z-index: 1;
-    padding-block: 0 ;
+    padding-block:0 ;
     padding-inline: var(--zd_size15) ;
     composes: alignVertical from '~@zohodesk/components/es/common/common.module.css';
     background-color: var(--zdt_attachmentviewer_header_bg);
@@ -10,13 +10,20 @@
 }
 
 .title {
-    padding-inline-end: var(--zd_size15) ;
     max-width: 50% ;
     composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
 
+[dir=ltr] .title {
+    padding-right: var(--zd_size15) ;
+}
+
+[dir=rtl] .title {
+    padding-left: var(--zd_size15) ;
+}
+
 .count {
-    padding-block: 0 ;
+    padding-block:0 ;
     padding-inline: var(--zd_size10) ;
     position: absolute;
     composes: xMiddle from '~@zohodesk/components/es/common/common.module.css';
@@ -73,7 +80,7 @@
 
 .preview {
     margin-block: var(--zd_size20) ;
-    margin-inline: 0 ;
+    margin-inline:0 ;
     composes: posrel from '~@zohodesk/components/es/common/common.module.css';
     text-align: center;
 }
@@ -129,7 +136,7 @@
 }
 
 .listContainer {
-    padding-block: 0 ;
+    padding-block:0 ;
     padding-inline: var(--zd_size18) ;
 }
 
@@ -317,7 +324,7 @@
 }
 
 .authorName {
-    margin-block: 0 ;
+    margin-block:0 ;
     margin-inline: var(--zd_size10) ;
     font-size: var(--zd_font_size15) ;
     color: var(--zdt_attachmentviewer_title_text);
@@ -357,4 +364,4 @@
     color: var(--zdt_attachmentviewer_title_text);
     padding: var(--zd_size2) ;
     margin: auto ;
-}
+}

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

@@ -8,63 +8,62 @@ beforeEach(() => {
 afterEach(() => {
   cleanup();
 });
-const mockData = [{
-  id: '1',
-  name: 'slack0.jpg',
-  size: '100412',
-  href: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG',
-  viewUrl: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG',
-  downloadUrl: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG'
-}, {
-  id: '2',
-  name: 'slack1.jpg',
-  size: '100412',
-  href: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
-  viewUrl: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
-  downloadUrl: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg'
-}, {
-  id: '3',
-  name: 'slack2.jpg',
-  size: '100412',
-  href: 'https://wallpapercave.com/wp/wp3913900.jpg',
-  viewUrl: 'https://wallpapercave.com/wp/wp3913900.jpg',
-  downloadUrl: 'https://wallpapercave.com/wp/wp3913900.jpg'
-}, {
-  id: '4',
-  name: 'slack3.jpg',
-  size: '100412',
-  href: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
-  viewUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
-  downloadUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg'
-}, {
-  id: '5',
-  name: 'slack4.jpg',
-  size: '100412',
-  href: 'https://wallpapercave.com/wp/wp3913900.jpg',
-  viewUrl: 'https://wallpapercave.com/wp/wp3913900.jpg',
-  downloadUrl: 'https://wallpapercave.com/wp/wp3913900.jpg'
-}, {
-  id: '6',
-  name: 'slack5.jpg',
-  size: '100412',
-  href: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
-  viewUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
-  downloadUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg'
-}, {
-  id: '6',
-  name: 'slack5.mp3',
-  size: '100412',
-  href: 'https://www.w3schools.com/html/horse.mp3',
-  viewUrl: 'https://www.w3schools.com/html/horse.mp3',
-  downloadUrl: 'https://www.w3schools.com/html/horse.mp3'
-}];
 describe('AttachmentViewer', () => {
   test('rendering the defult props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(AttachmentViewer, {
       previewObj: {
-        previewData: mockData,
+        previewData: [{
+          id: '1',
+          name: 'slack0.jpg',
+          size: '100412',
+          href: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG',
+          viewUrl: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG',
+          downloadUrl: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG'
+        }, {
+          id: '2',
+          name: 'slack1.jpg',
+          size: '100412',
+          href: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
+          viewUrl: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
+          downloadUrl: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg'
+        }, {
+          id: '3',
+          name: 'slack2.jpg',
+          size: '100412',
+          href: 'https://wallpapercave.com/wp/wp3913900.jpg',
+          viewUrl: 'https://wallpapercave.com/wp/wp3913900.jpg',
+          downloadUrl: 'https://wallpapercave.com/wp/wp3913900.jpg'
+        }, {
+          id: '4',
+          name: 'slack3.jpg',
+          size: '100412',
+          href: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
+          viewUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
+          downloadUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg'
+        }, {
+          id: '5',
+          name: 'slack4.jpg',
+          size: '100412',
+          href: 'https://wallpapercave.com/wp/wp3913900.jpg',
+          viewUrl: 'https://wallpapercave.com/wp/wp3913900.jpg',
+          downloadUrl: 'https://wallpapercave.com/wp/wp3913900.jpg'
+        }, {
+          id: '6',
+          name: 'slack5.jpg',
+          size: '100412',
+          href: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
+          viewUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
+          downloadUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg'
+        }, {
+          id: '6',
+          name: 'slack5.mp3',
+          size: '100412',
+          href: 'https://www.w3schools.com/html/horse.mp3',
+          viewUrl: 'https://www.w3schools.com/html/horse.mp3',
+          downloadUrl: 'https://www.w3schools.com/html/horse.mp3'
+        }],
         selectedIndex: 0
       }
     }));
@@ -76,62 +75,59 @@ describe('AttachmentViewer', () => {
     } = render( /*#__PURE__*/React.createElement(AttachmentViewer, {
       isActive: true,
       previewObj: {
-        previewData: mockData,
+        previewData: [{
+          id: '1',
+          name: 'slack0.jpg',
+          size: '100412',
+          href: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG',
+          viewUrl: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG',
+          downloadUrl: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG'
+        }, {
+          id: '2',
+          name: 'slack1.jpg',
+          size: '100412',
+          href: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
+          viewUrl: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
+          downloadUrl: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg'
+        }, {
+          id: '3',
+          name: 'slack2.jpg',
+          size: '100412',
+          href: 'https://wallpapercave.com/wp/wp3913900.jpg',
+          viewUrl: 'https://wallpapercave.com/wp/wp3913900.jpg',
+          downloadUrl: 'https://wallpapercave.com/wp/wp3913900.jpg'
+        }, {
+          id: '4',
+          name: 'slack3.jpg',
+          size: '100412',
+          href: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
+          viewUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
+          downloadUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg'
+        }, {
+          id: '5',
+          name: 'slack4.jpg',
+          size: '100412',
+          href: 'https://wallpapercave.com/wp/wp3913900.jpg',
+          viewUrl: 'https://wallpapercave.com/wp/wp3913900.jpg',
+          downloadUrl: 'https://wallpapercave.com/wp/wp3913900.jpg'
+        }, {
+          id: '6',
+          name: 'slack5.jpg',
+          size: '100412',
+          href: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
+          viewUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
+          downloadUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg'
+        }, {
+          id: '6',
+          name: 'slack5.mp3',
+          size: '100412',
+          href: 'https://www.w3schools.com/html/horse.mp3',
+          viewUrl: 'https://www.w3schools.com/html/horse.mp3',
+          downloadUrl: 'https://www.w3schools.com/html/horse.mp3'
+        }],
         selectedIndex: 0
       }
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering with renderCustomIcons', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AttachmentViewer, {
-      isActive: true,
-      previewObj: {
-        previewData: mockData,
-        selectedIndex: 0
-      },
-      renderCustomIcons: props => {
-        const {
-          selectedAttachment,
-          selectedIndex,
-          totalLen
-        } = props;
-        return /*#__PURE__*/React.createElement("div", {
-          "data-id": "customIcons"
-        }, /*#__PURE__*/React.createElement("span", {
-          "data-id": "customIcons_name"
-        }, selectedAttachment.name), /*#__PURE__*/React.createElement("span", {
-          "data-id": "customIcons_index"
-        }, selectedIndex + 1, "/", totalLen));
-      }
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering with renderCustomImagePreviewElement', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AttachmentViewer, {
-      isActive: true,
-      previewObj: {
-        previewData: mockData,
-        selectedIndex: 0
-      },
-      renderCustomImagePreviewElement: props => {
-        const {
-          defaultView,
-          data,
-          index: selectedIndex
-        } = props;
-        return /*#__PURE__*/React.createElement("div", {
-          "data-id": "customImagePreview"
-        }, /*#__PURE__*/React.createElement("span", {
-          "data-id": "customImagePreview_name"
-        }, data.name), /*#__PURE__*/React.createElement("span", {
-          "data-id": "customImagePreview_index"
-        }, selectedIndex + 1, "/", data.length));
-      }
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
 });