@zohodesk/dot 1.0.0-temp-223.6 → 1.0.0-temp-218.3

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 (82) hide show
  1. package/README.md +0 -6
  2. package/assets/Appearance/dark/mode/Dot_DarkMode.module.css +315 -315
  3. package/assets/Appearance/dark/themes/blue/blue_DotTheme_DarkTheme.module.css +15 -15
  4. package/assets/Appearance/dark/themes/green/green_DotTheme_DarkTheme.module.css +15 -15
  5. package/assets/Appearance/dark/themes/orange/orange_DotTheme_DarkTheme.module.css +15 -15
  6. package/assets/Appearance/dark/themes/red/red_DotTheme_DarkTheme.module.css +15 -15
  7. package/assets/Appearance/dark/themes/yellow/yellow_DotTheme_DarkTheme.module.css +15 -15
  8. package/assets/Appearance/light/mode/Dot_LightMode.module.css +307 -307
  9. package/assets/Appearance/light/themes/blue/blue_DotTheme_LightTheme.module.css +15 -15
  10. package/assets/Appearance/light/themes/green/green_DotTheme_LightTheme.module.css +15 -15
  11. package/assets/Appearance/light/themes/orange/orange_DotTheme_LightTheme.module.css +15 -15
  12. package/assets/Appearance/light/themes/red/red_DotTheme_LightTheme.module.css +15 -15
  13. package/assets/Appearance/light/themes/yellow/yellow_DotTheme_LightTheme.module.css +15 -15
  14. package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css +317 -317
  15. package/assets/Appearance/pureDark/themes/blue/blue_DotTheme_PureDarkTheme.module.css +15 -15
  16. package/assets/Appearance/pureDark/themes/green/green_DotTheme_PureDarkTheme.module.css +15 -15
  17. package/assets/Appearance/pureDark/themes/orange/orange_DotTheme_PureDarkTheme.module.css +15 -15
  18. package/assets/Appearance/pureDark/themes/red/red_DotTheme_PureDarkTheme.module.css +15 -15
  19. package/assets/Appearance/pureDark/themes/yellow/yellow_DotTheme_PureDarkTheme.module.css +15 -15
  20. package/es/common/dot_boxShadow.module.css +2 -1
  21. package/es/form/fields/TextEditor/TextEditor.js +2 -6
  22. package/es/form/fields/TextEditor/props/defaultProps.js +1 -2
  23. package/es/form/fields/TextEditor/props/propTypes.js +1 -2
  24. package/es/list/DepartmentDropDown/__tests__/__snapshots__/DepartmentDropDown.spec.js.snap +1 -1
  25. package/es/list/SecondaryText/AccountName.js +23 -8
  26. package/es/list/SecondaryText/ContactName.js +18 -6
  27. package/es/list/SecondaryText/DepartmentText.js +13 -6
  28. package/es/list/SecondaryText/Email.js +19 -7
  29. package/es/list/SecondaryText/PhoneNumber.js +19 -7
  30. package/es/list/SecondaryText/PriorityText.js +13 -6
  31. package/es/list/SecondaryText/SecondaryText.js +17 -8
  32. package/es/list/SecondaryText/SecondaryText.module.css +40 -24
  33. package/es/list/SecondaryText/StatusText.js +13 -6
  34. package/es/list/SecondaryText/TicketId.js +8 -2
  35. package/es/list/SecondaryText/Website.js +16 -5
  36. package/es/list/SecondaryText/__tests__/__snapshots__/AccountName.spec.js.snap +1 -1
  37. package/es/list/SecondaryText/__tests__/__snapshots__/ContactName.spec.js.snap +1 -1
  38. package/es/list/SecondaryText/__tests__/__snapshots__/DepartmentText.spec.js.snap +1 -1
  39. package/es/list/SecondaryText/__tests__/__snapshots__/Email.spec.js.snap +1 -1
  40. package/es/list/SecondaryText/__tests__/__snapshots__/PhoneNumber.spec.js.snap +1 -1
  41. package/es/list/SecondaryText/__tests__/__snapshots__/PriorityText.spec.js.snap +1 -1
  42. package/es/list/SecondaryText/__tests__/__snapshots__/SecondaryText.spec.js.snap +1 -1
  43. package/es/list/SecondaryText/__tests__/__snapshots__/StatusText.spec.js.snap +1 -1
  44. package/es/list/SecondaryText/__tests__/__snapshots__/Website.spec.js.snap +6 -2
  45. package/es/list/SecondaryText/props/defaultProps.js +18 -0
  46. package/es/list/SecondaryText/props/propTypes.js +21 -0
  47. package/es/list/Subject/Subject.js +28 -12
  48. package/es/list/Subject/__tests__/__snapshots__/Subject.spec.js.snap +14 -14
  49. package/es/list/Subject/props/defaultProps.js +3 -1
  50. package/es/list/Subject/props/propTypes.js +5 -1
  51. package/lib/common/dot_boxShadow.module.css +2 -1
  52. package/lib/form/fields/TextEditor/TextEditor.js +2 -5
  53. package/lib/form/fields/TextEditor/props/defaultProps.js +1 -2
  54. package/lib/form/fields/TextEditor/props/propTypes.js +1 -2
  55. package/lib/list/DepartmentDropDown/__tests__/__snapshots__/DepartmentDropDown.spec.js.snap +1 -1
  56. package/lib/list/SecondaryText/AccountName.js +27 -8
  57. package/lib/list/SecondaryText/ContactName.js +21 -6
  58. package/lib/list/SecondaryText/DepartmentText.js +15 -6
  59. package/lib/list/SecondaryText/Email.js +22 -7
  60. package/lib/list/SecondaryText/PhoneNumber.js +22 -7
  61. package/lib/list/SecondaryText/PriorityText.js +15 -6
  62. package/lib/list/SecondaryText/SecondaryText.js +26 -8
  63. package/lib/list/SecondaryText/SecondaryText.module.css +40 -24
  64. package/lib/list/SecondaryText/StatusText.js +15 -6
  65. package/lib/list/SecondaryText/TicketId.js +10 -2
  66. package/lib/list/SecondaryText/Website.js +18 -5
  67. package/lib/list/SecondaryText/__tests__/__snapshots__/AccountName.spec.js.snap +1 -1
  68. package/lib/list/SecondaryText/__tests__/__snapshots__/ContactName.spec.js.snap +1 -1
  69. package/lib/list/SecondaryText/__tests__/__snapshots__/DepartmentText.spec.js.snap +1 -1
  70. package/lib/list/SecondaryText/__tests__/__snapshots__/Email.spec.js.snap +1 -1
  71. package/lib/list/SecondaryText/__tests__/__snapshots__/PhoneNumber.spec.js.snap +1 -1
  72. package/lib/list/SecondaryText/__tests__/__snapshots__/PriorityText.spec.js.snap +1 -1
  73. package/lib/list/SecondaryText/__tests__/__snapshots__/SecondaryText.spec.js.snap +1 -1
  74. package/lib/list/SecondaryText/__tests__/__snapshots__/StatusText.spec.js.snap +1 -1
  75. package/lib/list/SecondaryText/__tests__/__snapshots__/Website.spec.js.snap +6 -2
  76. package/lib/list/SecondaryText/props/defaultProps.js +18 -0
  77. package/lib/list/SecondaryText/props/propTypes.js +22 -0
  78. package/lib/list/Subject/Subject.js +40 -13
  79. package/lib/list/Subject/__tests__/__snapshots__/Subject.spec.js.snap +14 -14
  80. package/lib/list/Subject/props/defaultProps.js +3 -1
  81. package/lib/list/Subject/props/propTypes.js +6 -1
  82. package/package.json +8 -8
