@xaypay/tui 0.0.119 → 0.0.121

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 (180) hide show
  1. package/dist/index.es.js +3983 -4344
  2. package/dist/index.js +3982 -4345
  3. package/package.json +1 -1
  4. package/tui.config.js +1 -1
  5. package/.eslintrc.js +0 -30
  6. package/.husky/pre-commit +0 -4
  7. package/.prettierrc +0 -10
  8. package/.storybook/main.js +0 -48
  9. package/.storybook/preview.js +0 -9
  10. package/rollup.config.js +0 -37
  11. package/src/assets/attach.svg +0 -4
  12. package/src/assets/delete.svg +0 -4
  13. package/src/assets/down-arrow.svg +0 -4
  14. package/src/assets/figma-image.png +0 -0
  15. package/src/assets/heart-filled.svg +0 -17
  16. package/src/assets/heart-outline.svg +0 -14
  17. package/src/assets/like-filled.svg +0 -21
  18. package/src/assets/like-outline.svg +0 -21
  19. package/src/assets/minus.svg +0 -4
  20. package/src/assets/pdf.svg +0 -3
  21. package/src/assets/plus.svg +0 -4
  22. package/src/assets/range-arrow-default.svg +0 -19
  23. package/src/assets/range-arrow-error.svg +0 -19
  24. package/src/assets/range-arrow-success.svg +0 -19
  25. package/src/assets/star-filled.svg +0 -21
  26. package/src/assets/star-outline.svg +0 -5
  27. package/src/assets/table-settings-icon.svg +0 -3
  28. package/src/assets/up-arrow.svg +0 -4
  29. package/src/assets_old/icons/Read Me.txt +0 -7
  30. package/src/assets_old/icons/demo-files/demo.css +0 -152
  31. package/src/assets_old/icons/demo-files/demo.js +0 -28
  32. package/src/assets_old/icons/demo.html +0 -192
  33. package/src/assets_old/icons/fonts/icomoon.eot +0 -0
  34. package/src/assets_old/icons/fonts/icomoon.svg +0 -21
  35. package/src/assets_old/icons/fonts/icomoon.ttf +0 -0
  36. package/src/assets_old/icons/fonts/icomoon.woff +0 -0
  37. package/src/assets_old/icons/selection.json +0 -1
  38. package/src/assets_old/icons/style.css +0 -58
  39. package/src/components/autocomplate/autocomplate.module.css +0 -95
  40. package/src/components/autocomplate/autocomplate.stories.js +0 -35
  41. package/src/components/autocomplate/index.js +0 -164
  42. package/src/components/button/button.stories.js +0 -13
  43. package/src/components/button/index.js +0 -187
  44. package/src/components/captcha/captcha.module.css +0 -74
  45. package/src/components/captcha/captcha.stories.js +0 -21
  46. package/src/components/captcha/index.js +0 -158
  47. package/src/components/checkbox/checkbox.module.css +0 -0
  48. package/src/components/checkbox/checkbox.stories.js +0 -76
  49. package/src/components/checkbox/index.js +0 -120
  50. package/src/components/file/file.module.css +0 -114
  51. package/src/components/file/file.stories.js +0 -20
  52. package/src/components/file/index.js +0 -138
  53. package/src/components/icon/Active.js +0 -20
  54. package/src/components/icon/Arrow.js +0 -19
  55. package/src/components/icon/Cancel.js +0 -19
  56. package/src/components/icon/CaptchaArrowDown.js +0 -19
  57. package/src/components/icon/CaptchaArrowUp.js +0 -19
  58. package/src/components/icon/CheckboxChecked.js +0 -21
  59. package/src/components/icon/CheckboxUnchecked.js +0 -21
  60. package/src/components/icon/Close.js +0 -19
  61. package/src/components/icon/CloseIcon.js +0 -19
  62. package/src/components/icon/CloseSlide.js +0 -19
  63. package/src/components/icon/DeActive.js +0 -20
  64. package/src/components/icon/DeleteComponent.js +0 -20
  65. package/src/components/icon/Done.js +0 -19
  66. package/src/components/icon/Dots.js +0 -19
  67. package/src/components/icon/DownArrow.js +0 -20
  68. package/src/components/icon/HeartFilled.js +0 -25
  69. package/src/components/icon/HeartOutline.js +0 -25
  70. package/src/components/icon/Heic.js +0 -21
  71. package/src/components/icon/Icon.js +0 -11
  72. package/src/components/icon/ListItemDelete.js +0 -19
  73. package/src/components/icon/ListItemJpeg.js +0 -21
  74. package/src/components/icon/ListItemJpg.js +0 -21
  75. package/src/components/icon/ListItemPdf.js +0 -21
  76. package/src/components/icon/ListItemPng.js +0 -21
  77. package/src/components/icon/Next.js +0 -20
  78. package/src/components/icon/Nextarrow.js +0 -19
  79. package/src/components/icon/PDF.js +0 -19
  80. package/src/components/icon/Prev.js +0 -20
  81. package/src/components/icon/RangeArrowDefault.js +0 -43
  82. package/src/components/icon/RangeArrowError.js +0 -43
  83. package/src/components/icon/RangeArrowSuccess.js +0 -43
  84. package/src/components/icon/Reject.js +0 -19
  85. package/src/components/icon/RemoveFile.js +0 -20
  86. package/src/components/icon/Required.js +0 -19
  87. package/src/components/icon/ToasterClose.js +0 -19
  88. package/src/components/icon/ToasterError.js +0 -19
  89. package/src/components/icon/ToasterInfo.js +0 -19
  90. package/src/components/icon/ToasterSuccess.js +0 -19
  91. package/src/components/icon/ToasterWarning.js +0 -19
  92. package/src/components/icon/Tooltip.js +0 -19
  93. package/src/components/icon/UpArrow.js +0 -20
  94. package/src/components/icon/Upload.js +0 -25
  95. package/src/components/icon/Wrong.js +0 -21
  96. package/src/components/icon/Zoom.js +0 -21
  97. package/src/components/icon/index.js +0 -0
  98. package/src/components/input/index.js +0 -688
  99. package/src/components/input/input.module.css +0 -51
  100. package/src/components/input/input.stories.js +0 -26
  101. package/src/components/modal/index.js +0 -436
  102. package/src/components/modal/modal.module.css +0 -22
  103. package/src/components/modal/modal.stories.js +0 -88
  104. package/src/components/newAutocomplete/NewAutocomplete.stories.js +0 -102
  105. package/src/components/newAutocomplete/autocomplete.module.css +0 -4
  106. package/src/components/newAutocomplete/index.js +0 -592
  107. package/src/components/newFile/fileItem.js +0 -281
  108. package/src/components/newFile/index.js +0 -731
  109. package/src/components/newFile/newFile.stories.js +0 -93
  110. package/src/components/pagination/index.js +0 -234
  111. package/src/components/pagination/pagination.module.css +0 -93
  112. package/src/components/pagination/pagination.stories.js +0 -371
  113. package/src/components/pagination/paginationRange.js +0 -45
  114. package/src/components/radio/index.js +0 -236
  115. package/src/components/radio/radio.module.css +0 -59
  116. package/src/components/radio/radio.stories.js +0 -59
  117. package/src/components/select/index.js +0 -534
  118. package/src/components/select/select.module.css +0 -93
  119. package/src/components/select/select.stories.js +0 -39
  120. package/src/components/singleCheckbox/Checkbox.js +0 -84
  121. package/src/components/singleCheckbox/index.js +0 -65
  122. package/src/components/singleCheckbox/singleCheckbox.stories.js +0 -24
  123. package/src/components/stepper/index.js +0 -45
  124. package/src/components/stepper/stepper.module.css +0 -57
  125. package/src/components/stepper/stepper.stories.js +0 -17
  126. package/src/components/table/index.js +0 -789
  127. package/src/components/table/table.module.css +0 -63
  128. package/src/components/table/table.stories.js +0 -497
  129. package/src/components/table/td.js +0 -429
  130. package/src/components/table/th.js +0 -103
  131. package/src/components/textarea/index.js +0 -285
  132. package/src/components/textarea/textarea.module.css +0 -25
  133. package/src/components/textarea/textarea.stories.js +0 -56
  134. package/src/components/toaster/Toast.js +0 -203
  135. package/src/components/toaster/index.js +0 -131
  136. package/src/components/toaster/toaster.module.css +0 -201
  137. package/src/components/toaster/toaster.stories.js +0 -593
  138. package/src/components/tooltip/index.js +0 -156
  139. package/src/components/tooltip/tooltip.module.css +0 -46
  140. package/src/components/tooltip/tooltip.stories.js +0 -30
  141. package/src/components/typography/index.js +0 -124
  142. package/src/components/typography/typography.module.css +0 -57
  143. package/src/components/typography/typography.stories.js +0 -22
  144. package/src/index.js +0 -19
  145. package/src/stories/Introduction.stories.mdx +0 -210
  146. package/src/stories/assets/code-brackets.svg +0 -1
  147. package/src/stories/assets/colors.svg +0 -1
  148. package/src/stories/assets/comments.svg +0 -1
  149. package/src/stories/assets/direction.svg +0 -1
  150. package/src/stories/assets/flow.svg +0 -1
  151. package/src/stories/assets/plugin.svg +0 -1
  152. package/src/stories/assets/repo.svg +0 -1
  153. package/src/stories/assets/stackalt.svg +0 -1
  154. package/src/stories/changelog.stories.mdx +0 -172
  155. package/src/stories/configuration.stories.mdx +0 -715
  156. package/src/stories/documentation.stories.mdx +0 -118
  157. package/src/stories/static/autocomplete-usage.png +0 -0
  158. package/src/stories/static/button-usage-icon.png +0 -0
  159. package/src/stories/static/button-usage.png +0 -0
  160. package/src/stories/static/captcha-usage.png +0 -0
  161. package/src/stories/static/checkbox-group-usage-2.png +0 -0
  162. package/src/stories/static/checkbox-group-usage.png +0 -0
  163. package/src/stories/static/file-single-usage.png +0 -0
  164. package/src/stories/static/file-usage.png +0 -0
  165. package/src/stories/static/input-usage.png +0 -0
  166. package/src/stories/static/modal-usage.png +0 -0
  167. package/src/stories/static/radio-usage.png +0 -0
  168. package/src/stories/static/select-usage.png +0 -0
  169. package/src/stories/static/table-body-data-structure-first-part-usage.png +0 -0
  170. package/src/stories/static/table-body-data-structure-second-part-usage.png +0 -0
  171. package/src/stories/static/table-body-data-structure-third-part-usage.png +0 -0
  172. package/src/stories/static/table-component-usage.png +0 -0
  173. package/src/stories/static/table-header-data-structure-usage.png +0 -0
  174. package/src/stories/static/table-new-data-structure-usage.png +0 -0
  175. package/src/stories/static/textarea-usage.png +0 -0
  176. package/src/stories/static/toaster-container-usage.png +0 -0
  177. package/src/stories/static/toaster-usage.png +0 -0
  178. package/src/stories/static/tooltip-usage.png +0 -0
  179. package/src/stories/usage.stories.mdx +0 -201
  180. package/src/utils/index.js +0 -29
