@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/Icon/Icon.js CHANGED
@@ -1,55 +1,55 @@
1
- import React from 'react';
2
- import '../styles.css';
3
- import { getQTipData } from '../Tooltip/qTip.utilities';
4
- const colorClassesThemeLight = {
5
- 'theme': 'tw-text-sq-color-dark',
6
- 'white': 'tw-text-white',
7
- 'dark-gray': 'tw-text-sq-fairly-dark-gray',
8
- 'warning': 'tw-text-sq-warning-color',
9
- 'darkish-gray': 'tw-text-sq-darkish-gray',
10
- 'gray': 'tw-text-sq-disabled-gray',
11
- 'color': '',
12
- 'info': 'tw-text-sq-link',
13
- 'text': 'tw-text-sq-text-color',
14
- 'inherit': '',
15
- 'danger': 'tw-text-sq-danger-color',
16
- 'theme-light': 'tw-text-sq-color-light',
17
- 'success': 'tw-text-sq-success-color',
18
- };
19
- const colorClassesThemeDark = {
20
- 'theme': 'dark:tw-text-sq-color-dark-dark',
21
- 'white': '',
22
- 'dark-gray': 'tw-text-sq-fairly-dark-gray',
23
- 'warning': '',
24
- 'darkish-gray': 'tw-text-sq-darkish-gray',
25
- 'gray': 'dark:tw-text-sq-dark-disabled-gray',
26
- 'color': '',
27
- 'info': 'dark:tw-text-sq-link-dark',
28
- 'text': 'dark:tw-text-sq-dark-text',
29
- 'inherit': '',
30
- 'danger': 'tw-text-sq-danger-color',
31
- 'theme-light': 'tw-text-sq-color-light',
32
- 'success': 'tw-text-sq-success-color',
33
- };
34
- /**
35
- * Icon:
36
- * - access to Seeq custom icons by providing the desired icon
37
- * - leverage "type" to style your icon
38
- */
39
- const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClassNames, id, large, small, color, testId, customId, number, ...tooltipProps }) => {
40
- if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {
41
- const errorMessage = color === undefined || color === ''
42
- ? 'Icon with type="color" must have prop color specified.'
43
- : 'Icon with prop color must have type="color".';
44
- return React.createElement("div", { className: "tw-text-sq-danger-color" }, errorMessage);
45
- }
46
- const fontAwesomePrefix = iconPrefix ? iconPrefix : 'fa-sharp fa-regular';
47
- const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
48
- const style = type === 'color' && color ? { color } : {};
49
- const appliedClassNames = `${iconPrefixString} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''}
50
- ${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none tw-outline-none`;
51
- const tooltipData = getQTipData(tooltipProps);
52
- return (React.createElement("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
53
- };
54
- export default Icon;
1
+ import React from 'react';
2
+ import '../styles.css';
3
+ import { getQTipData } from '../Tooltip/qTip.utilities';
4
+ const colorClassesThemeLight = {
5
+ 'theme': 'tw-text-sq-color-dark',
6
+ 'white': 'tw-text-white',
7
+ 'dark-gray': 'tw-text-sq-fairly-dark-gray',
8
+ 'warning': 'tw-text-sq-warning-color',
9
+ 'darkish-gray': 'tw-text-sq-darkish-gray',
10
+ 'gray': 'tw-text-sq-disabled-gray',
11
+ 'color': '',
12
+ 'info': 'tw-text-sq-link',
13
+ 'text': 'tw-text-sq-text-color',
14
+ 'inherit': '',
15
+ 'danger': 'tw-text-sq-danger-color',
16
+ 'theme-light': 'tw-text-sq-color-light',
17
+ 'success': 'tw-text-sq-success-color',
18
+ };
19
+ const colorClassesThemeDark = {
20
+ 'theme': 'dark:tw-text-sq-color-dark-dark',
21
+ 'white': '',
22
+ 'dark-gray': 'tw-text-sq-fairly-dark-gray',
23
+ 'warning': '',
24
+ 'darkish-gray': 'tw-text-sq-darkish-gray',
25
+ 'gray': 'dark:tw-text-sq-dark-disabled-gray',
26
+ 'color': '',
27
+ 'info': 'dark:tw-text-sq-link-dark',
28
+ 'text': 'dark:tw-text-sq-dark-text',
29
+ 'inherit': '',
30
+ 'danger': 'tw-text-sq-danger-color',
31
+ 'theme-light': 'tw-text-sq-color-light',
32
+ 'success': 'tw-text-sq-success-color',
33
+ };
34
+ /**
35
+ * Icon:
36
+ * - access to Seeq custom icons by providing the desired icon
37
+ * - leverage "type" to style your icon
38
+ */
39
+ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClassNames, id, large, small, color, testId, customId, number, ...tooltipProps }) => {
40
+ if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {
41
+ const errorMessage = color === undefined || color === ''
42
+ ? 'Icon with type="color" must have prop color specified.'
43
+ : 'Icon with prop color must have type="color".';
44
+ return React.createElement("div", { className: "tw-text-sq-danger-color" }, errorMessage);
45
+ }
46
+ const fontAwesomePrefix = iconPrefix ? iconPrefix : 'fa-sharp fa-regular';
47
+ const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
48
+ const style = type === 'color' && color ? { color } : {};
49
+ const appliedClassNames = `${iconPrefixString} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''}
50
+ ${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none tw-outline-none`;
51
+ const tooltipData = getQTipData(tooltipProps);
52
+ return (React.createElement("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
53
+ };
54
+ export default Icon;
55
55
  //# sourceMappingURL=Icon.js.map
@@ -1,47 +1,47 @@
1
- import React from 'react';
2
- import Icon from './Icon';
3
- import { iconTypes } from './Icon.types';
4
- export default {
5
- title: 'Icons',
6
- };
7
- export const AllIcons = () => {
8
- const renderAllVariations = () => {
9
- return (React.createElement(React.Fragment, null,
10
- React.createElement("br", null),
11
- React.createElement("br", null),
12
- iconTypes.map((iconType) => {
13
- return (React.createElement("div", { key: `${iconType}` },
14
- React.createElement("b", null,
15
- "type=",
16
- iconType),
17
- React.createElement("br", null),
18
- React.createElement("div", null,
19
- React.createElement(Icon, { icon: "fc-genai-chat", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }),
20
- React.createElement(Icon, { icon: "fc-formula-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }),
21
- React.createElement(Icon, { icon: "fc-datalab-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }),
22
- React.createElement(Icon, { icon: "fc-workbook-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }),
23
- React.createElement(Icon, { icon: "fc-vantage", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })),
24
- React.createElement("div", null,
25
- React.createElement(Icon, { icon: "fc-signal-forecast", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined })),
26
- React.createElement("div", { className: "tw-dark tw-bg-sq-dark-background" },
27
- React.createElement(Icon, { icon: "fc-announcements", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }),
28
- React.createElement(Icon, { icon: "fc-announcements", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }),
29
- React.createElement(Icon, { icon: "fc-announcements", large: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })),
30
- React.createElement("br", null)));
31
- })));
32
- };
33
- return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
34
- React.createElement("div", { className: "color_topic" },
35
- React.createElement("b", null, "Topic Colors"),
36
- renderAllVariations()),
37
- React.createElement("div", { className: "color_analysis" },
38
- React.createElement("b", null, "Analysis Colors"),
39
- renderAllVariations()),
40
- React.createElement("div", { className: "color_datalab" },
41
- React.createElement("b", null, "Datalab Colors"),
42
- renderAllVariations()),
43
- React.createElement("div", { className: "color_vantage" },
44
- React.createElement("b", null, "Vantage Colors"),
45
- renderAllVariations())));
46
- };
1
+ import React from 'react';
2
+ import Icon from './Icon';
3
+ import { iconTypes } from './Icon.types';
4
+ export default {
5
+ title: 'Icons',
6
+ };
7
+ export const AllIcons = () => {
8
+ const renderAllVariations = () => {
9
+ return (React.createElement(React.Fragment, null,
10
+ React.createElement("br", null),
11
+ React.createElement("br", null),
12
+ iconTypes.map((iconType) => {
13
+ return (React.createElement("div", { key: `${iconType}` },
14
+ React.createElement("b", null,
15
+ "type=",
16
+ iconType),
17
+ React.createElement("br", null),
18
+ React.createElement("div", null,
19
+ React.createElement(Icon, { icon: "fc-genai-chat", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }),
20
+ React.createElement(Icon, { icon: "fc-formula-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }),
21
+ React.createElement(Icon, { icon: "fc-datalab-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }),
22
+ React.createElement(Icon, { icon: "fc-workbook-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }),
23
+ React.createElement(Icon, { icon: "fc-vantage", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })),
24
+ React.createElement("div", null,
25
+ React.createElement(Icon, { icon: "fc-signal-forecast", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined })),
26
+ React.createElement("div", { className: "tw-dark tw-bg-sq-dark-background" },
27
+ React.createElement(Icon, { icon: "fc-announcements", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }),
28
+ React.createElement(Icon, { icon: "fc-announcements", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }),
29
+ React.createElement(Icon, { icon: "fc-announcements", large: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })),
30
+ React.createElement("br", null)));
31
+ })));
32
+ };
33
+ return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
34
+ React.createElement("div", { className: "color_topic" },
35
+ React.createElement("b", null, "Topic Colors"),
36
+ renderAllVariations()),
37
+ React.createElement("div", { className: "color_analysis" },
38
+ React.createElement("b", null, "Analysis Colors"),
39
+ renderAllVariations()),
40
+ React.createElement("div", { className: "color_datalab" },
41
+ React.createElement("b", null, "Datalab Colors"),
42
+ renderAllVariations()),
43
+ React.createElement("div", { className: "color_vantage" },
44
+ React.createElement("b", null, "Vantage Colors"),
45
+ renderAllVariations())));
46
+ };
47
47
  //# sourceMappingURL=Icon.stories.js.map
@@ -1,55 +1,55 @@
1
- import React from 'react';
2
- import '@testing-library/jest-dom';
3
- import { render, screen } from '@testing-library/react';
4
- import Icon from './Icon';
5
- describe('Icon', () => {
6
- class Context {
7
- testId = 'iconTestId';
8
- icon = 'testIcon';
9
- props = {
10
- icon: this.icon,
11
- onClick: jest.fn(),
12
- testId: this.testId,
13
- };
14
- }
15
- let tc;
16
- beforeEach(() => {
17
- tc = new Context();
18
- });
19
- const renderIcon = (props) => render(React.createElement(Icon, { ...props }));
20
- it('renders icon', () => {
21
- renderIcon(tc.props);
22
- expect(screen.getByTestId(tc.testId)).toHaveClass(tc.icon);
23
- });
24
- it('renders large icon', () => {
25
- renderIcon({ ...tc.props, large: true });
26
- expect(screen.getByTestId(tc.testId)).toHaveClass('fa-lg');
27
- });
28
- it('renders small icon', () => {
29
- renderIcon({ ...tc.props, small: true });
30
- expect(screen.getByTestId(tc.testId)).toHaveClass('fa-sm');
31
- });
32
- describe('icon types', () => {
33
- it('renders the theme type by default', () => {
34
- renderIcon(tc.props);
35
- expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-sq-color-dark');
36
- });
37
- it('renders the white icon', () => {
38
- renderIcon({ ...tc.props, type: 'white' });
39
- expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-white');
40
- });
41
- it('renders the text-type icon', () => {
42
- renderIcon({ ...tc.props, type: 'text' });
43
- expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-sq-text-color');
44
- });
45
- it('renders the color-type icon', () => {
46
- renderIcon({ ...tc.props, type: 'color', color: '#AABBFF' });
47
- expect(screen.getByTestId(tc.testId)).toHaveStyle('color: #AABBFF');
48
- });
49
- it('renders a warning if type=color and no color is provided', () => {
50
- renderIcon({ ...tc.props, type: 'color' });
51
- expect(screen.getByText('Icon with type="color" must have prop color specified.')).toBeInTheDocument();
52
- });
53
- });
54
- });
1
+ import React from 'react';
2
+ import '@testing-library/jest-dom';
3
+ import { render, screen } from '@testing-library/react';
4
+ import Icon from './Icon';
5
+ describe('Icon', () => {
6
+ class Context {
7
+ testId = 'iconTestId';
8
+ icon = 'testIcon';
9
+ props = {
10
+ icon: this.icon,
11
+ onClick: jest.fn(),
12
+ testId: this.testId,
13
+ };
14
+ }
15
+ let tc;
16
+ beforeEach(() => {
17
+ tc = new Context();
18
+ });
19
+ const renderIcon = (props) => render(React.createElement(Icon, { ...props }));
20
+ it('renders icon', () => {
21
+ renderIcon(tc.props);
22
+ expect(screen.getByTestId(tc.testId)).toHaveClass(tc.icon);
23
+ });
24
+ it('renders large icon', () => {
25
+ renderIcon({ ...tc.props, large: true });
26
+ expect(screen.getByTestId(tc.testId)).toHaveClass('fa-lg');
27
+ });
28
+ it('renders small icon', () => {
29
+ renderIcon({ ...tc.props, small: true });
30
+ expect(screen.getByTestId(tc.testId)).toHaveClass('fa-sm');
31
+ });
32
+ describe('icon types', () => {
33
+ it('renders the theme type by default', () => {
34
+ renderIcon(tc.props);
35
+ expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-sq-color-dark');
36
+ });
37
+ it('renders the white icon', () => {
38
+ renderIcon({ ...tc.props, type: 'white' });
39
+ expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-white');
40
+ });
41
+ it('renders the text-type icon', () => {
42
+ renderIcon({ ...tc.props, type: 'text' });
43
+ expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-sq-text-color');
44
+ });
45
+ it('renders the color-type icon', () => {
46
+ renderIcon({ ...tc.props, type: 'color', color: '#AABBFF' });
47
+ expect(screen.getByTestId(tc.testId)).toHaveStyle('color: #AABBFF');
48
+ });
49
+ it('renders a warning if type=color and no color is provided', () => {
50
+ renderIcon({ ...tc.props, type: 'color' });
51
+ expect(screen.getByText('Icon with type="color" must have prop color specified.')).toBeInTheDocument();
52
+ });
53
+ });
54
+ });
55
55
  //# sourceMappingURL=Icon.test.js.map
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
2
3
  export declare const iconTypes: readonly ["theme", "white", "dark-gray", "darkish-gray", "gray", "color", "info", "text", "warning", "inherit", "danger", "theme-light", "success"];
3
4
  export type IconType = (typeof iconTypes)[number];
@@ -1,16 +1,16 @@
1
- export const iconTypes = [
2
- 'theme',
3
- 'white',
4
- 'dark-gray',
5
- 'darkish-gray',
6
- 'gray',
7
- 'color',
8
- 'info',
9
- 'text',
10
- 'warning',
11
- 'inherit',
12
- 'danger',
13
- 'theme-light',
14
- 'success',
15
- ];
1
+ export const iconTypes = [
2
+ 'theme',
3
+ 'white',
4
+ 'dark-gray',
5
+ 'darkish-gray',
6
+ 'gray',
7
+ 'color',
8
+ 'info',
9
+ 'text',
10
+ 'warning',
11
+ 'inherit',
12
+ 'danger',
13
+ 'theme-light',
14
+ 'success',
15
+ ];
16
16
  //# sourceMappingURL=Icon.types.js.map
@@ -1,2 +1,2 @@
1
- export { default } from './Icon';
1
+ export { default } from './Icon';
2
2
  //# sourceMappingURL=index.js.map
@@ -1,32 +1,32 @@
1
- import React from 'react';
2
- import '../styles.css';
3
- import { getQTipData } from '../Tooltip/qTip.utilities';
4
- import TextField from '../TextField';
5
- import Button from '../Button';
6
- const baseClasses = 'tw-flex tw-outline-none tw-rounded-sm tw-w-full tw-relative tw-flex-wrap';
7
- const errorClasses = 'tw-border-sq-danger-color';
8
- const borderColorClasses = [
9
- 'tw-border-sq-disabled-gray',
10
- 'dark:tw-border-sq-dark-disabled-gray',
11
- 'dark:focus:tw-border-sq-color-dark-dark',
12
- 'dark:active:tw-border-sq-color-dark-dark',
13
- 'focus:tw-border-sq-color-dark',
14
- 'active:tw-border-sq-color-dark',
15
- ].join(' ');
16
- const borderRadius = 'tw-rounded-sm tw-rounded-r-none';
17
- const fieldClasses = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3' + 'tw-p-1 tw-border-solid tw-border';
18
- const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
19
- const lightTheme = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
20
- /**
21
- * InputGroup.
22
- */
23
- export const InputGroup = React.forwardRef((props, ref) => {
24
- const { readonly = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, name, value, placeholder, append = [], extraClassNames = '', id, testId, showError, required, autoComplete, autoFocus, disabled, type, step, min, max, field, maxLength, minLength, ...tooltipProps } = props;
25
- const tooltipData = getQTipData(tooltipProps);
26
- const appliedClasses = `${baseClasses} ${extraClassNames}`;
27
- const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${borderRadius} ${showError ? errorClasses : borderColorClasses} `;
28
- return (React.createElement("div", { id: `input-group-${id}`, className: appliedClasses },
29
- field ? (React.createElement("div", { "data-testid": testId, className: `tw-flex tw-flex-1 tw-cursor-pointer active:tw-z-50 ${fieldAppliedClasses}` }, field)) : (React.createElement(TextField, { testId: testId, readonly: readonly, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, name: name, ref: ref, showError: showError, value: value, required: required, placeholder: placeholder, autoComplete: autoComplete, autoFocus: autoFocus, id: id, type: type, disabled: disabled, step: step, min: min, max: max, maxLength: maxLength, minLength: minLength, extraClassNames: `tw-flex tw-flex-1 tw-w-full tw-rounded-r-none focus:tw-z-30 ${extraClassNames}`, ...tooltipData })),
30
- append.filter(Boolean).map((item, index) => item?.variant === 'button' ? (React.createElement(Button, { key: index, extraClassNames: "tw-ml-[-1px] focus:tw-z-40 focus:tw-border tw-rounded-l-none tw-rounded-r-none last:tw-rounded-r-sm", ...item.buttonProps })) : (React.createElement("div", { key: index, className: `${borderColorClasses} tw-flex tw-items-center tw-justify-center tw-rounded-none tw-ml-[-1px] active:tw-z-30 active:tw-border tw-border last:tw-rounded-r-sm` }, item?.element)))));
31
- });
1
+ import React from 'react';
2
+ import '../styles.css';
3
+ import { getQTipData } from '../Tooltip/qTip.utilities';
4
+ import TextField from '../TextField';
5
+ import Button from '../Button';
6
+ const baseClasses = 'tw-flex tw-outline-none tw-rounded-sm tw-w-full tw-relative tw-flex-wrap';
7
+ const errorClasses = 'tw-border-sq-danger-color';
8
+ const borderColorClasses = [
9
+ 'tw-border-sq-disabled-gray',
10
+ 'dark:tw-border-sq-dark-disabled-gray',
11
+ 'dark:focus:tw-border-sq-color-dark-dark',
12
+ 'dark:active:tw-border-sq-color-dark-dark',
13
+ 'focus:tw-border-sq-color-dark',
14
+ 'active:tw-border-sq-color-dark',
15
+ ].join(' ');
16
+ const borderRadius = 'tw-rounded-sm tw-rounded-r-none';
17
+ const fieldClasses = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3' + 'tw-p-1 tw-border-solid tw-border';
18
+ const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
19
+ const lightTheme = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
20
+ /**
21
+ * InputGroup.
22
+ */
23
+ export const InputGroup = React.forwardRef((props, ref) => {
24
+ const { readonly = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, name, value, placeholder, append = [], extraClassNames = '', id, testId, showError, required, autoComplete, autoFocus, disabled, type, step, min, max, field, maxLength, minLength, ...tooltipProps } = props;
25
+ const tooltipData = getQTipData(tooltipProps);
26
+ const appliedClasses = `${baseClasses} ${extraClassNames}`;
27
+ const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${borderRadius} ${showError ? errorClasses : borderColorClasses} `;
28
+ return (React.createElement("div", { id: `input-group-${id}`, className: appliedClasses },
29
+ field ? (React.createElement("div", { "data-testid": testId, className: `tw-flex tw-flex-1 tw-cursor-pointer active:tw-z-50 ${fieldAppliedClasses}` }, field)) : (React.createElement(TextField, { testId: testId, readonly: readonly, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, name: name, ref: ref, showError: showError, value: value, required: required, placeholder: placeholder, autoComplete: autoComplete, autoFocus: autoFocus, id: id, type: type, disabled: disabled, step: step, min: min, max: max, maxLength: maxLength, minLength: minLength, extraClassNames: `tw-flex tw-flex-1 tw-w-full tw-rounded-r-none focus:tw-z-30 ${extraClassNames}`, ...tooltipData })),
30
+ append.filter(Boolean).map((item, index) => item?.variant === 'button' ? (React.createElement(Button, { key: index, extraClassNames: "tw-ml-[-1px] focus:tw-z-40 focus:tw-border tw-rounded-l-none tw-rounded-r-none last:tw-rounded-r-sm", ...item.buttonProps })) : (React.createElement("div", { key: index, className: `${borderColorClasses} tw-flex tw-items-center tw-justify-center tw-rounded-none tw-ml-[-1px] active:tw-z-30 active:tw-border tw-border last:tw-rounded-r-sm` }, item?.element)))));
31
+ });
32
32
  //# sourceMappingURL=InputGroup.js.map