@@ -1,26 +1,26 @@
1
1
  [data-mode='pureDark'][data-theme='blue'] {
2
2
  /* freezelayer */
3
- --zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 72.24%), calc(51.96% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
- --zdt_onboarding_primary_button_shadow: hsla(212, calc(var(--zd-saturation, 1) * 91.84%), 48.04%, 0.25);
16
- --zdt_onboarding_gradient_bg: hsla(213, calc(var(--zd-saturation, 1) * 19.57%), calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + 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
+ --zdt_onboarding_primary_button_shadow: rgba(10, 115, 235, 0.25);
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-saturation, 1) * 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-saturation, 1) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
- --zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-saturation, 1) * 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-saturation, 1) * 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
- --zdt_loader_bg: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), 63.92%, 1);
25
+ --zdt_loader_bg: rgb(71,157,255);
26
26
  }
@@ -1,26 +1,26 @@
1
1
  [data-mode='pureDark'][data-theme='green'] {
2
2
  /* freezelayer */
3
- --zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 62.68%), calc(40.98% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
- --zdt_onboarding_primary_button_shadow: hsla(133, calc(var(--zd-saturation, 1) * 62.68%), 40.98%, 0.25);
16
- --zdt_onboarding_gradient_bg: hsla(133, calc(var(--zd-saturation, 1) * 10.84%), calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + 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
+ --zdt_onboarding_primary_button_shadow: rgba(39, 170, 67, 0.25);
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-saturation, 1) * 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-saturation, 1) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
- --zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-saturation, 1) * 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-saturation, 1) * 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
- --zdt_loader_bg: hsla(133, calc(var(--zd-saturation, 1) * 40.00%), 45.10%, 1);
25
+ --zdt_loader_bg: rgb(69,161,89);
26
26
  }
