@zohodesk/dot 1.7.19 → 1.7.20-exp.2

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-weight: var(--zd-fw-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,210 @@
+"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 }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var DEFAULT_PROPS = {
+  minute: '02',
+  second: '03',
+  durationInSec: '203',
+  src: 'https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3'
+};
+describe('AudioPlayer - Snapshot', function () {
+  test('Render with default props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AudioPlayer["default"], DEFAULT_PROPS)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customId and testId', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AudioPlayer["default"], _extends({}, DEFAULT_PROPS, {
+      customId: "audio-player-customId",
+      testId: "audio-player-testId"
+    }))),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with tag attributes', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AudioPlayer["default"], _extends({}, DEFAULT_PROPS, {
+      tagAttributes: {
+        'data-custom-attr': 'true'
+      }
+    }))),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y attributes', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AudioPlayer["default"], _extends({}, DEFAULT_PROPS, {
+      a11yAttributes: {
+        role: 'region'
+      }
+    }))),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AudioPlayer["default"], _extends({}, DEFAULT_PROPS, {
+      customClass: "my-audio-player"
+    }))),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with i18nKeys', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AudioPlayer["default"], _extends({}, DEFAULT_PROPS, {
+      i18nKeys: {
+        play: 'Play',
+        pause: 'Pause'
+      }
+    }))),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needClose=false', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AudioPlayer["default"], _extends({}, DEFAULT_PROPS, {
+      needClose: false
+    }))),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needDownload=false', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AudioPlayer["default"], _extends({}, DEFAULT_PROPS, {
+      needDownload: false
+    }))),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needMuteIcon=true', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AudioPlayer["default"], _extends({}, DEFAULT_PROPS, {
+      needMuteIcon: true
+    }))),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPlay=true', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AudioPlayer["default"], _extends({}, DEFAULT_PROPS, {
+      isPlay: true
+    }))),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with timerFormat=ss:mm', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AudioPlayer["default"], _extends({}, DEFAULT_PROPS, {
+      timerFormat: "ss:mm"
+    }))),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with forwardStepInSec=10', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AudioPlayer["default"], _extends({}, DEFAULT_PROPS, {
+      forwardStepInSec: 10
+    }))),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with backwardStepInSec=10', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AudioPlayer["default"], _extends({}, DEFAULT_PROPS, {
+      backwardStepInSec: 10
+    }))),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with range=50', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AudioPlayer["default"], _extends({}, DEFAULT_PROPS, {
+      range: 50
+    }))),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
+describe('AudioPlayer - Unit', function () {
+  test('Should call togglePlayer on close button click', function () {
+    var togglePlayer = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AudioPlayer["default"], _extends({}, DEFAULT_PROPS, {
+      togglePlayer: togglePlayer
+    })));
+
+    var closeBtn = _react2.screen.queryByTestId('audioPlayerClose');
+
+    if (closeBtn) {
+      _react2.fireEvent.click(closeBtn);
+
+      expect(togglePlayer).toHaveBeenCalled();
+    }
+  });
+  test('Should call downloadFile on download button click', function () {
+    var downloadFile = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AudioPlayer["default"], _extends({}, DEFAULT_PROPS, {
+      downloadFile: downloadFile
+    })));
+
+    var downloadBtn = _react2.screen.queryByTestId('audioDownload');
+
+    if (downloadBtn) {
+      _react2.fireEvent.click(downloadBtn);
+
+      expect(downloadFile).toHaveBeenCalled();
+    }
+  });
+  test('Should toggle play/pause on play button click', function () {
+    var togglePlayer = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AudioPlayer["default"], _extends({}, DEFAULT_PROPS, {
+      togglePlayer: togglePlayer
+    })));
+
+    var playBtn = _react2.screen.queryByTestId('audioPlayPause');
+
+    if (playBtn) {
+      _react2.fireEvent.click(playBtn);
+
+      expect(togglePlayer).toHaveBeenCalled();
+    }
+  });
+  test('Should mute/unmute on mute button click', function () {
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AudioPlayer["default"], _extends({}, DEFAULT_PROPS, {
+      needMuteIcon: true
+    })));
+
+    var muteBtn = _react2.screen.queryByTestId('audioMute');
+
+    if (muteBtn) {
+      _react2.fireEvent.click(muteBtn); // Add assertion if mute state is exposed via prop or DOM
+
+    }
+  });
+  test('Should change range on slider input', function () {
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AudioPlayer["default"], _extends({}, DEFAULT_PROPS, {
+      range: 0
+    })));
+
+    var rangeInput = _react2.screen.queryByTestId('audioRange');
+
+    if (rangeInput) {
+      _react2.fireEvent.change(rangeInput, {
+        target: {
+          value: 50
+        }
+      }); // Add assertion if range change is exposed via prop or DOM
+
+    }
+  });
+});