@seeqdev/qomponents 0.0.132 → 0.0.134

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 (156) hide show
  1. package/README.md +135 -135
  2. package/dist/Accordion/Accordion.js +8 -8
  3. package/dist/Accordion/Accordion.stories.js +114 -114
  4. package/dist/Accordion/Accordion.test.js +54 -54
  5. package/dist/Accordion/Accordion.types.js +1 -1
  6. package/dist/Accordion/index.js +1 -1
  7. package/dist/Alert/Alert.js +33 -33
  8. package/dist/Alert/Alert.stories.js +51 -51
  9. package/dist/Alert/Alert.test.js +50 -50
  10. package/dist/Alert/Alert.types.d.ts +1 -0
  11. package/dist/Alert/Alert.types.js +1 -1
  12. package/dist/Alert/index.js +1 -1
  13. package/dist/Button/Button.js +91 -91
  14. package/dist/Button/Button.stories.js +99 -99
  15. package/dist/Button/Button.test.js +48 -48
  16. package/dist/Button/Button.types.js +4 -4
  17. package/dist/Button/index.js +1 -1
  18. package/dist/ButtonGroup/ButtonGroup.js +32 -32
  19. package/dist/ButtonGroup/ButtonGroup.stories.js +384 -384
  20. package/dist/ButtonGroup/ButtonGroup.test.js +66 -66
  21. package/dist/ButtonGroup/ButtonGroup.types.d.ts +1 -0
  22. package/dist/ButtonGroup/ButtonGroup.types.js +1 -1
  23. package/dist/ButtonGroup/index.js +1 -1
  24. package/dist/ButtonWithDropdown/ButtonWithDropdown.js +59 -59
  25. package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.js +142 -142
  26. package/dist/ButtonWithDropdown/ButtonWithDropdown.test.js +92 -92
  27. package/dist/ButtonWithDropdown/ButtonWithDropdown.types.d.ts +1 -0
  28. package/dist/ButtonWithDropdown/ButtonWithDropdown.types.js +1 -1
  29. package/dist/ButtonWithDropdown/index.js +1 -1
  30. package/dist/ButtonWithPopover/ButtonWithPopover.js +61 -61
  31. package/dist/ButtonWithPopover/ButtonWithPopover.stories.js +74 -74
  32. package/dist/ButtonWithPopover/ButtonWithPopover.test.js +81 -81
  33. package/dist/ButtonWithPopover/ButtonWithPopover.types.js +1 -1
  34. package/dist/ButtonWithPopover/index.js +1 -1
  35. package/dist/Carousel/Carousel.js +69 -66
  36. package/dist/Carousel/Carousel.js.map +1 -1
  37. package/dist/Carousel/Carousel.stories.js +114 -114
  38. package/dist/Carousel/Carousel.test.js +47 -47
  39. package/dist/Carousel/Carousel.types.d.ts +1 -0
  40. package/dist/Carousel/Carousel.types.js +1 -1
  41. package/dist/Carousel/index.js +1 -1
  42. package/dist/Checkbox/Checkbox.js +25 -25
  43. package/dist/Checkbox/Checkbox.stories.js +33 -33
  44. package/dist/Checkbox/Checkbox.test.js +93 -93
  45. package/dist/Checkbox/Checkbox.types.d.ts +1 -0
  46. package/dist/Checkbox/Checkbox.types.js +1 -1
  47. package/dist/Checkbox/index.js +1 -1
  48. package/dist/Collapse/Collapse.js +14 -17
  49. package/dist/Collapse/Collapse.js.map +1 -1
  50. package/dist/Collapse/Collapse.stories.js +36 -36
  51. package/dist/Collapse/Collapse.test.js +18 -18
  52. package/dist/Collapse/Collapse.types.d.ts +1 -0
  53. package/dist/Collapse/Collapse.types.js +1 -1
  54. package/dist/Collapse/index.js +1 -1
  55. package/dist/Icon/Icon.js +54 -54
  56. package/dist/Icon/Icon.stories.js +46 -46
  57. package/dist/Icon/Icon.test.js +54 -54
  58. package/dist/Icon/Icon.types.d.ts +1 -0
  59. package/dist/Icon/Icon.types.js +15 -15
  60. package/dist/Icon/index.js +1 -1
  61. package/dist/InputGroup/InputGroup.js +31 -31
  62. package/dist/InputGroup/InputGroup.stories.js +167 -167
  63. package/dist/InputGroup/InputGroup.test.js +42 -42
  64. package/dist/InputGroup/InputGroup.types.d.ts +1 -0
  65. package/dist/InputGroup/InputGroup.types.js +1 -1
  66. package/dist/InputGroup/index.js +1 -1
  67. package/dist/Modal/Modal.js +99 -99
  68. package/dist/Modal/Modal.js.map +1 -1
  69. package/dist/Modal/Modal.stories.js +126 -126
  70. package/dist/Modal/Modal.test.js +107 -107
  71. package/dist/Modal/Modal.types.js +1 -1
  72. package/dist/Modal/index.js +1 -1
  73. package/dist/ProgressBar/ProgressBar.js +49 -29
  74. package/dist/ProgressBar/ProgressBar.js.map +1 -1
  75. package/dist/ProgressBar/ProgressBar.stories.js +80 -72
  76. package/dist/ProgressBar/ProgressBar.stories.js.map +1 -1
  77. package/dist/ProgressBar/ProgressBar.test.js +43 -37
  78. package/dist/ProgressBar/ProgressBar.test.js.map +1 -1
  79. package/dist/ProgressBar/ProgressBar.types.d.ts +2 -0
  80. package/dist/ProgressBar/ProgressBar.types.js +1 -1
  81. package/dist/ProgressBar/index.js +1 -1
  82. package/dist/SeeqActionDropdown/SeeqActionDropdown.js +47 -47
  83. package/dist/SeeqActionDropdown/SeeqActionDropdown.stories.js +79 -79
  84. package/dist/SeeqActionDropdown/SeeqActionDropdown.test.js +72 -72
  85. package/dist/SeeqActionDropdown/SeeqActionDropdown.types.d.ts +1 -0
  86. package/dist/SeeqActionDropdown/SeeqActionDropdown.types.js +1 -1
  87. package/dist/SeeqActionDropdown/index.js +1 -1
  88. package/dist/SeeqActionDropdown/variants.js +22 -22
  89. package/dist/Select/Select.js +173 -173
  90. package/dist/Select/Select.stories.js +79 -79
  91. package/dist/Select/Select.test.js +181 -181
  92. package/dist/Select/Select.types.js +1 -1
  93. package/dist/Select/index.js +2 -2
  94. package/dist/Slider/Slider.js +12 -12
  95. package/dist/Slider/Slider.stories.js +57 -57
  96. package/dist/Slider/Slider.test.js +32 -32
  97. package/dist/Slider/Slider.types.d.ts +1 -0
  98. package/dist/Slider/Slider.types.js +1 -1
  99. package/dist/Slider/index.js +1 -1
  100. package/dist/Tabs/Tabs.js +21 -21
  101. package/dist/Tabs/Tabs.stories.js +90 -90
  102. package/dist/Tabs/Tabs.test.js +90 -90
  103. package/dist/Tabs/Tabs.types.d.ts +1 -0
  104. package/dist/Tabs/Tabs.types.js +1 -1
  105. package/dist/Tabs/index.js +1 -1
  106. package/dist/TextArea/TextArea.js +24 -24
  107. package/dist/TextArea/TextArea.stories.js +45 -45
  108. package/dist/TextArea/TextArea.test.js +67 -67
  109. package/dist/TextArea/TextArea.types.d.ts +1 -0
  110. package/dist/TextArea/TextArea.types.js +1 -1
  111. package/dist/TextArea/index.js +1 -1
  112. package/dist/TextField/TextField.js +78 -78
  113. package/dist/TextField/TextField.stories.js +69 -69
  114. package/dist/TextField/TextField.test.js +38 -38
  115. package/dist/TextField/TextField.types.d.ts +1 -0
  116. package/dist/TextField/TextField.types.js +1 -1
  117. package/dist/TextField/index.js +1 -1
  118. package/dist/ToolbarButton/ToolbarButton.js +74 -74
  119. package/dist/ToolbarButton/ToolbarButton.stories.js +93 -93
  120. package/dist/ToolbarButton/ToolbarButton.test.js +92 -92
  121. package/dist/ToolbarButton/ToolbarButton.types.js +1 -1
  122. package/dist/ToolbarButton/index.js +1 -1
  123. package/dist/Tooltip/QTip.stories.js +44 -44
  124. package/dist/Tooltip/QTip.types.js +1 -1
  125. package/dist/Tooltip/QTipPerformance.stories.js +29 -29
  126. package/dist/Tooltip/Qtip.js +167 -167
  127. package/dist/Tooltip/Tooltip.js +35 -35
  128. package/dist/Tooltip/Tooltip.stories.js +31 -31
  129. package/dist/Tooltip/Tooltip.types.d.ts +1 -0
  130. package/dist/Tooltip/Tooltip.types.js +2 -2
  131. package/dist/Tooltip/TooltipPerformance.stories.js +29 -29
  132. package/dist/Tooltip/index.js +2 -2
  133. package/dist/Tooltip/qTip.utilities.js +10 -10
  134. package/dist/example/.eslintrc.cjs +14 -14
  135. package/dist/example/README.md +33 -33
  136. package/dist/example/index.html +13 -13
  137. package/dist/example/package.json +30 -30
  138. package/dist/example/src/ComplexSelectExample.tsx +81 -81
  139. package/dist/example/src/Example.tsx +408 -408
  140. package/dist/example/src/index.css +102 -102
  141. package/dist/example/src/main.tsx +10 -10
  142. package/dist/example/src/vite-env.d.ts +1 -1
  143. package/dist/example/tsconfig.json +33 -33
  144. package/dist/example/tsconfig.node.json +12 -12
  145. package/dist/example/vite.config.ts +12 -12
  146. package/dist/index.esm.js +15266 -7869
  147. package/dist/index.esm.js.map +1 -1
  148. package/dist/index.js +15230 -7833
  149. package/dist/index.js.map +1 -1
  150. package/dist/styles.css +3714 -3709
  151. package/dist/types.js +1 -1
  152. package/dist/utils/browserId.js +28 -28
  153. package/dist/utils/svg.js +19 -19
  154. package/dist/utils/validateStyleDimension.js +13 -13
  155. package/dist/utils/validateStyleDimension.test.js +19 -19
  156. package/package.json +89 -86