@@ -1,26 +1,26 @@
1
1
  [data-mode='pureDark'][data-theme='orange'] {
2
2
  /* freezelayer */
3
- --zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 81.75%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
- --zdt_onboarding_primary_button_shadow: hsla(28, calc(var(--zd-saturation, 1) * 81.75%), 49.41%, 0.25);
16
- --zdt_onboarding_gradient_bg: hsla(26, calc(var(--zd-saturation, 1) * 19.51%), calc(16.08% + var(--zdc_default_inverse_lower)), calc(1 + 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
+ --zdt_onboarding_primary_button_shadow: rgba(229, 119, 23, 0.25);
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-saturation, 1) * 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-saturation, 1) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
- --zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-saturation, 1) * 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-saturation, 1) * 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
- --zdt_loader_bg: hsla(26, calc(var(--zd-saturation, 1) * 100.00%), 56.08%, 1);
25
+ --zdt_loader_bg: rgb(255,128,31);
26
26
  }
@@ -1,26 +1,26 @@
1
1
  [data-mode='pureDark'][data-theme='red'] {
2
2
  /* freezelayer */
3
- --zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 73.81%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
- --zdt_onboarding_primary_button_shadow: hsla(0, calc(var(--zd-saturation, 1) * 73.81%), 49.41%, 0.25);
16
- --zdt_onboarding_gradient_bg: hsla(0, calc(var(--zd-saturation, 1) * 13.25%), calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + 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
+ --zdt_onboarding_primary_button_shadow: rgba(219, 33, 33, 0.25);
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-saturation, 1) * 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-saturation, 1) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
- --zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-saturation, 1) * 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-saturation, 1) * 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
- --zdt_loader_bg: hsla(0, calc(var(--zd-saturation, 1) * 77.78%), 61.18%, 1);
25
+ --zdt_loader_bg: rgb(233,79,79);
26
26
  }
@@ -1,26 +1,26 @@
1
1
  [data-mode='pureDark'][data-theme='yellow'] {
2
2
  /* freezelayer */
3
- --zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 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-saturation, 1) * 90.39%), calc(44.90% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
- --zdt_onboarding_primary_button_shadow: hsla(43, calc(var(--zd-saturation, 1) * 90.39%), 44.90%, 0.25);
16
- --zdt_onboarding_gradient_bg: hsla(35, calc(var(--zd-saturation, 1) * 15.00%), calc(15.69% + var(--zdc_default_inverse_lower)), calc(1 + 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
+ --zdt_onboarding_primary_button_shadow: rgba(218, 160, 11, 0.25);
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-saturation, 1) * 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-saturation, 1) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
- --zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-saturation, 1) * 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-saturation, 1) * 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
- --zdt_loader_bg: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), 52.55%, 1);
25
+ --zdt_loader_bg: rgb(215,152,53);
26
26
  }
