@zohodesk/dot 1.9.18 → 1.9.20

package/es/AttachmentViewer/AttachmentViewer.module.css

@@ -1,10 +1,10 @@
 .header {
     height: var(--zd_size48) ;
-    position: relative;
     z-index: 1;
     padding-block: 0 ;
     padding-inline: var(--zd_size15) ;
     composes: alignVertical from '~@zohodesk/components/es/common/common.module.css';
+    composes: d-relative from global;
     background-color: var(--zdt_attachmentviewer_header_bg);
     border-bottom: 1px solid var(--zdt_attachmentviewer_header_border);
 }
@@ -18,8 +18,8 @@
 .count {
     padding-block: 0 ;
     padding-inline: var(--zd_size10) ;
-    position: absolute;
     composes: xMiddle from '~@zohodesk/components/es/common/common.module.css';
+    composes: d-absolute from global;
 }
 
 .title,
@@ -33,8 +33,8 @@
 }
 
 .mbleMenuBar {
+    composes: d-self-baseline from global;
     margin-block-start: var(--zd_size8) ;
-    align-self: baseline;
 }
 
 .menu+.menu {
@@ -62,35 +62,34 @@
 }
 
 .arrow {
+    composes: d-cursor-pointer from global;
     color: var(--zdt_attachmentviewer_title_text);
     font-size: var(--zd_font_size22) ;
     height: var(--zd_size38) ;
     width: var(--zd_size38) ;
     line-height: 1.6;
     border-radius: 50%;
-    cursor: pointer;
 }
 
 .preview {
     margin-block: var(--zd_size20) ;
     margin-inline: 0 ;
     composes: posrel from '~@zohodesk/components/es/common/common.module.css';
-    text-align: center;
+    composes: d-text-center from global;
 }
 
 .zoomIn {
-    max-height: 100% ;
     max-width: 90% ;
-    position: absolute;
     composes: middleBoth from '~@zohodesk/components/es/common/common.module.css';
+    composes: d-absolute d-max-h-full from global;
 }
 
 .zoomOut {
-    cursor: zoom-out;
+    composes: d-cursor-zoom-out from global;
 }
 
 .button {
-    position: absolute;
+    composes: d-absolute from global;
     bottom: var(--zd_size23) ;
     z-index: 3;
     border: 1px solid var(--zdt_attachmentviewer_button_border);
@@ -105,16 +104,15 @@
 }
 
 .visible {
-    visibility: visible;
+    composes: d-visible from global;
 }
 
 .hidden {
-    visibility: hidden;
+    composes: d-invisible from global;
 }
 
 .footer {
-    width: 100% ;
-    overflow: hidden;
+    composes: d-overflow-hidden d-w-full from global;
     transition: height var(--zd_transition3);
     padding-inline-end: var(--zd_size68) ;
     background-color: var(--zdt_attachmentviewer_footer_bg);
@@ -134,16 +132,14 @@
 }
 
 .imgItem {
+    composes: d-relative d-border-solid d-cursor-pointer from global;
     height: var(--zd_size60) ;
     min-width: var(--zd_size40) ;
-    position: relative;
     transition: border var(--zd_transition3);
     border-width: 2px;
-    border-style: solid;
     border-color: var(--dot_mirror);
     border-radius: 3px;
     padding: var(--zd_size2) ;
-    cursor: pointer;
 }
 
 .imgItem:hover {
@@ -154,8 +150,9 @@
     margin-inline-start: var(--zd_size12) ;
 }
 
-.image, .crsrPointer {
-    cursor: pointer;
+.image,
+.crsrPointer {
+    composes: d-cursor-pointer from global;
 }
 
 .altText {
@@ -209,13 +206,12 @@
 }
 
 .previewFrame {
-    height: 100% ;
-    width: 100% ;
+    composes: d-size-full from global;
     border: 0;
 }
 
 .video {
-    position: absolute;
+    composes: d-absolute from global;
     top: 0 ;
     bottom: 0 ;
     margin: auto ;
@@ -232,10 +228,8 @@
 }
 
 .imgBox {
-    position: absolute;
+    composes: d-absolute d-overflow-auto d-opacity-0 from global;
     transition: var(--zd_transition3) ease-in-out;
-    opacity: 0;
-    overflow: auto;
 }
 
 .imgBox>img {
@@ -243,11 +237,8 @@
 }
 
 .imgRef {
-    width: 100% ;
-    height: 100% ;
-    max-width: 100% ;
-    max-height: 100% ;
     composes: dflex from '~@zohodesk/components/es/common/common.module.css';
+    composes: d-max-w-full d-max-h-full d-size-full from global;
 }
 
 .img {
@@ -256,11 +247,11 @@
 }
 
 .zoomInCursor {
-    cursor: zoom-in;
+    composes: d-cursor-zoom-in from global;
 }
 
 .zoomOutCursor {
-    cursor: zoom-out;
+    composes: d-cursor-zoom-out from global;
 }
 
 .imgRef .normalImg {
@@ -274,23 +265,20 @@
 }
 
 .previewBox {
-    position: relative;
-    overflow: hidden;
+    composes: d-relative d-overflow-hidden from global;
 }
 
 .spinLoad {
-    position: absolute;
     composes: middleBoth from '~@zohodesk/components/es/common/common.module.css';
+    composes: d-absolute d-cursor-progress from global;
     height: var(--zd_size18) ;
-    width: var(--zd_size18) ;
-    cursor: progress
+    width: var(--zd_size18) 
 }
 
 .loader {
-    height: 100% ;
-    width: 100% ;
     composes: rotate from '../common/dot_animation.module.css';
     composes: infinite from '~@zohodesk/components/es/common/animation.module.css';
+    composes: d-size-full from global;
     border: 2px solid var(--zdt_attachmentviewer_loader_border);
     border-top-color: var(--zdt_attachmentviewer_loader_border_top);
     border-radius: 50%;
@@ -307,8 +295,7 @@
 }
 
 .hide {
-    opacity: 0;
-    visibility: hidden;
+    composes: d-invisible d-opacity-0 from global;
 }
 
 .author {
@@ -325,11 +312,9 @@
 }
 
 .btn {
-    height: 100% ;
-    width: 100% ;
+    composes: d-size-full d-cursor-pointer from global;
     background-color: var(--dot_mirror);
     border: 0;
-    cursor: pointer;
 }
 
 .fileTypeImg {
@@ -337,14 +322,14 @@
 }
 
 .previewNone {
+    composes: d-text-center from global;
     color: var(--zdt_attachmentviewer_title_text);
     max-width: 70% ;
-    text-align: center;
     margin: auto ;
 }
 
 .downloadLink {
-    display: inline-block;
+    composes: d-inline-block from global;
     padding-block-start: var(--zd_size15) ;
 }
 

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AttachmentImage rendering the defult props 1`] = `
 <DocumentFragment>