@zohodesk/dot 1.0.0-temp-222 → 1.0.0-temp-220.1
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.
- package/README.md +3 -2
- package/es/form/fields/Fields.module.css +3 -8
- package/es/form/fields/RadioField/RadioField.js +10 -29
- package/es/form/fields/RadioField/__tests__/RadioField.spec.js +0 -33
- package/es/form/fields/RadioField/__tests__/__snapshots__/RadioField.spec.js.snap +66 -562
- package/es/version2/GlobalNotification/GlobalNotification.js +46 -7
- package/es/version2/GlobalNotification/__tests__/GlobalNotification.spec.js +9 -0
- package/es/version2/GlobalNotification/props/propTypes.js +4 -3
- package/es/version2/GlobalNotification/utils/constants.js +6 -0
- package/lib/form/fields/Fields.module.css +3 -8
- package/lib/form/fields/RadioField/RadioField.js +11 -26
- package/lib/form/fields/RadioField/__tests__/RadioField.spec.js +0 -33
- package/lib/form/fields/RadioField/__tests__/__snapshots__/RadioField.spec.js.snap +66 -562
- package/lib/version2/GlobalNotification/GlobalNotification.js +68 -18
- package/lib/version2/GlobalNotification/__tests__/GlobalNotification.spec.js +10 -0
- package/lib/version2/GlobalNotification/props/propTypes.js +4 -3
- package/lib/version2/GlobalNotification/utils/constants.js +13 -0
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -3,8 +3,9 @@
|
|
|
3
3
|
In this Library, we Provide Some Basic Components to Build Your Application
|
|
4
4
|
|
|
5
5
|
# 1.7.27
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
|
|
7
|
+
- **GlobalNotification**
|
|
8
|
+
- `onStatusChange` prop added.
|
|
8
9
|
|
|
9
10
|
# 1.7.26
|
|
10
11
|
|
|
@@ -71,16 +71,11 @@
|
|
|
71
71
|
}
|
|
72
72
|
.radioBox {
|
|
73
73
|
max-width: 100% ;
|
|
74
|
-
transition: border var(--zd_transition3);
|
|
75
|
-
border: 1px solid var(--zdt_radiofield_box_border);
|
|
76
|
-
border-radius: 6px;
|
|
77
|
-
}
|
|
78
|
-
.radioBox.primaryTextOnly {
|
|
79
74
|
height: var(--zd_size36) ;
|
|
75
|
+
transition: border var(--zd_transition3);
|
|
80
76
|
padding: 0 var(--zd_size10) ;
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
padding: var(--zd_size18) var(--zd_size16) ;
|
|
77
|
+
border: 1px solid var(--zdt_radiofield_box_border);
|
|
78
|
+
border-radius: 6px
|
|
84
79
|
}
|
|
85
80
|
.hoverableRadioBox:hover, .radioBoxActive {
|
|
86
81
|
border-color: var(--zdt_radiofield_box_active_border)
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/**** Libraries ****/
|
|
2
2
|
import React, { PureComponent } from 'react';
|
|
3
|
-
import { compileClassNames } from '@zohodesk/utils';
|
|
4
3
|
import { defaultProps } from "./props/defaultProps";
|
|
5
4
|
import { propTypes } from "./props/propTypes";
|
|
6
5
|
/**** Components ****/
|
|
@@ -129,31 +128,14 @@ export default class RadioField extends PureComponent {
|
|
|
129
128
|
value,
|
|
130
129
|
disabled = false,
|
|
131
130
|
tooltip,
|
|
132
|
-
infoTooltip
|
|
133
|
-
secondaryText,
|
|
134
|
-
renderRightPlaceholderNode,
|
|
135
|
-
customProps
|
|
131
|
+
infoTooltip
|
|
136
132
|
} = option;
|
|
137
133
|
let isDisabledState = disabled || isDisabled;
|
|
138
134
|
let isChecked = selectedValue == value;
|
|
139
|
-
const rightPlaceholderNode = !!infoTooltip ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
|
|
140
|
-
name: "ZD-GN-info",
|
|
141
|
-
size: "16",
|
|
142
|
-
title: infoTooltip,
|
|
143
|
-
iconClass: style.infoIcon,
|
|
144
|
-
...InfoIconProps
|
|
145
|
-
}), renderRightPlaceholderNode) : renderRightPlaceholderNode;
|
|
146
|
-
const radioBoxClasses = isBoxStyle ? compileClassNames({
|
|
147
|
-
[style.radioBox]: true,
|
|
148
|
-
[style.withSecondaryText]: !!secondaryText,
|
|
149
|
-
[style.primaryTextOnly]: !secondaryText,
|
|
150
|
-
[style.hoverableRadioBox]: !isDisabledState,
|
|
151
|
-
[style.radioBoxActive]: isChecked
|
|
152
|
-
}) : '';
|
|
153
135
|
return /*#__PURE__*/React.createElement("span", {
|
|
154
136
|
key: index,
|
|
155
137
|
className: `${!isBoxStyle ? style.radio : ''} ${style.radioWrap}`
|
|
156
|
-
}, /*#__PURE__*/React.createElement(Radio, {
|
|
138
|
+
}, /*#__PURE__*/React.createElement(Radio, {
|
|
157
139
|
id: index,
|
|
158
140
|
value: value,
|
|
159
141
|
name: id,
|
|
@@ -171,23 +153,22 @@ export default class RadioField extends PureComponent {
|
|
|
171
153
|
dataId: dataId,
|
|
172
154
|
isReadOnly: isReadOnly,
|
|
173
155
|
variant: variant,
|
|
174
|
-
secondaryText: secondaryText,
|
|
175
156
|
...RadioProps,
|
|
176
157
|
a11y: {
|
|
177
158
|
tabIndex: !!selectedValue ? isChecked ? '0' : '-1' : index === 0 ? '0' : '-1',
|
|
178
159
|
...RadioProps.a11y
|
|
179
160
|
},
|
|
180
161
|
customClass: {
|
|
181
|
-
customRadioWrap:
|
|
162
|
+
customRadioWrap: isBoxStyle ? `${style.radioBox} ${!isDisabledState ? style.hoverableRadioBox : ''} ${isChecked ? style.radioBoxActive : ''}` : '',
|
|
182
163
|
...RadioProps.customClass
|
|
183
|
-
},
|
|
184
|
-
customProps: {
|
|
185
|
-
LabelProps: { ...(RadioProps.customProps ? RadioProps.customProps.LabelProps : undefined),
|
|
186
|
-
renderRightPlaceholderNode: rightPlaceholderNode
|
|
187
|
-
},
|
|
188
|
-
...RadioProps.customProps
|
|
189
164
|
}
|
|
190
|
-
}
|
|
165
|
+
}, !!infoTooltip ? /*#__PURE__*/React.createElement(Icon, {
|
|
166
|
+
name: "ZD-GN-info",
|
|
167
|
+
size: "16",
|
|
168
|
+
title: infoTooltip,
|
|
169
|
+
iconClass: style.infoIcon,
|
|
170
|
+
...InfoIconProps
|
|
171
|
+
}) : null));
|
|
191
172
|
})), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
|
|
192
173
|
text: validationMessage,
|
|
193
174
|
palette: validationPalette,
|
|
@@ -17,22 +17,6 @@ const options = [{
|
|
|
17
17
|
text: 'Kolkata',
|
|
18
18
|
value: '4'
|
|
19
19
|
}];
|
|
20
|
-
let optionsWithsecondaryText = [{
|
|
21
|
-
text: 'Chennai',
|
|
22
|
-
value: '1',
|
|
23
|
-
secondaryText: 'Tamil Nadu Capital'
|
|
24
|
-
}, {
|
|
25
|
-
text: 'Mumbai',
|
|
26
|
-
value: '2',
|
|
27
|
-
secondaryText: 'Maharashtra Capital',
|
|
28
|
-
tooltip: 'Disabled Option',
|
|
29
|
-
disabled: true
|
|
30
|
-
}, {
|
|
31
|
-
text: 'Delhi',
|
|
32
|
-
value: '3',
|
|
33
|
-
secondaryText: 'Capital of India',
|
|
34
|
-
infoTooltip: 'Capital of India'
|
|
35
|
-
}];
|
|
36
20
|
describe('RadioField', () => {
|
|
37
21
|
test('rendering the defult props', () => {
|
|
38
22
|
const {
|
|
@@ -59,21 +43,4 @@ describe('RadioField', () => {
|
|
|
59
43
|
}));
|
|
60
44
|
expect(asFragment()).toMatchSnapshot();
|
|
61
45
|
});
|
|
62
|
-
test('rendering with secondaryTextOptions', () => {
|
|
63
|
-
const {
|
|
64
|
-
asFragment
|
|
65
|
-
} = render( /*#__PURE__*/React.createElement(RadioField, {
|
|
66
|
-
options: optionsWithsecondaryText
|
|
67
|
-
}));
|
|
68
|
-
expect(asFragment()).toMatchSnapshot();
|
|
69
|
-
});
|
|
70
|
-
test('rendering with secondaryTextOptions & isBoxStyle', () => {
|
|
71
|
-
const {
|
|
72
|
-
asFragment
|
|
73
|
-
} = render( /*#__PURE__*/React.createElement(RadioField, {
|
|
74
|
-
options: optionsWithsecondaryText,
|
|
75
|
-
isBoxStyle: true
|
|
76
|
-
}));
|
|
77
|
-
expect(asFragment()).toMatchSnapshot();
|
|
78
|
-
});
|
|
79
46
|
});
|