package/dist/ButtonGroup/ButtonGroup.stories.js CHANGED
@@ -1,385 +1,385 @@
1
- import React from 'react';
2
- import { QTip } from '../Tooltip/Qtip';
3
- import { ButtonGroup } from './ButtonGroup';
4
- import ToolbarButton from '../ToolbarButton';
5
- export default {
6
- title: 'ButtonGroup',
7
- };
8
- export const AllButtonGroups = () => {
9
- const [value, setValue] = React.useState('provided-1');
10
- const renderAllVariations = () => (React.createElement(React.Fragment, null,
11
- React.createElement("div", { className: "light" },
12
- React.createElement("div", { className: "tw-p-4" },
13
- React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
14
- {
15
- variant: 'button',
16
- buttonProps: {
17
- variant: 'outline',
18
- icon: 'fc-annotate',
19
- iconStyle: 'theme',
20
- value: 'provided-1',
21
- onClick: () => setValue('provided-1'),
22
- },
23
- },
24
- {
25
- variant: 'button',
26
- buttonProps: {
27
- variant: 'outline',
28
- icon: 'fc-trash',
29
- iconStyle: 'theme',
30
- value: 'provided-2',
31
- onClick: () => setValue('provided-2'),
32
- },
33
- },
34
- {
35
- variant: 'button',
36
- buttonProps: {
37
- variant: 'outline',
38
- icon: 'fc-formula-ai',
39
- iconStyle: 'theme',
40
- value: 'provided-3',
41
- onClick: () => setValue('provided-3'),
42
- },
43
- },
44
- ] })),
45
- React.createElement("div", { className: "tw-p-4" },
46
- React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
47
- {
48
- variant: 'button',
49
- buttonProps: {
50
- variant: 'outline',
51
- icon: 'fc-annotate',
52
- extraClassNames: 'tw-border-none',
53
- iconStyle: 'theme',
54
- value: 'provided-1',
55
- onClick: () => setValue('provided-1'),
56
- },
57
- },
58
- {
59
- variant: 'button',
60
- buttonProps: {
61
- variant: 'outline',
62
- icon: 'fc-trash',
63
- extraClassNames: 'tw-border-none',
64
- iconStyle: 'theme',
65
- value: 'provided-2',
66
- onClick: () => setValue('provided-2'),
67
- },
68
- },
69
- {
70
- variant: 'button',
71
- buttonProps: {
72
- variant: 'outline',
73
- extraClassNames: 'tw-border-none',
74
- icon: 'fc-formula-ai',
75
- iconStyle: 'theme',
76
- value: 'provided-3',
77
- onClick: () => setValue('provided-3'),
78
- },
79
- },
80
- ] })),
81
- React.createElement("div", { className: "tw-p-4" },
82
- React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
83
- {
84
- variant: 'button',
85
- buttonProps: {
86
- variant: 'theme',
87
- icon: 'fc-annotate',
88
- iconStyle: 'white',
89
- value: 'provided-1',
90
- onClick: () => setValue('provided-1'),
91
- },
92
- },
93
- {
94
- variant: 'button',
95
- buttonProps: {
96
- variant: 'theme',
97
- icon: 'fc-trash',
98
- iconStyle: 'white',
99
- value: 'provided-2',
100
- onClick: () => setValue('provided-2'),
101
- },
102
- },
103
- {
104
- variant: 'button',
105
- buttonProps: {
106
- variant: 'theme',
107
- icon: 'fc-formula-ai',
108
- iconStyle: 'white',
109
- value: 'provided-3',
110
- onClick: () => setValue('provided-3'),
111
- },
112
- },
113
- ] })),
114
- React.createElement("div", { className: "tw-p-4" },
115
- React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
116
- {
117
- variant: 'button',
118
- buttonProps: {
119
- variant: 'theme',
120
- label: 'annotate',
121
- value: 'provided-1',
122
- onClick: () => setValue('provided-1'),
123
- },
124
- },
125
- {
126
- variant: 'button',
127
- buttonProps: {
128
- variant: 'theme',
129
- label: 'trash',
130
- value: 'provided-2',
131
- onClick: () => setValue('provided-2'),
132
- },
133
- },
134
- {
135
- variant: 'button',
136
- buttonProps: {
137
- variant: 'theme',
138
- label: 'formula-ai',
139
- value: 'provided-3',
140
- onClick: () => setValue('provided-3'),
141
- },
142
- },
143
- ] })),
144
- React.createElement("div", { className: "tw-p-4" },
145
- React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
146
- {
147
- variant: 'element',
148
- element: (React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Popover", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
149
- React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
150
- },
151
- {
152
- variant: 'element',
153
- element: (React.createElement(ToolbarButton, { icon: "fc-trash", label: "Trash", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
154
- React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
155
- },
156
- {
157
- variant: 'element',
158
- element: (React.createElement(ToolbarButton, { icon: "fc-formula-ai", label: "Formula", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
159
- React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
160
- },
161
- ] })),
162
- React.createElement("div", { className: "tw-p-4" },
163
- React.createElement(ButtonGroup, { buttons: [
164
- {
165
- variant: 'button',
166
- buttonProps: {
167
- size: 'sm',
168
- icon: 'fc-annotate',
169
- value: 'left',
170
- isActive: true,
171
- },
172
- },
173
- {
174
- variant: 'button',
175
- buttonProps: {
176
- size: 'sm',
177
- icon: 'fc-trash',
178
- value: 'center',
179
- isActive: false,
180
- },
181
- },
182
- {
183
- variant: 'button',
184
- buttonProps: {
185
- size: 'sm',
186
- icon: 'fc-formula-ai',
187
- value: 'right',
188
- isActive: false,
189
- },
190
- },
191
- ] }))),
192
- React.createElement("div", { className: "tw-dark tw-bg-sq-dark-background" },
193
- React.createElement("div", { className: "tw-p-4" },
194
- React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
195
- {
196
- variant: 'button',
197
- buttonProps: {
198
- variant: 'outline',
199
- icon: 'fc-annotate',
200
- iconStyle: 'theme',
201
- value: 'provided-1',
202
- onClick: () => setValue('provided-1'),
203
- },
204
- },
205
- {
206
- variant: 'button',
207
- buttonProps: {
208
- variant: 'outline',
209
- icon: 'fc-trash',
210
- iconStyle: 'theme',
211
- value: 'provided-2',
212
- onClick: () => setValue('provided-2'),
213
- },
214
- },
215
- {
216
- variant: 'button',
217
- buttonProps: {
218
- variant: 'outline',
219
- icon: 'fc-formula-ai',
220
- iconStyle: 'theme',
221
- value: 'provided-3',
222
- onClick: () => setValue('provided-3'),
223
- },
224
- },
225
- ] })),
226
- React.createElement("div", { className: "tw-p-4" },
227
- React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
228
- {
229
- variant: 'button',
230
- buttonProps: {
231
- variant: 'no-border',
232
- icon: 'fc-annotate',
233
- iconStyle: 'theme',
234
- value: 'provided-1',
235
- onClick: () => setValue('provided-1'),
236
- },
237
- },
238
- {
239
- variant: 'button',
240
- buttonProps: {
241
- variant: 'no-border',
242
- icon: 'fc-trash',
243
- iconStyle: 'theme',
244
- value: 'provided-2',
245
- onClick: () => setValue('provided-2'),
246
- },
247
- },
248
- {
249
- variant: 'button',
250
- buttonProps: {
251
- variant: 'no-border',
252
- icon: 'fc-formula-ai',
253
- iconStyle: 'theme',
254
- value: 'provided-3',
255
- onClick: () => setValue('provided-3'),
256
- },
257
- },
258
- ] })),
259
- React.createElement("div", { className: "tw-p-4" },
260
- React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
261
- {
262
- variant: 'button',
263
- buttonProps: {
264
- variant: 'theme',
265
- icon: 'fc-annotate',
266
- iconStyle: 'white',
267
- value: 'provided-1',
268
- onClick: () => setValue('provided-1'),
269
- },
270
- },
271
- {
272
- variant: 'button',
273
- buttonProps: {
274
- variant: 'theme',
275
- icon: 'fc-trash',
276
- iconStyle: 'white',
277
- value: 'provided-2',
278
- onClick: () => setValue('provided-2'),
279
- },
280
- },
281
- {
282
- variant: 'button',
283
- buttonProps: {
284
- variant: 'theme',
285
- icon: 'fc-formula-ai',
286
- iconStyle: 'white',
287
- value: 'provided-3',
288
- onClick: () => setValue('provided-3'),
289
- },
290
- },
291
- ] })),
292
- React.createElement("div", { className: "tw-p-4" },
293
- React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
294
- {
295
- variant: 'button',
296
- buttonProps: {
297
- variant: 'theme',
298
- label: 'annotate',
299
- value: 'provided-1',
300
- onClick: () => setValue('provided-1'),
301
- },
302
- },
303
- {
304
- variant: 'button',
305
- buttonProps: {
306
- variant: 'theme',
307
- label: 'trash',
308
- value: 'provided-2',
309
- onClick: () => setValue('provided-2'),
310
- },
311
- },
312
- {
313
- variant: 'button',
314
- buttonProps: {
315
- variant: 'theme',
316
- label: 'formula-ai',
317
- value: 'provided-3',
318
- onClick: () => setValue('provided-3'),
319
- },
320
- },
321
- ] })),
322
- React.createElement("div", { className: "tw-p-4" },
323
- React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
324
- {
325
- variant: 'element',
326
- element: (React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Popover", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
327
- React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
328
- },
329
- {
330
- variant: 'element',
331
- element: (React.createElement(ToolbarButton, { icon: "fc-trash", label: "Trash", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
332
- React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
333
- },
334
- {
335
- variant: 'element',
336
- element: (React.createElement(ToolbarButton, { icon: "fc-formula-ai", label: "Formula", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
337
- React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
338
- },
339
- ] })),
340
- React.createElement("div", { className: "tw-p-4" },
341
- React.createElement(ButtonGroup, { buttons: [
342
- {
343
- variant: 'button',
344
- buttonProps: {
345
- size: 'sm',
346
- icon: 'fc-annotate',
347
- value: 'left',
348
- isActive: true,
349
- },
350
- },
351
- {
352
- variant: 'button',
353
- buttonProps: {
354
- size: 'sm',
355
- icon: 'fc-trash',
356
- value: 'center',
357
- isActive: false,
358
- },
359
- },
360
- {
361
- variant: 'button',
362
- buttonProps: {
363
- size: 'sm',
364
- icon: 'fc-formula-ai',
365
- value: 'right',
366
- isActive: false,
367
- },
368
- },
369
- ] })))));
370
- return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
371
- React.createElement(QTip, null),
372
- React.createElement("div", { className: "color_topic" },
373
- React.createElement("b", null, "Topic Colors"),
374
- renderAllVariations()),
375
- React.createElement("div", { className: "color_analysis" },
376
- React.createElement("b", null, "Analysis Colors"),
377
- renderAllVariations()),
378
- React.createElement("div", { className: "color_datalab" },
379
- React.createElement("b", null, "Datalab Colors"),
380
- renderAllVariations()),
381
- React.createElement("div", { className: "color_vantage" },
382
- React.createElement("b", null, "Vantage Colors"),
383
- renderAllVariations())));
384
- };
1
+ import React from 'react';
2
+ import { QTip } from '../Tooltip/Qtip';
3
+ import { ButtonGroup } from './ButtonGroup';
4
+ import ToolbarButton from '../ToolbarButton';
5
+ export default {
6
+ title: 'ButtonGroup',
7
+ };
8
+ export const AllButtonGroups = () => {
9
+ const [value, setValue] = React.useState('provided-1');
10
+ const renderAllVariations = () => (React.createElement(React.Fragment, null,
11
+ React.createElement("div", { className: "light" },
12
+ React.createElement("div", { className: "tw-p-4" },
13
+ React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
14
+ {
15
+ variant: 'button',
16
+ buttonProps: {
17
+ variant: 'outline',
18
+ icon: 'fc-annotate',
19
+ iconStyle: 'theme',
20
+ value: 'provided-1',
21
+ onClick: () => setValue('provided-1'),
22
+ },
23
+ },
24
+ {
25
+ variant: 'button',
26
+ buttonProps: {
27
+ variant: 'outline',
28
+ icon: 'fc-trash',
29
+ iconStyle: 'theme',
30
+ value: 'provided-2',
31
+ onClick: () => setValue('provided-2'),
32
+ },
33
+ },
34
+ {
35
+ variant: 'button',
36
+ buttonProps: {
37
+ variant: 'outline',
38
+ icon: 'fc-formula-ai',
39
+ iconStyle: 'theme',
40
+ value: 'provided-3',
41
+ onClick: () => setValue('provided-3'),
42
+ },
43
+ },
44
+ ] })),
45
+ React.createElement("div", { className: "tw-p-4" },
46
+ React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
47
+ {
48
+ variant: 'button',
49
+ buttonProps: {
50
+ variant: 'outline',
51
+ icon: 'fc-annotate',
52
+ extraClassNames: 'tw-border-none',
53
+ iconStyle: 'theme',
54
+ value: 'provided-1',
55
+ onClick: () => setValue('provided-1'),
56
+ },
57
+ },
58
+ {
59
+ variant: 'button',
60
+ buttonProps: {
61
+ variant: 'outline',
62
+ icon: 'fc-trash',
63
+ extraClassNames: 'tw-border-none',
64
+ iconStyle: 'theme',
65
+ value: 'provided-2',
66
+ onClick: () => setValue('provided-2'),
67
+ },
68
+ },
69
+ {
70
+ variant: 'button',
71
+ buttonProps: {
72
+ variant: 'outline',
73
+ extraClassNames: 'tw-border-none',
74
+ icon: 'fc-formula-ai',
75
+ iconStyle: 'theme',
76
+ value: 'provided-3',
77
+ onClick: () => setValue('provided-3'),
78
+ },
79
+ },
80
+ ] })),
81
+ React.createElement("div", { className: "tw-p-4" },
82
+ React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
83
+ {
84
+ variant: 'button',
85
+ buttonProps: {
86
+ variant: 'theme',
87
+ icon: 'fc-annotate',
88
+ iconStyle: 'white',
89
+ value: 'provided-1',
90
+ onClick: () => setValue('provided-1'),
91
+ },
92
+ },
93
+ {
94
+ variant: 'button',
95
+ buttonProps: {
96
+ variant: 'theme',
97
+ icon: 'fc-trash',
98
+ iconStyle: 'white',
99
+ value: 'provided-2',
100
+ onClick: () => setValue('provided-2'),
101
+ },
102
+ },
103
+ {
104
+ variant: 'button',
105
+ buttonProps: {
106
+ variant: 'theme',
107
+ icon: 'fc-formula-ai',
108
+ iconStyle: 'white',
109
+ value: 'provided-3',
110
+ onClick: () => setValue('provided-3'),
111
+ },
112
+ },
113
+ ] })),
114
+ React.createElement("div", { className: "tw-p-4" },
115
+ React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
116
+ {
117
+ variant: 'button',
118
+ buttonProps: {
119
+ variant: 'theme',
120
+ label: 'annotate',
121
+ value: 'provided-1',
122
+ onClick: () => setValue('provided-1'),
123
+ },
124
+ },
125
+ {
126
+ variant: 'button',
127
+ buttonProps: {
128
+ variant: 'theme',
129
+ label: 'trash',
130
+ value: 'provided-2',
131
+ onClick: () => setValue('provided-2'),
132
+ },
133
+ },
134
+ {
135
+ variant: 'button',
136
+ buttonProps: {
137
+ variant: 'theme',
138
+ label: 'formula-ai',
139
+ value: 'provided-3',
140
+ onClick: () => setValue('provided-3'),
141
+ },
142
+ },
143
+ ] })),
144
+ React.createElement("div", { className: "tw-p-4" },
145
+ React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
146
+ {
147
+ variant: 'element',
148
+ element: (React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Popover", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
149
+ React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
150
+ },
151
+ {
152
+ variant: 'element',
153
+ element: (React.createElement(ToolbarButton, { icon: "fc-trash", label: "Trash", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
154
+ React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
155
+ },
156
+ {
157
+ variant: 'element',
158
+ element: (React.createElement(ToolbarButton, { icon: "fc-formula-ai", label: "Formula", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
159
+ React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
160
+ },
161
+ ] })),
162
+ React.createElement("div", { className: "tw-p-4" },
163
+ React.createElement(ButtonGroup, { buttons: [
164
+ {
165
+ variant: 'button',
166
+ buttonProps: {
167
+ size: 'sm',
168
+ icon: 'fc-annotate',
169
+ value: 'left',
170
+ isActive: true,
171
+ },
172
+ },
173
+ {
174
+ variant: 'button',
175
+ buttonProps: {
176
+ size: 'sm',
177
+ icon: 'fc-trash',
178
+ value: 'center',
179
+ isActive: false,
180
+ },
181
+ },
182
+ {
183
+ variant: 'button',
184
+ buttonProps: {
185
+ size: 'sm',
186
+ icon: 'fc-formula-ai',
187
+ value: 'right',
188
+ isActive: false,
189
+ },
190
+ },
191
+ ] }))),
192
+ React.createElement("div", { className: "tw-dark tw-bg-sq-dark-background" },
193
+ React.createElement("div", { className: "tw-p-4" },
194
+ React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
195
+ {
196
+ variant: 'button',
197
+ buttonProps: {
198
+ variant: 'outline',
199
+ icon: 'fc-annotate',
200
+ iconStyle: 'theme',
201
+ value: 'provided-1',
202
+ onClick: () => setValue('provided-1'),
203
+ },
204
+ },
205
+ {
206
+ variant: 'button',
207
+ buttonProps: {
208
+ variant: 'outline',
209
+ icon: 'fc-trash',
210
+ iconStyle: 'theme',
211
+ value: 'provided-2',
212
+ onClick: () => setValue('provided-2'),
213
+ },
214
+ },
215
+ {
216
+ variant: 'button',
217
+ buttonProps: {
218
+ variant: 'outline',
219
+ icon: 'fc-formula-ai',
220
+ iconStyle: 'theme',
221
+ value: 'provided-3',
222
+ onClick: () => setValue('provided-3'),
223
+ },
224
+ },
225
+ ] })),
226
+ React.createElement("div", { className: "tw-p-4" },
227
+ React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
228
+ {
229
+ variant: 'button',
230
+ buttonProps: {
231
+ variant: 'no-border',
232
+ icon: 'fc-annotate',
233
+ iconStyle: 'theme',
234
+ value: 'provided-1',
235
+ onClick: () => setValue('provided-1'),
236
+ },
237
+ },
238
+ {
239
+ variant: 'button',
240
+ buttonProps: {
241
+ variant: 'no-border',
242
+ icon: 'fc-trash',
243
+ iconStyle: 'theme',
244
+ value: 'provided-2',
245
+ onClick: () => setValue('provided-2'),
246
+ },
247
+ },
248
+ {
249
+ variant: 'button',
250
+ buttonProps: {
251
+ variant: 'no-border',
252
+ icon: 'fc-formula-ai',
253
+ iconStyle: 'theme',
254
+ value: 'provided-3',
255
+ onClick: () => setValue('provided-3'),
256
+ },
257
+ },
258
+ ] })),
259
+ React.createElement("div", { className: "tw-p-4" },
260
+ React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
261
+ {
262
+ variant: 'button',
263
+ buttonProps: {
264
+ variant: 'theme',
265
+ icon: 'fc-annotate',
266
+ iconStyle: 'white',
267
+ value: 'provided-1',
268
+ onClick: () => setValue('provided-1'),
269
+ },
270
+ },
271
+ {
272
+ variant: 'button',
273
+ buttonProps: {
274
+ variant: 'theme',
275
+ icon: 'fc-trash',
276
+ iconStyle: 'white',
277
+ value: 'provided-2',
278
+ onClick: () => setValue('provided-2'),
279
+ },
280
+ },
281
+ {
282
+ variant: 'button',
283
+ buttonProps: {
284
+ variant: 'theme',
285
+ icon: 'fc-formula-ai',
286
+ iconStyle: 'white',
287
+ value: 'provided-3',
288
+ onClick: () => setValue('provided-3'),
289
+ },
290
+ },
291
+ ] })),
292
+ React.createElement("div", { className: "tw-p-4" },
293
+ React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
294
+ {
295
+ variant: 'button',
296
+ buttonProps: {
297
+ variant: 'theme',
298
+ label: 'annotate',
299
+ value: 'provided-1',
300
+ onClick: () => setValue('provided-1'),
301
+ },
302
+ },
303
+ {
304
+ variant: 'button',
305
+ buttonProps: {
306
+ variant: 'theme',
307
+ label: 'trash',
308
+ value: 'provided-2',
309
+ onClick: () => setValue('provided-2'),
310
+ },
311
+ },
312
+ {
313
+ variant: 'button',
314
+ buttonProps: {
315
+ variant: 'theme',
316
+ label: 'formula-ai',
317
+ value: 'provided-3',
318
+ onClick: () => setValue('provided-3'),
319
+ },
320
+ },
321
+ ] })),
322
+ React.createElement("div", { className: "tw-p-4" },
323
+ React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
324
+ {
325
+ variant: 'element',
326
+ element: (React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Popover", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
327
+ React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
328
+ },
329
+ {
330
+ variant: 'element',
331
+ element: (React.createElement(ToolbarButton, { icon: "fc-trash", label: "Trash", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
332
+ React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
333
+ },
334
+ {
335
+ variant: 'element',
336
+ element: (React.createElement(ToolbarButton, { icon: "fc-formula-ai", label: "Formula", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
337
+ React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
338
+ },
339
+ ] })),
340
+ React.createElement("div", { className: "tw-p-4" },
341
+ React.createElement(ButtonGroup, { buttons: [
342
+ {
343
+ variant: 'button',
344
+ buttonProps: {
345
+ size: 'sm',
346
+ icon: 'fc-annotate',
347
+ value: 'left',
348
+ isActive: true,
349
+ },
350
+ },
351
+ {
352
+ variant: 'button',
353
+ buttonProps: {
354
+ size: 'sm',
355
+ icon: 'fc-trash',
356
+ value: 'center',
357
+ isActive: false,
358
+ },
359
+ },
360
+ {
361
+ variant: 'button',
362
+ buttonProps: {
363
+ size: 'sm',
364
+ icon: 'fc-formula-ai',
365
+ value: 'right',
366
+ isActive: false,
367
+ },
368
+ },
369
+ ] })))));
370
+ return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
371
+ React.createElement(QTip, null),
372
+ React.createElement("div", { className: "color_topic" },
373
+ React.createElement("b", null, "Topic Colors"),
374
+ renderAllVariations()),
375
+ React.createElement("div", { className: "color_analysis" },
376
+ React.createElement("b", null, "Analysis Colors"),
377
+ renderAllVariations()),
378
+ React.createElement("div", { className: "color_datalab" },
379
+ React.createElement("b", null, "Datalab Colors"),
380
+ renderAllVariations()),
381
+ React.createElement("div", { className: "color_vantage" },
382
+ React.createElement("b", null, "Vantage Colors"),
383
+ renderAllVariations())));
384
+ };
385
385
  //# sourceMappingURL=ButtonGroup.stories.js.map