@zohodesk/dot 1.7.23 → 1.7.25

package/README.md

@@ -2,9 +2,19 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.7.25
+
+- Added rtl:as:property comment for linear-gradient usages to ensure support in PostCSS
+
+
+# 1.7.24
+
+- **Timer**
+  - timer_default_text css variable added.
+
 # 1.7.23
 
-- introduced AudioPlayer & Timer comopnent
+- introduced AudioPlayer & Timer comopnent.
 
 
 # 1.7.22

package/assets/Appearance/dark/mode/Dot_DarkMode.module.css

@@ -41,6 +41,9 @@
 	--zdt_audioplayer_pauseicon_text: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_audioplayer_loading_bg: var(--zdtm_cta_primary_bg_default_inverse_lower);
 	
+	/* timer */
+	--zdt_timer_default_text: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
 	/* avatar close */
 	--zdt_avatarclose_pop_bg: hsla(0, 0.00%, calc(0.00% + var(--zdc_default)), calc( 0.75 + var(--zdc_alpha_high)));
 	--zdt_avatarclose_pop_text: hsla(30, 1.64%, calc(76.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -228,7 +231,7 @@
 	--zdt_gridstencils_default_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_gridstencils_after_bg: hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_gridstencils_listbar_bg: hsla(217, 23.23%, calc(19.41% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_gridstencils_listbar_gradient_bg: linear-gradient(to left, #383f55 0, #414961 20%, #414961 40%, #383f55 100%);
+	--zdt_gridstencils_listbar_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0, #414961 20%, #414961 40%, #383f55 100%);
 	
 	/* icons */
 	--zdt_icons_default: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/light/mode/Dot_LightMode.module.css

@@ -41,6 +41,9 @@
 	--zdt_audioplayer_pauseicon_text: hsla(217, 25.93%, calc(15.88% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_audioplayer_loading_bg: var(--zdtm_cta_primary_bg_default_inverse_lower);
 	
+	/* timer */
+	--zdt_timer_default_text: hsla(217, 25.93%, calc(15.88% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
 	/* avatar close */
 	--zdt_avatarclose_pop_bg: hsla(0, 0.00%, calc(0.00% + var(--zdc_default)), calc( 0.75 + var(--zdc_alpha_high)));
 	--zdt_avatarclose_pop_text: hsla(30, 1.64%, calc(76.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -228,7 +231,7 @@
 	--zdt_gridstencils_default_border: hsla(0, 0.00%, calc(94.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_gridstencils_after_bg: hsla(0, 0.00%, calc(92.16% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_gridstencils_listbar_bg: hsla(210, 12.50%, calc(96.86% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_gridstencils_listbar_gradient_bg: linear-gradient(to left, var(--zd_smoke78) 0, #edeef1 20%, var(--zd_smoke78) 40%, var(--zd_smoke78) 100%);
+	--zdt_gridstencils_listbar_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, var(--zd_smoke78) 0, #edeef1 20%, var(--zd_smoke78) 40%, var(--zd_smoke78) 100%);
 	
 	/* icons */
 	--zdt_icons_default: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css

@@ -41,6 +41,9 @@
 	--zdt_audioplayer_pauseicon_text: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_audioplayer_loading_bg: var(--zdtm_cta_primary_bg_default_inverse_lower);
 	
+	/* timer */
+	--zdt_timer_default_text: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
 	/* avatar close */
 	--zdt_avatarclose_pop_bg: hsla(0, 0.00%, calc(0.00% + var(--zdc_default)), calc( 0.75 + var(--zdc_alpha_high)));
 	--zdt_avatarclose_pop_text: hsla(30, 1.64%, calc(76.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -228,7 +231,7 @@
 	--zdt_gridstencils_default_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_gridstencils_after_bg: hsla(0, 0.00%, calc(16.86% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_gridstencils_listbar_bg: hsla(0, 0.00%, calc(16.86% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_gridstencils_listbar_gradient_bg: linear-gradient(to left, #212121 0, #262626 20%, #262626 40%, #212121 100%);
+	--zdt_gridstencils_listbar_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0, #262626 20%, #262626 40%, #212121 100%);
 	
 	/* icons */
 	--zdt_icons_default: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/es/AudioPlayer/__tests__/AudioPlayer.spec.js

@@ -1,44 +1,192 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import AudioPlayer from "../AudioPlayer"; // import TestUtils from 'react-dom/test-utils';
-
-const defaultProps = {
-  togglePlayer: jest.fn(),
-  downloadFile: jest.fn(),
+import { render, fireEvent, screen } from '@testing-library/react';
+import AudioPlayer from "../AudioPlayer";
+const DEFAULT_PROPS = {
   minute: '02',
   second: '03',
   durationInSec: '203',
-  src: "https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
+  src: 'https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3'
 };
-describe('AudioPlayer Test Cases', () => {
-  // const { props,renderedDOM } = setup(
-  //     AudioPlayer,Object.assign({},defaultProps));
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...defaultProps
-    }));
-    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();
-  // })
+describe('AudioPlayer - Snapshot', () => {
+  test('Render with default props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customId and testId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
+      customId: "audio-player-customId",
+      testId: "audio-player-testId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with tag attributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
+      tagAttributes: {
+        'data-custom-attr': 'true'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y attributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
+      a11yAttributes: {
+        role: 'region'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
+      customClass: "my-audio-player"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with i18nKeys', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
+      i18nKeys: {
+        play: 'Play',
+        pause: 'Pause'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needClose=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
+      needClose: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needDownload=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
+      needDownload: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needMuteIcon=true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
+      needMuteIcon: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPlay=true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
+      isPlay: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with timerFormat=ss:mm', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
+      timerFormat: "ss:mm"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with forwardStepInSec=10', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
+      forwardStepInSec: 10
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with backwardStepInSec=10', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
+      backwardStepInSec: 10
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with range=50', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
+      range: 50
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
+describe('AudioPlayer - Unit', () => {
+  test('Should call togglePlayer on close button click', () => {
+    const togglePlayer = jest.fn();
+    render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
+      togglePlayer: togglePlayer
+    }));
+    const closeBtn = screen.queryByTestId('audioPlayerClose');
+
+    if (closeBtn) {
+      fireEvent.click(closeBtn);
+      expect(togglePlayer).toHaveBeenCalled();
+    }
+  });
+  test('Should call downloadFile on download button click', () => {
+    const downloadFile = jest.fn();
+    render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
+      downloadFile: downloadFile
+    }));
+    const downloadBtn = screen.queryByTestId('audioDownload');
+
+    if (downloadBtn) {
+      fireEvent.click(downloadBtn);
+      expect(downloadFile).toHaveBeenCalled();
+    }
+  });
+  test('Should toggle play/pause on play button click', () => {
+    const togglePlayer = jest.fn();
+    render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
+      togglePlayer: togglePlayer
+    }));
+    const playBtn = screen.queryByTestId('audioPlayPause');
+
+    if (playBtn) {
+      fireEvent.click(playBtn);
+      expect(togglePlayer).toHaveBeenCalled();
+    }
+  });
+  test('Should mute/unmute on mute button click', () => {
+    render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
+      needMuteIcon: true
+    }));
+    const muteBtn = screen.queryByTestId('audioMute');
+
+    if (muteBtn) {
+      fireEvent.click(muteBtn); // Add assertion if mute state is exposed via prop or DOM
+    }
+  });
+  test('Should change range on slider input', () => {
+    render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
+      range: 0
+    }));
+    const rangeInput = screen.queryByTestId('audioRange');
+
+    if (rangeInput) {
+      fireEvent.change(rangeInput, {
+        target: {
+          value: 50
+        }
+      }); // Add assertion if range change is exposed via prop or DOM
+    }
+  });
 });