@zohodesk/dot 1.0.0-temp-217 → 1.0.0-temp-218

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/README.md +5 -0
  2. package/assets/Appearance/dark/mode/Dot_DarkMode.module.css +296 -296
  3. package/assets/Appearance/dark/themes/blue/blue_DotTheme_DarkTheme.module.css +13 -13
  4. package/assets/Appearance/dark/themes/green/green_DotTheme_DarkTheme.module.css +13 -13
  5. package/assets/Appearance/dark/themes/orange/orange_DotTheme_DarkTheme.module.css +13 -13
  6. package/assets/Appearance/dark/themes/red/red_DotTheme_DarkTheme.module.css +13 -13
  7. package/assets/Appearance/dark/themes/yellow/yellow_DotTheme_DarkTheme.module.css +13 -13
  8. package/assets/Appearance/light/mode/Dot_LightMode.module.css +288 -288
  9. package/assets/Appearance/light/themes/blue/blue_DotTheme_LightTheme.module.css +13 -13
  10. package/assets/Appearance/light/themes/green/green_DotTheme_LightTheme.module.css +13 -13
  11. package/assets/Appearance/light/themes/orange/orange_DotTheme_LightTheme.module.css +13 -13
  12. package/assets/Appearance/light/themes/red/red_DotTheme_LightTheme.module.css +13 -13
  13. package/assets/Appearance/light/themes/yellow/yellow_DotTheme_LightTheme.module.css +13 -13
  14. package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css +298 -298
  15. package/assets/Appearance/pureDark/themes/blue/blue_DotTheme_PureDarkTheme.module.css +13 -13
  16. package/assets/Appearance/pureDark/themes/green/green_DotTheme_PureDarkTheme.module.css +13 -13
  17. package/assets/Appearance/pureDark/themes/orange/orange_DotTheme_PureDarkTheme.module.css +13 -13
  18. package/assets/Appearance/pureDark/themes/red/red_DotTheme_PureDarkTheme.module.css +13 -13
  19. package/assets/Appearance/pureDark/themes/yellow/yellow_DotTheme_PureDarkTheme.module.css +13 -13
  20. package/es/AudioPlayer/__tests__/AudioPlayer.spec.js +186 -38
  21. package/es/AudioPlayer/__tests__/__snapshots__/AudioPlayer.spec.js.snap +1851 -1
  22. package/es/list/SecondaryText/AccountName.js +12 -2
  23. package/es/list/SecondaryText/ContactName.js +12 -2
  24. package/es/list/SecondaryText/DepartmentText.js +12 -2
  25. package/es/list/SecondaryText/Email.js +13 -3
  26. package/es/list/SecondaryText/PhoneNumber.js +13 -3
  27. package/es/list/SecondaryText/PriorityText.js +12 -2
  28. package/es/list/SecondaryText/SecondaryText.js +12 -2
  29. package/es/list/SecondaryText/StatusText.js +12 -2
  30. package/es/list/SecondaryText/TicketId.js +13 -2
  31. package/es/list/SecondaryText/Website.js +13 -3
  32. package/es/list/SecondaryText/props/defaultProps.js +18 -0
  33. package/es/list/SecondaryText/props/propTypes.js +20 -0
  34. package/es/list/Subject/Subject.js +13 -3
  35. package/es/list/Subject/props/defaultProps.js +3 -1
  36. package/es/list/Subject/props/propTypes.js +28 -1
  37. package/lib/AudioPlayer/__tests__/AudioPlayer.spec.js +192 -32
  38. package/lib/AudioPlayer/__tests__/__snapshots__/AudioPlayer.spec.js.snap +1851 -1
  39. package/lib/list/SecondaryText/AccountName.js +20 -2
  40. package/lib/list/SecondaryText/ContactName.js +20 -2
  41. package/lib/list/SecondaryText/DepartmentText.js +20 -2
  42. package/lib/list/SecondaryText/Email.js +21 -3
  43. package/lib/list/SecondaryText/PhoneNumber.js +21 -3
  44. package/lib/list/SecondaryText/PriorityText.js +20 -2
  45. package/lib/list/SecondaryText/SecondaryText.js +20 -2
  46. package/lib/list/SecondaryText/StatusText.js +20 -2
  47. package/lib/list/SecondaryText/TicketId.js +18 -2
  48. package/lib/list/SecondaryText/Website.js +21 -3
  49. package/lib/list/SecondaryText/props/defaultProps.js +18 -0
  50. package/lib/list/SecondaryText/props/propTypes.js +20 -0
  51. package/lib/list/Subject/Subject.js +21 -3
  52. package/lib/list/Subject/props/defaultProps.js +3 -1
  53. package/lib/list/Subject/props/propTypes.js +33 -1
  54. package/package.json +7 -7