@@ -37,7 +37,8 @@
37
37
  --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
38
38
 
39
39
  /* onboarding */
40
- --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px var(--zd-shadow-saturation, rgba(0, 0, 0, 0.09)));
40
+ --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px rgba(0, 0, 0, 0.09));
41
41
  --zd_bs_onboarding_gradient: var(--zd_bs_contrast_outline, 0px 20px 30px 0px var(--zdt_onboarding_bg_box_shadow));
42
42
  --zd_bs_onboarding_primary_button: var(--zd_bs_contrast_outline, 0px 4px 20px 0px var(--zdt_onboarding_primary_button_shadow));
43
+
43
44
  }
@@ -384,12 +384,8 @@ export default class TextEditor extends Component {
384
384
  isNightMode,
385
385
  isReadOnly,
386
386
  dataSelectorId,
387
- isDisabled,
388
- customClass
387
+ isDisabled
389
388
  } = this.props;
390
- const {
391
- wrapper: wrapperClass = ''
392
- } = customClass;
393
389
  let {
394
390
  isEditorLoad,
395
391
  isEditorShow
@@ -397,7 +393,7 @@ export default class TextEditor extends Component {
397
393
  let editorDoc = ImgLazyLoad && global.editor && global.editor[id] ? global.editor[id].doc : null;
398
394
  return /*#__PURE__*/React.createElement(Container, {
399
395
  className: `${styles.textEditor} ${styles[type]} ${styles[border]}
400
- ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''} ${isDisabled ? styles.disable : ''} ${!isEditorShow ? styles.editorHide : ''} ${wrapperClass}`,
396
+ ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''} ${isDisabled ? styles.disable : ''} ${!isEditorShow ? styles.editorHide : ''}`,
401
397
  dataId: dataId,
402
398
  "data-isEditor": true,
403
399
  dataSelectorId: dataSelectorId
@@ -12,6 +12,5 @@ export const defaultProps = {
12
12
  dataSelectorId: 'textEditor',
13
13
  customCSS: '',
14
14
  isDisabled: false,
15
- inlineImageProps: {},
16
- customClass: {}
15
+ inlineImageProps: {}
17
16
  };
@@ -49,6 +49,5 @@ export const propTypes = {
49
49
  allowedFileExtensions: PropTypes.array,
50
50
  fileNameMaxCharacters: PropTypes.number,
51
51
  fileSizeMaxBytes: PropTypes.number
52
- }),
53
- customClass: PropTypes.object
52
+ })
54
53
  };
@@ -30,7 +30,7 @@ exports[`DepartmentDropDown rendering the defult props 1`] = `
30
30
  id="1"
31
31
  >
32
32
  <div
33
- class="departmentText "
33
+ class="dotted size12 departmentText "
34
34
  />
35
35
  </span>
36
36
  <i
@@ -7,6 +7,8 @@ import { AccountName_propTypes } from "./props/propTypes";
7
7
  /**** Components ****/
8
8
 
9
9
  import { Container, Box } from '@zohodesk/components/es/Layout';
10
+ import Typography from '@zohodesk/components/es/Typography/Typography';
11
+ import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
10
12
  import Link from "../../Link/Link";
11
13
  /**** CSS ****/
12
14
 
@@ -28,6 +30,8 @@ export default class AccountName extends Component {
28
30
  secondaryAccountHref,
29
31
  secondaryAccountClick,
30
32
  secondaryAccountText,
33
+ highlightData,
34
+ isHighlighted,
31
35
  customProps
32
36
  } = this.props;
33
37
  let {
@@ -60,18 +64,29 @@ export default class AccountName extends Component {
60
64
  className: style.link,
61
65
  ...LinkProps,
62
66
  ariaLabel: `Account Name ${text}`
63
- }, /*#__PURE__*/React.createElement("div", {
64
- className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
65
- }, text)) : /*#__PURE__*/React.createElement("div", {
66
- className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
67
- ...TextProps
67
+ }, /*#__PURE__*/React.createElement(Typography, {
68
+ $tagAttributes_text: TextProps,
69
+ $ui_size: "12",
70
+ $flag_dotted: true,
71
+ $ui_className: `${style.linkWithText} ${className ? className : ''}`,
72
+ $ui_weight: fontWeight,
73
+ $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
74
+ }, text)) : /*#__PURE__*/React.createElement(Typography, {
75
+ $tagAttributes_text: TextProps,
76
+ $ui_size: "12",
77
+ $flag_dotted: true,
78
+ $ui_className: `${style.secondaryText} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
79
+ $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
68
80
  }, text)), secondaryAccountText && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
69
81
  href: secondaryAccountHref,
70
82
  onClick: secondaryAccountClick,
71
83
  className: style.link
72
- }, /*#__PURE__*/React.createElement("div", {
73
- className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`,
74
- ...SecondaryTextProps
84
+ }, /*#__PURE__*/React.createElement(Typography, {
85
+ $tagAttributes_text: SecondaryTextProps,
86
+ $ui_size: "12",
87
+ $flag_dotted: true,
88
+ $ui_weight: fontWeight,
89
+ $ui_className: `${style.linkWithText} ${className ? className : ''}`
75
90
  }, secondaryAccountText))))));
