@zohodesk/dot 1.7.22 → 1.7.24

package/lib/AudioPlayer/AudioPlayer.module.css

@@ -0,0 +1,146 @@
+.container {
+    height: var(--zd_size30) ;
+    background: var(--zdt_audioplayer_default_bg);
+    border-radius: 4px;
+}
+
+.dragtag {
+    margin: 0 var(--zd_size10) ;
+}
+
+.audioHid {
+    display: none;
+}
+
+.pauseIcon {
+    font-size: var(--zd_font_size13) ;
+}
+
+.iconColor {
+    color: var(--zdt_audioplayer_line_text);
+}
+
+.downloadIcon {
+    font-size: var(--zd_font_size11) ;
+}
+
+[dir=ltr] .timerBox {
+    margin-left: var(--zd_size6) ;
+}
+
+[dir=rtl] .timerBox {
+    margin-right: var(--zd_size6) ;
+}
+
+.rightBox,
+.closeBox {
+    height: 100% ;
+    width: var(--zd_size36) ;
+}
+
+[dir=ltr] .boxLeftRadius {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+[dir=rtl] .boxLeftRadius {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+[dir=ltr] .boxRightRadius {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+[dir=rtl] .boxRightRadius {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+.closeBox, .rightBox, .cursor {
+    cursor: pointer;
+}
+
+.downloadBox:hover, .downloadBox:focus, .closeBox:hover, .closeBox:focus {
+    background-color: var(--zdt_audioplayer_input_bg);
+}
+
+.downloadBox:hover .downloadIcon,
+.closeBox:hover .pauseIcon {
+    color: var(--zdt_audioplayer_pauseicon_text);
+}
+
+.line {
+    color: var(--zdt_audioplayer_line_text);
+    font-size: var(--zd_font_size13) ;
+    font-family: var(--zd_semibold);
+}
+
+.disable {
+    pointer-events: none;
+    opacity: 0.4;
+}
+
+/* Audio Range styles */
+
+input::-moz-focus-inner, input::-moz-focus-outer {
+    border: 0;
+}
+
+.audioRangeContainer {
+    position: relative;
+    background-color: var(--zdt_audioplayer_input_bg);
+}
+
+.audioRangeContainer,
+.input,
+.loading {
+    height: var(--zd_size3) ;
+}
+
+.audioRangeContainer, .input, .loading {
+    border-radius: 4px;
+}
+
+.loading {
+    width: 0% ;
+    height: 100% ;
+    position: absolute;
+    pointer-events: none;
+    background-color: var(--zdt_audioplayer_loading_bg);
+}
+
+/* CHROME */
+.input {
+    -webkit-appearance: none;
+    outline: none;
+    background-color: var(--zdt_audioplayer_input_bg);
+    margin: 0 ;
+}
+
+.input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: var(--zd_size7) ;
+    height: var(--zd_size7) ;
+    border-radius: 50%;
+    background-color: var(--zdt_audioplayer_loading_bg);
+}
+
+/* FIREFOX */
+.input::-moz-range-thumb {
+    height: var(--zd_size7) ;
+    width: var(--zd_size7) ;
+    border: none;
+    border-radius: 50%;
+    background-color: var(--zdt_audioplayer_loading_bg);
+    cursor: pointer;
+}
+
+.input::-moz-range-track {
+    height: var(--zd_size3) ;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+/* End of audio range styles */

package/lib/AudioPlayer/Timer/Timer.js

@@ -0,0 +1,117 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = require("./propTypes/propTypes");
+
+var _defaultProps = require("./propTypes/defaultProps");
+
+var _Layout = require("@zohodesk/components/lib/Layout");
+
+var _utils = require("../utils/utils");
+
+var _TimerModule = _interopRequireDefault(require("./Timer.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var Timer = /*#__PURE__*/function (_React$Component) {
+  _inherits(Timer, _React$Component);
+
+  var _super = _createSuper(Timer);
+
+  function Timer(props) {
+    var _this;
+
+    _classCallCheck(this, Timer);
+
+    _this = _super.call(this, props);
+    _this.constructTimer = _this.constructTimer.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(Timer, [{
+    key: "constructTimer",
+    value: function constructTimer() {
+      var _this$props = this.props,
+          hour = _this$props.hour,
+          minute = _this$props.minute,
+          second = _this$props.second,
+          amPm = _this$props.amPm,
+          separator = _this$props.separator,
+          timerFormat = _this$props.timerFormat,
+          needCharacter = _this$props.needCharacter;
+      var timeSeparator = separator == 'space' ? ' ' : ':';
+      var timerValue = '';
+      var format = timerFormat.toLowerCase().split(':');
+      hour = (0, _utils.addLeadingZeros)(hour);
+      minute = (0, _utils.addLeadingZeros)(minute);
+      second = (0, _utils.addLeadingZeros)(second);
+
+      if (needCharacter) {
+        hour = "".concat(hour, "h");
+        minute = "".concat(minute, "m");
+        second = "".concat(second, "s");
+      }
+
+      format.map(function (type) {
+        if (type == 'hh') {
+          timerValue += hour;
+        } else if (type == 'mm') {
+          timerValue += minute;
+        } else if (type == 'ss') {
+          timerValue += second;
+        }
+
+        timerValue += timeSeparator;
+      });
+      timerValue = timerValue.slice(0, -1);
+      amPm && (timerValue = "".concat(timerValue, " ").concat(amPm));
+      return timerValue;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var dataId = this.props.dataId;
+      var timerValue = this.constructTimer();
+      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        dataId: dataId,
+        alignBox: "row",
+        className: _TimerModule["default"].container,
+        flexible: true
+      }, timerValue);
+    }
+  }]);
+
+  return Timer;
+}(_react["default"].Component);
+
+exports["default"] = Timer;
+Timer.defaultProps = _defaultProps.Timer_defaultProps;
+Timer.propTypes = _propTypes.Timer_propTypes;

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

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

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

@@ -0,0 +1,26 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Timer = _interopRequireDefault(require("../Timer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var defaultProps = {
+  dataId: 'CBTimer'
+};
+describe('Timer test Cases', function () {
+  // const {props,renderedDOM} = setup(Timer,Object.assign({},defaultProps))
+  // it('Should render Component',()=>{
+  //     const component = TestUtils.scryRenderedComponentsWithTestid(renderedDOM,'CBTimer');
+  //     expect(component.length).toBe(1);
+  // })
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Timer["default"], defaultProps)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Timer test Cases rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container flex cover rowdir"
+    data-id="CBTimer"
+    data-selector-id="container"
+    data-test-id="CBTimer"
+  >
+    undefined:undefined
+  </div>
+</DocumentFragment>
+`;

package/lib/AudioPlayer/Timer/propTypes/defaultProps.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Timer_defaultProps = void 0;
+var Timer_defaultProps = {
+  separator: 'colon',
+  timerFormat: 'mm:ss'
+};
+exports.Timer_defaultProps = Timer_defaultProps;

package/lib/AudioPlayer/Timer/propTypes/propTypes.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Timer_propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var Timer_propTypes = {
+  dataId: _propTypes["default"].string,
+  amPm: _propTypes["default"].string,
+  hour: _propTypes["default"].string,
+  minute: _propTypes["default"].string,
+  needCharacter: _propTypes["default"].bool,
+  second: _propTypes["default"].string,
+  separator: _propTypes["default"].oneOf(['space', 'colon']),
+  timerFormat: _propTypes["default"].string
+};
+exports.Timer_propTypes = Timer_propTypes;

package/lib/AudioPlayer/__tests__/AudioPlayer.spec.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _AudioPlayer = _interopRequireDefault(require("../AudioPlayer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+// import TestUtils from 'react-dom/test-utils';
+var defaultProps = {
+  togglePlayer: jest.fn(),
+  downloadFile: jest.fn(),
+  minute: '02',
+  second: '03',
+  durationInSec: '203',
+  src: "https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
+};
+describe('AudioPlayer Test Cases', function () {
+  // const { props,renderedDOM } = setup(
+  //     AudioPlayer,Object.assign({},defaultProps));
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AudioPlayer["default"], defaultProps)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // it('should render component', () => {
+  //     let component = TestUtils.scryRenderedComponentsWithTestid(
+  //         renderedDOM,
+  //         'AudioPlayer');
+  //     expect(component.length).toBe(1);
+  // })
+  // it('should close player onclicking close',()=>{
+  //     let component = TestUtils.scryRenderedComponentsWithTestid(
+  //         renderedDOM,
+  //         'audioPlayerClose'
+  //     )[0];
+  //     TestUtils.Simulate.click(component);
+  //     expect(props.togglePlayer).toHaveBeenCalled();
+  // })
+  // it('should download audio onclicking download',()=>{
+  //     let component = TestUtils.scryRenderedComponentsWithTestid(
+  //         renderedDOM,
+  //         'audioDownload'
+  //     )[0];
+  //     TestUtils.Simulate.click(component);
+  //     expect(props.downloadFile).toHaveBeenCalled();
+  // })
+});

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

@@ -0,0 +1,145 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AudioPlayer Test Cases rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="flex coldir"
+    data-id="AudioRange"
+    data-selector-id="container"
+    data-test-id="AudioRange"
+    tabindex="0"
+  >
+    <div
+      class="container flex rowdir vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <audio
+        class="audioHid"
+        controls=""
+        preload="auto"
+      >
+        <source
+          src="https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
+          type="audio/mpeg"
+        />
+      </audio>
+      <div
+        class="rightBox downloadBox boxLeftRadius shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="disable flex cover coldir both"
+          data-id="AudioRange_playpause"
+          data-selector-id="container"
+          data-test-id="AudioRange_playpause"
+          data-title="Play"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons basic icon-bcarr  downloadIcon iconColor  "
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+          />
+        </div>
+      </div>
+      <div
+        class="timerBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="flex cover rowdir vCenter"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="container flex cover rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            00:00:00
+          </div>
+        </div>
+      </div>
+      <div
+        class="dragtag disable grow basis shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="audioRangeContainer flex cover coldir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <span
+            class="loading"
+          />
+          <input
+            class="input"
+            data-id="AudioRange"
+            max="0"
+            min="0"
+            step="1"
+            type="range"
+            value="0"
+          />
+        </div>
+      </div>
+      <div
+        class="rightBox downloadBox  shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="disable flex cover coldir both"
+          data-id="AudioRange_download"
+          data-selector-id="container"
+          data-test-id="AudioRange_download"
+          data-title="Download"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons basic icon-download-new  downloadIcon iconColor  "
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+          />
+        </div>
+      </div>
+      <div
+        class="closeBox boxRightRadius shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="disable flex cover coldir both"
+          data-id="AudioRange_close"
+          data-selector-id="container"
+          data-test-id="AudioRange_close"
+          data-title="Close"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons basic icon-cross  pauseIcon iconColor  "
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/AudioPlayer/propTypes/defaultProps.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AudioPlayer_defaultProps = void 0;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var AudioPlayer_defaultProps = _defineProperty({
+  isPlay: false,
+  timerFormat: 'mm:ss',
+  forwardStepInSec: 5,
+  backwardStepInSec: 5,
+  needClose: true,
+  needDownload: true,
+  needMuteIcon: false,
+  i18nKeys: {},
+  dataId: 'AudioPlayer',
+  customClass: '',
+  range: 0
+}, "dataId", 'AudioRange');
+
+exports.AudioPlayer_defaultProps = AudioPlayer_defaultProps;

package/lib/AudioPlayer/propTypes/propTypes.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AudioPlayer_propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var AudioPlayer_propTypes = {
+  backwardStepInSec: _propTypes["default"].string,
+  forwardStepInSec: _propTypes["default"].string,
+  getAudioDuration: _propTypes["default"].func,
+  duration: _propTypes["default"].string,
+  id: _propTypes["default"].string,
+  isPlay: _propTypes["default"].bool,
+  needClose: _propTypes["default"].bool,
+  needDownload: _propTypes["default"].bool,
+  needMuteIcon: _propTypes["default"].bool,
+  onAudioLoading: _propTypes["default"].func,
+  onAudioSeeking: _propTypes["default"].func,
+  onClose: _propTypes["default"].func,
+  onDownloading: _propTypes["default"].func,
+  onError: _propTypes["default"].func,
+  onMuteUnmute: _propTypes["default"].func,
+  onPause: _propTypes["default"].func,
+  onPlay: _propTypes["default"].func,
+  src: _propTypes["default"].string,
+  timerFormat: _propTypes["default"].string,
+  i18nKeys: _propTypes["default"].shape({
+    playTitle: _propTypes["default"].string,
+    pauseTitle: _propTypes["default"].string,
+    downloadTitle: _propTypes["default"].string,
+    closeTitle: _propTypes["default"].string,
+    muteTitle: _propTypes["default"].string,
+    unmuteTitle: _propTypes["default"].string
+  }),
+  dataId: _propTypes["default"].string,
+  customClass: _propTypes["default"].string,
+  range: _propTypes["default"].number
+};
+exports.AudioPlayer_propTypes = AudioPlayer_propTypes;

package/lib/AudioPlayer/utils/utils.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addLeadingZeros = addLeadingZeros;
+exports.openInNewTabWithNoopener = openInNewTabWithNoopener;
+
+function openInNewTabWithNoopener(url) {
+  var targetnName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '_blank';
+  var aTag = document.createElement('a');
+  aTag.rel = 'noopener noreferrer';
+  aTag.target = targetnName;
+  aTag.href = url;
+  aTag.click();
+}
+
+function addLeadingZeros(number) {
+  var desiredLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '2';
+
+  if (typeof number !== 'undefined') {
+    number = "".concat(number);
+    desiredLength = Number(desiredLength);
+
+    if (number.length < desiredLength) {
+      for (var i = desiredLength - number.length; i > 0; i--) {
+        number = "0".concat(number);
+      }
+    }
+
+    return number;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.7.22",
+  "version": "1.7.24",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -72,7 +72,7 @@
     "@zohodesk-private/css-variable-migrator": "1.0.9",
     "@zohodesk-private/node-plugins": "1.1.13",
     "@zohodesk-private/react-prop-validator": "1.2.3",
-    "@zohodesk/a11y": "2.3.7",
+    "@zohodesk/a11y": "2.3.8",
     "@zohodesk/components": "1.4.12",
     "@zohodesk/hooks": "2.0.5",
     "@zohodesk/icons": "1.1.0",
@@ -96,7 +96,7 @@
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.5",
     "@zohodesk/utils": "1.3.14",
-    "@zohodesk/a11y": "2.3.7",
+    "@zohodesk/a11y": "2.3.8",
     "@zohodesk/layout": "3.1.0"
   }
 }