@zohodesk/components 1.0.0-temp-211.2 → 1.0.0-temp-216

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 (167) hide show
  1. package/.cli/propValidation_report.html +1 -1
  2. package/README.md +118 -31
  3. package/assets/Appearance/dark/mode/Component_DarkMode.module.css +5 -0
  4. package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css +4 -0
  5. package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css +4 -0
  6. package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css +4 -0
  7. package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css +4 -0
  8. package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css +4 -0
  9. package/assets/Appearance/light/mode/Component_LightMode.module.css +5 -0
  10. package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css +4 -0
  11. package/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css +4 -0
  12. package/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css +4 -0
  13. package/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css +4 -0
  14. package/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css +4 -0
  15. package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +5 -0
  16. package/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css +4 -0
  17. package/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css +4 -0
  18. package/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css +4 -0
  19. package/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css +4 -0
  20. package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css +4 -0
  21. package/es/AvatarTeam/props/propTypes.js +2 -1
  22. package/es/Button/Button.js +9 -2
  23. package/es/Button/css/Button.module.css +82 -0
  24. package/es/Button/css/cssJSLogic.js +6 -1
  25. package/es/CheckBox/CheckBox.js +6 -5
  26. package/es/CheckBox/CheckBox.module.css +5 -2
  27. package/es/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +64 -64
  28. package/es/DateTime/CalendarView.js +17 -12
  29. package/es/DateTime/DateTime.js +26 -8
  30. package/es/DateTime/DateTime.module.css +5 -5
  31. package/es/DateTime/DateWidget.js +13 -2
  32. package/es/DateTime/DaysRow.js +3 -2
  33. package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +7 -7
  34. package/es/DateTime/props/defaultProps.js +9 -3
  35. package/es/DateTime/props/propTypes.js +16 -4
  36. package/es/DropBox/DropBoxElement/DropBoxElement.js +3 -1
  37. package/es/DropBox/DropBoxElement/__tests__/__snapshots__/DropBoxElement.spec.js.snap +1 -0
  38. package/es/DropBox/__tests__/__snapshots__/DropBox.spec.js.snap +1 -0
  39. package/es/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +1 -0
  40. package/es/ListItem/ListItemWithAvatar.js +7 -3
  41. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +2 -2
  42. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +1 -1
  43. package/es/ListItem/props/propTypes.js +6 -1
  44. package/es/MultiSelect/AdvancedGroupMultiSelect.js +4 -2
  45. package/es/MultiSelect/AdvancedMultiSelect.js +4 -2
  46. package/es/MultiSelect/MultiSelect.js +11 -3
  47. package/es/MultiSelect/props/propTypes.js +6 -3
  48. package/es/Popup/Popup.js +125 -7
  49. package/es/Popup/intersectionObserver.js +49 -0
  50. package/es/Popup/props/propTypes.js +30 -0
  51. package/es/Provider/LibraryContext.js +2 -2
  52. package/es/Radio/Radio.js +9 -7
  53. package/es/Radio/Radio.module.css +1 -1
  54. package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap +77 -77
  55. package/es/Responsive/ResizeObserver.js +21 -85
  56. package/es/Responsive/ResizeObserverWithPolyfill.js +140 -0
  57. package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -0
  58. package/es/Select/GroupSelect.js +15 -3
  59. package/es/Select/props/defaultProps.js +2 -1
  60. package/es/Select/props/propTypes.js +5 -1
  61. package/es/Switch/Switch.js +3 -27
  62. package/es/Switch/Switch.module.css +15 -126
  63. package/es/Tag/Tag.js +10 -3
  64. package/es/Tag/props/defaultProps.js +2 -1
  65. package/es/Tag/props/propTypes.js +7 -1
  66. package/es/TextBox/TextBox.js +1 -1
  67. package/es/Textarea/Textarea.js +4 -2
  68. package/es/Textarea/Textarea.module.css +1 -1
  69. package/es/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +41 -41
  70. package/es/Textarea/props/propTypes.js +2 -1
  71. package/es/Typography/Typography.js +38 -0
  72. package/es/Typography/css/Typography.module.css +489 -0
  73. package/es/Typography/css/cssJSLogic.js +56 -0
  74. package/es/Typography/props/defaultProps.js +8 -0
  75. package/es/Typography/props/propTypes.js +27 -0
  76. package/es/Typography/utils/index.js +50 -0
  77. package/es/index.js +1 -2
  78. package/es/v1/AppContainer/AppContainer.js +0 -6
  79. package/es/v1/DateTime/CalendarView.js +9 -6
  80. package/es/v1/DateTime/DateTime.js +18 -4
  81. package/es/v1/DateTime/DateWidget.js +5 -1
  82. package/es/v1/DateTime/DaysRow.js +3 -2
  83. package/es/v1/DateTime/props/defaultProps.js +9 -3
  84. package/es/v1/DateTime/props/propTypes.js +11 -4
  85. package/es/v1/MultiSelect/MultiSelect.js +7 -1
  86. package/es/v1/Select/GroupSelect.js +5 -0
  87. package/es/v1/Typography/Typography.js +1 -1
  88. package/lib/AvatarTeam/props/propTypes.js +3 -1
  89. package/lib/Button/Button.js +24 -2
  90. package/lib/Button/css/Button.module.css +82 -0
  91. package/lib/Button/css/cssJSLogic.js +6 -2
  92. package/lib/CheckBox/CheckBox.js +5 -4
  93. package/lib/CheckBox/CheckBox.module.css +5 -2
  94. package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +64 -64
  95. package/lib/DateTime/CalendarView.js +17 -12
  96. package/lib/DateTime/DateTime.js +38 -9
  97. package/lib/DateTime/DateTime.module.css +5 -5
  98. package/lib/DateTime/DateWidget.js +13 -2
  99. package/lib/DateTime/DaysRow.js +3 -2
  100. package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +7 -7
  101. package/lib/DateTime/props/defaultProps.js +9 -3
  102. package/lib/DateTime/props/propTypes.js +16 -4
  103. package/lib/DropBox/DropBoxElement/DropBoxElement.js +3 -1
  104. package/lib/DropBox/DropBoxElement/__tests__/__snapshots__/DropBoxElement.spec.js.snap +1 -0
  105. package/lib/DropBox/__tests__/__snapshots__/DropBox.spec.js.snap +1 -0
  106. package/lib/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +1 -0
  107. package/lib/ListItem/ListItemWithAvatar.js +8 -4
  108. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +2 -2
  109. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +1 -1
  110. package/lib/ListItem/props/propTypes.js +8 -1
  111. package/lib/MultiSelect/AdvancedGroupMultiSelect.js +4 -2
  112. package/lib/MultiSelect/AdvancedMultiSelect.js +4 -2
  113. package/lib/MultiSelect/MultiSelect.js +11 -3
  114. package/lib/MultiSelect/props/propTypes.js +8 -6
  115. package/lib/Popup/Popup.js +135 -8
  116. package/lib/Popup/intersectionObserver.js +72 -0
  117. package/lib/Popup/props/propTypes.js +51 -0
  118. package/lib/Provider/LibraryContext.js +2 -2
  119. package/lib/Radio/Radio.js +10 -7
  120. package/lib/Radio/Radio.module.css +1 -1
  121. package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap +77 -77
  122. package/lib/Responsive/ResizeObserver.js +20 -88
  123. package/lib/Responsive/ResizeObserverWithPolyfill.js +168 -0
  124. package/lib/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -0
  125. package/lib/Select/GroupSelect.js +17 -5
  126. package/lib/Select/props/defaultProps.js +2 -1
  127. package/lib/Select/props/propTypes.js +5 -1
  128. package/lib/Switch/Switch.js +4 -34
  129. package/lib/Switch/Switch.module.css +15 -126
  130. package/lib/Tag/Tag.js +10 -5
  131. package/lib/Tag/props/defaultProps.js +2 -1
  132. package/lib/Tag/props/propTypes.js +9 -1
  133. package/lib/TextBox/TextBox.js +1 -1
  134. package/lib/Textarea/Textarea.js +4 -2
  135. package/lib/Textarea/Textarea.module.css +1 -1
  136. package/lib/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +41 -41
  137. package/lib/Textarea/props/propTypes.js +2 -1
  138. package/lib/Typography/Typography.js +56 -0
  139. package/lib/Typography/css/Typography.module.css +489 -0
  140. package/lib/Typography/css/cssJSLogic.js +48 -0
  141. package/lib/Typography/props/defaultProps.js +15 -0
  142. package/lib/Typography/props/propTypes.js +38 -0
  143. package/lib/Typography/utils/index.js +59 -0
  144. package/lib/index.js +1 -10
  145. package/lib/v1/AppContainer/AppContainer.js +0 -12
  146. package/lib/v1/DateTime/CalendarView.js +9 -6
  147. package/lib/v1/DateTime/DateTime.js +27 -4
  148. package/lib/v1/DateTime/DateWidget.js +5 -1
  149. package/lib/v1/DateTime/DaysRow.js +3 -2
  150. package/lib/v1/DateTime/props/defaultProps.js +9 -3
  151. package/lib/v1/DateTime/props/propTypes.js +11 -4
  152. package/lib/v1/MultiSelect/MultiSelect.js +7 -1
  153. package/lib/v1/Select/GroupSelect.js +5 -0
  154. package/lib/v1/Typography/Typography.js +2 -2
  155. package/package.json +8 -8
  156. package/propValidationArg.json +1 -1
  157. package/result.json +1 -1
  158. package/es/SwitchNew/SwitchNew.js +0 -118
  159. package/es/SwitchNew/SwitchNew.module.css +0 -155
  160. package/es/SwitchNew/props/defaultProps.js +0 -9
  161. package/es/SwitchNew/props/propTypes.js +0 -32
  162. package/lib/SwitchNew/SwitchNew.js +0 -148
  163. package/lib/SwitchNew/SwitchNew.module.css +0 -155
  164. package/lib/SwitchNew/props/defaultProps.js +0 -16
  165. package/lib/SwitchNew/props/propTypes.js +0 -43
  166. /package/es/v1/Typography/css/{Typography.module.css → v1_Typography.module.css} +0 -0
  167. /package/lib/v1/Typography/css/{Typography.module.css → v1_Typography.module.css} +0 -0