76
91
  }
77
92
 
@@ -2,6 +2,8 @@ import React, { Component } from 'react';
2
2
  import { ContactName_defaultProps } from "./props/defaultProps";
3
3
  import { ContactName_propTypes } from "./props/propTypes";
4
4
  import { Container, Box } from '@zohodesk/components/es/Layout';
5
+ import Typography from '@zohodesk/components/es/Typography/Typography';
6
+ import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
5
7
  import Link from "../../Link/Link";
6
8
  import SentimentStatus from "../SentimentStatus/SentimentStatus";
7
9
  import { Icon } from '@zohodesk/icons';
@@ -23,6 +25,8 @@ export default class ContactName extends Component {
23
25
  notAccessible = false,
24
26
  fontWeight,
25
27
  i18nKeys,
28
+ highlightData,
29
+ isHighlighted,
26
30
  customProps
27
31
  } = this.props;
28
32
  let {
@@ -62,12 +66,20 @@ export default class ContactName extends Component {
62
66
  className: style.link,
63
67
  ...LinkProps,
64
68
  ariaLabel: `Contact Name ${text}`
65
- }, /*#__PURE__*/React.createElement("div", {
66
- className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
67
- }, text)) : /*#__PURE__*/React.createElement("div", {
68
- className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
69
- "data-title": dataTitle,
70
- ...TextProps
69
+ }, /*#__PURE__*/React.createElement(Typography, {
70
+ $flag_dotted: true,
71
+ $ui_size: "12",
72
+ $ui_weight: fontWeight,
73
+ $ui_className: `${style.linkWithText} ${className ? className : ''}`,
74
+ $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
75
+ }, text)) : /*#__PURE__*/React.createElement(Typography, {
76
+ $tagAttributes_text: TextProps,
77
+ $ui_size: "12",
78
+ $flag_dotted: true,
79
+ $ui_className: `${style.secondaryText} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
80
+ $ui_weight: fontWeight,
81
+ $i18n_dataTitle: dataTitle,
82
+ $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
71
83
  }, text)), sentimentType && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(SentimentStatus, {
72
84
  type: sentimentType,
73
85
  dataTitle: sentimentDataTitle
@@ -1,5 +1,7 @@
1
1
  import React, { Component } from 'react';
2
2
  import { DepartmentText_propTypes } from "./props/propTypes";
3
+ import Typography from '@zohodesk/components/es/Typography/Typography';
4
+ import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
3
5
  import style from "./SecondaryText.module.css";
4
6
  export default class DepartmentText extends Component {
5
7
  constructor(props) {
@@ -11,13 +13,18 @@ export default class DepartmentText extends Component {
11
13
  className,
12
14
  text,
13
15
  dataTitle,
14
- dataId
16
+ dataId,
17
+ isHighlighted,
18
+ highlightData
15
19
  } = this.props;
16
- return /*#__PURE__*/React.createElement("div", {
17
- className: `${style.departmentText} ${className ? className : ''}`,
18
- "data-title": dataTitle,
19
- "data-id": dataId,
20
- "data-test-id": dataId
20
+ return /*#__PURE__*/React.createElement(Typography, {
21
+ $ui_size: "12",
22
+ $flag_dotted: true,
23
+ $ui_className: `${style.departmentText} ${className ? className : ''}`,
24
+ $i18n_dataTitle: dataTitle,
25
+ customId: dataId,
26
+ testId: dataId,
27
+ $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
21
28
  }, text);
22
29
  }
23
30
 
@@ -6,6 +6,8 @@ import { Email_defaultProps } from "./props/defaultProps";
6
6
  import { Email_propTypes } from "./props/propTypes";
7
7
  /**** Components ****/
8
8
 
9
+ import Typography from '@zohodesk/components/es/Typography/Typography';
10
+ import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
9
11
  import Link from "../../Link/Link";
10
12
  /**** CSS ****/
11
13
 
@@ -22,7 +24,9 @@ export default class Email extends Component {
22
24
  isLink,
23
25
  target,
24
26
  fontWeight,
25
- customProps
27
+ customProps,
28
+ isHighlighted,
29
+ highlightData
26
30
  } = this.props;
27
31
  let {
28
32
  LinkProps = {},
@@ -36,12 +40,20 @@ export default class Email extends Component {
36
40
  target: target,
37
41
  className: style.link,
38
42
  ...LinkProps
39
- }, /*#__PURE__*/React.createElement("div", {
40
- className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
41
- }, text)) : /*#__PURE__*/React.createElement("div", {
42
- className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''}`,
43
- "data-title": title,
44
- ...TextProps
43
+ }, /*#__PURE__*/React.createElement(Typography, {
44
+ $flag_dotted: true,
45
+ $ui_size: "12",
46
+ $ui_weight: fontWeight,
47
+ $ui_className: `${style.linkWithText} ${className ? className : ''}`,
48
+ $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
49
+ }, text)) : /*#__PURE__*/React.createElement(Typography, {
50
+ $tagAttributes_text: TextProps,
51
+ $ui_size: "12",
52
+ $flag_dotted: true,
53
+ $ui_className: `${style.secondaryText} ${className ? className : ''}`,
54
+ $ui_weight: fontWeight,
55
+ $i18n_dataTitle: title,
56
+ $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
45
57
  }, text));
