@seeqdev/qomponents 0.0.135 → 0.0.136

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 (243) hide show
  1. package/dist/Accordion/Accordion.js +9 -0
  2. package/dist/Accordion/Accordion.js.map +1 -0
  3. package/dist/Accordion/Accordion.stories.js +115 -0
  4. package/dist/Accordion/Accordion.stories.js.map +1 -0
  5. package/dist/Accordion/Accordion.test.js +55 -0
  6. package/dist/Accordion/Accordion.test.js.map +1 -0
  7. package/dist/Accordion/Accordion.types.js +2 -0
  8. package/dist/Accordion/Accordion.types.js.map +1 -0
  9. package/dist/Accordion/index.js +2 -0
  10. package/dist/Accordion/index.js.map +1 -0
  11. package/dist/Alert/Alert.js +34 -0
  12. package/dist/Alert/Alert.js.map +1 -0
  13. package/dist/Alert/Alert.stories.js +52 -0
  14. package/dist/Alert/Alert.stories.js.map +1 -0
  15. package/dist/Alert/Alert.test.js +51 -0
  16. package/dist/Alert/Alert.test.js.map +1 -0
  17. package/dist/Alert/Alert.types.js +2 -0
  18. package/dist/Alert/Alert.types.js.map +1 -0
  19. package/dist/Alert/index.js +2 -0
  20. package/dist/Alert/index.js.map +1 -0
  21. package/dist/Button/Button.js +92 -0
  22. package/dist/Button/Button.js.map +1 -0
  23. package/dist/Button/Button.stories.js +100 -0
  24. package/dist/Button/Button.stories.js.map +1 -0
  25. package/dist/Button/Button.test.js +49 -0
  26. package/dist/Button/Button.test.js.map +1 -0
  27. package/dist/Button/Button.types.js +5 -0
  28. package/dist/Button/Button.types.js.map +1 -0
  29. package/dist/Button/index.js +2 -0
  30. package/dist/Button/index.js.map +1 -0
  31. package/dist/ButtonGroup/ButtonGroup.js +33 -0
  32. package/dist/ButtonGroup/ButtonGroup.js.map +1 -0
  33. package/dist/ButtonGroup/ButtonGroup.stories.js +385 -0
  34. package/dist/ButtonGroup/ButtonGroup.stories.js.map +1 -0
  35. package/dist/ButtonGroup/ButtonGroup.test.js +67 -0
  36. package/dist/ButtonGroup/ButtonGroup.test.js.map +1 -0
  37. package/dist/ButtonGroup/ButtonGroup.types.js +2 -0
  38. package/dist/ButtonGroup/ButtonGroup.types.js.map +1 -0
  39. package/dist/ButtonGroup/index.js +2 -0
  40. package/dist/ButtonGroup/index.js.map +1 -0
  41. package/dist/ButtonWithDropdown/ButtonWithDropdown.js +60 -0
  42. package/dist/ButtonWithDropdown/ButtonWithDropdown.js.map +1 -0
  43. package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.js +143 -0
  44. package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.js.map +1 -0
  45. package/dist/ButtonWithDropdown/ButtonWithDropdown.test.js +93 -0
  46. package/dist/ButtonWithDropdown/ButtonWithDropdown.test.js.map +1 -0
  47. package/dist/ButtonWithDropdown/ButtonWithDropdown.types.js +2 -0
  48. package/dist/ButtonWithDropdown/ButtonWithDropdown.types.js.map +1 -0
  49. package/dist/ButtonWithDropdown/index.js +2 -0
  50. package/dist/ButtonWithDropdown/index.js.map +1 -0
  51. package/dist/ButtonWithPopover/ButtonWithPopover.js +62 -0
  52. package/dist/ButtonWithPopover/ButtonWithPopover.js.map +1 -0
  53. package/dist/ButtonWithPopover/ButtonWithPopover.stories.js +75 -0
  54. package/dist/ButtonWithPopover/ButtonWithPopover.stories.js.map +1 -0
  55. package/dist/ButtonWithPopover/ButtonWithPopover.test.js +82 -0
  56. package/dist/ButtonWithPopover/ButtonWithPopover.test.js.map +1 -0
  57. package/dist/ButtonWithPopover/ButtonWithPopover.types.js +2 -0
  58. package/dist/ButtonWithPopover/ButtonWithPopover.types.js.map +1 -0
  59. package/dist/ButtonWithPopover/index.js +2 -0
  60. package/dist/ButtonWithPopover/index.js.map +1 -0
  61. package/dist/Carousel/Carousel.js +70 -0
  62. package/dist/Carousel/Carousel.js.map +1 -0
  63. package/dist/Carousel/Carousel.stories.js +115 -0
  64. package/dist/Carousel/Carousel.stories.js.map +1 -0
  65. package/dist/Carousel/Carousel.test.js +48 -0
  66. package/dist/Carousel/Carousel.test.js.map +1 -0
  67. package/dist/Carousel/Carousel.types.js +2 -0
  68. package/dist/Carousel/Carousel.types.js.map +1 -0
  69. package/dist/Carousel/index.js +2 -0
  70. package/dist/Carousel/index.js.map +1 -0
  71. package/dist/Checkbox/Checkbox.js +26 -0
  72. package/dist/Checkbox/Checkbox.js.map +1 -0
  73. package/dist/Checkbox/Checkbox.stories.js +34 -0
  74. package/dist/Checkbox/Checkbox.stories.js.map +1 -0
  75. package/dist/Checkbox/Checkbox.test.js +94 -0
  76. package/dist/Checkbox/Checkbox.test.js.map +1 -0
  77. package/dist/Checkbox/Checkbox.types.js +2 -0
  78. package/dist/Checkbox/Checkbox.types.js.map +1 -0
  79. package/dist/Checkbox/index.js +2 -0
  80. package/dist/Checkbox/index.js.map +1 -0
  81. package/dist/Collapse/Collapse.js +15 -0
  82. package/dist/Collapse/Collapse.js.map +1 -0
  83. package/dist/Collapse/Collapse.stories.js +37 -0
  84. package/dist/Collapse/Collapse.stories.js.map +1 -0
  85. package/dist/Collapse/Collapse.test.js +19 -0
  86. package/dist/Collapse/Collapse.test.js.map +1 -0
  87. package/dist/Collapse/Collapse.types.js +2 -0
  88. package/dist/Collapse/Collapse.types.js.map +1 -0
  89. package/dist/Collapse/index.js +2 -0
  90. package/dist/Collapse/index.js.map +1 -0
  91. package/dist/Icon/Icon.js +55 -0
  92. package/dist/Icon/Icon.js.map +1 -0
  93. package/dist/Icon/Icon.stories.js +47 -0
  94. package/dist/Icon/Icon.stories.js.map +1 -0
  95. package/dist/Icon/Icon.test.js +55 -0
  96. package/dist/Icon/Icon.test.js.map +1 -0
  97. package/dist/Icon/Icon.types.js +16 -0
  98. package/dist/Icon/Icon.types.js.map +1 -0
  99. package/dist/Icon/index.js +2 -0
  100. package/dist/Icon/index.js.map +1 -0
  101. package/dist/InputGroup/InputGroup.js +32 -0
  102. package/dist/InputGroup/InputGroup.js.map +1 -0
  103. package/dist/InputGroup/InputGroup.stories.js +168 -0
  104. package/dist/InputGroup/InputGroup.stories.js.map +1 -0
  105. package/dist/InputGroup/InputGroup.test.js +43 -0
  106. package/dist/InputGroup/InputGroup.test.js.map +1 -0
  107. package/dist/InputGroup/InputGroup.types.js +2 -0
  108. package/dist/InputGroup/InputGroup.types.js.map +1 -0
  109. package/dist/InputGroup/index.js +2 -0
  110. package/dist/InputGroup/index.js.map +1 -0
  111. package/dist/Modal/Modal.js +100 -0
  112. package/dist/Modal/Modal.js.map +1 -0
  113. package/dist/Modal/Modal.stories.js +127 -0
  114. package/dist/Modal/Modal.stories.js.map +1 -0
  115. package/dist/Modal/Modal.test.js +108 -0
  116. package/dist/Modal/Modal.test.js.map +1 -0
  117. package/dist/Modal/Modal.types.js +2 -0
  118. package/dist/Modal/Modal.types.js.map +1 -0
  119. package/dist/Modal/index.js +2 -0
  120. package/dist/Modal/index.js.map +1 -0
  121. package/dist/ProgressBar/ProgressBar.js +50 -0
  122. package/dist/ProgressBar/ProgressBar.js.map +1 -0
  123. package/dist/ProgressBar/ProgressBar.stories.js +81 -0
  124. package/dist/ProgressBar/ProgressBar.stories.js.map +1 -0
  125. package/dist/ProgressBar/ProgressBar.test.js +44 -0
  126. package/dist/ProgressBar/ProgressBar.test.js.map +1 -0
  127. package/dist/ProgressBar/ProgressBar.types.js +2 -0
  128. package/dist/ProgressBar/ProgressBar.types.js.map +1 -0
  129. package/dist/ProgressBar/index.js +2 -0
  130. package/dist/ProgressBar/index.js.map +1 -0
  131. package/dist/SeeqActionDropdown/SeeqActionDropdown.js +48 -0
  132. package/dist/SeeqActionDropdown/SeeqActionDropdown.js.map +1 -0
  133. package/dist/SeeqActionDropdown/SeeqActionDropdown.stories.js +80 -0
  134. package/dist/SeeqActionDropdown/SeeqActionDropdown.stories.js.map +1 -0
  135. package/dist/SeeqActionDropdown/SeeqActionDropdown.test.js +73 -0
  136. package/dist/SeeqActionDropdown/SeeqActionDropdown.test.js.map +1 -0
  137. package/dist/SeeqActionDropdown/SeeqActionDropdown.types.js +2 -0
  138. package/dist/SeeqActionDropdown/SeeqActionDropdown.types.js.map +1 -0
  139. package/dist/SeeqActionDropdown/index.js +2 -0
  140. package/dist/SeeqActionDropdown/index.js.map +1 -0
  141. package/dist/SeeqActionDropdown/variants.js +23 -0
  142. package/dist/SeeqActionDropdown/variants.js.map +1 -0
  143. package/dist/Select/Select.js +174 -0
  144. package/dist/Select/Select.js.map +1 -0
  145. package/dist/Select/Select.stories.js +80 -0
  146. package/dist/Select/Select.stories.js.map +1 -0
  147. package/dist/Select/Select.test.js +182 -0
  148. package/dist/Select/Select.test.js.map +1 -0
  149. package/dist/Select/Select.types.js +2 -0
  150. package/dist/Select/Select.types.js.map +1 -0
  151. package/dist/Select/index.js +3 -0
  152. package/dist/Select/index.js.map +1 -0
  153. package/dist/Slider/Slider.js +13 -0
  154. package/dist/Slider/Slider.js.map +1 -0
  155. package/dist/Slider/Slider.stories.js +58 -0
  156. package/dist/Slider/Slider.stories.js.map +1 -0
  157. package/dist/Slider/Slider.test.js +33 -0
  158. package/dist/Slider/Slider.test.js.map +1 -0
  159. package/dist/Slider/Slider.types.js +2 -0
  160. package/dist/Slider/Slider.types.js.map +1 -0
  161. package/dist/Slider/index.js +2 -0
  162. package/dist/Slider/index.js.map +1 -0
  163. package/dist/SvgIcon/SvgIcon.d.ts +20 -0
  164. package/dist/SvgIcon/SvgIcon.stories.d.ts +6 -0
  165. package/dist/SvgIcon/SvgIcon.test.d.ts +1 -0
  166. package/dist/SvgIcon/SvgIcon.types.d.ts +25 -0
  167. package/dist/SvgIcon/index.d.ts +1 -0
  168. package/dist/Tabs/Tabs.js +22 -0
  169. package/dist/Tabs/Tabs.js.map +1 -0
  170. package/dist/Tabs/Tabs.stories.js +91 -0
  171. package/dist/Tabs/Tabs.stories.js.map +1 -0
  172. package/dist/Tabs/Tabs.test.js +91 -0
  173. package/dist/Tabs/Tabs.test.js.map +1 -0
  174. package/dist/Tabs/Tabs.types.js +2 -0
  175. package/dist/Tabs/Tabs.types.js.map +1 -0
  176. package/dist/Tabs/index.js +2 -0
  177. package/dist/Tabs/index.js.map +1 -0
  178. package/dist/TextArea/TextArea.js +25 -0
  179. package/dist/TextArea/TextArea.js.map +1 -0
  180. package/dist/TextArea/TextArea.stories.js +46 -0
  181. package/dist/TextArea/TextArea.stories.js.map +1 -0
  182. package/dist/TextArea/TextArea.test.js +68 -0
  183. package/dist/TextArea/TextArea.test.js.map +1 -0
  184. package/dist/TextArea/TextArea.types.js +2 -0
  185. package/dist/TextArea/TextArea.types.js.map +1 -0
  186. package/dist/TextArea/index.js +2 -0
  187. package/dist/TextArea/index.js.map +1 -0
  188. package/dist/TextField/TextField.js +79 -0
  189. package/dist/TextField/TextField.js.map +1 -0
  190. package/dist/TextField/TextField.stories.js +70 -0
  191. package/dist/TextField/TextField.stories.js.map +1 -0
  192. package/dist/TextField/TextField.test.js +39 -0
  193. package/dist/TextField/TextField.test.js.map +1 -0
  194. package/dist/TextField/TextField.types.js +2 -0
  195. package/dist/TextField/TextField.types.js.map +1 -0
  196. package/dist/TextField/index.js +2 -0
  197. package/dist/TextField/index.js.map +1 -0
  198. package/dist/ToolbarButton/ToolbarButton.js +75 -0
  199. package/dist/ToolbarButton/ToolbarButton.js.map +1 -0
  200. package/dist/ToolbarButton/ToolbarButton.stories.js +94 -0
  201. package/dist/ToolbarButton/ToolbarButton.stories.js.map +1 -0
  202. package/dist/ToolbarButton/ToolbarButton.test.js +93 -0
  203. package/dist/ToolbarButton/ToolbarButton.test.js.map +1 -0
  204. package/dist/ToolbarButton/ToolbarButton.types.js +2 -0
  205. package/dist/ToolbarButton/ToolbarButton.types.js.map +1 -0
  206. package/dist/ToolbarButton/index.js +2 -0
  207. package/dist/ToolbarButton/index.js.map +1 -0
  208. package/dist/Tooltip/QTip.stories.js +45 -0
  209. package/dist/Tooltip/QTip.stories.js.map +1 -0
  210. package/dist/Tooltip/QTip.types.js +2 -0
  211. package/dist/Tooltip/QTip.types.js.map +1 -0
  212. package/dist/Tooltip/QTipPerformance.stories.js +30 -0
  213. package/dist/Tooltip/QTipPerformance.stories.js.map +1 -0
  214. package/dist/Tooltip/Qtip.js +170 -0
  215. package/dist/Tooltip/Qtip.js.map +1 -0
  216. package/dist/Tooltip/Tooltip.js +36 -0
  217. package/dist/Tooltip/Tooltip.js.map +1 -0
  218. package/dist/Tooltip/Tooltip.stories.js +32 -0
  219. package/dist/Tooltip/Tooltip.stories.js.map +1 -0
  220. package/dist/Tooltip/Tooltip.types.js +3 -0
  221. package/dist/Tooltip/Tooltip.types.js.map +1 -0
  222. package/dist/Tooltip/TooltipPerformance.stories.js +30 -0
  223. package/dist/Tooltip/TooltipPerformance.stories.js.map +1 -0
  224. package/dist/Tooltip/index.js +3 -0
  225. package/dist/Tooltip/index.js.map +1 -0
  226. package/dist/Tooltip/qTip.utilities.js +11 -0
  227. package/dist/Tooltip/qTip.utilities.js.map +1 -0
  228. package/dist/index.esm.js +947 -496
  229. package/dist/index.esm.js.map +1 -1
  230. package/dist/index.js +947 -496
  231. package/dist/index.js.map +1 -1
  232. package/dist/styles.css +12 -0
  233. package/dist/types.js +2 -0
  234. package/dist/types.js.map +1 -0
  235. package/dist/utils/browserId.js +29 -0
  236. package/dist/utils/browserId.js.map +1 -0
  237. package/dist/utils/svg.js +20 -0
  238. package/dist/utils/svg.js.map +1 -0
  239. package/dist/utils/validateStyleDimension.js +14 -0
  240. package/dist/utils/validateStyleDimension.js.map +1 -0
  241. package/dist/utils/validateStyleDimension.test.js +20 -0
  242. package/dist/utils/validateStyleDimension.test.js.map +1 -0
  243. package/package.json +49 -48
