@zohodesk/dot 1.9.18 → 1.9.20

package/lib/AudioPlayer/AudioPlayer.js

@@ -23,6 +23,8 @@ var _utils = require("./utils/utils");
 
 var _Attachment = require("./../AttachmentViewer/Attachment");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _AudioPlayerModule = _interopRequireDefault(require("./AudioPlayer.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -562,7 +564,7 @@ var AudioPlayerChild = /*#__PURE__*/function (_React$Component2) {
         id: id,
         controls: true,
         preload: "auto",
-        className: _AudioPlayerModule["default"].audioHid,
+        className: (0, _cssUtility.cn)(_AudioPlayerModule["default"].audioHid),
         ref: function ref(ele) {
           return _this3.audio = ele;
         }
@@ -607,14 +609,14 @@ var AudioPlayerChild = /*#__PURE__*/function (_React$Component2) {
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         className: _AudioPlayerModule["default"].audioRangeContainer
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: _AudioPlayerModule["default"].loading,
+        className: (0, _cssUtility.cn)(_AudioPlayerModule["default"].loading),
         style: {
           width: "".concat(loadingRange, "%")
         }
       }), /*#__PURE__*/_react["default"].createElement("input", {
         "data-id": dataId,
         ref: this.setInputRangeRef,
-        className: _AudioPlayerModule["default"].input,
+        className: (0, _cssUtility.cn)(_AudioPlayerModule["default"].input),
         type: "range",
         value: sliderRangeValue,
         min: minValue,

package/lib/AudioPlayer/AudioPlayer.module.css

@@ -10,7 +10,7 @@
 }
 
 .audioHid {
-    display: none;
+    composes: d-hidden from global;
 }
 
 .pauseIcon {
@@ -31,7 +31,7 @@
 
 .rightBox,
 .closeBox {
-    height: 100% ;
+    composes: d-h-full from global;
     width: var(--zd_size36) ;
 }
 
@@ -55,8 +55,10 @@
     border-bottom-left-radius: 4px;
 }
 
-.closeBox, .rightBox, .cursor {
-    cursor: pointer;
+.closeBox,
+.rightBox,
+.cursor {
+    composes: d-cursor-pointer from global;
 }
 
 .downloadBox:hover, .downloadBox:focus, .closeBox:hover, .closeBox:focus {
@@ -75,7 +77,7 @@
 }
 
 .disable {
-    pointer-events: none;
+    composes: d-pointer-events-none from global;
     opacity: 0.4;
 }
 
@@ -86,7 +88,7 @@ input::-moz-focus-inner, input::-moz-focus-outer {
 }
 
 .audioRangeContainer {
-    position: relative;
+    composes: d-relative from global;
     background-color: var(--zdt_audioplayer_input_bg);
 }
 
@@ -101,19 +103,17 @@ input::-moz-focus-inner, input::-moz-focus-outer {
 }
 
 .loading {
+    composes: d-absolute d-h-full d-pointer-events-none from global;
     width: 0% ;
-    height: 100% ;
-    position: absolute;
-    pointer-events: none;
     background-color: var(--zdt_audioplayer_loading_bg);
 }
 
 /* CHROME */
 .input {
+    composes: d-m-0 from global;
     -webkit-appearance: none;
     outline: none;
     background-color: var(--zdt_audioplayer_input_bg);
-    margin: 0 ;
 }
 
 .input::-webkit-slider-thumb {

package/lib/AudioPlayer/Timer/Timer.module.css

@@ -1,5 +1,5 @@
 .container {
+  composes: d-text-center from global;
   font-size: var(--zd_font_size11) ;
   color: var(--zdt_timer_default_text);
-  text-align: center;
 }

package/lib/AudioPlayer/Timer/__tests__/__snapshots__/Timer.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Timer test Cases rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize row container"
+    class="d-flex d-h-full d-w-full d-flex-row container"
     data-id="CBTimer"
     data-selector-id="container"
     data-test-id="CBTimer"