package/src/components/toaster/toaster.stories.js DELETED
@@ -1,593 +0,0 @@
1
- import React from 'react'
2
- import { Toaster, toast } from './index'
3
- import { Button } from './../button'
4
-
5
- export default {
6
- component: Toaster,
7
- title: 'Components/Toaster',
8
- }
9
-
10
- const Template = () => {
11
- const handleAddToaster = (type, empty, title, timer, position, description) => {
12
- if (type === 'success') {
13
- if (empty) {
14
- toast.success()
15
- } else {
16
- toast.success(title, {
17
- timer,
18
- position,
19
- description,
20
- })
21
- }
22
- } else if (type === 'info') {
23
- if (empty) {
24
- toast.info()
25
- } else {
26
- toast.info(title, {
27
- timer,
28
- position,
29
- description,
30
- })
31
- }
32
- } else if (type === 'warn') {
33
- if (empty) {
34
- toast.warn()
35
- } else {
36
- toast.warn(title, {
37
- timer,
38
- position,
39
- description,
40
- })
41
- }
42
- } else if (type === 'error') {
43
- if (empty) {
44
- toast.error()
45
- } else {
46
- toast.error(title, {
47
- timer,
48
- position,
49
- description,
50
- })
51
- }
52
- }
53
- }
54
-
55
- return (
56
- <div
57
- style={{
58
- height: 'calc(100vh - 100px)',
59
- display: 'flex',
60
- overflowY: 'auto',
61
- flexDirection: 'column',
62
- justifyContent: 'center',
63
- }}
64
- >
65
- <div
66
- style={{
67
- display: 'flex',
68
- marginBottom: '20px',
69
- paddingBottom: '20px',
70
- borderBottom: '1.5px solid gray',
71
- justifyContent: 'space-between',
72
- }}
73
- >
74
- <Button
75
- outline
76
- radius="8px"
77
- color="white"
78
- contentWidth
79
- backgroundColor="#10a574"
80
- label="call empty Success toast"
81
- onClick={() => handleAddToaster('success', true)}
82
- />
83
- <Button
84
- outline
85
- radius="8px"
86
- color="white"
87
- contentWidth
88
- label="call empty Info toast"
89
- backgroundColor="#02246b"
90
- onClick={() => handleAddToaster('info', true)}
91
- />
92
- <Button
93
- outline
94
- radius="8px"
95
- color="white"
96
- contentWidth
97
- label="call empty Warn toast"
98
- backgroundColor="#ff8a04"
99
- onClick={() => handleAddToaster('warn', true)}
100
- />
101
- <Button
102
- outline
103
- radius="8px"
104
- color="white"
105
- contentWidth
106
- label="call empty Error toast"
107
- backgroundColor="#ed0000"
108
- onClick={() => handleAddToaster('error', true)}
109
- />
110
- </div>
111
-
112
- <div
113
- style={{
114
- display: 'flex',
115
- marginBottom: '20px',
116
- paddingBottom: '20px',
117
- borderBottom: '1.5px solid gray',
118
- justifyContent: 'space-between',
119
- }}
120
- >
121
- <Button
122
- outline
123
- radius="8px"
124
- contentWidth
125
- color="white"
126
- label="Success top left"
127
- backgroundColor="#10a574"
128
- onClick={() =>
129
- handleAddToaster(
130
- 'success',
131
- false,
132
- 'Հաջողված',
133
- 5000,
134
- 'top-left',
135
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
136
- )
137
- }
138
- />
139
- <Button
140
- outline
141
- radius="8px"
142
- contentWidth
143
- color="white"
144
- label="Success top right"
145
- backgroundColor="#10a574"
146
- onClick={() =>
147
- handleAddToaster(
148
- 'success',
149
- false,
150
- 'Հաջողված',
151
- 5000,
152
- 'top-right',
153
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
154
- )
155
- }
156
- />
157
- <Button
158
- outline
159
- radius="8px"
160
- contentWidth
161
- color="white"
162
- label="Success top center"
163
- backgroundColor="#10a574"
164
- onClick={() =>
165
- handleAddToaster(
166
- 'success',
167
- false,
168
- 'Հաջողված',
169
- 5000,
170
- 'top-center',
171
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
172
- )
173
- }
174
- />
175
- <Button
176
- outline
177
- radius="8px"
178
- contentWidth
179
- color="white"
180
- label="Success bottom left"
181
- backgroundColor="#10a574"
182
- onClick={() =>
183
- handleAddToaster(
184
- 'success',
185
- false,
186
- 'Հաջողված',
187
- 5000,
188
- 'bottom-left',
189
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
190
- )
191
- }
192
- />
193
- <Button
194
- outline
195
- radius="8px"
196
- contentWidth
197
- color="white"
198
- label="Success bottom right"
199
- backgroundColor="#10a574"
200
- onClick={() =>
201
- handleAddToaster(
202
- 'success',
203
- false,
204
- 'Հաջողված',
205
- 5000,
206
- 'bottom-right',
207
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
208
- )
209
- }
210
- />
211
- <Button
212
- outline
213
- radius="8px"
214
- contentWidth
215
- color="white"
216
- label="Success bottom center"
217
- backgroundColor="#10a574"
218
- onClick={() =>
219
- handleAddToaster(
220
- 'success',
221
- false,
222
- 'Հաջողված',
223
- 5000,
224
- 'bottom-center',
225
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
226
- )
227
- }
228
- />
229
- </div>
230
-
231
- <div
232
- style={{
233
- display: 'flex',
234
- marginBottom: '20px',
235
- paddingBottom: '20px',
236
- borderBottom: '1.5px solid gray',
237
- justifyContent: 'space-between',
238
- }}
239
- >
240
- <Button
241
- outline
242
- radius="8px"
243
- contentWidth
244
- color="white"
245
- label="Info top left"
246
- backgroundColor="#02246b"
247
- onClick={() =>
248
- handleAddToaster(
249
- 'info',
250
- false,
251
- 'Տեղեկատվություն',
252
- 5000,
253
- 'top-left',
254
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
255
- )
256
- }
257
- />
258
- <Button
259
- outline
260
- radius="8px"
261
- contentWidth
262
- color="white"
263
- label="Info top right"
264
- backgroundColor="#02246b"
265
- onClick={() =>
266
- handleAddToaster(
267
- 'info',
268
- false,
269
- 'Տեղեկատվություն',
270
- 5000000000000,
271
- 'top-right',
272
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
273
- )
274
- }
275
- />
276
- <Button
277
- outline
278
- radius="8px"
279
- contentWidth
280
- color="white"
281
- label="Info top center"
282
- backgroundColor="#02246b"
283
- onClick={() =>
284
- handleAddToaster(
285
- 'info',
286
- false,
287
- 'Տեղեկատվություն',
288
- 5000,
289
- 'top-center',
290
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
291
- )
292
- }
293
- />
294
- <Button
295
- outline
296
- radius="8px"
297
- contentWidth
298
- color="white"
299
- label="Info bottom left"
300
- backgroundColor="#02246b"
301
- onClick={() =>
302
- handleAddToaster(
303
- 'info',
304
- false,
305
- 'Տեղեկատվություն',
306
- 5000,
307
- 'bottom-left',
308
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
309
- )
310
- }
311
- />
312
- <Button
313
- outline
314
- radius="8px"
315
- contentWidth
316
- color="white"
317
- label="Info bottom right"
318
- backgroundColor="#02246b"
319
- onClick={() =>
320
- handleAddToaster(
321
- 'info',
322
- false,
323
- 'Տեղեկատվություն',
324
- 5000,
325
- 'bottom-right',
326
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
327
- )
328
- }
329
- />
330
- <Button
331
- outline
332
- radius="8px"
333
- contentWidth
334
- color="white"
335
- label="Info bottom center"
336
- backgroundColor="#02246b"
337
- onClick={() =>
338
- handleAddToaster(
339
- 'info',
340
- false,
341
- 'Տեղեկատվություն',
342
- 5000,
343
- 'bottom-center',
344
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
345
- )
346
- }
347
- />
348
- </div>
349
-
350
- <div
351
- style={{
352
- display: 'flex',
353
- marginBottom: '20px',
354
- paddingBottom: '20px',
355
- borderBottom: '1.5px solid gray',
356
- justifyContent: 'space-between',
357
- }}
358
- >
359
- <Button
360
- outline
361
- radius="8px"
362
- contentWidth
363
- color="white"
364
- label="Warning top left"
365
- backgroundColor="#ff8a04"
366
- onClick={() =>
367
- handleAddToaster(
368
- 'warn',
369
- false,
370
- 'Զգուշացում',
371
- 5000,
372
- 'top-left',
373
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
374
- )
375
- }
376
- />
377
- <Button
378
- outline
379
- radius="8px"
380
- contentWidth
381
- color="white"
382
- label="Warning top right"
383
- backgroundColor="#ff8a04"
384
- onClick={() =>
385
- handleAddToaster(
386
- 'warn',
387
- false,
388
- 'Զգուշացում',
389
- 5000,
390
- 'top-right',
391
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
392
- )
393
- }
394
- />
395
- <Button
396
- outline
397
- radius="8px"
398
- contentWidth
399
- color="white"
400
- label="Warning top center"
401
- backgroundColor="#ff8a04"
402
- onClick={() =>
403
- handleAddToaster(
404
- 'warn',
405
- false,
406
- 'Զգուշացում',
407
- 5000,
408
- 'top-center',
409
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
410
- )
411
- }
412
- />
413
- <Button
414
- outline
415
- radius="8px"
416
- contentWidth
417
- color="white"
418
- label="Warning bottom left"
419
- backgroundColor="#ff8a04"
420
- onClick={() =>
421
- handleAddToaster(
422
- 'warn',
423
- false,
424
- 'Զգուշացում',
425
- 5000,
426
- 'bottom-left',
427
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
428
- )
429
- }
430
- />
431
- <Button
432
- outline
433
- radius="8px"
434
- contentWidth
435
- color="white"
436
- label="Warning bottom right"
437
- backgroundColor="#ff8a04"
438
- onClick={() =>
439
- handleAddToaster(
440
- 'warn',
441
- false,
442
- 'Զգուշացում',
443
- 5000,
444
- 'bottom-right',
445
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
446
- )
447
- }
448
- />
449
- <Button
450
- outline
451
- radius="8px"
452
- contentWidth
453
- color="white"
454
- label="Warning bottom center"
455
- backgroundColor="#ff8a04"
456
- onClick={() =>
457
- handleAddToaster(
458
- 'warn',
459
- false,
460
- 'Զգուշացում',
461
- 5000,
462
- 'bottom-center',
463
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
464
- )
465
- }
466
- />
467
- </div>
468
-
469
- <div
470
- style={{
471
- display: 'flex',
472
- marginBottom: '20px',
473
- paddingBottom: '20px',
474
- borderBottom: '1.5px solid gray',
475
- justifyContent: 'space-between',
476
- }}
477
- >
478
- <Button
479
- outline
480
- radius="8px"
481
- contentWidth
482
- color="white"
483
- label="Error top left"
484
- backgroundColor="#ed0000"
485
- onClick={() =>
486
- handleAddToaster(
487
- 'error',
488
- false,
489
- 'Սխալ',
490
- 5000,
491
- 'top-left',
492
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
493
- )
494
- }
495
- />
496
- <Button
497
- outline
498
- radius="8px"
499
- contentWidth
500
- color="white"
501
- label="Error top right"
502
- backgroundColor="#ed0000"
503
- onClick={() =>
504
- handleAddToaster(
505
- 'error',
506
- false,
507
- 'Սխալ',
508
- 5000,
509
- 'top-right',
510
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
511
- )
512
- }
513
- />
514
- <Button
515
- outline
516
- radius="8px"
517
- contentWidth
518
- color="white"
519
- label="Error top center"
520
- backgroundColor="#ed0000"
521
- onClick={() =>
522
- handleAddToaster(
523
- 'error',
524
- false,
525
- 'Սխալ',
526
- 5000,
527
- 'top-center',
528
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
529
- )
530
- }
531
- />
532
- <Button
533
- outline
534
- radius="8px"
535
- contentWidth
536
- color="white"
537
- label="Error bottom left"
538
- backgroundColor="#ed0000"
539
- onClick={() =>
540
- handleAddToaster(
541
- 'error',
542
- false,
543
- 'Սխալ',
544
- 5000,
545
- 'bottom-left',
546
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
547
- )
548
- }
549
- />
550
- <Button
551
- outline
552
- radius="8px"
553
- contentWidth
554
- color="white"
555
- label="Error bottom right"
556
- backgroundColor="#ed0000"
557
- onClick={() =>
558
- handleAddToaster(
559
- 'error',
560
- false,
561
- 'Սխալ',
562
- 5000,
563
- 'bottom-right',
564
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
565
- )
566
- }
567
- />
568
- <Button
569
- outline
570
- radius="8px"
571
- contentWidth
572
- color="white"
573
- label="Error bottom center"
574
- backgroundColor="#ed0000"
575
- onClick={() =>
576
- handleAddToaster(
577
- 'error',
578
- false,
579
- 'Սխալ',
580
- 5000,
581
- 'bottom-center',
582
- 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla'
583
- )
584
- }
585
- />
586
- </div>
587
-
588
- <Toaster />
589
- </div>
590
- )
591
- }
592
-
593
- export const Default = Template.bind({})