@seeqdev/qomponents 0.0.132 → 0.0.133

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 (140) 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.js +1 -1
  11. package/dist/Alert/index.js +1 -1
  12. package/dist/Button/Button.js +91 -91
  13. package/dist/Button/Button.stories.js +99 -99
  14. package/dist/Button/Button.test.js +48 -48
  15. package/dist/Button/Button.types.js +4 -4
  16. package/dist/Button/index.js +1 -1
  17. package/dist/ButtonGroup/ButtonGroup.js +32 -32
  18. package/dist/ButtonGroup/ButtonGroup.stories.js +384 -384
  19. package/dist/ButtonGroup/ButtonGroup.test.js +66 -66
  20. package/dist/ButtonGroup/ButtonGroup.types.js +1 -1
  21. package/dist/ButtonGroup/index.js +1 -1
  22. package/dist/ButtonWithDropdown/ButtonWithDropdown.js +59 -59
  23. package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.js +142 -142
  24. package/dist/ButtonWithDropdown/ButtonWithDropdown.test.js +92 -92
  25. package/dist/ButtonWithDropdown/ButtonWithDropdown.types.js +1 -1
  26. package/dist/ButtonWithDropdown/index.js +1 -1
  27. package/dist/ButtonWithPopover/ButtonWithPopover.js +61 -61
  28. package/dist/ButtonWithPopover/ButtonWithPopover.stories.js +74 -74
  29. package/dist/ButtonWithPopover/ButtonWithPopover.test.js +81 -81
  30. package/dist/ButtonWithPopover/ButtonWithPopover.types.js +1 -1
  31. package/dist/ButtonWithPopover/index.js +1 -1
  32. package/dist/Carousel/Carousel.js +66 -66
  33. package/dist/Carousel/Carousel.stories.js +114 -114
  34. package/dist/Carousel/Carousel.test.js +47 -47
  35. package/dist/Carousel/Carousel.types.js +1 -1
  36. package/dist/Carousel/index.js +1 -1
  37. package/dist/Checkbox/Checkbox.js +25 -25
  38. package/dist/Checkbox/Checkbox.stories.js +33 -33
  39. package/dist/Checkbox/Checkbox.test.js +93 -93
  40. package/dist/Checkbox/Checkbox.types.js +1 -1
  41. package/dist/Checkbox/index.js +1 -1
  42. package/dist/Collapse/Collapse.js +17 -17
  43. package/dist/Collapse/Collapse.stories.js +36 -36
  44. package/dist/Collapse/Collapse.test.js +18 -18
  45. package/dist/Collapse/Collapse.types.js +1 -1
  46. package/dist/Collapse/index.js +1 -1
  47. package/dist/Icon/Icon.js +54 -54
  48. package/dist/Icon/Icon.stories.js +46 -46
  49. package/dist/Icon/Icon.test.js +54 -54
  50. package/dist/Icon/Icon.types.js +15 -15
  51. package/dist/Icon/index.js +1 -1
  52. package/dist/InputGroup/InputGroup.js +31 -31
  53. package/dist/InputGroup/InputGroup.stories.js +167 -167
  54. package/dist/InputGroup/InputGroup.test.js +42 -42
  55. package/dist/InputGroup/InputGroup.types.js +1 -1
  56. package/dist/InputGroup/index.js +1 -1
  57. package/dist/Modal/Modal.js +99 -99
  58. package/dist/Modal/Modal.js.map +1 -1
  59. package/dist/Modal/Modal.stories.js +126 -126
  60. package/dist/Modal/Modal.test.js +107 -107
  61. package/dist/Modal/Modal.types.js +1 -1
  62. package/dist/Modal/index.js +1 -1
  63. package/dist/ProgressBar/ProgressBar.js +49 -29
  64. package/dist/ProgressBar/ProgressBar.js.map +1 -1
  65. package/dist/ProgressBar/ProgressBar.stories.js +80 -72
  66. package/dist/ProgressBar/ProgressBar.stories.js.map +1 -1
  67. package/dist/ProgressBar/ProgressBar.test.js +43 -37
  68. package/dist/ProgressBar/ProgressBar.test.js.map +1 -1
  69. package/dist/ProgressBar/ProgressBar.types.d.ts +2 -0
  70. package/dist/ProgressBar/ProgressBar.types.js +1 -1
  71. package/dist/ProgressBar/index.js +1 -1
  72. package/dist/SeeqActionDropdown/SeeqActionDropdown.js +47 -47
  73. package/dist/SeeqActionDropdown/SeeqActionDropdown.stories.js +79 -79
  74. package/dist/SeeqActionDropdown/SeeqActionDropdown.test.js +72 -72
  75. package/dist/SeeqActionDropdown/SeeqActionDropdown.types.js +1 -1
  76. package/dist/SeeqActionDropdown/index.js +1 -1
  77. package/dist/SeeqActionDropdown/variants.js +22 -22
  78. package/dist/Select/Select.js +173 -173
  79. package/dist/Select/Select.stories.js +79 -79
  80. package/dist/Select/Select.test.js +181 -181
  81. package/dist/Select/Select.types.js +1 -1
  82. package/dist/Select/index.js +2 -2
  83. package/dist/Slider/Slider.js +12 -12
  84. package/dist/Slider/Slider.stories.js +57 -57
  85. package/dist/Slider/Slider.test.js +32 -32
  86. package/dist/Slider/Slider.types.js +1 -1
  87. package/dist/Slider/index.js +1 -1
  88. package/dist/Tabs/Tabs.js +21 -21
  89. package/dist/Tabs/Tabs.stories.js +90 -90
  90. package/dist/Tabs/Tabs.test.js +90 -90
  91. package/dist/Tabs/Tabs.types.js +1 -1
  92. package/dist/Tabs/index.js +1 -1
  93. package/dist/TextArea/TextArea.js +24 -24
  94. package/dist/TextArea/TextArea.stories.js +45 -45
  95. package/dist/TextArea/TextArea.test.js +67 -67
  96. package/dist/TextArea/TextArea.types.js +1 -1
  97. package/dist/TextArea/index.js +1 -1
  98. package/dist/TextField/TextField.js +78 -78
  99. package/dist/TextField/TextField.stories.js +69 -69
  100. package/dist/TextField/TextField.test.js +38 -38
  101. package/dist/TextField/TextField.types.js +1 -1
  102. package/dist/TextField/index.js +1 -1
  103. package/dist/ToolbarButton/ToolbarButton.js +74 -74
  104. package/dist/ToolbarButton/ToolbarButton.stories.js +93 -93
  105. package/dist/ToolbarButton/ToolbarButton.test.js +92 -92
  106. package/dist/ToolbarButton/ToolbarButton.types.js +1 -1
  107. package/dist/ToolbarButton/index.js +1 -1
  108. package/dist/Tooltip/QTip.stories.js +44 -44
  109. package/dist/Tooltip/QTip.types.js +1 -1
  110. package/dist/Tooltip/QTipPerformance.stories.js +29 -29
  111. package/dist/Tooltip/Qtip.js +167 -167
  112. package/dist/Tooltip/Tooltip.js +35 -35
  113. package/dist/Tooltip/Tooltip.stories.js +31 -31
  114. package/dist/Tooltip/Tooltip.types.js +2 -2
  115. package/dist/Tooltip/TooltipPerformance.stories.js +29 -29
  116. package/dist/Tooltip/index.js +2 -2
  117. package/dist/Tooltip/qTip.utilities.js +10 -10
  118. package/dist/example/.eslintrc.cjs +14 -14
  119. package/dist/example/README.md +33 -33
  120. package/dist/example/index.html +13 -13
  121. package/dist/example/package.json +30 -30
  122. package/dist/example/src/ComplexSelectExample.tsx +81 -81
  123. package/dist/example/src/Example.tsx +408 -408
  124. package/dist/example/src/index.css +102 -102
  125. package/dist/example/src/main.tsx +10 -10
  126. package/dist/example/src/vite-env.d.ts +1 -1
  127. package/dist/example/tsconfig.json +33 -33
  128. package/dist/example/tsconfig.node.json +12 -12
  129. package/dist/example/vite.config.ts +12 -12
  130. package/dist/index.esm.js +1229 -31
  131. package/dist/index.esm.js.map +1 -1
  132. package/dist/index.js +1229 -31
  133. package/dist/index.js.map +1 -1
  134. package/dist/styles.css +3714 -3709
  135. package/dist/types.js +1 -1
  136. package/dist/utils/browserId.js +28 -28
  137. package/dist/utils/svg.js +19 -19
  138. package/dist/utils/validateStyleDimension.js +13 -13
  139. package/dist/utils/validateStyleDimension.test.js +19 -19
  140. package/package.json +88 -86