package/assets/Appearance/pureDark/themes/blue/blue_DotTheme_PureDarkTheme.module.css CHANGED
@@ -1,25 +1,25 @@
1
1
  [data-mode='pureDark'][data-theme='blue'] {
2
2
  /* freezelayer */
3
- --zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
3
+ --zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
4
4
 
5
5
  /* common empty state */
6
- --zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdt_commonEmptyState_dark_link: hsla(212, calc(var(--zd-mc) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdt_commonEmptyState_dark_link_hover: hsla(221, calc(var(--zd-mc) * 100.00%), calc(57.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
6
+ --zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
+ --zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
+ --zdt_commonEmptyState_dark_link: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
+ --zdt_commonEmptyState_dark_link_hover: hsla(221, 100.00%, calc(57.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
10
 
11
11
  /* onboarding */
12
- --zdt_onboarding_primary_gradient_border: hsla(212, calc(var(--zd-mc) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
- --zdt_onboarding_secondary_gradient_border: hsla(220, calc(var(--zd-mc) * 72.24%), calc(51.96% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
- --zdt_onboarding_gradient_border: hsla(220, calc(var(--zd-mc) * 72.24%), calc(51.96% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
12
+ --zdt_onboarding_primary_gradient_border: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
+ --zdt_onboarding_secondary_gradient_border: hsla(220, 72.24%, calc(51.96% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
+ --zdt_onboarding_gradient_border: hsla(220, 72.24%, calc(51.96% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
15
  --zdt_onboarding_primary_button_shadow: rgba(10, 115, 235, 0.25);
16
- --zdt_onboarding_gradient_bg: hsla(213, calc(var(--zd-mc) * 19.57%), calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
16
+ --zdt_onboarding_gradient_bg: hsla(213, 19.57%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
17
17
 
18
18
  /* attachment viewer */
19
- --zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
- --zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-mc) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
- --zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
- --zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-mc) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
19
+ --zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
+ --zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
+ --zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
+ --zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
23
23
 
24
24
  /* loader */
25
25
  --zdt_loader_bg: rgb(71,157,255);
package/assets/Appearance/pureDark/themes/green/green_DotTheme_PureDarkTheme.module.css CHANGED
@@ -1,25 +1,25 @@
1
1
  [data-mode='pureDark'][data-theme='green'] {
2
2
  /* freezelayer */
3
- --zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
3
+ --zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
4
4
 
5
5
  /* common empty state */
6
- --zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdt_commonEmptyState_dark_link: hsla(133, calc(var(--zd-mc) * 40.00%), calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdt_commonEmptyState_dark_link_hover: hsla(128, calc(var(--zd-mc) * 79.71%), calc(27.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
6
+ --zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
+ --zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
+ --zdt_commonEmptyState_dark_link: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
+ --zdt_commonEmptyState_dark_link_hover: hsla(128, 79.71%, calc(27.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
10
 
11
11
  /* onboarding */
12
- --zdt_onboarding_primary_gradient_border: hsla(133, calc(var(--zd-mc) * 62.68%), calc(40.98% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
- --zdt_onboarding_secondary_gradient_border: hsla(133, calc(var(--zd-mc) * 62.68%), calc(40.98% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
- --zdt_onboarding_gradient_border: hsla(133, calc(var(--zd-mc) * 62.68%), calc(40.98% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
12
+ --zdt_onboarding_primary_gradient_border: hsla(133, 62.68%, calc(40.98% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
+ --zdt_onboarding_secondary_gradient_border: hsla(133, 62.68%, calc(40.98% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
+ --zdt_onboarding_gradient_border: hsla(133, 62.68%, calc(40.98% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
15
  --zdt_onboarding_primary_button_shadow: rgba(39, 170, 67, 0.25);
16
- --zdt_onboarding_gradient_bg: hsla(133, calc(var(--zd-mc) * 10.84%), calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
16
+ --zdt_onboarding_gradient_bg: hsla(133, 10.84%, calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
17
17
 
18
18
  /* attachment viewer */
19
- --zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
- --zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-mc) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
- --zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
- --zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-mc) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
19
+ --zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
+ --zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
+ --zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
+ --zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
23
23
 
24
24
  /* loader */
25
25
  --zdt_loader_bg: rgb(69,161,89);
package/assets/Appearance/pureDark/themes/orange/orange_DotTheme_PureDarkTheme.module.css CHANGED
@@ -1,25 +1,25 @@
1
1
  [data-mode='pureDark'][data-theme='orange'] {
2
2
  /* freezelayer */
3
- --zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
3
+ --zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
4
4
 
5
5
  /* common empty state */
6
- --zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdt_commonEmptyState_dark_link: hsla(26, calc(var(--zd-mc) * 100.00%), calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdt_commonEmptyState_dark_link_hover: hsla(29, calc(var(--zd-mc) * 100.00%), calc(32.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
6
+ --zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
+ --zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
+ --zdt_commonEmptyState_dark_link: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
+ --zdt_commonEmptyState_dark_link_hover: hsla(29, 100.00%, calc(32.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
10
 
11
11
  /* onboarding */
12
- --zdt_onboarding_primary_gradient_border: hsla(28, calc(var(--zd-mc) * 81.75%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
- --zdt_onboarding_secondary_gradient_border: hsla(28, calc(var(--zd-mc) * 81.75%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
- --zdt_onboarding_gradient_border: hsla(28, calc(var(--zd-mc) * 81.75%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
12
+ --zdt_onboarding_primary_gradient_border: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
+ --zdt_onboarding_secondary_gradient_border: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
+ --zdt_onboarding_gradient_border: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
15
  --zdt_onboarding_primary_button_shadow: rgba(229, 119, 23, 0.25);
16
- --zdt_onboarding_gradient_bg: hsla(26, calc(var(--zd-mc) * 19.51%), calc(16.08% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
16
+ --zdt_onboarding_gradient_bg: hsla(26, 19.51%, calc(16.08% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
17
17
 
18
18
  /* attachment viewer */
19
- --zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
- --zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-mc) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
- --zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
- --zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-mc) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
19
+ --zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
+ --zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
+ --zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
+ --zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
23
23
 
24
24
  /* loader */
25
25
  --zdt_loader_bg: rgb(255,128,31);
package/assets/Appearance/pureDark/themes/red/red_DotTheme_PureDarkTheme.module.css CHANGED
@@ -1,25 +1,25 @@
1
1
  [data-mode='pureDark'][data-theme='red'] {
2
2
  /* freezelayer */
3
- --zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
3
+ --zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
4
4
 
5
5
  /* common empty state */
6
- --zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdt_commonEmptyState_dark_link: hsla(0, calc(var(--zd-mc) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdt_commonEmptyState_dark_link_hover: hsla(0, calc(var(--zd-mc) * 81.62%), calc(36.27% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
6
+ --zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
+ --zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
+ --zdt_commonEmptyState_dark_link: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
+ --zdt_commonEmptyState_dark_link_hover: hsla(0, 81.62%, calc(36.27% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
10
 
11
11
  /* onboarding */
12
- --zdt_onboarding_primary_gradient_border: hsla(0, calc(var(--zd-mc) * 73.81%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
- --zdt_onboarding_secondary_gradient_border: hsla(0, calc(var(--zd-mc) * 73.81%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
- --zdt_onboarding_gradient_border: hsla(0, calc(var(--zd-mc) * 73.81%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
12
+ --zdt_onboarding_primary_gradient_border: hsla(0, 73.81%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
+ --zdt_onboarding_secondary_gradient_border: hsla(0, 73.81%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
+ --zdt_onboarding_gradient_border: hsla(0, 73.81%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
15
  --zdt_onboarding_primary_button_shadow: rgba(219, 33, 33, 0.25);
16
- --zdt_onboarding_gradient_bg: hsla(0, calc(var(--zd-mc) * 13.25%), calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
16
+ --zdt_onboarding_gradient_bg: hsla(0, 13.25%, calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
17
17
 
18
18
  /* attachment viewer */
19
- --zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
- --zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-mc) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
- --zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
- --zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-mc) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
19
+ --zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
+ --zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
+ --zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
+ --zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
23
23
 
24
24
  /* loader */
25
25
  --zdt_loader_bg: rgb(233,79,79);
package/assets/Appearance/pureDark/themes/yellow/yellow_DotTheme_PureDarkTheme.module.css CHANGED
@@ -1,25 +1,25 @@
1
1
  [data-mode='pureDark'][data-theme='yellow'] {
2
2
  /* freezelayer */
3
- --zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
3
+ --zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
4
4
 
5
5
  /* common empty state */
6
- --zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdt_commonEmptyState_dark_link: hsla(37, calc(var(--zd-mc) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdt_commonEmptyState_dark_link_hover: hsla(39, calc(var(--zd-mc) * 90.18%), calc(31.96% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
6
+ --zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
+ --zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
+ --zdt_commonEmptyState_dark_link: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
+ --zdt_commonEmptyState_dark_link_hover: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
10
 
11
11
  /* onboarding */
12
- --zdt_onboarding_primary_gradient_border: hsla(43, calc(var(--zd-mc) * 90.39%), calc(44.90% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
- --zdt_onboarding_secondary_gradient_border: hsla(43, calc(var(--zd-mc) * 90.39%), calc(44.90% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
- --zdt_onboarding_gradient_border: hsla(43, calc(var(--zd-mc) * 90.39%), calc(44.90% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
12
+ --zdt_onboarding_primary_gradient_border: hsla(43, 90.39%, calc(44.90% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
+ --zdt_onboarding_secondary_gradient_border: hsla(43, 90.39%, calc(44.90% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
+ --zdt_onboarding_gradient_border: hsla(43, 90.39%, calc(44.90% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
15
  --zdt_onboarding_primary_button_shadow: rgba(218, 160, 11, 0.25);
16
- --zdt_onboarding_gradient_bg: hsla(35, calc(var(--zd-mc) * 15.00%), calc(15.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
16
+ --zdt_onboarding_gradient_bg: hsla(35, 15.00%, calc(15.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
17
17
 
18
18
  /* attachment viewer */
19
- --zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
- --zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-mc) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
- --zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
- --zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-mc) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
19
+ --zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
+ --zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
+ --zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
+ --zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
23
23
 
24
24
  /* loader */
25
25
  --zdt_loader_bg: rgb(215,152,53);
package/es/AudioPlayer/__tests__/AudioPlayer.spec.js CHANGED
@@ -1,44 +1,192 @@
1
1
  import React from 'react';
2
- import { render } from '@testing-library/react';
3
- import AudioPlayer from "../AudioPlayer"; // import TestUtils from 'react-dom/test-utils';
4
-
5
- const defaultProps = {
6
- togglePlayer: jest.fn(),
7
- downloadFile: jest.fn(),
2
+ import { render, fireEvent, screen } from '@testing-library/react';
3
+ import AudioPlayer from "../AudioPlayer";
4
+ const DEFAULT_PROPS = {
8
5
  minute: '02',
9
6
  second: '03',
10
7
  durationInSec: '203',
11
- src: "https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
8
+ src: 'https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3'
12
9
  };
13
- describe('AudioPlayer Test Cases', () => {
14
- // const { props,renderedDOM } = setup(
15
- // AudioPlayer,Object.assign({},defaultProps));
16
- test('rendering the defult props', () => {
17
- const {
18
- asFragment
19
- } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...defaultProps
20
- }));
21
- expect(asFragment()).toMatchSnapshot();
22
- }); // it('should render component', () => {
23
- // let component = TestUtils.scryRenderedComponentsWithTestid(
24
- // renderedDOM,
25
- // 'AudioPlayer');
26
- // expect(component.length).toBe(1);
27
- // })
28
- // it('should close player onclicking close',()=>{
29
- // let component = TestUtils.scryRenderedComponentsWithTestid(
30
- // renderedDOM,
31
- // 'audioPlayerClose'
32
- // )[0];
33
- // TestUtils.Simulate.click(component);
34
- // expect(props.togglePlayer).toHaveBeenCalled();
35
- // })
36
- // it('should download audio onclicking download',()=>{
37
- // let component = TestUtils.scryRenderedComponentsWithTestid(
38
- // renderedDOM,
39
- // 'audioDownload'
40
- // )[0];
41
- // TestUtils.Simulate.click(component);
42
- // expect(props.downloadFile).toHaveBeenCalled();
43
- // })
10
+ describe('AudioPlayer - Snapshot', () => {
11
+ test('Render with default props', () => {
12
+ const {
13
+ asFragment
14
+ } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS
15
+ }));
16
+ expect(asFragment()).toMatchSnapshot();
17
+ });
18
+ test('Render with customId and testId', () => {
19
+ const {
20
+ asFragment
21
+ } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
22
+ customId: "audio-player-customId",
23
+ testId: "audio-player-testId"
24
+ }));
25
+ expect(asFragment()).toMatchSnapshot();
26
+ });
27
+ test('Render with tag attributes', () => {
28
+ const {
29
+ asFragment
30
+ } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
31
+ tagAttributes: {
32
+ 'data-custom-attr': 'true'
33
+ }
34
+ }));
35
+ expect(asFragment()).toMatchSnapshot();
36
+ });
37
+ test('Render with a11y attributes', () => {
38
+ const {
39
+ asFragment
40
+ } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
41
+ a11yAttributes: {
42
+ role: 'region'
43
+ }
44
+ }));
45
+ expect(asFragment()).toMatchSnapshot();
46
+ });
47
+ test('Render with customClass', () => {
48
+ const {
49
+ asFragment
50
+ } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
51
+ customClass: "my-audio-player"
52
+ }));
53
+ expect(asFragment()).toMatchSnapshot();
54
+ });
55
+ test('Render with i18nKeys', () => {
56
+ const {
57
+ asFragment
58
+ } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
59
+ i18nKeys: {
60
+ play: 'Play',
61
+ pause: 'Pause'
62
+ }
63
+ }));
64
+ expect(asFragment()).toMatchSnapshot();
65
+ });
66
+ test('Render with needClose=false', () => {
67
+ const {
68
+ asFragment
69
+ } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
70
+ needClose: false
71
+ }));
72
+ expect(asFragment()).toMatchSnapshot();
73
+ });
74
+ test('Render with needDownload=false', () => {
75
+ const {
76
+ asFragment
77
+ } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
78
+ needDownload: false
79
+ }));
80
+ expect(asFragment()).toMatchSnapshot();
81
+ });
82
+ test('Render with needMuteIcon=true', () => {
83
+ const {
84
+ asFragment
85
+ } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
86
+ needMuteIcon: true
87
+ }));
88
+ expect(asFragment()).toMatchSnapshot();
89
+ });
90
+ test('Render with isPlay=true', () => {
91
+ const {
92
+ asFragment
93
+ } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
94
+ isPlay: true
95
+ }));
96
+ expect(asFragment()).toMatchSnapshot();
97
+ });
98
+ test('Render with timerFormat=ss:mm', () => {
99
+ const {
100
+ asFragment
101
+ } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
102
+ timerFormat: "ss:mm"
103
+ }));
104
+ expect(asFragment()).toMatchSnapshot();
105
+ });
106
+ test('Render with forwardStepInSec=10', () => {
107
+ const {
108
+ asFragment
109
+ } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
110
+ forwardStepInSec: 10
111
+ }));
112
+ expect(asFragment()).toMatchSnapshot();
113
+ });
114
+ test('Render with backwardStepInSec=10', () => {
115
+ const {
116
+ asFragment
117
+ } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
118
+ backwardStepInSec: 10
119
+ }));
120
+ expect(asFragment()).toMatchSnapshot();
121
+ });
122
+ test('Render with range=50', () => {
123
+ const {
124
+ asFragment
125
+ } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
126
+ range: 50
127
+ }));
128
+ expect(asFragment()).toMatchSnapshot();
129
+ });
130
+ });
131
+ describe('AudioPlayer - Unit', () => {
132
+ test('Should call togglePlayer on close button click', () => {
133
+ const togglePlayer = jest.fn();
134
+ render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
135
+ togglePlayer: togglePlayer
136
+ }));
137
+ const closeBtn = screen.queryByTestId('audioPlayerClose');
138
+
139
+ if (closeBtn) {
140
+ fireEvent.click(closeBtn);
141
+ expect(togglePlayer).toHaveBeenCalled();
142
+ }
143
+ });
144
+ test('Should call downloadFile on download button click', () => {
145
+ const downloadFile = jest.fn();
146
+ render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
147
+ downloadFile: downloadFile
148
+ }));
149
+ const downloadBtn = screen.queryByTestId('audioDownload');
150
+
151
+ if (downloadBtn) {
152
+ fireEvent.click(downloadBtn);
153
+ expect(downloadFile).toHaveBeenCalled();
154
+ }
155
+ });
156
+ test('Should toggle play/pause on play button click', () => {
157
+ const togglePlayer = jest.fn();
158
+ render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
159
+ togglePlayer: togglePlayer
160
+ }));
161
+ const playBtn = screen.queryByTestId('audioPlayPause');
162
+
163
+ if (playBtn) {
164
+ fireEvent.click(playBtn);
165
+ expect(togglePlayer).toHaveBeenCalled();
166
+ }
167
+ });
168
+ test('Should mute/unmute on mute button click', () => {
169
+ render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
170
+ needMuteIcon: true
171
+ }));
172
+ const muteBtn = screen.queryByTestId('audioMute');
173
+
174
+ if (muteBtn) {
175
+ fireEvent.click(muteBtn); // Add assertion if mute state is exposed via prop or DOM
176
+ }
177
+ });
178
+ test('Should change range on slider input', () => {
179
+ render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
180
+ range: 0
181
+ }));
182
+ const rangeInput = screen.queryByTestId('audioRange');
183
+
184
+ if (rangeInput) {
185
+ fireEvent.change(rangeInput, {
186
+ target: {
187
+ value: 50
188
+ }
189
+ }); // Add assertion if range change is exposed via prop or DOM
190
+ }
191
+ });
44
192
  });