@@ -0,0 +1,82 @@
1
+ import React from 'react';
2
+ import '@testing-library/jest-dom';
3
+ import { render, screen, waitFor } from '@testing-library/react';
4
+ import userEvent from '@testing-library/user-event';
5
+ import ButtonWithPopover from './ButtonWithPopover';
6
+ import Icon from '../Icon';
7
+ describe('ButtonWithPopover', () => {
8
+ const mockOnClick = jest.fn();
9
+ const testId = 'trigger-icon';
10
+ class Context {
11
+ props = {
12
+ trigger: (React.createElement(Icon, { icon: "fc-more", type: "text", testId: testId, extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" })),
13
+ onOpenChange: mockOnClick,
14
+ containerTestId: 'basic-Popover1',
15
+ tooltip: 'This is a small Popover.',
16
+ tooltipDelay: 0,
17
+ tooltipPlacement: 'top',
18
+ isHtmlTooltip: false,
19
+ hoverOpenDelay: 0,
20
+ children: React.createElement("div", null, "Popover content"),
21
+ };
22
+ }
23
+ let tc;
24
+ beforeEach(() => {
25
+ tc = new Context();
26
+ jest.clearAllMocks();
27
+ });
28
+ afterEach(() => {
29
+ global.ResizeObserver = undefined;
30
+ });
31
+ const renderButtonWithPopover = (props) => render(React.createElement("div", { "data-testid": "container", className: "tw-w-10 tw-h-10" },
32
+ React.createElement(ButtonWithPopover, { ...props })));
33
+ const openPopover = async () => {
34
+ const popover = screen.getByTestId(testId);
35
+ await userEvent.click(popover);
36
+ };
37
+ const closePopover = async () => {
38
+ const container = screen.getByTestId('container');
39
+ await userEvent.click(container);
40
+ };
41
+ test('renders trigger and opens Popover content on trigger click', async () => {
42
+ renderButtonWithPopover(tc.props);
43
+ expect(screen.getByTestId('trigger-icon')).toBeInTheDocument();
44
+ await openPopover();
45
+ expect(screen.getByText('Popover content')).toBeInTheDocument();
46
+ await closePopover();
47
+ expect(screen.queryByText('Popover content')).not.toBeInTheDocument();
48
+ });
49
+ test('renders trigger and opens Popover content on trigger hover', async () => {
50
+ tc.props.isHoverEnabled = true;
51
+ renderButtonWithPopover(tc.props);
52
+ expect(screen.getByTestId('trigger-icon')).toBeInTheDocument();
53
+ const popover = screen.getByTestId(testId);
54
+ await userEvent.hover(popover);
55
+ await waitFor(() => {
56
+ expect(screen.getByText('Popover content')).toBeInTheDocument();
57
+ });
58
+ });
59
+ test('closes popover when content is clicked and is set in props', async () => {
60
+ tc.props.isCloseOnContentClick = true;
61
+ renderButtonWithPopover(tc.props);
62
+ await openPopover();
63
+ const item1 = screen.getByText('Popover content');
64
+ await userEvent.click(item1);
65
+ expect(mockOnClick).toHaveBeenCalledTimes(2);
66
+ });
67
+ test('leaves popover open when content is clicked and is set in props', async () => {
68
+ tc.props.isCloseOnContentClick = false;
69
+ renderButtonWithPopover(tc.props);
70
+ await openPopover();
71
+ const item1 = screen.getByText('Popover content');
72
+ await userEvent.click(item1);
73
+ expect(mockOnClick).toHaveBeenCalledTimes(1);
74
+ });
75
+ test('does not open when disabled', async () => {
76
+ tc.props.disabled = true;
77
+ renderButtonWithPopover(tc.props);
78
+ await openPopover();
79
+ expect(screen.queryByText('Popover content')).not.toBeInTheDocument();
80
+ });
81
+ });
82
+ //# sourceMappingURL=ButtonWithPopover.test.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ButtonWithPopover.test.js","sourceRoot":"","sources":["../../src/ButtonWithPopover/ButtonWithPopover.test.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=ButtonWithPopover.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ButtonWithPopover.types.js","sourceRoot":"","sources":["../../src/ButtonWithPopover/ButtonWithPopover.types.ts"],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ export { default } from './ButtonWithPopover';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ButtonWithPopover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC"}
@@ -0,0 +1,70 @@
1
+ import React, { useEffect, useState } from 'react';
2
+ import { motion } from 'framer-motion';
3
+ import Button from '../Button/Button';
4
+ /**
5
+ * Carousel:
6
+ * - Easily create a carousel with custom slides.
7
+ * - Supports automatic sliding, navigation arrows, and slide indicators.
8
+ */
9
+ const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '', onSlide = () => { }, autoSlide, showIndicators = true, continuous = true, interval = 4000, prevIcon = 'fc-arrow-dropdown tw-rotate-90', nextIcon = 'fc-arrow-dropdown -tw-rotate-90', showArrows = true, iconExtraClassNames = '', carouselItems = [], }) => {
10
+ const [currentIndex, setCurrentIndex] = useState(activeIndex);
11
+ const changeSlide = (nextIndex) => {
12
+ const newIndex = (nextIndex + carouselItems.length) % carouselItems.length;
13
+ setCurrentIndex(newIndex);
14
+ onSlide(newIndex, newIndex > currentIndex ? 'right' : 'left');
15
+ };
16
+ useEffect(() => {
17
+ if (autoSlide) {
18
+ const slideInterval = setInterval(() => {
19
+ if (continuous || currentIndex < carouselItems.length - 1) {
20
+ changeSlide(currentIndex + 1);
21
+ }
22
+ else {
23
+ clearInterval(slideInterval);
24
+ }
25
+ }, interval);
26
+ return () => clearInterval(slideInterval);
27
+ }
28
+ }, [autoSlide, currentIndex, continuous, interval, carouselItems.length]);
29
+ useEffect(() => {
30
+ if (activeIndex !== currentIndex) {
31
+ setCurrentIndex(activeIndex);
32
+ }
33
+ }, [activeIndex]);
34
+ const onBackClick = () => {
35
+ if (currentIndex === 0 && !continuous) {
36
+ return;
37
+ }
38
+ changeSlide(currentIndex - 1);
39
+ };
40
+ const onForwardClick = () => {
41
+ if (currentIndex === carouselItems.length - 1 && !continuous) {
42
+ return;
43
+ }
44
+ changeSlide(currentIndex + 1);
45
+ };
46
+ const slideVariants = {
47
+ initial: (direction) => ({
48
+ x: direction > 0 ? '100%' : '-100%',
49
+ opacity: 0,
50
+ }),
51
+ animate: {
52
+ x: 0,
53
+ opacity: 1,
54
+ transition: { type: 'spring', damping: 20, stiffness: 100 },
55
+ },
56
+ exit: (direction) => ({
57
+ x: direction > 0 ? '-100%' : '100%',
58
+ opacity: 0,
59
+ transition: { type: 'spring', damping: 20, stiffness: 100 },
60
+ }),
61
+ };
62
+ return (React.createElement("div", { "data-testid": testId, className: `tw-flex tw-flex-col tw-items-center tw-justify-center tw-w-full tw-overflow-hidden ${extraClassNames}` },
63
+ React.createElement("div", { className: "tw-flex tw-items-center tw-w-full tw-h-max tw-gap-1" },
64
+ showArrows && (React.createElement(Button, { icon: prevIcon, size: "lg", variant: "no-border", testId: "carousel-prev", extraClassNames: `${currentIndex === 0 && !continuous ? 'tw-invisible' : ''} ${iconExtraClassNames} tw-animate-fadeIn`, onClick: onBackClick })),
65
+ React.createElement(motion.div, { key: currentIndex, custom: 1, initial: "initial", animate: "animate", exit: "exit", variants: slideVariants, className: "tw-w-full" }, carouselItems[currentIndex]),
66
+ showArrows && (React.createElement(Button, { icon: nextIcon, testId: "carousel-next", size: "lg", variant: "no-border", extraClassNames: `${currentIndex === carouselItems.length - 1 && !continuous ? 'tw-invisible' : ''} ${iconExtraClassNames} tw-animate-fadeIn`, onClick: onForwardClick }))),
67
+ showIndicators && (React.createElement("div", { className: "tw-flex tw-gap-1 tw-mt-2" }, carouselItems.map((_, i) => (React.createElement("div", { key: i, className: `tw-w-2 tw-h-2 tw-rounded-full tw-cursor-pointer ${i === currentIndex ? 'tw-bg-sq-color-dark' : 'tw-bg-sq-darkish-gray'}`, onClick: () => changeSlide(i) })))))));
68
+ };
69
+ export default Carousel;
70
+ //# sourceMappingURL=Carousel.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,115 @@
1
+ import React from 'react';
2
+ import { QTip } from '../Tooltip/Qtip';
3
+ import Carousel from './Carousel';
4
+ import Button from '../Button';
5
+ export default {
6
+ title: 'Carousel',
7
+ };
8
+ export const AllCarousels = () => {
9
+ const [value, setValue] = React.useState(0);
10
+ const renderChild = (text, extraClass) => (React.createElement("div", { className: 'tw-p-4 tw-text-sq-color-gray dark:tw-text-sq-white tw-h-[200px] ' + extraClass },
11
+ React.createElement("p", { className: "tw-mb-5 tw-text-[15px] tw-leading-normal" }, text),
12
+ React.createElement(Button, { variant: "outline", label: "Save data" })));
13
+ const renderAllVariations = () => (React.createElement(React.Fragment, null,
14
+ React.createElement("div", { className: "light" },
15
+ React.createElement("div", { className: "tw-p-4" },
16
+ React.createElement("p", null, "Controlled"),
17
+ React.createElement(Carousel, { carouselItems: [
18
+ renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
19
+ renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
20
+ renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
21
+ ], activeIndex: value, onSlide: (index) => setValue(index) })),
22
+ React.createElement("div", { className: "tw-p-4" },
23
+ React.createElement("p", null, "Uncontrolled"),
24
+ React.createElement(Carousel, { carouselItems: [
25
+ renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
26
+ renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
27
+ renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
28
+ ], autoSlide: true, continuous: true, showArrows: false })),
29
+ React.createElement("div", { className: "tw-p-4" },
30
+ React.createElement("p", null, "Custom side buttons"),
31
+ React.createElement(Carousel, { carouselItems: [
32
+ renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
33
+ renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
34
+ renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
35
+ ], activeIndex: value, onSlide: (index) => setValue(index), nextIcon: "fc-more", prevIcon: "fc-y-axis" })),
36
+ React.createElement("div", { className: "tw-p-4" },
37
+ React.createElement("p", null, "Continuous"),
38
+ React.createElement(Carousel, { carouselItems: [
39
+ renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
40
+ renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
41
+ renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
42
+ ], activeIndex: value, onSlide: (index) => setValue(index), continuous: true })),
43
+ React.createElement("div", { className: "tw-p-4" },
44
+ React.createElement("p", null, "Non continuous"),
45
+ React.createElement(Carousel, { carouselItems: [
46
+ renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
47
+ renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
48
+ renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
49
+ ], activeIndex: value, onSlide: (index) => setValue(index), showArrows: true, continuous: false })),
50
+ React.createElement("div", { className: "tw-p-4" },
51
+ React.createElement("p", null, "Without indicators"),
52
+ React.createElement(Carousel, { carouselItems: [
53
+ renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
54
+ renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
55
+ renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
56
+ ], activeIndex: value, onSlide: (index) => setValue(index), showArrows: true, continuous: true, showIndicators: false }))),
57
+ React.createElement("div", { className: "tw-dark tw-bg-sq-dark-background" },
58
+ React.createElement("div", { className: "tw-p-4" },
59
+ React.createElement("p", null, "Controlled"),
60
+ React.createElement(Carousel, { carouselItems: [
61
+ renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
62
+ renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
63
+ renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
64
+ ], activeIndex: value, onSlide: (index) => setValue(index) })),
65
+ React.createElement("div", { className: "tw-p-4" },
66
+ React.createElement("p", null, "Uncontrolled"),
67
+ React.createElement(Carousel, { carouselItems: [
68
+ renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
69
+ renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
70
+ renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
71
+ ], autoSlide: true, continuous: true, showArrows: false })),
72
+ React.createElement("div", { className: "tw-p-4" },
73
+ React.createElement("p", null, "Custom side buttons"),
74
+ React.createElement(Carousel, { carouselItems: [
75
+ renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
76
+ renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
77
+ renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
78
+ ], activeIndex: value, onSlide: (index) => setValue(index), nextIcon: "fc-more", prevIcon: "fc-y-axis" })),
79
+ React.createElement("div", { className: "tw-p-4" },
80
+ React.createElement("p", null, "Continuous"),
81
+ React.createElement(Carousel, { carouselItems: [
82
+ renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
83
+ renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
84
+ renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
85
+ ], activeIndex: value, onSlide: (index) => setValue(index), continuous: true })),
86
+ React.createElement("div", { className: "tw-p-4" },
87
+ React.createElement("p", null, "Non continuous"),
88
+ React.createElement(Carousel, { carouselItems: [
89
+ renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
90
+ renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
91
+ renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
92
+ ], activeIndex: value, onSlide: (index) => setValue(index), showArrows: true, continuous: false })),
93
+ React.createElement("div", { className: "tw-p-4" },
94
+ React.createElement("p", null, "Without indicators"),
95
+ React.createElement(Carousel, { carouselItems: [
96
+ renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
97
+ renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
98
+ renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
99
+ ], activeIndex: value, onSlide: (index) => setValue(index), showArrows: true, continuous: true, showIndicators: false })))));
100
+ return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
101
+ React.createElement(QTip, null),
102
+ React.createElement("div", { className: "color_topic" },
103
+ React.createElement("b", null, "Topic Colors"),
104
+ renderAllVariations()),
105
+ React.createElement("div", { className: "color_analysis" },
106
+ React.createElement("b", null, "Analysis Colors"),
107
+ renderAllVariations()),
108
+ React.createElement("div", { className: "color_datalab" },
109
+ React.createElement("b", null, "Datalab Colors"),
110
+ renderAllVariations()),
111
+ React.createElement("div", { className: "color_vantage" },
112
+ React.createElement("b", null, "Vantage Colors"),
113
+ renderAllVariations())));
114
+ };
115
+ //# sourceMappingURL=Carousel.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Carousel.stories.js","sourceRoot":"","sources":["../../src/Carousel/Carousel.stories.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,48 @@
1
+ import React from 'react';
2
+ import '@testing-library/jest-dom';
3
+ import { act, render, fireEvent, screen } from '@testing-library/react';
4
+ import Carousel from './Carousel';
5
+ describe('Carousel Component', () => {
6
+ const mockOnSlide = jest.fn();
7
+ const carouselItems = [React.createElement("div", { key: "1" }, "Slide 1"), React.createElement("div", { key: "2" }, "Slide 2"), React.createElement("div", { key: "3" }, "Slide 3")];
8
+ it('renders correctly', () => {
9
+ render(React.createElement(Carousel, { testId: "carousel", carouselItems: carouselItems }));
10
+ expect(screen.getByTestId('carousel')).toBeInTheDocument();
11
+ });
12
+ it('shows the correct initial slide', () => {
13
+ render(React.createElement(Carousel, { testId: "carousel", carouselItems: carouselItems, activeIndex: 1 }));
14
+ expect(screen.getByText('Slide 2')).toBeInTheDocument();
15
+ });
16
+ it('calls onSlide when next button is clicked', () => {
17
+ render(React.createElement(Carousel, { testId: "carousel", carouselItems: carouselItems, onSlide: mockOnSlide }));
18
+ const nextButton = screen.getByTestId('carousel-next');
19
+ fireEvent.click(nextButton);
20
+ expect(mockOnSlide).toHaveBeenCalledWith(1, 'right');
21
+ });
22
+ it('calls onSlide when previous button is clicked', () => {
23
+ render(React.createElement(Carousel, { testId: "carousel", carouselItems: carouselItems, onSlide: mockOnSlide, activeIndex: 1 }));
24
+ const prevButton = screen.getByTestId('carousel-prev');
25
+ fireEvent.click(prevButton);
26
+ expect(mockOnSlide).toHaveBeenCalledWith(0, 'left');
27
+ });
28
+ it('does not move past the last slide', () => {
29
+ render(React.createElement(Carousel, { testId: "carousel", carouselItems: carouselItems, activeIndex: 2, continuous: false }));
30
+ const nextButton = screen.queryByTestId('carousel-next');
31
+ expect(nextButton).toHaveClass('tw-invisible');
32
+ });
33
+ it('autoSlides correctly', async () => {
34
+ jest.useFakeTimers();
35
+ render(React.createElement(Carousel, { testId: "carousel", carouselItems: carouselItems, autoSlide: true, interval: 1000 }));
36
+ expect(screen.getByText('Slide 1')).toBeInTheDocument();
37
+ act(() => {
38
+ jest.advanceTimersByTime(1000);
39
+ });
40
+ expect(screen.getByText('Slide 2')).toBeInTheDocument();
41
+ act(() => {
42
+ jest.advanceTimersByTime(1000);
43
+ });
44
+ expect(screen.getByText('Slide 3')).toBeInTheDocument();
45
+ jest.useRealTimers();
46
+ });
47
+ });
48
+ //# sourceMappingURL=Carousel.test.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Carousel.test.js","sourceRoot":"","sources":["../../src/Carousel/Carousel.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IAC9B,MAAM,aAAa,GAAG,CAAC,6BAAK,GAAG,EAAC,GAAG,cAAc,EAAE,6BAAK,GAAG,EAAC,GAAG,cAAc,EAAE,6BAAK,GAAG,EAAC,GAAG,cAAc,CAAC,CAAC;IAE3G,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;QAC3B,MAAM,CAAC,oBAAC,QAAQ,IAAC,MAAM,EAAC,UAAU,EAAC,aAAa,EAAE,aAAa,GAAI,CAAC,CAAC;QACrE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,GAAG,EAAE;QACzC,MAAM,CAAC,oBAAC,QAAQ,IAAC,MAAM,EAAC,UAAU,EAAC,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC,GAAI,CAAC,CAAC;QACrF,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,GAAG,EAAE;QACnD,MAAM,CAAC,oBAAC,QAAQ,IAAC,MAAM,EAAC,UAAU,EAAC,aAAa,EAAE,aAAa,EAAE,OAAO,EAAE,WAAW,GAAI,CAAC,CAAC;QAC3F,MAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;QACvD,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAC5B,MAAM,CAAC,WAAW,CAAC,CAAC,oBAAoB,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+CAA+C,EAAE,GAAG,EAAE;QACvD,MAAM,CAAC,oBAAC,QAAQ,IAAC,MAAM,EAAC,UAAU,EAAC,aAAa,EAAE,aAAa,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC,GAAI,CAAC,CAAC;QAC3G,MAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;QACvD,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAC5B,MAAM,CAAC,WAAW,CAAC,CAAC,oBAAoB,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,GAAG,EAAE;QAC3C,MAAM,CAAC,oBAAC,QAAQ,IAAC,MAAM,EAAC,UAAU,EAAC,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC,EAAE,UAAU,EAAE,KAAK,GAAI,CAAC,CAAC;QACxG,MAAM,UAAU,GAAG,MAAM,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QACzD,MAAM,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,MAAM,CAAC,oBAAC,QAAQ,IAAC,MAAM,EAAC,UAAU,EAAC,aAAa,EAAE,aAAa,EAAE,SAAS,QAAC,QAAQ,EAAE,IAAI,GAAI,CAAC,CAAC;QAE/F,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACxD,GAAG,CAAC,GAAG,EAAE;YACP,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;QACjC,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAExD,GAAG,CAAC,GAAG,EAAE;YACP,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;QACjC,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAExD,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=Carousel.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Carousel.types.js","sourceRoot":"","sources":["../../src/Carousel/Carousel.types.ts"],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ export { default } from './Carousel';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Carousel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}
@@ -0,0 +1,26 @@
1
+ import React from 'react';
2
+ import '../styles.css';
3
+ import { getQTipData } from '../Tooltip/qTip.utilities';
4
+ const alignment = 'tw-flex';
5
+ const labelClasses = 'tw-ml-1.5 tw-text-sm tw--mt-0.5';
6
+ const baseClasses = 'tw-border-1 tw-h-3.5 tw-w-3.5 focus:tw-ring-0 focus:tw-ring-offset-0 tw-outline-none focus:tw-outline-none' +
7
+ ' dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-text dark:hover:tw-bg-sq-dark-background' +
8
+ ' checked:tw-text-white checked:tw-border-sq-text-color checked:hover:tw-border-sq-color-dark' +
9
+ ' checked:active:tw-border-sq-color-dark checked:focus:tw-border-sq-color-dark disabled:tw-border-sq-disabled-gray' +
10
+ ' dark:disabled:tw-border-sq-fairly-dark-gray dark:checked:focus:tw-bg-sq-dark-background';
11
+ const checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses}`;
12
+ const radioClasses = `tw-form-radio ${baseClasses}`;
13
+ /**
14
+ * Checkbox and Radio Box Component.
15
+ */
16
+ export const Checkbox = (props) => {
17
+ const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, defaultChecked, id, name, extraClassNames, extraLabelClassNames, testId, ...tooltipProps } = props;
18
+ const assignedId = id ?? 'checkbox_' + Math.random();
19
+ const tooltipData = getQTipData(tooltipProps);
20
+ return (React.createElement("span", { className: `${alignment} ${extraClassNames}` },
21
+ React.createElement("input", { value: value, type: type, "data-testid": testId, name: name, id: assignedId, readOnly: !onChange, checked: checked, defaultChecked: defaultChecked, className: `${type === 'checkbox' ? checkboxClasses : radioClasses} ${disabled ? 'tw-cursor-not-allowed' : 'tw-cursor-pointer'}`, disabled: disabled, onClick: onClick, onChange: onChange, onKeyDown: onKeyDown, ...tooltipData }),
22
+ React.createElement("label", { htmlFor: assignedId, className: `${labelClasses} ${extraLabelClassNames} ${disabled
23
+ ? 'tw-cursor-not-allowed dark:tw-text-sq-fairly-dark-gray tw-text-sq-fairly-dark-gray'
24
+ : 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'}` }, label)));
25
+ };
26
+ //# sourceMappingURL=Checkbox.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,SAAS,GAAG,SAAS,CAAC;AAC5B,MAAM,YAAY,GAAG,iCAAiC,CAAC;AAEvD,MAAM,WAAW,GACf,4GAA4G;IAC5G,iGAAiG;IACjG,8FAA8F;IAC9F,mHAAmH;IACnH,0FAA0F,CAAC;AAE7F,MAAM,eAAe,GAAG,+BAA+B,WAAW,EAAE,CAAC;AAErE,MAAM,YAAY,GAAG,iBAAiB,WAAW,EAAE,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA2C,CAAC,KAAK,EAAE,EAAE;IACxE,MAAM,EACJ,IAAI,GAAG,UAAU,EACjB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,EACP,cAAc,EACd,EAAE,EACF,IAAI,EACJ,eAAe,EACf,oBAAoB,EACpB,MAAM,EACN,GAAG,YAAY,EAChB,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAG,EAAE,IAAI,WAAW,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;IACrD,MAAM,WAAW,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IAE9C,OAAO,CACL,8BAAM,SAAS,EAAE,GAAG,SAAS,IAAI,eAAe,EAAE;QAChD,+BACE,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,iBACG,MAAM,EACnB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,UAAU,EACd,QAAQ,EAAE,CAAC,QAAQ,EACnB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,GAAG,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY,IAChE,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,mBACvC,EAAE,EACF,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,KAChB,WAAW,GACf;QACF,+BACE,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,GAAG,YAAY,IAAI,oBAAoB,IAChD,QAAQ;gBACN,CAAC,CAAC,oFAAoF;gBACtF,CAAC,CAAC,mEACN,EAAE,IACD,KAAK,CACA,CACH,CACR,CAAC;AACJ,CAAC,CAAC"}
@@ -0,0 +1,34 @@
1
+ import React from 'react';
2
+ import { Checkbox } from './Checkbox';
3
+ import { QTip } from '../Tooltip';
4
+ export default {
5
+ title: 'Checkbox',
6
+ };
7
+ export const AllCheckboxes = () => {
8
+ const getDisplay = (type) => (React.createElement(React.Fragment, null,
9
+ React.createElement(QTip, null),
10
+ React.createElement("div", { className: "tw-p-4" },
11
+ React.createElement(Checkbox, { value: "a", type: type, checked: true, label: 'with Label', tooltip: "Checkbox Tooltip" })),
12
+ React.createElement("div", { className: "tw-p-4" },
13
+ React.createElement(Checkbox, { value: "d", type: type, checked: false, disabled: true, label: React.createElement("div", null,
14
+ "Disabled",
15
+ React.createElement("br", null),
16
+ "multi-Line"), tooltip: "Checkbox Tooltip" })),
17
+ React.createElement("div", { className: "tw-p-4" },
18
+ React.createElement(Checkbox, { value: "d", type: type, checked: true, disabled: true, label: "Disabled", tooltip: "Checkbox Tooltip" })),
19
+ React.createElement("div", { className: "tw-p-4" },
20
+ React.createElement(Checkbox, { value: "b", type: type, checked: true, tooltip: "Checkbox Tooltip" })),
21
+ React.createElement("div", { className: "tw-p-4" },
22
+ React.createElement(Checkbox, { value: "c", type: type, checked: false, tooltip: "Checkbox Tooltip" }))));
23
+ const renderAllVariations = (type) => (React.createElement(React.Fragment, null,
24
+ React.createElement("div", { className: "tw-p-4 light" }, getDisplay(type)),
25
+ React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" }, getDisplay(type))));
26
+ return (React.createElement("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4" },
27
+ React.createElement("div", null,
28
+ React.createElement("b", null, "Checkbox"),
29
+ renderAllVariations('checkbox')),
30
+ React.createElement("div", null,
31
+ React.createElement("b", null, "Radios"),
32
+ renderAllVariations('radio'))));
33
+ };
34
+ //# sourceMappingURL=Checkbox.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Checkbox.stories.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,eAAe;IACb,KAAK,EAAE,UAAU;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,UAAU,GAAG,CAAC,IAA0B,EAAE,EAAE,CAAC,CACjD;QACE,oBAAC,IAAI,OAAG;QACR,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,EAAC,kBAAkB,GAAG,CAC7F;QACN,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,QAAQ,IACP,KAAK,EAAC,GAAG,EACT,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,IAAI,EACd,KAAK,EACH;;oBAEE,+BAAM;iCAEF,EAER,OAAO,EAAC,kBAAkB,GAC1B,CACE;QACN,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAC,UAAU,EAAC,OAAO,EAAC,kBAAkB,GAAG,CACzG;QACN,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAC,kBAAkB,GAAG,CACxE;QACN,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAC,kBAAkB,GAAG,CACzE,CACL,CACJ,CAAC;IACF,MAAM,mBAAmB,GAAG,CAAC,IAA0B,EAAE,EAAE,CAAC,CAC1D;QACE,6BAAK,SAAS,EAAC,cAAc,IAAE,UAAU,CAAC,IAAI,CAAC,CAAO;QACtD,6BAAK,SAAS,EAAC,yCAAyC,IAAE,UAAU,CAAC,IAAI,CAAC,CAAO,CAChF,CACJ,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C;YACE,0CAAe;YACd,mBAAmB,CAAC,UAAU,CAAC,CAC5B;QAEN;YACE,wCAAa;YACZ,mBAAmB,CAAC,OAAO,CAAC,CACzB,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
@@ -0,0 +1,94 @@
1
+ import React from 'react';
2
+ import '@testing-library/jest-dom';
3
+ import { render, screen } from '@testing-library/react';
4
+ import { Checkbox } from './Checkbox';
5
+ import userEvent from '@testing-library/user-event';
6
+ describe('Checkbox', () => {
7
+ class Context {
8
+ testId = 'checkboxTestId';
9
+ props = {
10
+ onChange: jest.fn(),
11
+ checked: false,
12
+ testId: this.testId,
13
+ };
14
+ }
15
+ let tc;
16
+ beforeEach(() => {
17
+ tc = new Context();
18
+ });
19
+ const renderCheckbox = (props) => render(React.createElement(Checkbox, { ...props }));
20
+ it('renders checkbox', () => {
21
+ renderCheckbox(tc.props);
22
+ expect(screen.getByTestId(tc.testId)).toBeInTheDocument();
23
+ });
24
+ it('renders radio', () => {
25
+ renderCheckbox({ ...tc.props, type: 'radio' });
26
+ expect(screen.getByTestId(tc.testId)).toHaveProperty('type', 'radio');
27
+ });
28
+ it('renders label', () => {
29
+ const label = 'look at this checkbox!';
30
+ renderCheckbox({ ...tc.props, label });
31
+ expect(screen.getByText(label)).toBeInTheDocument();
32
+ });
33
+ it('respects checked', () => {
34
+ renderCheckbox({ ...tc.props, checked: true });
35
+ expect(screen.getByTestId(tc.testId)).toBeChecked();
36
+ });
37
+ it('calls onChange handler', async () => {
38
+ const onChange = jest.fn();
39
+ renderCheckbox({ ...tc.props, onChange });
40
+ await userEvent.click(screen.getByTestId(tc.testId));
41
+ expect(onChange).toHaveBeenCalled();
42
+ });
43
+ it('calls onKeyDown handler', async () => {
44
+ const onKeyDown = jest.fn();
45
+ renderCheckbox({ ...tc.props, onKeyDown });
46
+ await userEvent.type(screen.getByTestId(tc.testId), 'a');
47
+ expect(onKeyDown).toHaveBeenCalled();
48
+ });
49
+ it('calls onClickHandler handler', async () => {
50
+ const onClick = jest.fn();
51
+ renderCheckbox({ ...tc.props, onClick });
52
+ await userEvent.click(screen.getByTestId(tc.testId));
53
+ expect(onClick).toHaveBeenCalled();
54
+ });
55
+ it('respects disabled', () => {
56
+ renderCheckbox({ ...tc.props, disabled: true });
57
+ expect(screen.getByTestId(tc.testId)).not.toBeEnabled();
58
+ });
59
+ it('renders label clickable', async () => {
60
+ const label = 'amazing checkbox';
61
+ const onClick = jest.fn();
62
+ renderCheckbox({ ...tc.props, label, onClick });
63
+ expect(screen.getByTestId(tc.testId)).not.toBeChecked();
64
+ await userEvent.click(screen.getByText(label));
65
+ expect(onClick).toHaveBeenCalled();
66
+ });
67
+ it('respects id', () => {
68
+ const id = 'checkboxId';
69
+ renderCheckbox({ ...tc.props, id });
70
+ expect(screen.getByTestId(tc.testId)).toHaveProperty('id', id);
71
+ });
72
+ it('respects name', () => {
73
+ const name = 'checkboxName';
74
+ renderCheckbox({ ...tc.props, name });
75
+ expect(screen.getByTestId(tc.testId)).toHaveProperty('name', name);
76
+ });
77
+ it('respects name', () => {
78
+ const value = 'priceless';
79
+ renderCheckbox({ ...tc.props, value });
80
+ expect(screen.getByTestId(tc.testId)).toHaveProperty('value', value);
81
+ });
82
+ it('applies extraClassNames', () => {
83
+ const extraClassNames = 'extra styling so fancy';
84
+ renderCheckbox({ ...tc.props, extraClassNames });
85
+ expect(screen.getByTestId(tc.testId).parentNode).toHaveClass(extraClassNames);
86
+ });
87
+ it('applies extraLabelClassNames', () => {
88
+ const extraLabelClassNames = 'special label';
89
+ const label = 'amazing checkbox';
90
+ renderCheckbox({ ...tc.props, extraLabelClassNames, label });
91
+ expect(screen.getByText(label)).toHaveClass(extraLabelClassNames);
92
+ });
93
+ });
94
+ //# sourceMappingURL=Checkbox.test.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Checkbox.test.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.test.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=Checkbox.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Checkbox.types.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.types.ts"],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ export { Checkbox as default } from './Checkbox';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC"}
@@ -0,0 +1,15 @@
1
+ import React, { useRef, useEffect, useState } from 'react';
2
+ import { motion, AnimatePresence } from 'framer-motion';
3
+ const Collapse = ({ isVisible, children }) => {
4
+ const contentRef = useRef(null);
5
+ const [contentHeight, setContentHeight] = useState(0);
6
+ useEffect(() => {
7
+ if (contentRef.current) {
8
+ setContentHeight(contentRef.current.scrollHeight);
9
+ }
10
+ }, [children]);
11
+ return (React.createElement(AnimatePresence, { initial: false }, isVisible && (React.createElement(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: contentHeight, opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { type: 'spring', damping: 20, stiffness: 100 }, style: { overflow: 'hidden' } },
12
+ React.createElement("div", { ref: contentRef }, children)))));
13
+ };
14
+ export default Collapse;
15
+ //# sourceMappingURL=Collapse.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Collapse.js","sourceRoot":"","sources":["../../src/Collapse/Collapse.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGxD,MAAM,QAAQ,GAA2C,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IACnF,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;SACnD;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,oBAAC,eAAe,IAAC,OAAO,EAAE,KAAK,IAC5B,SAAS,IAAI,CACZ,oBAAC,MAAM,CAAC,GAAG,IACT,OAAO,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAClC,OAAO,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,CAAC,EAAE,EAC9C,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAC/B,UAAU,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,EAC3D,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE;QAC7B,6BAAK,GAAG,EAAE,UAAU,IAAG,QAAQ,CAAO,CAC3B,CACd,CACe,CACnB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}