package/dist/InputGroup/InputGroup.stories.js CHANGED
@@ -1,168 +1,168 @@
1
- import React from 'react';
2
- import { InputGroup } from './InputGroup';
3
- import { QTip } from '../Tooltip/Qtip';
4
- export default {
5
- title: 'InputGroup',
6
- };
7
- export const AllTextFields = () => {
8
- const renderAllVariations = () => (React.createElement(React.Fragment, null,
9
- React.createElement("div", { className: "light" },
10
- React.createElement("div", { className: "tw-p-4" },
11
- React.createElement(InputGroup, { value: "value provided", append: [
12
- {
13
- variant: 'button',
14
- buttonProps: {
15
- icon: 'fc-annotate',
16
- iconStyle: 'theme',
17
- },
18
- },
19
- {
20
- variant: 'button',
21
- buttonProps: {
22
- icon: 'fc-trash',
23
- iconStyle: 'theme',
24
- },
25
- },
26
- ] })),
27
- React.createElement("div", { className: "tw-p-4" },
28
- React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with tooltip", append: [
29
- {
30
- variant: 'button',
31
- buttonProps: {
32
- icon: 'fc-annotate',
33
- iconStyle: 'theme',
34
- },
35
- },
36
- {
37
- variant: 'button',
38
- buttonProps: {
39
- icon: 'fc-trash',
40
- iconStyle: 'theme',
41
- },
42
- },
43
- ] })),
44
- React.createElement("div", { className: "tw-p-4" },
45
- React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with tooltip", append: [
46
- {
47
- variant: 'button',
48
- buttonProps: {
49
- icon: 'fc-annotate',
50
- iconStyle: 'theme',
51
- },
52
- },
53
- ] })),
54
- React.createElement("div", { className: "tw-p-4" },
55
- React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with custom element", append: [
56
- {
57
- variant: 'element',
58
- element: React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background" }, "Custom"),
59
- },
60
- ] })),
61
- React.createElement("div", { className: "tw-p-4" },
62
- React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "button input group", field: React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background", onClick: () => console.log('clicked') }, "custom grouped element"), append: [
63
- {
64
- variant: 'element',
65
- element: (React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text" }, "Custom")),
66
- },
67
- ] })),
68
- React.createElement("div", { className: "tw-p-4" },
69
- React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, field: React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background" },
70
- React.createElement("div", { className: "tw-rounded-sm tw-bg-green-400 " }, "Custom element 1"),
71
- React.createElement("div", { className: "tw-rounded-sm tw-bg-red-400 tw-mt-1", onClick: () => console.log('clicked') }, "Custom element 2")), append: [
72
- {
73
- variant: 'element',
74
- element: (React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text" }, "Edit")),
75
- },
76
- {
77
- variant: 'element',
78
- element: (React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text" }, "Delete")),
79
- },
80
- ] }))),
81
- React.createElement("div", { className: "tw-dark tw-bg-sq-dark-background" },
82
- React.createElement("div", { className: "tw-p-4" },
83
- React.createElement(InputGroup, { value: "value provided", append: [
84
- {
85
- variant: 'button',
86
- buttonProps: {
87
- icon: 'fc-annotate',
88
- iconStyle: 'theme',
89
- },
90
- },
91
- {
92
- variant: 'button',
93
- buttonProps: {
94
- icon: 'fc-trash',
95
- iconStyle: 'theme',
96
- },
97
- },
98
- ] })),
99
- React.createElement("div", { className: "tw-p-4" },
100
- React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with tooltip", append: [
101
- {
102
- variant: 'button',
103
- buttonProps: {
104
- icon: 'fc-annotate',
105
- iconStyle: 'theme',
106
- },
107
- },
108
- {
109
- variant: 'button',
110
- buttonProps: {
111
- icon: 'fc-trash',
112
- iconStyle: 'theme',
113
- },
114
- },
115
- ] })),
116
- React.createElement("div", { className: "tw-p-4" },
117
- React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with tooltip", append: [
118
- {
119
- variant: 'button',
120
- buttonProps: {
121
- icon: 'fc-annotate',
122
- iconStyle: 'theme',
123
- },
124
- },
125
- ] })),
126
- React.createElement("div", { className: "tw-p-4" },
127
- React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with custom element", append: [
128
- {
129
- variant: 'element',
130
- element: (React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text" }, "Custom")),
131
- },
132
- ] })),
133
- React.createElement("div", { className: "tw-p-4" },
134
- React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "button input group", field: React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text", onClick: () => console.log('clicked') }, "custom grouped element"), append: [
135
- {
136
- variant: 'element',
137
- element: (React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text" }, "Custom")),
138
- },
139
- ] })),
140
- React.createElement("div", { className: "tw-p-4" },
141
- React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, field: React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background" },
142
- React.createElement("div", { className: "tw-rounded-sm tw-bg-green-400 dark:tw-text-sq-dark-text" }, "Custom element 1"),
143
- React.createElement("div", { className: "tw-rounded-sm tw-bg-red-400 dark:tw-text-sq-dark-text tw-mt-1", onClick: () => console.log('clicked') }, "Custom element 2")), append: [
144
- {
145
- variant: 'element',
146
- element: (React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text" }, "Edit")),
147
- },
148
- {
149
- variant: 'element',
150
- element: (React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text" }, "Delete")),
151
- },
152
- ] })))));
153
- return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
154
- React.createElement(QTip, null),
155
- React.createElement("div", { className: "color_topic" },
156
- React.createElement("b", null, "Topic Colors"),
157
- renderAllVariations()),
158
- React.createElement("div", { className: "color_analysis" },
159
- React.createElement("b", null, "Analysis Colors"),
160
- renderAllVariations()),
161
- React.createElement("div", { className: "color_datalab" },
162
- React.createElement("b", null, "Datalab Colors"),
163
- renderAllVariations()),
164
- React.createElement("div", { className: "color_vantage" },
165
- React.createElement("b", null, "Vantage Colors"),
166
- renderAllVariations())));
167
- };
1
+ import React from 'react';
2
+ import { InputGroup } from './InputGroup';
3
+ import { QTip } from '../Tooltip/Qtip';
4
+ export default {
5
+ title: 'InputGroup',
6
+ };
7
+ export const AllTextFields = () => {
8
+ const renderAllVariations = () => (React.createElement(React.Fragment, null,
9
+ React.createElement("div", { className: "light" },
10
+ React.createElement("div", { className: "tw-p-4" },
11
+ React.createElement(InputGroup, { value: "value provided", append: [
12
+ {
13
+ variant: 'button',
14
+ buttonProps: {
15
+ icon: 'fc-annotate',
16
+ iconStyle: 'theme',
17
+ },
18
+ },
19
+ {
20
+ variant: 'button',
21
+ buttonProps: {
22
+ icon: 'fc-trash',
23
+ iconStyle: 'theme',
24
+ },
25
+ },
26
+ ] })),
27
+ React.createElement("div", { className: "tw-p-4" },
28
+ React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with tooltip", append: [
29
+ {
30
+ variant: 'button',
31
+ buttonProps: {
32
+ icon: 'fc-annotate',
33
+ iconStyle: 'theme',
34
+ },
35
+ },
36
+ {
37
+ variant: 'button',
38
+ buttonProps: {
39
+ icon: 'fc-trash',
40
+ iconStyle: 'theme',
41
+ },
42
+ },
43
+ ] })),
44
+ React.createElement("div", { className: "tw-p-4" },
45
+ React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with tooltip", append: [
46
+ {
47
+ variant: 'button',
48
+ buttonProps: {
49
+ icon: 'fc-annotate',
50
+ iconStyle: 'theme',
51
+ },
52
+ },
53
+ ] })),
54
+ React.createElement("div", { className: "tw-p-4" },
55
+ React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with custom element", append: [
56
+ {
57
+ variant: 'element',
58
+ element: React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background" }, "Custom"),
59
+ },
60
+ ] })),
61
+ React.createElement("div", { className: "tw-p-4" },
62
+ React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "button input group", field: React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background", onClick: () => console.log('clicked') }, "custom grouped element"), append: [
63
+ {
64
+ variant: 'element',
65
+ element: (React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text" }, "Custom")),
66
+ },
67
+ ] })),
68
+ React.createElement("div", { className: "tw-p-4" },
69
+ React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, field: React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background" },
70
+ React.createElement("div", { className: "tw-rounded-sm tw-bg-green-400 " }, "Custom element 1"),
71
+ React.createElement("div", { className: "tw-rounded-sm tw-bg-red-400 tw-mt-1", onClick: () => console.log('clicked') }, "Custom element 2")), append: [
72
+ {
73
+ variant: 'element',
74
+ element: (React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text" }, "Edit")),
75
+ },
76
+ {
77
+ variant: 'element',
78
+ element: (React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text" }, "Delete")),
79
+ },
80
+ ] }))),
81
+ React.createElement("div", { className: "tw-dark tw-bg-sq-dark-background" },
82
+ React.createElement("div", { className: "tw-p-4" },
83
+ React.createElement(InputGroup, { value: "value provided", append: [
84
+ {
85
+ variant: 'button',
86
+ buttonProps: {
87
+ icon: 'fc-annotate',
88
+ iconStyle: 'theme',
89
+ },
90
+ },
91
+ {
92
+ variant: 'button',
93
+ buttonProps: {
94
+ icon: 'fc-trash',
95
+ iconStyle: 'theme',
96
+ },
97
+ },
98
+ ] })),
99
+ React.createElement("div", { className: "tw-p-4" },
100
+ React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with tooltip", append: [
101
+ {
102
+ variant: 'button',
103
+ buttonProps: {
104
+ icon: 'fc-annotate',
105
+ iconStyle: 'theme',
106
+ },
107
+ },
108
+ {
109
+ variant: 'button',
110
+ buttonProps: {
111
+ icon: 'fc-trash',
112
+ iconStyle: 'theme',
113
+ },
114
+ },
115
+ ] })),
116
+ React.createElement("div", { className: "tw-p-4" },
117
+ React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with tooltip", append: [
118
+ {
119
+ variant: 'button',
120
+ buttonProps: {
121
+ icon: 'fc-annotate',
122
+ iconStyle: 'theme',
123
+ },
124
+ },
125
+ ] })),
126
+ React.createElement("div", { className: "tw-p-4" },
127
+ React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with custom element", append: [
128
+ {
129
+ variant: 'element',
130
+ element: (React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text" }, "Custom")),
131
+ },
132
+ ] })),
133
+ React.createElement("div", { className: "tw-p-4" },
134
+ React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "button input group", field: React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text", onClick: () => console.log('clicked') }, "custom grouped element"), append: [
135
+ {
136
+ variant: 'element',
137
+ element: (React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text" }, "Custom")),
138
+ },
139
+ ] })),
140
+ React.createElement("div", { className: "tw-p-4" },
141
+ React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, field: React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background" },
142
+ React.createElement("div", { className: "tw-rounded-sm tw-bg-green-400 dark:tw-text-sq-dark-text" }, "Custom element 1"),
143
+ React.createElement("div", { className: "tw-rounded-sm tw-bg-red-400 dark:tw-text-sq-dark-text tw-mt-1", onClick: () => console.log('clicked') }, "Custom element 2")), append: [
144
+ {
145
+ variant: 'element',
146
+ element: (React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text" }, "Edit")),
147
+ },
148
+ {
149
+ variant: 'element',
150
+ element: (React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text" }, "Delete")),
151
+ },
152
+ ] })))));
153
+ return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
154
+ React.createElement(QTip, null),
155
+ React.createElement("div", { className: "color_topic" },
156
+ React.createElement("b", null, "Topic Colors"),
157
+ renderAllVariations()),
158
+ React.createElement("div", { className: "color_analysis" },
159
+ React.createElement("b", null, "Analysis Colors"),
160
+ renderAllVariations()),
161
+ React.createElement("div", { className: "color_datalab" },
162
+ React.createElement("b", null, "Datalab Colors"),
163
+ renderAllVariations()),
164
+ React.createElement("div", { className: "color_vantage" },
165
+ React.createElement("b", null, "Vantage Colors"),
166
+ renderAllVariations())));
167
+ };
168
168
  //# sourceMappingURL=InputGroup.stories.js.map
