@xaypay/tui 0.0.122 → 0.1.0

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 (6) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +21 -75
  3. package/dist/index.es.js +804 -548
  4. package/dist/index.js +804 -548
  5. package/package.json +1 -1
  6. package/tui.config.js +772 -452
package/tui.config.js CHANGED
@@ -1,500 +1,820 @@
1
- module.exports = {
1
+ import React from 'react'
2
+
3
+ const boxSizing = 'border-box';
4
+ const fontStyle = 'normal';
5
+ const fontFamily = 'Arial';
6
+ const fontWeight = 500;
7
+
8
+ const transparent = 'transparent';
9
+
10
+ const presetColors = {
11
+ info: '#F24C4C',
12
+ dark: '#3C393E',
13
+ light: '#EEEEEE',
14
+ extraLight: '#FBFBFB',
15
+ danger: '#EE0000',
16
+ success: '#0DA574',
17
+ warning: '#FECD29',
18
+ secondary: '#D1D1D1',
19
+ primary: '#051942',
20
+ primarySecond: '#00236A'
21
+ }
22
+
23
+ const fontObject = {
24
+ size: '16px',
25
+ style: fontStyle,
26
+ weight: fontWeight,
27
+ family: fontFamily,
28
+ }
29
+
30
+ export default {
2
31
  // default properties for <Button /> component
3
32
  BUTTON: {
4
- size: '16px', // for font size
5
- radius: '6px', // for border radius
6
- width: '100%', // for width
7
- weight: '400', // for font weight
8
- type: 'button', // for type
9
- height: '46px', // for height
10
- color: 'white', // for color
11
- border: 'none', // for border
12
- disabled: false, // for disabled
13
- cursor: 'pointer', // for cursor
14
- className: '', // for button class
15
- contentWidth: false, // for auto width, if contentWidth prop is exsit, then button get size automatically from inner content
16
- padding: '12px 20px', // for padding
17
- textTransform: 'none', // for text transform
18
- boxSizing: 'border-box', // for box sizing
19
- font: 'Arial, sans-serif', // for font family
20
- disabledColor: 'rgba(60, 57, 62, 1)', // for color in disabled mode
21
- backgroundColor: 'rgba(0, 35, 106, 1)', // for background color
22
- disabledLineColor: 'rgba(60, 57, 62, 1)', // for border color (outline) in disabled mode
23
- disabledBackgroundColor: 'rgba(238, 238, 238, 1)', // for background color in disabled mode
24
- transition: 'background-color 240ms, color 240ms', // for transition
25
- hoverColor: '#001745', // for hover color
26
- backgroundHoverColor: '#CB3A3A', // for hover background color
27
- btnIconMarginRight: '5px', // for button icon margin right
33
+ type: 'button',
34
+ width: '100%',
35
+ height: '46px',
36
+ color: 'white',
37
+ contentWidth: false,
38
+ border: 'none',
39
+ radius: '6px',
40
+ cursor: 'pointer',
41
+ padding: '12px 20px',
42
+ disabled: false,
43
+ className: '',
44
+ transition: 'background-color 240ms, color 240ms',
45
+
46
+ box: {
47
+ sizing: boxSizing,
48
+ },
49
+
50
+ colors: {
51
+ background: 'rgba(0, 35, 106, 1)',
52
+ backgroundHover: '#CB3A3A',
53
+ disabled: 'rgba(60, 57, 62, 1)',
54
+ disabledLine: 'rgba(60, 57, 62, 1)',
55
+ disabledBackground: 'rgba(238, 238, 238, 1)',
56
+ },
57
+
58
+ font: {...fontObject},
59
+
60
+ text: {
61
+ transform: 'none',
62
+ colors: {
63
+ hover: '#001745',
64
+ }
65
+ },
66
+
67
+ icon: {
68
+ marginRight: '10px'
69
+ }
28
70
  },
29
71
  // default properties for <Input /> component
30
72
  INPUT: {
31
- size: '16px', // for font size
32
- type: 'text', // for type
33
- width: '100%', // for width
34
- radius: '0px', // for input and also (if there exist left or right icons) icons block border-radius
35
- className: '', // for input classname (you can set custom class for your custom css)
36
- maxLength: 255, // for characters maximum count
37
- height: '46px', // for height
38
- required: false, // for showing required mark on label (it meens input is required)
39
- disabled: false, // for disabled
40
- errorLeft: '0px', // for error message position from left
41
- errorZindex: '1', // for error message z-index
42
- marginTop: '10px', // for error message position from top
43
- iconWidth: '64px', // for left or right icon block width (you can add your custom icon and you can set icon block size)
44
- errorSize: '14px', // for error font size
45
- labelSize: '16px', // for label font size
46
- errorColor: '#e00', // for error message color
47
- labelWeight: '500', // for label font weight
48
- errorClassName: '', // for error message classname (you can set custom class for your custom css)
49
- telErrorMessage: '', // for error message when type is tel
50
- phoneDisplay: 'flex', // for phone extention display, work when input type is tel
51
- autoComplete: 'off', // for autocomplete fill mode (browser specific, may not work)
52
- padding: '12px 15px', // for padding
53
- labelColor: '#3c393e', // for label color
54
- errorAnimation: false, // for error showing animation
55
- labelDisplay: 'block', // for label display
56
- labelLineHeight: '22px', // for label line height
57
- errorLineHeight: '19px', // for error message line height
58
- boxSizing: 'border-box', // for box sizing
59
- borderRight: '1px solid', // for type tel right border
60
- backgroundColor: 'white', // for input and also (if there exist left or right icons) icons block background color
61
- backgroundDisableColor: '#FBFBFB', // for input and also (if there exist left or right icons) icons block background color when input is disable
62
- color: 'rgb(60, 57, 62)', // for input color
63
- labelMarginBottom: '6px', // for label margin bottom
64
- phoneAlignItems: 'center', // for phone extention inside item, work when input type is tel
65
- transform: 'scale3d(0,0,0)', // for transform (when have error message and errorAnimation prop is true)
66
- borderRightColor: '#d1d1d1', // for type tel right border
67
- borderRightColorHover: '#3c393e', // for type tel right border color when hover is active
68
- phoneJustifyContent: 'center', // for phone extention inside item, work when input type is tel
69
- boxShadow: '0 0 0 2px #d1d1d1', // for border size and color
70
- errorAnimationDuration: '240ms', // for animation duration (when have error message and errorAnimation prop is true)
71
- labelFontFamily: 'Arial, sans-serif', // for label font family
72
- boxShadowHover: '0 0 0 2px #3c393e', // for border size and color in hover mode (set if you want to change it)
73
+ type: 'text',
74
+ width: '100%',
75
+ color: 'rgb(60, 57, 62)',
76
+ height: '46px',
77
+ radius: '0px',
78
+ padding: '12px 15px',
79
+ disabled: false,
80
+ required: false,
81
+ className: '',
82
+ maxLength: 255,
83
+ iconWidth: '64px',
84
+ autoComplete: 'off',
85
+
86
+ box: {
87
+ sizing: boxSizing,
88
+ shadow: `0 0 0 2px ${presetColors.secondary}`, // like border
89
+ shadowHover: `0 0 0 2px ${presetColors.dark}`, // like border
90
+ },
91
+
92
+ colors: {
93
+ background: 'white',
94
+ backgroundDisable: presetColors.extraLight,
95
+ },
96
+
97
+ font: {...fontObject},
98
+
99
+ label: {
100
+ color: presetColors.dark,
101
+ display: 'block',
102
+ lineHeight: '22px',
103
+ marginBottom: '6px',
104
+
105
+ font: {...fontObject}
106
+ },
107
+
108
+ error: {
109
+ left: '0px',
110
+ color: presetColors.danger,
111
+ zIndex: '1',
112
+ className: '',
113
+ marginTop: '10px',
114
+ animation: false,
115
+ transform: 'scale3d(0,0,0)',
116
+ telMessage: '',
117
+ lineHeight: '19px',
118
+ animationDuration: '240ms',
119
+
120
+ font: {...fontObject}
121
+ },
122
+
123
+ tel: {
124
+ display: 'flex',
125
+ alignItems: 'center',
126
+ justifyContent: 'center',
127
+ borderRight: {
128
+ width: '1px',
129
+ style: 'solid',
130
+ color: presetColors.secondary,
131
+
132
+ colors: {
133
+ hover: presetColors.dark
134
+ }
135
+ }
136
+ }
73
137
  },
74
138
  // default properties for <Tooltip /> component
75
139
  TOOLTIP: {
76
- type: 'top', // for tooltip type (top, right, bottom, left)
77
- width: '46px', // for tooltip parent block width
78
- radius: '0px', // for tooltip parent block border radius
79
- className: '', // for tooltip className (maybe you want to add your custom class for your custom css)
80
- color: 'white', // for tooltip color
81
- height: '46px', // for tooltip parent block height
82
- fontSize: '14px', // for tooltip font size
83
- tooltipRadius: '3px', // for tooltip border radius
84
- tooltipWidth: '100px', // for tooltip width
85
- backgroundColor: 'transparent', // for tooltip parent block background color (maybe you want to see it)
86
- fontFamily: 'Arial, sans-serif', // for tooltip font family
87
- tooltipBackgroundColor: '#03a9f4', // for tooltip backgrond color
140
+ type: 'top',
141
+ color: 'white',
142
+ width: '100px',
143
+ radius: '3px',
144
+ className: '',
145
+ // icon: React.createElement(SvgChecked, { fill: 'red' }),
146
+
147
+ parent: {
148
+ width: '46px',
149
+ height: '46px',
150
+ radius: '0px',
151
+
152
+ colors: {
153
+ background: transparent,
154
+ }
155
+
156
+ },
157
+
158
+ colors: {
159
+ background: '#03a9f4',
160
+ },
161
+
162
+ font: {...fontObject}
88
163
  },
89
164
  // default properties for <Typography /> component
90
165
  TYPOGRAPHY: {
91
- radius: '0px', // for border radius
92
- border: 'none', // for border
93
- cursor: 'default', // for cursor
94
- textShadow: 'none', // for text shadow
95
- className: '', // for typography class
96
-
97
- colorp: '#3C393E', // for variant p color
98
- colorh1: '#3C393E', // for variant h1 color
99
- colorh2: '#3C393E', // for variant h2 color
100
- colorh3: '#3C393E', // for variant h3 color
101
- colorh4: '#3C393E', // for variant h4 color
102
- colorh5: '#3C393E', // for variant h5 color
103
- colorh6: '#3C393E', // for variant h6 color
104
- colorspan: '#3C393E', // for variant span color
105
-
106
- sizep: '13px', // for variant p font size
107
- sizeh1: '70px', // for variant h1 font size
108
- sizeh2: '50px', // for variant h2 font size
109
- sizeh3: '38px', // for variant h3 font size
110
- sizeh4: '24px', // for variant h4 font size
111
- sizeh5: '20px', // for variant h5 font size
112
- sizeh6: '14px', // for variant h6 font size
113
- sizespan: '12px', // for variant span font size
114
-
115
- textAlignp: 'left', // for variant p text align
116
- textAlignh1: 'left', // for variant h1 text align
117
- textAlignh2: 'left', // for variant h2 text align
118
- textAlignh3: 'left', // for variant h3 text align
119
- textAlignh4: 'left', // for variant h4 text align
120
- textAlignh5: 'left', // for variant h5 text align
121
- textAlignh6: 'left', // for variant h6 text align
122
- textAlignspan: 'left', // for variant span text align
123
-
124
- weightp: '500', // for variant p font weight
125
- weighth1: '400', // for variant h1 font weight
126
- weighth2: '400', // for variant h2 font weight
127
- weighth3: '400', // for variant h3 font weight
128
- weighth4: '600', // for variant h4 font weight
129
- weighth5: '600', // for variant h5 font weight
130
- weighth6: '600', // for variant h6 font weight
131
- weightspan: '500', // for variant span font weight
132
-
133
- backgroundColorp: 'transparent', // for variant p background color
134
- backgroundColorh1: 'transparent', // for variant h1 background color
135
- backgroundColorh2: 'transparent', // for variant h2 background color
136
- backgroundColorh3: 'transparent', // for variant h3 background color
137
- backgroundColorh4: 'transparent', // for variant h4 background color
138
- backgroundColorh5: 'transparent', // for variant h5 background color
139
- backgroundColorh6: 'transparent', // for variant h6 background color
140
- backgroundColorspan: 'transparent', // for variant span background color
141
-
142
- textDecorationp: 'none', // for variant p text decoration
143
- textDecorationh1: 'none', // for variant h1 text decoration
144
- textDecorationh2: 'none', // for variant h2 text decoration
145
- textDecorationh3: 'none', // for variant h3 text decoration
146
- textDecorationh4: 'none', // for variant h4 text decoration
147
- textDecorationh5: 'none', // for variant h5 text decoration
148
- textDecorationh6: 'none', // for variant h6 text decoration
149
- textDecorationspan: 'none', // for variant span text decoration
150
-
151
- fontStylep: 'normal', // for variant p font style
152
- fontStyleh1: 'normal', // for variant h1 font style
153
- fontStyleh2: 'normal', // for variant h2 font style
154
- fontStyleh3: 'normal', // for variant h3 font style
155
- fontStyleh4: 'normal', // for variant h4 font style
156
- fontStyleh5: 'normal', // for variant h5 font style
157
- fontStyleh6: 'normal', // for variant h6 font style
158
- fontStylespan: 'normal', // for variant span font style
159
-
160
- lineHeightp: 'normal', // for variant p line height
161
- lineHeighth1: 'normal', // for variant h1 line height
162
- lineHeighth2: 'normal', // for variant h2 line height
163
- lineHeighth3: 'normal', // for variant h3 line height
164
- lineHeighth4: 'normal', // for variant h4 line height
165
- lineHeighth5: 'normal', // for variant h5 line height
166
- lineHeighth6: 'normal', // for variant h6 line height
167
- lineHeightspan: 'normal', // for variant span line height
168
-
169
- textTransformp: 'none', // for variant p text transform
170
- textTransformh1: 'none', // for variant h1 text transform
171
- textTransformh2: 'none', // for variant h2 text transform
172
- textTransformh3: 'none', // for variant h3 text transform
173
- textTransformh4: 'none', // for variant h4 text transform
174
- textTransformh5: 'none', // for variant h5 text transform
175
- textTransformh6: 'none', // for variant h6 text transform
176
- textTransformspan: 'none', // for variant span text transform
177
-
178
- fontFamilyp: 'Arial, sans-serif', // for variant p font family
179
- fontFamilyh1: 'Arial, sans-serif', // for variant h1 font family
180
- fontFamilyh2: 'Arial, sans-serif', // for variant h2 font family
181
- fontFamilyh3: 'Arial, sans-serif', // for variant h3 font family
182
- fontFamilyh4: 'Arial, sans-serif', // for variant h4 font family
183
- fontFamilyh5: 'Arial, sans-serif', // for variant h5 font family
184
- fontFamilyh6: 'Arial, sans-serif', // for variant h6 font family
185
- fontFamilyspan: 'Arial, sans-serif', // for variant span font family
166
+ radius: '0px',
167
+ border: 'none',
168
+ cursor: 'default',
169
+ className: '',
170
+
171
+ colors: {
172
+ p: presetColors.dark,
173
+ h1: presetColors.dark,
174
+ h2: presetColors.dark,
175
+ h3: presetColors.dark,
176
+ h4: presetColors.dark,
177
+ h5: presetColors.dark,
178
+ h6: presetColors.dark,
179
+ span: presetColors.dark,
180
+
181
+ backgroundp: transparent,
182
+ backgroundh1: transparent,
183
+ backgroundh2: transparent,
184
+ backgroundh3: transparent,
185
+ backgroundh4: transparent,
186
+ backgroundh5: transparent,
187
+ backgroundh6: transparent,
188
+ backgroundspan: transparent,
189
+ },
190
+
191
+ font: {
192
+ sizep: '13px',
193
+ sizeh1: '70px',
194
+ sizeh2: '50px',
195
+ sizeh3: '38px',
196
+ sizeh4: '24px',
197
+ sizeh5: '20px',
198
+ sizeh6: '14px',
199
+ sizespan: '12px',
200
+
201
+ stylep: fontStyle,
202
+ styleh1: fontStyle,
203
+ styleh2: fontStyle,
204
+ styleh3: fontStyle,
205
+ styleh4: fontStyle,
206
+ styleh5: fontStyle,
207
+ styleh6: fontStyle,
208
+ stylespan: fontStyle,
209
+
210
+ weightp: fontWeight,
211
+ weighth1: fontWeight,
212
+ weighth2: fontWeight,
213
+ weighth3: fontWeight,
214
+ weighth4: fontWeight,
215
+ weighth5: fontWeight,
216
+ weighth6: fontWeight,
217
+ weightspan: fontWeight,
218
+
219
+ familyp: fontFamily,
220
+ familyh1: fontFamily,
221
+ familyh2: fontFamily,
222
+ familyh3: fontFamily,
223
+ familyh4: fontFamily,
224
+ familyh5: fontFamily,
225
+ familyh6: fontFamily,
226
+ familyspan: fontFamily,
227
+ },
228
+
229
+ text: {
230
+ alignp: 'left',
231
+ alignh1: 'left',
232
+ alignh2: 'left',
233
+ alignh3: 'left',
234
+ alignh4: 'left',
235
+ alignh5: 'left',
236
+ alignh6: 'left',
237
+ alignspan: 'left',
238
+
239
+ shadowp: 'none',
240
+ shadowh1: 'none',
241
+ shadowh2: 'none',
242
+ shadowh3: 'none',
243
+ shadowh4: 'none',
244
+ shadowh5: 'none',
245
+ shadowh6: 'none',
246
+ shadowspan: 'none',
247
+
248
+ transformp: 'none',
249
+ transformh1: 'none',
250
+ transformh2: 'none',
251
+ transformh3: 'none',
252
+ transformh4: 'none',
253
+ transformh5: 'none',
254
+ transformh6: 'none',
255
+ transformspan: 'none',
256
+
257
+ decorationp: 'none',
258
+ decorationh1: 'none',
259
+ decorationh2: 'none',
260
+ decorationh3: 'none',
261
+ decorationh4: 'none',
262
+ decorationh5: 'none',
263
+ decorationh6: 'none',
264
+ decorationspan: 'none',
265
+
266
+ lineHeightp: 'normal',
267
+ lineHeighth1: 'normal',
268
+ lineHeighth2: 'normal',
269
+ lineHeighth3: 'normal',
270
+ lineHeighth4: 'normal',
271
+ lineHeighth5: 'normal',
272
+ lineHeighth6: 'normal',
273
+ lineHeightspan: 'normal',
274
+ }
186
275
  },
187
276
  // default properties for <Select /> component
188
277
  SELECT: {
189
- dots: false, // for options, cut text and add dots
190
- showCloseIcon: true, // for select reset icon, when prop exist or true is show, otherwise is hide
191
- className: '', // for select class
192
- marginTop: '10px', // for error message postion from top
193
- labelWeight: '500', // for label font weight
194
- labelColor: '#3C393E', // for label color
195
- labelDisplay: 'block', // for label display
196
- labelFontSize: '16px', // for label font size
197
- labelLineHeight: '22px', // for label line height
198
- labelMarginBottom: '6px', // for label margin bottom
199
- labelTextTransform: 'none', // for label text transform
200
- labelFontFamily: 'Arial, sans-serif', // for label font family
201
-
202
- errorSize: '14px', // for error font size
203
- errorColor: 'rgb(238, 0, 0)', // for error color
204
-
205
- cursor: 'pointer', // for selected cursor
206
- selectedRadius: '6px', // for selected border radius
207
- selectedColor: '#3C393E', // for selected color
208
- selectedFontSize: '16px', // for selected font size
209
- selectedMinHeight: '46px', // for selected height
210
- selectedFontWeight: '500', // for selected font weight
211
- selectedLineHeight: '22px', // for selected line height
212
- selectedPadding: '0px 15px', // for selected padding
213
- selectedHoverColor: '#373538', // for selected color ( when hover )
214
- selectedBoxSizing: 'border-box', // for selected box sizing
215
- selectedTransition: 'border-color 240ms', // for selected transition
216
- selectedBackgroundColor: '#FBFBFB', // for selected background color
217
- selectedDisableBackgroundColor: '#FBFBFB', // for selected background color when selet is disable
218
-
219
- optionsBorderRadius: '6px', // for options block border radius
220
- optionsBackgroundColor: '#FBFBFB', // for options block background color
221
- optionsBoxShadow: '0 0 10px rgba(60, 57, 62, 0.08)', // for options block box shadow
222
-
223
- optionItemColor: '#3C393E', // for option color
224
- optionItemFontSize: '16px', // for option font size
225
- optionItemCursor: 'pointer', // for option cursor
226
- optionItemMinHeight: '46px', // for option min height
227
- optionItemFontWeight: '500', // for option font weight
228
- optionItemLineHeight: '25px', // for option line height
229
- optionItemPadding: '0px 15px', // for option padding
230
- optionItemMarginBottom: '2px', // for option margin bottom
231
- optionItemColorHover: '#00236A', // for option color ( when hover )
232
- optionItemBoxSizing: 'border-box', // for option box sizing
233
- optionItemBackgroudColor: '#ffffff', // for option background color
234
- optionItemBackgroudColorHover: 'unset', // for option background color ( when hover )
235
-
236
- boxShadow: '0 0 0 2px #d1d1d1',
237
- boxShadowHover: '0 0 0 2px #3c393e',
278
+ dots: false,
279
+ className: '',
280
+ showCloseIcon: true,
281
+ // arrowIcon: React.createElement(SvgChecked, { fill: 'green' }),
282
+ // closeIcon: React.createElement(SvgChecked, { fill: 'green' }),
283
+
284
+ box: {
285
+ shadow: `0 0 0 2px ${presetColors.secondary}`, // like border
286
+ shadowHover: `0 0 0 2px ${presetColors.dark}`, // like border
287
+ },
288
+
289
+ label: {
290
+ color: presetColors.dark,
291
+ display: 'block',
292
+ lineHeight: '22px',
293
+ marginBottom: '6px',
294
+ textTransform: 'none',
295
+
296
+ font: {...fontObject}
297
+ },
298
+
299
+ selected: {
300
+ color: presetColors.dark,
301
+ cursor: 'pointer',
302
+ radius: '6px',
303
+ padding: '0px 15px',
304
+ minHeight: '46px',
305
+ lineHeight: '22px',
306
+ transition: 'border-color 240ms',
307
+
308
+
309
+ box: {
310
+ sizing: boxSizing,
311
+ },
312
+
313
+ colors: {
314
+ hover: '#373538',
315
+ background: presetColors.extraLight,
316
+ backgroundDisable: presetColors.extraLight,
317
+ },
318
+
319
+ font: {...fontObject}
320
+ },
321
+
322
+ options: {
323
+ radius: '6px',
324
+
325
+ colors: {
326
+ background: presetColors.extraLight,
327
+ },
328
+
329
+ box: {
330
+ shadow: '0 0 10px rgba(60, 57, 62, 0.08)',
331
+ },
332
+
333
+ item: {
334
+ color: presetColors.dark,
335
+ cursor: 'pointer',
336
+ padding: '0px 15px',
337
+ minHeight: '46px',
338
+ lineHeight: '25px',
339
+ marginBottom: '2px',
340
+
341
+ box: {
342
+ sizing: boxSizing,
343
+ },
344
+
345
+ colors: {
346
+ hover: presetColors.primarySecond,
347
+ backgroud: '#ffffff',
348
+ backgroudHover: 'unset',
349
+ },
350
+
351
+ font: {...fontObject}
352
+ },
353
+ },
354
+
355
+ error: {
356
+ color: 'rgb(238, 0, 0)',
357
+ marginTop: '10px',
358
+ zIndex: 10,
359
+
360
+ box: {
361
+ shadow: `0 0 0 2px ${presetColors.danger}`
362
+ },
363
+
364
+ font: {...fontObject}
365
+ }
238
366
  },
239
367
  // default properties for <Textarea /> component
240
368
  TEXTAREA: {
241
- size: '16px', // for font size
242
- radius: '6px', // for border radius
243
- width: '400px', // for width
244
- resize: 'none', // for resize
245
- height: '134px', // for height
246
- maxLength: 1500, // for characters maximum count
247
- color: '#3C393E', // for color
248
- className: '', // for Textarera class
249
- marginTop: '10px', // for error message position from top
250
- minWidth: '200px', // for minimum width
251
- maxWidth: '500px', // for maximum width
252
- labelSize: '16px', // for label font size
253
- errorSize: '12px', // for error font size
254
- minHeight: '100px', // for minimum height
255
- maxHeight: '300px', // for maximum height
256
- padding: '12px 15px', // for padding
257
- errorColor: '#E40E00', // for error color
258
- labelColor: '#3C393E', // for label color
259
- labelWeight: 'normal', // for label font weight
260
- labelDisplay: 'block', // for label display
261
- boxSizing: 'border-box', // for box sizing
262
- backgroundColor: 'white', // for background color
263
- labelMarginBottom: '10px', // for label margin bottom
264
- borderHoverColor: '#3C393E', // for border color when hover action is happaning
265
- borderFocusColor: '#00236A', // for boredr color when focus action is happaning
266
- boxShadow: '0 0 0 2px #d1d1d1', // for border size and color
267
- labelFontFamily: 'Arial, sans-serif', // for label font family
369
+ color: presetColors.dark,
370
+ width: '400px',
371
+ height: '134px',
372
+ radius: '6px',
373
+ resize: 'none',
374
+ padding: '12px 15px',
375
+ minWidth: '200px',
376
+ maxWidth: '500px',
377
+ minHeight: '100px',
378
+ maxHeight: '300px',
379
+ maxLength: 1500,
380
+ className: '',
381
+
382
+ box: {
383
+ sizing: boxSizing,
384
+ shadow: `0 0 0 2px ${presetColors.secondary}`, // like border
385
+
386
+ colors: {
387
+ hover: `0 0 0 2px ${presetColors.dark}`, // like border color
388
+ focus: `0 0 0 2px ${presetColors.primarySecond}`, // like border color
389
+ },
390
+ },
391
+
392
+ colors: {
393
+ background: 'white',
394
+ },
395
+
396
+ label: {
397
+ color: presetColors.dark,
398
+ display: 'block',
399
+ marginBottom: '10px',
400
+
401
+ font: {...fontObject}
402
+ },
403
+
404
+ font: {...fontObject},
405
+
406
+ error: {
407
+ color: '#E40E00',
408
+ marginTop: '10px',
409
+
410
+ box: {
411
+ shadow: `0 0 0 2px ${presetColors.danger}` // like border
412
+ },
413
+
414
+ font: {...fontObject}
415
+ }
268
416
  },
269
417
  // default properties for <NewAutocomplete /> component
270
418
  AUTOCOMPLETE: {
271
- labelWeight: 500, // for label font weight
272
- marginTop: '10px', // for error message position from top
273
- labelSize: '16px', // for label font size
274
- labelColor: '#3c393e', // for label color
275
- labelDisplay: 'block', // for label display
276
- labelLineHeight: '22px', // for label line height
277
- labelMarginBottom: '6px', // for label margin bottom
278
- labelTextTransform: 'none', // for label text transform
279
- labelFontFamily: 'Arial, sans-serif', // for label font family
280
-
281
- className: '', // for autocomplete class if it need
282
- searchCount: 3, // for autocomplete show result logic
283
- errorSize: '16px', // for error font size
284
- autoComplete: 'off', // for off auto fill functionality ( browser specific, maybe will not work )
285
- errorColor: '#ee0000', // for error color
286
-
287
- contentDisplay: 'flex', // for autocomplete parent block display
288
- contentDirection: 'column', // for autocomplete parent block flex direction
289
- contentPosition: 'relative', // for autocomplete parent block position
290
- showOptionDuration: '640ms', // for autocomplete parent block animation duration
291
- innerErrorPadding: '0px 15px', // for autocomplete error padding
292
- innerErrorBackgroundColor: 'green', // for autocomplete inner error message background color
293
-
294
- contentTopWeight: 500, // for autocomplate top block font weight
295
- contentTopSize: '16px', // for autocomplate top block font size
296
- contentTopRadius: '6px', // for autocomplate top block border radius
297
- contentTopHeight: '46px', // for autocomplate top block height
298
- contentTopDisplay: 'flex', // for autocomplate top block display
299
- contentTopDirection: 'row', // for autocomplate top block flex direction
300
- contentTopColor: '#3C393E', // for autocomplate top block color
301
- contentTopMaxWidth: '400px', // for autocomplate top block max width
302
- contentTopLineHeight: '22px', // for autocomplate top block line height
303
- contentTopPadding: '0px 15px', // for autocomplate top block padding
304
- contentTopBoxSizing: 'border-box', // for autocomplate top block box sizing
305
- contentTopBorder: '0 0 0 2px #D1D1D1', // for autocomplate top block border color
306
- contentTopBorderHover: '0 0 0 2px #3C393E', // for autocomplate top block border hover color
307
- contentTopBorderActive: '0 0 0 2px #00236A', // for autocomplate top block border active color
308
-
309
- contentBottomZindex: 1, // for autocomplete bottom block z-index
310
- contentBottomLeft: '0px', // for autocomplete bottom block left
311
- contentBottomRadius: '6px', // for autocomplete bottom block border radius
312
- contentBottomWidth: '100%', // for autocomplete bottom block width
313
- contentBottomMinHeight: '0px', // for autocomplete bottom block minimal height
314
- contentBottomMaxWidth: '400px', // for autocomplete bottom block maximum width
315
- contentBottomOverflow: 'hidden', // for autocomplete bottom block overflow
316
- contentBottomPosition: 'absolute', // for autocomplete bottom block position
317
- contentBottomBackgroundColor: '#FBFBFB', // for autocomplete bottom block background color
318
- contentBottomBoxShadow: '0 0 10px rgba(60, 57, 62, 0.08)', // for autocomplete bottom block box shadow
319
-
320
- contentBottomInnerDisplay: 'flex', // for autocomplete bottom block inner display
321
- contentBottomInnerOverflowY: 'auto', // for autocomplete bottom block inner overflow y
322
- contentBottomInnerMaxHeight: '234px', // for autocomplete bottom block inner maximum height
323
- contentBottomInnerOverflowX: 'hidden', // for autocomplete bottom block inner overflow x
324
- contentBottomInnerDirection: 'column', // for autocomplete bottom block inner flex direction
325
-
326
- contentBottomRowHeight: '46px', // for autocomplete bottom block inner row height
327
- contentBottomRowDisplay: 'flex', // for autocomplete bottom block inner row display
328
- contentBottomRowFontWeight: 500, // for autocomplete bottom block inner row font weight
329
- contentBottomRowColor: '#3C393E', // for autocomplete bottom block inner row color
330
- contentBottomRowFontSize: '16px', // for autocomplete bottom block inner row font size
331
- contentBottomRowCursor: 'pointer', // for autocomplete bottom block inner row cursor
332
- contentBottomRowLineHeight: '22px', // for autocomplete bottom block inner row line height
333
- contentBottomRowMarginBottom: '2px', // for autocomplete bottom block inner row margin bottom
334
- contentBottomRowPadding: '0px 15px', // for autocomplete bottom block inner row padding
335
- contentBottomRowAlignItems: 'center', // for autocomplete bottom block inner row align items ( flex )
336
- contentBottomRowHoverColor: '#00236A', // for autocomplete bottom block inner row hove color
337
- contentBottomRowBoxSizing: 'border-box', // for autocomplete bottom block inner row box sizing
338
- contentBottomRowTransition: 'all 240ms', // for autocomplete bottom block inner row transition
339
- contentBottomRowBackgroundColor: '#ffffff', // for autocomplete bottom block inner row background color
340
- contentBottomRowHoverBackgroundColor: 'initial', // for autocomplete bottom block inner row hover background color
341
- backgroundDisableColor: '#FBFBFB', // for autocomplete disable background color
419
+ className: '',
420
+ searchCount: 3,
421
+ autoComplete: 'off',
422
+ showOptionDuration: '640ms',
423
+
424
+ color: presetColors.dark,
425
+ radius: '6px',
426
+ height: '46px',
427
+ padding: '0px 15px',
428
+ display: 'flex',
429
+ maxWidth: '400px',
430
+ direction: 'row',
431
+ lineHeight: '22px',
432
+ box: {
433
+ sizing: boxSizing,
434
+ shadow: `0 0 0 2px ${presetColors.secondary}`, // like border
435
+ shadowHover: `0 0 0 2px ${presetColors.dark}`, // like border
436
+ shadowActive: `0 0 0 2px ${presetColors.primarySecond}`, // like border
437
+ },
438
+ font: {...fontObject},
439
+
440
+ parent: {
441
+ display: 'flex',
442
+ direction: 'column',
443
+ position: 'relative',
444
+ },
445
+
446
+ colors: {
447
+ backgroundDisable: presetColors.extraLight,
448
+ },
449
+
450
+ label: {
451
+ color: presetColors.dark,
452
+ display: 'block',
453
+ lineHeight: '22px',
454
+ marginBottom: '6px',
455
+ textTransform: 'none',
456
+
457
+ font: {...fontObject}
458
+ },
459
+
460
+ contentBottom: {
461
+ left: '0px',
462
+ width: '100%',
463
+ zIndex: 1,
464
+ radius: '6px',
465
+ maxWidth: '400px',
466
+ overflow: 'hidden',
467
+ position: 'absolute',
468
+ minHeight: '0px',
469
+
470
+ inner: {
471
+ display: 'flex',
472
+ overflowY: 'auto',
473
+ maxHeight: '234px',
474
+ overflowX: 'hidden',
475
+ direction: 'column',
476
+ },
477
+
478
+ row: {
479
+ color: presetColors.dark,
480
+ height: '46px',
481
+ cursor: 'pointer',
482
+ display: 'flex',
483
+ padding: '0px 15px',
484
+ lineHeight: '22px',
485
+ alignItems: 'center',
486
+ transition: 'all 240ms',
487
+ marginBottom: '2px',
488
+
489
+ colors: {
490
+ hover: presetColors.primarySecond,
491
+ background: '#ffffff',
492
+ backgroundHover: 'initial',
493
+ },
494
+
495
+ font: {...fontObject}
496
+ },
497
+
498
+ colors: {
499
+ background: presetColors.extraLight,
500
+ },
501
+
502
+ box: {
503
+ shadow: '0 0 10px rgba(60, 57, 62, 0.08)',
504
+ sizing: boxSizing,
505
+ }
506
+ },
507
+
508
+ error: {
509
+ color: presetColors.danger,
510
+ marginTop: '10px',
511
+
512
+ font: {...fontObject},
513
+
514
+ box: {
515
+ shadow: `0 0 0 2px ${presetColors.danger}` // like border
516
+ }
517
+ },
518
+
519
+ innerError: {
520
+ padding: '0px 15px',
521
+
522
+ colors: {
523
+ background: 'gray',
524
+ }
525
+ }
342
526
  },
343
527
  // default properties for <Captcha /> component
344
528
  CAPTCHA: {
345
- size: '16px', // for captcha label font size
346
- color: '#3C393E', // for captcha label color
347
- className: '', // for captach class
529
+ className: '',
530
+
531
+ label: {
532
+ color: presetColors.dark,
533
+
534
+ font: {...fontObject}
535
+ }
348
536
  },
349
537
  // default properties for <File /> component
350
538
  FILE: {
351
- or: 'կամ', // for file place text
352
- weight: 400, // for file place font weight
353
- size: '12px', // for file font size
354
- radius: '6px', // for file place border radius
355
- className: '', // for FILE class
356
- height: '200px', // for file choose place height
357
- color: '#3C393E', // for file place color
358
- upload: 'Բեռնել', // for file place text
359
- maxWidth: '440px', // for file width
360
- labelSize: '16px', // for file font size
361
- errorSize: '12px', // for file error font size
362
- border: '2px dashed', // for file choose place border
363
- labelColor: '#4A4A4D', // for file color
364
- timeForRemoveError: 4000, // for file error hide time when format is wrong
365
- errorColor: '#ee0000', // for file place and error message error color
366
- borderColor: '#D1D1D1', // for file choose place border color
367
- listItemHeight: '70px', // for file list item height
368
- uploadColor: '#0DA574', // for file place upload text color
369
- progressColor: '#4A4A4D', // for file progress bar color
370
- progressFontSize: '16px', // for file progress bar font size
371
- listItemErrorSize: '12px', // for file multiple mode error font size
372
- backgroundColor: '#F8F8F8', // for file choose place background color
373
- listItemErrorColor: '#E40E00', // for file multiple mode error color
374
- borderHoverColor: '#00236A', // for file border color, when hover is happening
375
- fileAreaImageHeight: 'auto', // for file place choosen image preview height
376
- listItemPadding: '14px 20px', // for file list item padding
377
- fileSizeText: 'Առավելագույնը', // for file place file size text
378
- fileAreaImageWidth: '27.8rem', // for file place choosen image preview width
379
- progressTrackColor: '#E5E8E8', // for file item progress track background color
380
- extentionsRowMarginTop: '40px', // for file extentions row margin top
381
- progressFailedColor: '#E40E00', // for file list item progress backfround color when file upload is failed
382
- progressSuccessColor: '#069768', // for file list item progress background color when file upload is success
383
- progressLoadingColor: '#051942', // for file list item progress background color when file upload is loading
384
- formatError: 'ֆայլի սխալ ֆորմատ', // for file error text when file extention is invalid
385
- noChoosenFile: 'Ֆայլը ընտրված չէ', // for file error text when file is not choosen
386
- listItemBackgroundColor: '#F6F8F8', // for file list item background color
387
- maxSizeError: 'Առավելագույն ծավալ', // for file error text when choosen file size is more then maxSize prop
388
- putFileHere: 'Տեղադրել ֆայլը այստեղ', // for file place text
389
- hiddenBackgroundColor: 'rgba(60, 57, 62, 0.4)', // for file place background color when hover on file place and there is a choosen file
390
- listItemBackgroundErrorColor: '#F6F8F8', // for file multiple mode error background color
391
-
392
- uploadBtnFont: 'Arial', // for button font familty
393
- uploadBtnSize: '14px', // for button font size
394
- uploadBtnLabel: 'Բեռնել', // for button text
395
- uploadBtnColor: '#fff', // for button color
396
- uploadBtnHeight: '30px', // for button height
397
- uploadBtnBackgroundColor: 'rgba(0, 35, 106, 1)' // for button background color
539
+ color: presetColors.dark,
540
+ radius: '6px',
541
+ height: '200px',
542
+ maxWidth: '440px',
543
+ className: '',
544
+
545
+ areaImage: {
546
+ width: '27.8rem',
547
+ height: 'auto',
548
+ },
549
+
550
+ or: 'կամ',
551
+ upload: 'Բեռնել',
552
+ uploadColor: presetColors.success,
553
+ putFileHere: 'Տեղադրել ֆայլը այստեղ',
554
+
555
+ sizeText: 'Առավելագույնը',
556
+ timeForRemoveError: 4000,
557
+ extentionsRowMarginTop: '40px',
558
+
559
+ border: {
560
+ width: '2px',
561
+ style: 'dashed',
562
+ color: presetColors.secondary,
563
+
564
+ colors: {
565
+ hover: presetColors.primarySecond,
566
+ }
567
+ },
568
+
569
+ colors: {
570
+ background: '#F8F8F8',
571
+ backgroundHidden: 'rgba(60, 57, 62, 0.4)',
572
+ },
573
+
574
+ label: {
575
+ color: '#4A4A4D',
576
+
577
+ font: {...fontObject}
578
+ },
579
+
580
+ font: {...fontObject},
581
+
582
+ error: {
583
+ color: presetColors.danger,
584
+
585
+ font: {...fontObject},
586
+
587
+ format: 'ֆայլի սխալ ֆորմատ',
588
+ maxSize: 'Առավելագույն ծավալ',
589
+ noChoosenFile: 'Ֆայլը ընտրված չէ',
590
+ },
591
+
592
+ progress: {
593
+ color: '#4A4A4D',
594
+
595
+ colors: {
596
+ track: '#E5E8E8',
597
+ failed: '#E40E00',
598
+ success: '#069768',
599
+ loading: presetColors.primary,
600
+ },
601
+
602
+ font: {...fontObject}
603
+ },
604
+
605
+ uploadBtn: {
606
+ label: 'Բեռնել',
607
+ color: '#fff',
608
+ height: '30px',
609
+
610
+ colors: {
611
+ hover: '#fff',
612
+ background: 'rgba(0, 35, 106, 1)',
613
+ backgroundHover: 'rgba(0, 35, 106, 1)',
614
+ },
615
+
616
+ font: {...fontObject}
617
+ },
618
+
619
+ listItem: {
620
+ color: '#4a4a4d',
621
+ height: '70px',
622
+ padding: '14px 20px',
623
+
624
+ colors: {
625
+ background: '#F6F8F8',
626
+ backgroundError: '#F6F8F8',
627
+ },
628
+
629
+ font: {...fontObject},
630
+
631
+ error: {
632
+ color: '#E40E00',
633
+ font: {...fontObject}
634
+ }
635
+ },
636
+
637
+ icon: {
638
+ // comment here for example,
639
+
640
+ // pdf: React.createElement(SvgChecked, { fill: 'green' }),
641
+ // png: React.createElement(SvgChecked, { fill: 'green' }),
642
+ // jpg: React.createElement(SvgChecked, { fill: 'green' }),
643
+ // jpeg: React.createElement(SvgChecked, { fill: 'green' }),
644
+ // heic: React.createElement(SvgChecked, { fill: 'green' }),
645
+ // wrong: React.createElement(SvgChecked, { fill: 'green' }),
646
+ // upload: React.createElement(SvgChecked, { fill: 'green' }),
647
+ // required: React.createElement(SvgChecked, { fill: 'green' }),
648
+ // removeFile: React.createElement(SvgChecked, { fill: 'green' }),
649
+ // deleteComponent: React.createElement(SvgChecked, { fill: 'green' }),
650
+ // deleteItem: React.createElement(SvgUnchecked, { fill: 'green' }),
651
+ }
398
652
  },
399
653
  // default properties for <Modal /> component
400
654
  MODAL: {
401
- alignItems: 'center', // for modal ( flex-start, center, flex-end ) --> align-items
402
- justifyContent: 'center', // for modal ( flex-start, center, flex-end ) --> justify-content
403
- className: '', // for modal class
404
- mMaxWidth: '95%', // for modal max width
405
- mMaxHeight: '95vh', // for modal max height
406
- outsideClose: true, // for modal close when happened outside click
407
- radius: '14px', // for modal border radius
408
- minWidth: '320px', // for modal min width
409
- headerSize: '20px', // for modal header font size
410
- minHeight: '200px', // for modal min height
411
- headerWeight: '600', // for modal header font weight
412
- imageHeight: '100%', // for modal image height on images mode
413
- imageWidth: '', // for modal image width on images mode
414
- headerHeight: '30px', // for modal header height
415
- grayDecorHeight: '80px', // for modal top decoration when show slider
416
- width: 'fit-content', // for modal width
417
- height: 'fit-content', // for modal width
418
- headerColor: '#00236a', // for modal header color
419
- backgroundColor: 'white', // for modal background color
420
- padding: '20px 20px 20px', // for modal padding
421
- layerBackgroundColor: 'rgba(0,0,0,0.4)', // for modal parent layer background color
422
- borderWidth: '20px', // for modal padding from border transparent
423
- borderStyle: 'solid', // for modal border style
424
- borderColor: 'transparent', // for modal border color
425
- imageMargin: '0px', // for image margin
426
- imageMaxWidth: '100%', // for image max width
427
- imageWrapHeight: '80vh', // for image wrap
428
- imageWrapWidth: '100%', // for image wrap
655
+ width: '',
656
+ height: '',
657
+ maxWidth: '95%',
658
+ minWidth: '320px',
659
+ maxHeight: '95vh',
660
+ minHeight: '200px',
661
+ radius: '14px',
662
+ padding: '20px 20px 20px',
663
+ className: '',
664
+ alignItems: 'center',
665
+ outsideClose: true,
666
+ justifyContent: 'center',
667
+ grayDecorHeight: '80px',
668
+
669
+ border: {
670
+ width: '20px',
671
+ style: 'solid',
672
+ color: transparent,
673
+ },
674
+
675
+ colors: {
676
+ background: 'white',
677
+ backgroundLayer: 'rgba(0,0,0,0.4)',
678
+ },
679
+
680
+ header: {
681
+ color: presetColors.primarySecond,
682
+ height: '30px',
683
+ font: {...fontObject}
684
+ },
685
+
686
+ image: {
687
+ width: '',
688
+ margin: '0px',
689
+ height: '100%',
690
+ maxWidth: '100%',
691
+ wrapWidth: '100%',
692
+ wrapHeight: '100%',
693
+ },
694
+
695
+ icon: {
696
+ // zoom: React.createElement(SvgChecked, { fill: 'green' }),
697
+ // prev: React.createElement(SvgChecked, { fill: 'green' }),
698
+ // next: React.createElement(SvgChecked, { fill: 'green' }),
699
+ // close: React.createElement(SvgChecked, { fill: 'green' }),
700
+ // closeSlide: React.createElement(SvgChecked, { fill: 'green' }),
701
+ },
702
+ closeAreaBackgroundColor: 'linear-gradient(to bottom, rgb(60, 57, 62), rgba(60, 57, 62, 0))' // for close div background color
429
703
  },
430
704
  // default properties for <Checkbox /> component
431
705
  CHECKBOX: {
432
- checkedColor: '#00236A', // for checkbox background ( fill ) color
433
- unCheckedColor: '#D1D1D1', // for checkbox border color
434
- labelMarginLeft: '10px', // for checkbox label margin left
435
- checkBoxMarginBottom: '10px', // for checkbox margin bottom
436
- className: '' // for checkbox class
706
+ className: '',
707
+ marginBottom: '10px',
708
+
709
+ colors: {
710
+ checked: presetColors.primarySecond,
711
+ unChecked: presetColors.secondary,
712
+ },
713
+
714
+ label: {
715
+ marginLeft: '10px',
716
+ }
717
+
718
+ // checkedIcon: React.createElement(SvgChecked, { fill: 'green' }),
719
+ // unCheckedIcon: React.createElement(<SvgUnchecked fill="#E00" />),
437
720
  },
438
721
  // default properties for <Table /> component
439
722
  TABLE: {
440
- tHeadFontSize: '16px', // for table header font size
441
- tHeadFontWeight: 600, // for table header font weight
442
- tHeadColor: '#FBFBFB', // for table header color
443
- tHeadTextAlign: 'center', // for table header text align
444
- tHeadPadding: '11px 20px', // for table header padding
445
- tHeadBorderRadius: '14px', // for table header border radius
446
- tHeadBackgroundColor: '#00236A', // for table header background color
447
- tHeadFamily: 'Noto Sans Armenia', // for table header font family
448
-
449
- tBodyColor: '#3C393E', // for table body color
450
- tBodyFontSize: '16px', // for table body font size
451
- tBodyFontWeight: 500, // for table body font weight
452
- tBodyTextAlign: 'center', // for table body text align
453
- tBodyPadding: '11px 20px', // for table body padding
454
- tBodyFontFamily: 'Noto Sans Armenia', // for table body font family
455
- tBodyRowMarginTop: '10px', // for table tr margin top
456
- tBodyBoxShadow: '', // for table body box shadow
457
-
458
- tBodyRowBorder: '1px solid #eeeeee', // for table body row border
459
- openListColor: '#A3A5A9', // for table body opened list color
460
- openListFontSize: '', // for table body opened list font size
461
- openListFontFamily: '', // for table body opened list font family
462
- className: '', // for table class
463
- tableRowItem: false, // for table tr show item ( boolean prop )
464
- tableRowBGColor: 'transparent', // for table tr background color
465
- tableRowRadius: '6px', // for table tr border radius
466
- tableRowBoxShadow: '', // for table tr box shadow
467
- tableColumnMaxWidth: '', // for table column max width
468
- tableColumnMinWidth: '', // for table column min width
723
+ className: '',
724
+ textAlign: 'center',
725
+
726
+ column: {
727
+ maxWidth: '',
728
+ minWidth: '',
729
+ },
730
+
731
+ head: {
732
+ color: presetColors.extraLight,
733
+ radius: '14px',
734
+ padding: '11px 20px',
735
+
736
+ colors: {
737
+ background: presetColors.primarySecond,
738
+ },
739
+
740
+ font: {...fontObject}
741
+ },
742
+
743
+ body: {
744
+ color: presetColors.dark,
745
+ padding: '11px 20px',
746
+
747
+ box: {
748
+ shadow: '',
749
+ },
750
+
751
+ row: {
752
+ asItem: false,
753
+ radius: '6px',
754
+ marginTop: '10px',
755
+
756
+ colors: {
757
+ backgroud: transparent,
758
+ },
759
+
760
+ box: {
761
+ shadow: '',
762
+ },
763
+
764
+ border: '1px solid',
765
+ borderColor: presetColors.light
766
+ },
767
+
768
+ font: {...fontObject}
769
+ },
770
+
771
+ openList: {
772
+ color: '#A3A5A9',
773
+ font: {...fontObject}
774
+ }
469
775
  },
470
776
  // default properties for <Pagination /> component
471
777
  PAGINATION: {
472
- className: '' // for pagination class
778
+ className: '', // for pagination class
473
779
  },
474
780
  // default properties for <Toaster /> component
475
781
  TOASTER: {
476
- className: ''
782
+ className: '',
783
+ icon: {
784
+ // info: React.createElement(SvgChecked, { just: 'must' }),
785
+ // warn: React.createElement(SvgUnchecked, { just: 'must' }),
786
+ // close: React.createElement(SvgChecked, { fill: 'green' }),
787
+ // error: React.createElement(SvgChecked, { fill: 'green' }),
788
+ // success: React.createElement(SvgChecked, { fill: 'green' }),
789
+ }
477
790
  },
478
791
  // default properties for <Stepper /> component
479
792
  STEPPER: {
480
- className: '' // for stepper class
793
+ className: '', // for stepper class
481
794
  },
482
795
  // default properties for <Radio /> component
483
796
  RADIO: {
484
- size: '20px', // for width and height
485
- className: '', // for parent element class
486
- borderSize: '2px', // for border width
487
- borderStyle: 'solid', // for border style
488
- borderColor: '#E7E7E7', // for border color
489
- radioMarginRight: '10px', // for circle margin right
490
- borderActiveColor: '#3C3D46', // for active border color
491
- radioItemMarginRight: '10px', // for radio item margin right ( circle + label )
492
- radioItemMarginBottom: '10px', // for radio item margin bottom ( circle + label )
493
-
494
- labelColor: '#3C3D46', // for label color
495
- labelFontSize: '16px', // for label font size
496
- labelFontWeight: '500', // for label font weight
497
- labelLineHeight: '21px', // for label line height
498
- labelFontFamily: 'Arial, sans-serif', // for label font family
499
- }
797
+ size: '20px',
798
+ className: '',
799
+ marginRight: '10px',
800
+
801
+ item: {
802
+ marginRight: '10px',
803
+ marginBottom: '10px',
804
+ },
805
+
806
+ border: {
807
+ width: '2px',
808
+ style: 'solid',
809
+ color: '#E7E7E7',
810
+ activeColor: '#3C3D46',
811
+ },
812
+
813
+ label: {
814
+ color: '#3C3D46',
815
+ lineHeight: '21px',
816
+
817
+ font: {...fontObject}
818
+ }
819
+ },
500
820
  }