@@ -1,118 +0,0 @@
1
- import React, { useContext } from 'react';
2
- import { Container, Box } from '../Layout';
3
- import Label from '../Label/Label';
4
- import style from './SwitchNew.module.css';
5
- import { defaultProps } from './props/defaultProps';
6
- import { propTypes } from './props/propTypes';
7
- import LibraryContext from '../Provider/LibraryContextInit';
8
-
9
- const SwitchNew = props => {
10
- const {
11
- id,
12
- title,
13
- name,
14
- value,
15
- checked,
16
- disabled,
17
- isReadOnly,
18
- size,
19
- text,
20
- disableTitle,
21
- dataId,
22
- dataSelectorId,
23
- onChange,
24
- customProps,
25
- customClass,
26
- labelSize,
27
- labelPlacement,
28
- a11y
29
- } = props;
30
-
31
- const handleChange = e => {
32
- if (!disabled && !isReadOnly && onChange) {
33
- onChange(!checked, e);
34
- }
35
- };
36
-
37
- const {
38
- SwitchProps = {},
39
- LabelProps = {}
40
- } = customProps || {};
41
- const {
42
- WrapperProps = {},
43
- TrackProps = {}
44
- } = SwitchProps;
45
- const {
46
- customSwitchWrap = '',
47
- customSwitch = '',
48
- customLabel = ''
49
- } = customClass || {};
50
- const {
51
- role = 'switch',
52
- ...a11yAttributes
53
- } = a11y || {};
54
- const context = useContext(LibraryContext);
55
- const {
56
- a11y_onOffLabel = true
57
- } = context;
58
- return /*#__PURE__*/React.createElement(Container, {
59
- align: "vertical",
60
- isCover: false,
61
- isInline: true,
62
- alignBox: labelPlacement == 'right' ? 'row' : 'row-reverse',
63
- "data-title": disabled ? disableTitle : title,
64
- dataSelectorId: dataSelectorId,
65
- className: customSwitchWrap ? customSwitchWrap : '',
66
- ...WrapperProps
67
- }, /*#__PURE__*/React.createElement("div", {
68
- className: `${style.switchWrapper} ${style[`${size}_switch`]} ${!disabled && !isReadOnly ? style.effect : ''} ${disabled ? style.disabled : ''}`
69
- }, /*#__PURE__*/React.createElement("input", {
70
- type: "checkbox",
71
- id: id,
72
- name: name,
73
- value: value,
74
- checked: checked,
75
- disabled: disabled,
76
- readOnly: isReadOnly,
77
- onChange: handleChange,
78
- role: role,
79
- "aria-checked": checked,
80
- tabIndex: disabled ? -1 : 0,
81
- "data-id": dataId,
82
- "data-test-id": dataId,
83
- className: `${style.track} ${customSwitch} ${a11y_onOffLabel ? checked ? style.onLabel : style.offLabel : ''}`,
84
- ...a11yAttributes,
85
- ...TrackProps
86
- }), /*#__PURE__*/React.createElement("span", {
87
- className: style.thumb
88
- }), a11y_onOffLabel ? /*#__PURE__*/React.createElement("svg", {
89
- xmlns: "http://www.w3.org/2000/svg",
90
- viewBox: `0 0 ${checked ? '2' : 'var(--off-label-size)'} ${checked ? 'var(--on-label-height)' : 'var(--off-label-size)'}`,
91
- className: checked ? style.onLabelWrapper : style.offLabelWrapper
92
- }, checked ? /*#__PURE__*/React.createElement("rect", {
93
- x: "0",
94
- rx: "0.8",
95
- ry: "0.8",
96
- width: "100%",
97
- height: "100%",
98
- className: style.onLabel
99
- }) : /*#__PURE__*/React.createElement("circle", {
100
- className: style.offLabel,
101
- cx: "50%",
102
- cy: "50%",
103
- width: "100%",
104
- height: "100%",
105
- fill: "none"
106
- })) : null), text && /*#__PURE__*/React.createElement(Label, {
107
- customClass: ` ${style[`switchLabel_${labelPlacement}`]} ${customLabel ? customLabel : ''}`,
108
- htmlFor: id,
109
- size: labelSize,
110
- type: "subtitle",
111
- text: text,
112
- ...LabelProps
113
- }));
114
- };
115
-
116
- export default SwitchNew;
117
- SwitchNew.defaultProps = defaultProps;
118
- SwitchNew.propTypes = propTypes;
@@ -1,155 +0,0 @@
1
- .switchWrapper {
2
- position: relative;
3
- display: inline-flex;
4
- align-items: center;
5
- }
6
- .switchWrapper *, .switchWrapper:hover * {
7
- cursor: pointer;
8
- }
9
- .disabled {
10
- opacity: 0.4;
11
- pointer-events: none;
12
- cursor: not-allowed;
13
- }
14
- .track {
15
- width: var(--track-width);
16
- height: var(--track-height);
17
- appearance: none;
18
- /* css:theme-validation:ignore */
19
- transition: background-color 0.3s ease-in-out;
20
- border-radius: 10px;
21
- background-color: var(--dot_paleBlue);
22
- margin: 0 ;
23
- }
24
- .thumb {
25
- width: var(--thumb-size);
26
- height: var(--thumb-size);
27
- /* css:theme-validation:ignore */
28
- position: absolute;
29
- pointer-events: none;
30
- z-index: 1;
31
- top: var(--zd_size2) ;
32
- bottom: var(--zd_size2) ;
33
- transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
34
- border-radius: 50%;
35
- background-color: var(--dot_white);
36
- }
37
- [dir=ltr] .thumb {
38
- left: var(--zd_size2) ;
39
- }
40
- [dir=rtl] .thumb {
41
- right: var(--zd_size2) ;
42
- }
43
- .track:checked {
44
- /* css:theme-validation:ignore */
45
- background-color: var(--dot_strongGreen);
46
- }
47
- [dir=ltr] .track:checked + .thumb {
48
- transform: translateX(calc(var(--track-width) - var(--thumb-size) - 4px));
49
- }
50
- [dir=rtl] .track:checked + .thumb {
51
- transform: translateX(calc(-1*(var(--track-width) - var(--thumb-size) - 4px)));
52
- }
53
- .switchWrapper:hover .track {
54
- /* css:theme-validation:ignore */
55
- background-color: var(--dot_paleNavy);
56
- }
57
- .switchWrapper:hover .track:checked {
58
- /* css:theme-validation:ignore */
59
- background-color: var(--dot_camarone);
60
- }
61
- .effect:hover .offLabelWrapper > .offLabel {
62
- stroke: var(--dot_black);
63
- }
64
- .small_switch {
65
- --track-width: var(--zd_size22);
66
- --track-height: var(--zd_size12);
67
- --thumb-size: var(--zd_size8);
68
- --off-label-size: var(--zd_size7);
69
- --off-label-radius: 2.5px;
70
- --off-label-top: var(--zd_size2.5);
71
- --off-label-right: var(--zd_size3);
72
- --off-label-stroke: 1px;
73
- --on-label-width: var(--zd_size1.2);
74
- --on-label-height: var(--zd_size6);
75
- --on-label-top: var(--zd_size3);
76
- --on-label-left: var(--zd_size5);
77
- }
78
-
79
- .medium_switch {
80
- --track-width: var(--zd_size28);
81
- --track-height: var(--zd_size16);
82
- --thumb-size: var(--zd_size12);
83
- --off-label-size: var(--zd_size8);
84
- --off-label-radius: 3px;
85
- --off-label-top: var(--zd_size4);
86
- --off-label-right: var(--zd_size3.5);
87
- --off-label-stroke: 1.1px;
88
- --on-label-width: var(--zd_size1.4);
89
- --on-label-height: var(--zd_size8);
90
- --on-label-top: var(--zd_size4);
91
- --on-label-left: var(--zd_size6);
92
- }
93
-
94
- .large_switch {
95
- --track-width: var(--zd_size34);
96
- --track-height: var(--zd_size20);
97
- --thumb-size: var(--zd_size16);
98
- --off-label-size: var(--zd_size9);
99
- --off-label-radius: 3.5px;
100
- --off-label-top: var(--zd_size5.5);
101
- --off-label-right: var(--zd_size4);
102
- --off-label-stroke: 1.2px;
103
- --on-label-width: var(--zd_size1.6);
104
- --on-label-height: var(--zd_size11);
105
- --on-label-top: var(--zd_size4.5);
106
- --on-label-left: var(--zd_size7);
107
- }
108
- [dir=ltr] .switchLabel_right {
109
- margin-right: var(--zd_size12) ;
110
- }
111
- [dir=rtl] .switchLabel_right {
112
- margin-left: var(--zd_size12) ;
113
- }
114
- [dir=ltr] .switchLabel_left {
115
- margin-left: var(--zd_size12) ;
116
- }
117
- [dir=rtl] .switchLabel_left {
118
- margin-right: var(--zd_size12) ;
119
- }
120
- .offLabelWrapper,
121
- .onLabelWrapper {
122
- position: absolute;
123
- pointer-events: none;
124
- }
125
- .offLabelWrapper {
126
- width: var(--off-label-size);
127
- height: var(--off-label-size);
128
- top: var(--off-label-top);
129
- }
130
- [dir=ltr] .offLabelWrapper {
131
- right: var(--off-label-right);
132
- }
133
- [dir=rtl] .offLabelWrapper {
134
- left: var(--off-label-right);
135
- }
136
- .onLabelWrapper {
137
- width: var(--on-label-width);
138
- height: var(--on-label-height);
139
- top: var(--on-label-top);
140
- }
141
- [dir=ltr] .onLabelWrapper {
142
- left: var(--on-label-left);
143
- }
144
- [dir=rtl] .onLabelWrapper {
145
- right: var(--on-label-left);
146
- }
147
- .offLabel {
148
- stroke: var(--dot_shuttleGrey);
149
- stroke-width: var(--off-label-stroke);
150
- r: var(--off-label-radius);
151
- fill: none;
152
- }
153
- .onLabel {
154
- fill: var(--dot_white);
155
- }
@@ -1,9 +0,0 @@
1
- export const defaultProps = {
2
- checked: false,
3
- disabled: false,
4
- isReadOnly: false,
5
- size: 'medium',
6
- dataSelectorId: 'switch',
7
- labelSize: 'medium',
8
- labelPlacement: 'right'
9
- };
@@ -1,32 +0,0 @@
1
- import PropTypes from 'prop-types';
2
- export const propTypes = {
3
- id: PropTypes.string,
4
- title: PropTypes.string,
5
- name: PropTypes.string,
6
- value: PropTypes.bool,
7
- checked: PropTypes.bool,
8
- disabled: PropTypes.bool,
9
- isReadOnly: PropTypes.bool,
10
- size: PropTypes.oneOf(['small', 'medium', 'large']),
11
- text: PropTypes.string,
12
- disableTitle: PropTypes.string,
13
- dataId: PropTypes.string,
14
- onChange: PropTypes.func,
15
- dataSelectorId: PropTypes.string,
16
- customClass: PropTypes.shape({
17
- customSwitchWrap: PropTypes.string,
18
- customSwitch: PropTypes.string,
19
- customLabel: PropTypes.string
20
- }),
21
- customProps: PropTypes.shape({
22
- SwitchProps: PropTypes.shape({
23
- WrapperProps: PropTypes.object,
24
- TrackProps: PropTypes.object
25
- }),
26
- LabelProps: PropTypes.object
27
- }),
28
- labelPalette: PropTypes.oneOf[("default", "primary", "secondary", "danger", "mandatory", "disable", "dark")],
29
- labelSize: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
30
- labelPlacement: PropTypes.string,
31
- a11y: PropTypes.object
32
- };
@@ -1,148 +0,0 @@
1
- "use strict";
2
-
3
- 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); }
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
-
10
- var _react = _interopRequireWildcard(require("react"));
11
-
12
- var _Layout = require("../Layout");
13
-
14
- var _Label = _interopRequireDefault(require("../Label/Label"));
15
-
16
- var _SwitchNewModule = _interopRequireDefault(require("./SwitchNew.module.css"));
17
-
18
- var _defaultProps = require("./props/defaultProps");
19
-
20
- var _propTypes = require("./props/propTypes");
21
-
22
- var _LibraryContextInit = _interopRequireDefault(require("../Provider/LibraryContextInit"));
23
-
24
- var _excluded = ["role"];
25
-
26
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
27
-
28
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
29
-
30
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
31
-
32
- 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); }
33
-
34
- function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
35
-
36
- function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
37
-
38
- var SwitchNew = function SwitchNew(props) {
39
- var id = props.id,
40
- title = props.title,
41
- name = props.name,
42
- value = props.value,
43
- checked = props.checked,
44
- disabled = props.disabled,
45
- isReadOnly = props.isReadOnly,
46
- size = props.size,
47
- text = props.text,
48
- disableTitle = props.disableTitle,
49
- dataId = props.dataId,
50
- dataSelectorId = props.dataSelectorId,
51
- onChange = props.onChange,
52
- customProps = props.customProps,
53
- customClass = props.customClass,
54
- labelSize = props.labelSize,
55
- labelPlacement = props.labelPlacement,
56
- a11y = props.a11y;
57
-
58
- var handleChange = function handleChange(e) {
59
- if (!disabled && !isReadOnly && onChange) {
60
- onChange(!checked, e);
61
- }
62
- };
63
-
64
- var _ref = customProps || {},
65
- _ref$SwitchProps = _ref.SwitchProps,
66
- SwitchProps = _ref$SwitchProps === void 0 ? {} : _ref$SwitchProps,
67
- _ref$LabelProps = _ref.LabelProps,
68
- LabelProps = _ref$LabelProps === void 0 ? {} : _ref$LabelProps;
69
-
70
- var _SwitchProps$WrapperP = SwitchProps.WrapperProps,
71
- WrapperProps = _SwitchProps$WrapperP === void 0 ? {} : _SwitchProps$WrapperP,
72
- _SwitchProps$TrackPro = SwitchProps.TrackProps,
73
- TrackProps = _SwitchProps$TrackPro === void 0 ? {} : _SwitchProps$TrackPro;
74
-
75
- var _ref2 = customClass || {},
76
- _ref2$customSwitchWra = _ref2.customSwitchWrap,
77
- customSwitchWrap = _ref2$customSwitchWra === void 0 ? '' : _ref2$customSwitchWra,
78
- _ref2$customSwitch = _ref2.customSwitch,
79
- customSwitch = _ref2$customSwitch === void 0 ? '' : _ref2$customSwitch,
80
- _ref2$customLabel = _ref2.customLabel,
81
- customLabel = _ref2$customLabel === void 0 ? '' : _ref2$customLabel;
82
-
83
- var _ref3 = a11y || {},
84
- _ref3$role = _ref3.role,
85
- role = _ref3$role === void 0 ? 'switch' : _ref3$role,
86
- a11yAttributes = _objectWithoutProperties(_ref3, _excluded);
87
-
88
- var context = (0, _react.useContext)(_LibraryContextInit["default"]);
89
- var _context$a11y_onOffLa = context.a11y_onOffLabel,
90
- a11y_onOffLabel = _context$a11y_onOffLa === void 0 ? true : _context$a11y_onOffLa;
91
- return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
92
- align: "vertical",
93
- isCover: false,
94
- isInline: true,
95
- alignBox: labelPlacement == 'right' ? 'row' : 'row-reverse',
96
- "data-title": disabled ? disableTitle : title,
97
- dataSelectorId: dataSelectorId,
98
- className: customSwitchWrap ? customSwitchWrap : ''
99
- }, WrapperProps), /*#__PURE__*/_react["default"].createElement("div", {
100
- className: "".concat(_SwitchNewModule["default"].switchWrapper, " ").concat(_SwitchNewModule["default"]["".concat(size, "_switch")], " ").concat(!disabled && !isReadOnly ? _SwitchNewModule["default"].effect : '', " ").concat(disabled ? _SwitchNewModule["default"].disabled : '')
101
- }, /*#__PURE__*/_react["default"].createElement("input", _extends({
102
- type: "checkbox",
103
- id: id,
104
- name: name,
105
- value: value,
106
- checked: checked,
107
- disabled: disabled,
108
- readOnly: isReadOnly,
109
- onChange: handleChange,
110
- role: role,
111
- "aria-checked": checked,
112
- tabIndex: disabled ? -1 : 0,
113
- "data-id": dataId,
114
- "data-test-id": dataId,
115
- className: "".concat(_SwitchNewModule["default"].track, " ").concat(customSwitch, " ").concat(a11y_onOffLabel ? checked ? _SwitchNewModule["default"].onLabel : _SwitchNewModule["default"].offLabel : '')
116
- }, a11yAttributes, TrackProps)), /*#__PURE__*/_react["default"].createElement("span", {
117
- className: _SwitchNewModule["default"].thumb
118
- }), a11y_onOffLabel ? /*#__PURE__*/_react["default"].createElement("svg", {
119
- xmlns: "http://www.w3.org/2000/svg",
120
- viewBox: "0 0 ".concat(checked ? '2' : 'var(--off-label-size)', " ").concat(checked ? 'var(--on-label-height)' : 'var(--off-label-size)'),
121
- className: checked ? _SwitchNewModule["default"].onLabelWrapper : _SwitchNewModule["default"].offLabelWrapper
122
- }, checked ? /*#__PURE__*/_react["default"].createElement("rect", {
123
- x: "0",
124
- rx: "0.8",
125
- ry: "0.8",
126
- width: "100%",
127
- height: "100%",
128
- className: _SwitchNewModule["default"].onLabel
129
- }) : /*#__PURE__*/_react["default"].createElement("circle", {
130
- className: _SwitchNewModule["default"].offLabel,
131
- cx: "50%",
132
- cy: "50%",
133
- width: "100%",
134
- height: "100%",
135
- fill: "none"
136
- })) : null), text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
137
- customClass: " ".concat(_SwitchNewModule["default"]["switchLabel_".concat(labelPlacement)], " ").concat(customLabel ? customLabel : ''),
138
- htmlFor: id,
139
- size: labelSize,
140
- type: "subtitle",
141
- text: text
142
- }, LabelProps)));
143
- };
144
-
145
- var _default = SwitchNew;
146
- exports["default"] = _default;
147
- SwitchNew.defaultProps = _defaultProps.defaultProps;
148
- SwitchNew.propTypes = _propTypes.propTypes;
@@ -1,155 +0,0 @@
1
- .switchWrapper {
2
- position: relative;
3
- display: inline-flex;
4
- align-items: center;
5
- }
6
- .switchWrapper *, .switchWrapper:hover * {
7
- cursor: pointer;
8
- }
9
- .disabled {
10
- opacity: 0.4;
11
- pointer-events: none;
12
- cursor: not-allowed;
13
- }
14
- .track {
15
- width: var(--track-width);
16
- height: var(--track-height);
17
- appearance: none;
18
- /* css:theme-validation:ignore */
19
- transition: background-color 0.3s ease-in-out;
20
- border-radius: 10px;
21
- background-color: var(--dot_paleBlue);
22
- margin: 0 ;
23
- }
24
- .thumb {
25
- width: var(--thumb-size);
26
- height: var(--thumb-size);
27
- /* css:theme-validation:ignore */
28
- position: absolute;
29
- pointer-events: none;
30
- z-index: 1;
31
- top: var(--zd_size2) ;
32
- bottom: var(--zd_size2) ;
33
- transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
34
- border-radius: 50%;
35
- background-color: var(--dot_white);
36
- }
37
- [dir=ltr] .thumb {
38
- left: var(--zd_size2) ;
39
- }
40
- [dir=rtl] .thumb {
41
- right: var(--zd_size2) ;
42
- }
43
- .track:checked {
44
- /* css:theme-validation:ignore */
45
- background-color: var(--dot_strongGreen);
46
- }
47
- [dir=ltr] .track:checked + .thumb {
48
- transform: translateX(calc(var(--track-width) - var(--thumb-size) - 4px));
49
- }
50
- [dir=rtl] .track:checked + .thumb {
51
- transform: translateX(calc(-1*(var(--track-width) - var(--thumb-size) - 4px)));
52
- }
53
- .switchWrapper:hover .track {
54
- /* css:theme-validation:ignore */
55
- background-color: var(--dot_paleNavy);
56
- }
57
- .switchWrapper:hover .track:checked {
58
- /* css:theme-validation:ignore */
59
- background-color: var(--dot_camarone);
60
- }
61
- .effect:hover .offLabelWrapper > .offLabel {
62
- stroke: var(--dot_black);
63
- }
64
- .small_switch {
65
- --track-width: var(--zd_size22);
66
- --track-height: var(--zd_size12);
67
- --thumb-size: var(--zd_size8);
68
- --off-label-size: var(--zd_size7);
69
- --off-label-radius: 2.5px;
70
- --off-label-top: var(--zd_size2.5);
71
- --off-label-right: var(--zd_size3);
72
- --off-label-stroke: 1px;
73
- --on-label-width: var(--zd_size1.2);
74
- --on-label-height: var(--zd_size6);
75
- --on-label-top: var(--zd_size3);
76
- --on-label-left: var(--zd_size5);
77
- }
78
-
79
- .medium_switch {
80
- --track-width: var(--zd_size28);
81
- --track-height: var(--zd_size16);
82
- --thumb-size: var(--zd_size12);
83
- --off-label-size: var(--zd_size8);
84
- --off-label-radius: 3px;
85
- --off-label-top: var(--zd_size4);
86
- --off-label-right: var(--zd_size3.5);
87
- --off-label-stroke: 1.1px;
88
- --on-label-width: var(--zd_size1.4);
89
- --on-label-height: var(--zd_size8);
90
- --on-label-top: var(--zd_size4);
91
- --on-label-left: var(--zd_size6);
92
- }
93
-
94
- .large_switch {
95
- --track-width: var(--zd_size34);
96
- --track-height: var(--zd_size20);
97
- --thumb-size: var(--zd_size16);
98
- --off-label-size: var(--zd_size9);
99
- --off-label-radius: 3.5px;
100
- --off-label-top: var(--zd_size5.5);
101
- --off-label-right: var(--zd_size4);
102
- --off-label-stroke: 1.2px;
103
- --on-label-width: var(--zd_size1.6);
104
- --on-label-height: var(--zd_size11);
105
- --on-label-top: var(--zd_size4.5);
106
- --on-label-left: var(--zd_size7);
107
- }
108
- [dir=ltr] .switchLabel_right {
109
- margin-right: var(--zd_size12) ;
110
- }
111
- [dir=rtl] .switchLabel_right {
112
- margin-left: var(--zd_size12) ;
113
- }
114
- [dir=ltr] .switchLabel_left {
115
- margin-left: var(--zd_size12) ;
116
- }
117
- [dir=rtl] .switchLabel_left {
118
- margin-right: var(--zd_size12) ;
119
- }
120
- .offLabelWrapper,
121
- .onLabelWrapper {
122
- position: absolute;
123
- pointer-events: none;
124
- }
125
- .offLabelWrapper {
126
- width: var(--off-label-size);
127
- height: var(--off-label-size);
128
- top: var(--off-label-top);
129
- }
130
- [dir=ltr] .offLabelWrapper {
131
- right: var(--off-label-right);
132
- }
133
- [dir=rtl] .offLabelWrapper {
134
- left: var(--off-label-right);
135
- }
136
- .onLabelWrapper {
137
- width: var(--on-label-width);
138
- height: var(--on-label-height);
139
- top: var(--on-label-top);
140
- }
141
- [dir=ltr] .onLabelWrapper {
142
- left: var(--on-label-left);
143
- }
144
- [dir=rtl] .onLabelWrapper {
145
- right: var(--on-label-left);
146
- }
147
- .offLabel {
148
- stroke: var(--dot_shuttleGrey);
149
- stroke-width: var(--off-label-stroke);
150
- r: var(--off-label-radius);
151
- fill: none;
152
- }
153
- .onLabel {
154
- fill: var(--dot_white);
155
- }
@@ -1,16 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.defaultProps = void 0;
7
- var defaultProps = {
8
- checked: false,
9
- disabled: false,
10
- isReadOnly: false,
11
- size: 'medium',
12
- dataSelectorId: 'switch',
13
- labelSize: 'medium',
14
- labelPlacement: 'right'
15
- };
16
- exports.defaultProps = defaultProps;
@@ -1,43 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.propTypes = void 0;
7
-
8
- var _propTypes = _interopRequireDefault(require("prop-types"));
9
-
10
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
11
-
12
- var propTypes = {
13
- id: _propTypes["default"].string,
14
- title: _propTypes["default"].string,
15
- name: _propTypes["default"].string,
16
- value: _propTypes["default"].bool,
17
- checked: _propTypes["default"].bool,
18
- disabled: _propTypes["default"].bool,
19
- isReadOnly: _propTypes["default"].bool,
20
- size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
21
- text: _propTypes["default"].string,
22
- disableTitle: _propTypes["default"].string,
23
- dataId: _propTypes["default"].string,
24
- onChange: _propTypes["default"].func,
25
- dataSelectorId: _propTypes["default"].string,
26
- customClass: _propTypes["default"].shape({
27
- customSwitchWrap: _propTypes["default"].string,
28
- customSwitch: _propTypes["default"].string,
29
- customLabel: _propTypes["default"].string
30
- }),
31
- customProps: _propTypes["default"].shape({
32
- SwitchProps: _propTypes["default"].shape({
33
- WrapperProps: _propTypes["default"].object,
34
- TrackProps: _propTypes["default"].object
35
- }),
36
- LabelProps: _propTypes["default"].object
37
- }),
38
- labelPalette: _propTypes["default"].oneOf[("default", "primary", "secondary", "danger", "mandatory", "disable", "dark")],
39
- labelSize: _propTypes["default"].oneOf(['xsmall', 'small', 'medium', 'large']),
40
- labelPlacement: _propTypes["default"].string,
41
- a11y: _propTypes["default"].object
42
- };
43
- exports.propTypes = propTypes;