46
58
  }
47
59
 
@@ -6,6 +6,8 @@ import { PhoneNumber_defaultProps } from "./props/defaultProps";
6
6
  import { PhoneNumber_propTypes } from "./props/propTypes";
7
7
  /**** Components ****/
8
8
 
9
+ import Typography from '@zohodesk/components/es/Typography/Typography';
10
+ import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
9
11
  import Link from "../../Link/Link";
10
12
  /**** CSS ****/
11
13
 
@@ -24,7 +26,9 @@ export default class PhoneNumber extends Component {
24
26
  target,
25
27
  hasReload,
26
28
  fontWeight,
27
- customProps
29
+ customProps,
30
+ isHighlighted,
31
+ highlightData
28
32
  } = this.props;
29
33
  let {
30
34
  LinkProps = {},
@@ -40,12 +44,20 @@ export default class PhoneNumber extends Component {
40
44
  hasReload: hasReload,
41
45
  className: style.link,
42
46
  ...LinkProps
43
- }, /*#__PURE__*/React.createElement("div", {
44
- className: `${style.phoneNumber} ${style.phonetxt} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
45
- }, text)) : /*#__PURE__*/React.createElement("div", {
46
- className: `${style.secondaryText} ${style.phonetxt} ${style[`font_${fontWeight}`]} ${className ? className : ''}`,
47
- "data-title": title,
48
- ...TextProps
47
+ }, /*#__PURE__*/React.createElement(Typography, {
48
+ $ui_size: "12",
49
+ $flag_dotted: true,
50
+ $ui_className: `${style.phoneNumber} ${style.phonetxt} ${className ? className : ''}`,
51
+ $ui_weight: fontWeight,
52
+ $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
53
+ }, text)) : /*#__PURE__*/React.createElement(Typography, {
54
+ $tagAttributes_text: TextProps,
55
+ $ui_className: `${style.secondaryText} ${style.phonetxt} ${className ? className : ''}`,
56
+ $ui_weight: fontWeight,
57
+ $ui_size: "12",
58
+ $flag_dotted: true,
59
+ $i18n_dataTitle: title,
60
+ $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
49
61
  }, text));
50
62
  }
51
63
 
@@ -1,6 +1,8 @@
1
1
  import React, { Component } from 'react';
2
2
  import { PriorityText_defaultProps } from "./props/defaultProps";
3
3
  import { PriorityText_propTypes } from "./props/propTypes";
4
+ import Typography from '@zohodesk/components/es/Typography/Typography';
5
+ import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
4
6
  import style from "./SecondaryText.module.css";
5
7
  export default class PriorityText extends Component {
6
8
  constructor(props) {
@@ -13,13 +15,18 @@ export default class PriorityText extends Component {
13
15
  color,
14
16
  text,
15
17
  dataTitle,
16
- dataId
18
+ dataId,
19
+ isHighlighted,
20
+ highlightData
17
21
  } = this.props;
18
- return /*#__PURE__*/React.createElement("div", {
19
- className: `${style.priorityText} ${style[color]} ${className ? className : ''}`,
20
- "data-title": dataTitle,
21
- "data-id": dataId,
22
- "data-test-id": dataId
22
+ return /*#__PURE__*/React.createElement(Typography, {
23
+ $ui_className: `${style.priorityText} ${style[color]} ${className ? className : ''}`,
24
+ $flag_dotted: true,
25
+ $ui_size: "12",
26
+ $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT,
27
+ $i18n_dataTitle: dataTitle,
28
+ customId: dataId,
29
+ testId: dataId
23
30
  }, text);
24
31
  }
25
32
 
@@ -1,6 +1,8 @@
1
1
  import React, { Component } from 'react';
2
2
  import { SecondaryText_defaultProps } from "./props/defaultProps";
3
3
  import { SecondaryText_propTypes } from "./props/propTypes";
4
+ import Typography from '@zohodesk/components/es/Typography/Typography';
5
+ import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
4
6
  import style from "./SecondaryText.module.css";
5
7
  export default class SecondaryText extends Component {
6
8
  constructor(props) {
@@ -14,18 +16,25 @@ export default class SecondaryText extends Component {
14
16
  dataTitle,
15
17
  dataId,
16
18
  onClick,
17
- customProps
19
+ customProps,
20
+ isHighlighted,
21
+ highlightData
18
22
  } = this.props;
19
23
  let {
20
24
  SecondaryTextProps
21
25
  } = customProps;
22
- return /*#__PURE__*/React.createElement("div", {
23
- className: `${style.secondaryText} ${className ? className : ''}`,
24
- "data-title": dataTitle,
25
- "data-id": dataId,
26
- "data-test-id": dataId,
27
- onClick: onClick,
28
- ...SecondaryTextProps
26
+ const tagAttributes = { ...SecondaryTextProps,
27
+ onClick
28
+ };
29
+ return /*#__PURE__*/React.createElement(Typography, {
30
+ $tagAttributes_text: tagAttributes,
31
+ $ui_size: "12",
32
+ $flag_dotted: true,
33
+ $ui_className: `${style.secondaryText} ${className ? className : ''}`,
34
+ $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT,
35
+ $i18n_dataTitle: dataTitle,
36
+ customId: dataId,
37
+ testId: dataId
29
38
  }, text);
30
39
  }
31
40