@xaypay/tui 0.0.119 → 0.0.120

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 (181) hide show
  1. package/dist/index.es.js +4112 -4330
  2. package/dist/index.js +4111 -4331
  3. package/package.json +1 -1
  4. package/storybook-static/favicon.ico +0 -0
  5. package/tui.config.js +1 -1
  6. package/.eslintrc.js +0 -30
  7. package/.husky/pre-commit +0 -4
  8. package/.prettierrc +0 -10
  9. package/.storybook/main.js +0 -48
  10. package/.storybook/preview.js +0 -9
  11. package/rollup.config.js +0 -37
  12. package/src/assets/attach.svg +0 -4
  13. package/src/assets/delete.svg +0 -4
  14. package/src/assets/down-arrow.svg +0 -4
  15. package/src/assets/figma-image.png +0 -0
  16. package/src/assets/heart-filled.svg +0 -17
  17. package/src/assets/heart-outline.svg +0 -14
  18. package/src/assets/like-filled.svg +0 -21
  19. package/src/assets/like-outline.svg +0 -21
  20. package/src/assets/minus.svg +0 -4
  21. package/src/assets/pdf.svg +0 -3
  22. package/src/assets/plus.svg +0 -4
  23. package/src/assets/range-arrow-default.svg +0 -19
  24. package/src/assets/range-arrow-error.svg +0 -19
  25. package/src/assets/range-arrow-success.svg +0 -19
  26. package/src/assets/star-filled.svg +0 -21
  27. package/src/assets/star-outline.svg +0 -5
  28. package/src/assets/table-settings-icon.svg +0 -3
  29. package/src/assets/up-arrow.svg +0 -4
  30. package/src/assets_old/icons/Read Me.txt +0 -7
  31. package/src/assets_old/icons/demo-files/demo.css +0 -152
  32. package/src/assets_old/icons/demo-files/demo.js +0 -28
  33. package/src/assets_old/icons/demo.html +0 -192
  34. package/src/assets_old/icons/fonts/icomoon.eot +0 -0
  35. package/src/assets_old/icons/fonts/icomoon.svg +0 -21
  36. package/src/assets_old/icons/fonts/icomoon.ttf +0 -0
  37. package/src/assets_old/icons/fonts/icomoon.woff +0 -0
  38. package/src/assets_old/icons/selection.json +0 -1
  39. package/src/assets_old/icons/style.css +0 -58
  40. package/src/components/autocomplate/autocomplate.module.css +0 -95
  41. package/src/components/autocomplate/autocomplate.stories.js +0 -35
  42. package/src/components/autocomplate/index.js +0 -164
  43. package/src/components/button/button.stories.js +0 -13
  44. package/src/components/button/index.js +0 -187
  45. package/src/components/captcha/captcha.module.css +0 -74
  46. package/src/components/captcha/captcha.stories.js +0 -21
  47. package/src/components/captcha/index.js +0 -158
  48. package/src/components/checkbox/checkbox.module.css +0 -0
  49. package/src/components/checkbox/checkbox.stories.js +0 -76
  50. package/src/components/checkbox/index.js +0 -120
  51. package/src/components/file/file.module.css +0 -114
  52. package/src/components/file/file.stories.js +0 -20
  53. package/src/components/file/index.js +0 -138
  54. package/src/components/icon/Active.js +0 -20
  55. package/src/components/icon/Arrow.js +0 -19
  56. package/src/components/icon/Cancel.js +0 -19
  57. package/src/components/icon/CaptchaArrowDown.js +0 -19
  58. package/src/components/icon/CaptchaArrowUp.js +0 -19
  59. package/src/components/icon/CheckboxChecked.js +0 -21
  60. package/src/components/icon/CheckboxUnchecked.js +0 -21
  61. package/src/components/icon/Close.js +0 -19
  62. package/src/components/icon/CloseIcon.js +0 -19
  63. package/src/components/icon/CloseSlide.js +0 -19
  64. package/src/components/icon/DeActive.js +0 -20
  65. package/src/components/icon/DeleteComponent.js +0 -20
  66. package/src/components/icon/Done.js +0 -19
  67. package/src/components/icon/Dots.js +0 -19
  68. package/src/components/icon/DownArrow.js +0 -20
  69. package/src/components/icon/HeartFilled.js +0 -25
  70. package/src/components/icon/HeartOutline.js +0 -25
  71. package/src/components/icon/Heic.js +0 -21
  72. package/src/components/icon/Icon.js +0 -11
  73. package/src/components/icon/ListItemDelete.js +0 -19
  74. package/src/components/icon/ListItemJpeg.js +0 -21
  75. package/src/components/icon/ListItemJpg.js +0 -21
  76. package/src/components/icon/ListItemPdf.js +0 -21
  77. package/src/components/icon/ListItemPng.js +0 -21
  78. package/src/components/icon/Next.js +0 -20
  79. package/src/components/icon/Nextarrow.js +0 -19
  80. package/src/components/icon/PDF.js +0 -19
  81. package/src/components/icon/Prev.js +0 -20
  82. package/src/components/icon/RangeArrowDefault.js +0 -43
  83. package/src/components/icon/RangeArrowError.js +0 -43
  84. package/src/components/icon/RangeArrowSuccess.js +0 -43
  85. package/src/components/icon/Reject.js +0 -19
  86. package/src/components/icon/RemoveFile.js +0 -20
  87. package/src/components/icon/Required.js +0 -19
  88. package/src/components/icon/ToasterClose.js +0 -19
  89. package/src/components/icon/ToasterError.js +0 -19
  90. package/src/components/icon/ToasterInfo.js +0 -19
  91. package/src/components/icon/ToasterSuccess.js +0 -19
  92. package/src/components/icon/ToasterWarning.js +0 -19
  93. package/src/components/icon/Tooltip.js +0 -19
  94. package/src/components/icon/UpArrow.js +0 -20
  95. package/src/components/icon/Upload.js +0 -25
  96. package/src/components/icon/Wrong.js +0 -21
  97. package/src/components/icon/Zoom.js +0 -21
  98. package/src/components/icon/index.js +0 -0
  99. package/src/components/input/index.js +0 -688
  100. package/src/components/input/input.module.css +0 -51
  101. package/src/components/input/input.stories.js +0 -26
  102. package/src/components/modal/index.js +0 -436
  103. package/src/components/modal/modal.module.css +0 -22
  104. package/src/components/modal/modal.stories.js +0 -88
  105. package/src/components/newAutocomplete/NewAutocomplete.stories.js +0 -102
  106. package/src/components/newAutocomplete/autocomplete.module.css +0 -4
  107. package/src/components/newAutocomplete/index.js +0 -592
  108. package/src/components/newFile/fileItem.js +0 -281
  109. package/src/components/newFile/index.js +0 -731
  110. package/src/components/newFile/newFile.stories.js +0 -93
  111. package/src/components/pagination/index.js +0 -234
  112. package/src/components/pagination/pagination.module.css +0 -93
  113. package/src/components/pagination/pagination.stories.js +0 -371
  114. package/src/components/pagination/paginationRange.js +0 -45
  115. package/src/components/radio/index.js +0 -236
  116. package/src/components/radio/radio.module.css +0 -59
  117. package/src/components/radio/radio.stories.js +0 -59
  118. package/src/components/select/index.js +0 -534
  119. package/src/components/select/select.module.css +0 -93
  120. package/src/components/select/select.stories.js +0 -39
  121. package/src/components/singleCheckbox/Checkbox.js +0 -84
  122. package/src/components/singleCheckbox/index.js +0 -65
  123. package/src/components/singleCheckbox/singleCheckbox.stories.js +0 -24
  124. package/src/components/stepper/index.js +0 -45
  125. package/src/components/stepper/stepper.module.css +0 -57
  126. package/src/components/stepper/stepper.stories.js +0 -17
  127. package/src/components/table/index.js +0 -789
  128. package/src/components/table/table.module.css +0 -63
  129. package/src/components/table/table.stories.js +0 -497
  130. package/src/components/table/td.js +0 -429
  131. package/src/components/table/th.js +0 -103
  132. package/src/components/textarea/index.js +0 -285
  133. package/src/components/textarea/textarea.module.css +0 -25
  134. package/src/components/textarea/textarea.stories.js +0 -56
  135. package/src/components/toaster/Toast.js +0 -203
  136. package/src/components/toaster/index.js +0 -131
  137. package/src/components/toaster/toaster.module.css +0 -201
  138. package/src/components/toaster/toaster.stories.js +0 -593
  139. package/src/components/tooltip/index.js +0 -156
  140. package/src/components/tooltip/tooltip.module.css +0 -46
  141. package/src/components/tooltip/tooltip.stories.js +0 -30
  142. package/src/components/typography/index.js +0 -124
  143. package/src/components/typography/typography.module.css +0 -57
  144. package/src/components/typography/typography.stories.js +0 -22
  145. package/src/index.js +0 -19
  146. package/src/stories/Introduction.stories.mdx +0 -210
  147. package/src/stories/assets/code-brackets.svg +0 -1
  148. package/src/stories/assets/colors.svg +0 -1
  149. package/src/stories/assets/comments.svg +0 -1
  150. package/src/stories/assets/direction.svg +0 -1
  151. package/src/stories/assets/flow.svg +0 -1
  152. package/src/stories/assets/plugin.svg +0 -1
  153. package/src/stories/assets/repo.svg +0 -1
  154. package/src/stories/assets/stackalt.svg +0 -1
  155. package/src/stories/changelog.stories.mdx +0 -172
  156. package/src/stories/configuration.stories.mdx +0 -715
  157. package/src/stories/documentation.stories.mdx +0 -118
  158. package/src/stories/static/autocomplete-usage.png +0 -0
  159. package/src/stories/static/button-usage-icon.png +0 -0
  160. package/src/stories/static/button-usage.png +0 -0
  161. package/src/stories/static/captcha-usage.png +0 -0
  162. package/src/stories/static/checkbox-group-usage-2.png +0 -0
  163. package/src/stories/static/checkbox-group-usage.png +0 -0
  164. package/src/stories/static/file-single-usage.png +0 -0
  165. package/src/stories/static/file-usage.png +0 -0
  166. package/src/stories/static/input-usage.png +0 -0
  167. package/src/stories/static/modal-usage.png +0 -0
  168. package/src/stories/static/radio-usage.png +0 -0
  169. package/src/stories/static/select-usage.png +0 -0
  170. package/src/stories/static/table-body-data-structure-first-part-usage.png +0 -0
  171. package/src/stories/static/table-body-data-structure-second-part-usage.png +0 -0
  172. package/src/stories/static/table-body-data-structure-third-part-usage.png +0 -0
  173. package/src/stories/static/table-component-usage.png +0 -0
  174. package/src/stories/static/table-header-data-structure-usage.png +0 -0
  175. package/src/stories/static/table-new-data-structure-usage.png +0 -0
  176. package/src/stories/static/textarea-usage.png +0 -0
  177. package/src/stories/static/toaster-container-usage.png +0 -0
  178. package/src/stories/static/toaster-usage.png +0 -0
  179. package/src/stories/static/tooltip-usage.png +0 -0
  180. package/src/stories/usage.stories.mdx +0 -201
  181. 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({})