package/dist/InputGroup/InputGroup.test.js CHANGED
@@ -1,43 +1,43 @@
1
- import React from 'react';
2
- import { render } from '@testing-library/react';
3
- import '@testing-library/jest-dom/extend-expect';
4
- import { InputGroup } from './InputGroup';
5
- describe('InputGroup', () => {
6
- const defaultProps = {
7
- value: 'with tooltip',
8
- append: [
9
- {
10
- variant: 'button',
11
- buttonProps: {
12
- icon: 'fc-annotate',
13
- iconStyle: 'theme',
14
- },
15
- },
16
- ],
17
- extraClassNames: 'extra-class',
18
- tooltip: 'Tooltip title',
19
- tooltipDelay: 0,
20
- id: 'input-group-id',
21
- testId: 'input-group-test-id',
22
- };
23
- it('renders without crashing', () => {
24
- const { getByTestId } = render(React.createElement(InputGroup, { ...defaultProps }));
25
- expect(getByTestId('input-group-test-id')).toBeInTheDocument();
26
- });
27
- it('applies the correct classes', () => {
28
- const { getByTestId } = render(React.createElement(InputGroup, { ...defaultProps }));
29
- const inputGroup = getByTestId('input-group-test-id');
30
- expect(inputGroup).toHaveClass('tw-flex');
31
- expect(inputGroup).toHaveClass('tw-outline-none');
32
- expect(inputGroup).toHaveClass('extra-class');
33
- });
34
- it('renders append items', () => {
35
- const { getByRole } = render(React.createElement(InputGroup, { ...defaultProps }));
36
- expect(getByRole('button')).toBeInTheDocument();
37
- });
38
- it('renders input element', () => {
39
- const { container } = render(React.createElement(InputGroup, { ...defaultProps }));
40
- expect(container.querySelector('input[type="text"]')).toBeInTheDocument();
41
- });
42
- });
1
+ import React from 'react';
2
+ import { render } from '@testing-library/react';
3
+ import '@testing-library/jest-dom/extend-expect';
4
+ import { InputGroup } from './InputGroup';
5
+ describe('InputGroup', () => {
6
+ const defaultProps = {
7
+ value: 'with tooltip',
8
+ append: [
9
+ {
10
+ variant: 'button',
11
+ buttonProps: {
12
+ icon: 'fc-annotate',
13
+ iconStyle: 'theme',
14
+ },
15
+ },
16
+ ],
17
+ extraClassNames: 'extra-class',
18
+ tooltip: 'Tooltip title',
19
+ tooltipDelay: 0,
20
+ id: 'input-group-id',
21
+ testId: 'input-group-test-id',
22
+ };
23
+ it('renders without crashing', () => {
24
+ const { getByTestId } = render(React.createElement(InputGroup, { ...defaultProps }));
25
+ expect(getByTestId('input-group-test-id')).toBeInTheDocument();
26
+ });
27
+ it('applies the correct classes', () => {
28
+ const { getByTestId } = render(React.createElement(InputGroup, { ...defaultProps }));
29
+ const inputGroup = getByTestId('input-group-test-id');
30
+ expect(inputGroup).toHaveClass('tw-flex');
31
+ expect(inputGroup).toHaveClass('tw-outline-none');
32
+ expect(inputGroup).toHaveClass('extra-class');
33
+ });
34
+ it('renders append items', () => {
35
+ const { getByRole } = render(React.createElement(InputGroup, { ...defaultProps }));
36
+ expect(getByRole('button')).toBeInTheDocument();
37
+ });
38
+ it('renders input element', () => {
39
+ const { container } = render(React.createElement(InputGroup, { ...defaultProps }));
40
+ expect(container.querySelector('input[type="text"]')).toBeInTheDocument();
41
+ });
42
+ });
43
43
  //# sourceMappingURL=InputGroup.test.js.map
package/dist/InputGroup/InputGroup.types.js CHANGED
@@ -1,2 +1,2 @@
1
- export {};
1
+ export {};
2
2
  //# sourceMappingURL=InputGroup.types.js.map
package/dist/InputGroup/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export { InputGroup as default } from './InputGroup';
1
+ export { InputGroup as default } from './InputGroup';
2
2
  //# sourceMappingURL=index.js.map