@seeqdev/qomponents 0.0.73 → 0.0.75

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 (161) hide show
  1. package/dist/NewWorkbench/NewWorkbench.js +43 -0
  2. package/dist/NewWorkbench/NewWorkbench.js.map +1 -0
  3. package/dist/NewWorkbench/NewWorkbench.stories.js +60 -0
  4. package/dist/NewWorkbench/NewWorkbench.stories.js.map +1 -0
  5. package/dist/{ButtonWithDropdown/ButtonWithDropdown.test.js → NewWorkbench/NewWorkbench.test.js} +6 -6
  6. package/dist/NewWorkbench/NewWorkbench.test.js.map +1 -0
  7. package/dist/NewWorkbench/NewWorkbench.types.js +2 -0
  8. package/dist/NewWorkbench/NewWorkbench.types.js.map +1 -0
  9. package/dist/NewWorkbench/index.js +2 -0
  10. package/dist/NewWorkbench/index.js.map +1 -0
  11. package/dist/NewWorkbench/variants.js +11 -0
  12. package/dist/NewWorkbench/variants.js.map +1 -0
  13. package/dist/index.esm.js +35 -42
  14. package/dist/index.esm.js.map +1 -1
  15. package/dist/index.js +35 -42
  16. package/dist/index.js.map +1 -1
  17. package/dist/styles.css +25 -5
  18. package/package.json +1 -1
  19. package/dist/Accordion/Accordion.js +0 -9
  20. package/dist/Accordion/Accordion.js.map +0 -1
  21. package/dist/Accordion/Accordion.stories.js +0 -109
  22. package/dist/Accordion/Accordion.stories.js.map +0 -1
  23. package/dist/Accordion/Accordion.test.js +0 -55
  24. package/dist/Accordion/Accordion.test.js.map +0 -1
  25. package/dist/Accordion/Accordion.types.js +0 -2
  26. package/dist/Accordion/Accordion.types.js.map +0 -1
  27. package/dist/Accordion/index.js +0 -2
  28. package/dist/Accordion/index.js.map +0 -1
  29. package/dist/Button/Button.js +0 -90
  30. package/dist/Button/Button.js.map +0 -1
  31. package/dist/Button/Button.stories.js +0 -85
  32. package/dist/Button/Button.stories.js.map +0 -1
  33. package/dist/Button/Button.test.js +0 -49
  34. package/dist/Button/Button.test.js.map +0 -1
  35. package/dist/Button/Button.types.js +0 -5
  36. package/dist/Button/Button.types.js.map +0 -1
  37. package/dist/Button/index.js +0 -2
  38. package/dist/Button/index.js.map +0 -1
  39. package/dist/ButtonWithDropdown/ButtonWithDropdown.js +0 -60
  40. package/dist/ButtonWithDropdown/ButtonWithDropdown.js.map +0 -1
  41. package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.js +0 -97
  42. package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.js.map +0 -1
  43. package/dist/ButtonWithDropdown/ButtonWithDropdown.test.js.map +0 -1
  44. package/dist/ButtonWithDropdown/ButtonWithDropdown.types.js +0 -2
  45. package/dist/ButtonWithDropdown/ButtonWithDropdown.types.js.map +0 -1
  46. package/dist/ButtonWithDropdown/index.js +0 -2
  47. package/dist/ButtonWithDropdown/index.js.map +0 -1
  48. package/dist/ButtonWithPopover/ButtonWithPopover.js +0 -53
  49. package/dist/ButtonWithPopover/ButtonWithPopover.js.map +0 -1
  50. package/dist/ButtonWithPopover/ButtonWithPopover.stories.js +0 -72
  51. package/dist/ButtonWithPopover/ButtonWithPopover.stories.js.map +0 -1
  52. package/dist/ButtonWithPopover/ButtonWithPopover.test.js +0 -87
  53. package/dist/ButtonWithPopover/ButtonWithPopover.test.js.map +0 -1
  54. package/dist/ButtonWithPopover/ButtonWithPopover.types.js +0 -2
  55. package/dist/ButtonWithPopover/ButtonWithPopover.types.js.map +0 -1
  56. package/dist/ButtonWithPopover/index.js +0 -2
  57. package/dist/ButtonWithPopover/index.js.map +0 -1
  58. package/dist/Checkbox/Checkbox.js +0 -26
  59. package/dist/Checkbox/Checkbox.js.map +0 -1
  60. package/dist/Checkbox/Checkbox.stories.js +0 -34
  61. package/dist/Checkbox/Checkbox.stories.js.map +0 -1
  62. package/dist/Checkbox/Checkbox.test.js +0 -94
  63. package/dist/Checkbox/Checkbox.test.js.map +0 -1
  64. package/dist/Checkbox/Checkbox.types.js +0 -2
  65. package/dist/Checkbox/Checkbox.types.js.map +0 -1
  66. package/dist/Checkbox/index.js +0 -2
  67. package/dist/Checkbox/index.js.map +0 -1
  68. package/dist/Icon/Icon.js +0 -55
  69. package/dist/Icon/Icon.js.map +0 -1
  70. package/dist/Icon/Icon.stories.js +0 -41
  71. package/dist/Icon/Icon.stories.js.map +0 -1
  72. package/dist/Icon/Icon.test.js +0 -55
  73. package/dist/Icon/Icon.test.js.map +0 -1
  74. package/dist/Icon/Icon.types.js +0 -16
  75. package/dist/Icon/Icon.types.js.map +0 -1
  76. package/dist/Icon/index.js +0 -2
  77. package/dist/Icon/index.js.map +0 -1
  78. package/dist/Modal/Modal.js +0 -99
  79. package/dist/Modal/Modal.js.map +0 -1
  80. package/dist/Modal/Modal.stories.js +0 -176
  81. package/dist/Modal/Modal.stories.js.map +0 -1
  82. package/dist/Modal/Modal.test.js +0 -108
  83. package/dist/Modal/Modal.test.js.map +0 -1
  84. package/dist/Modal/Modal.types.js +0 -2
  85. package/dist/Modal/Modal.types.js.map +0 -1
  86. package/dist/Modal/index.js +0 -2
  87. package/dist/Modal/index.js.map +0 -1
  88. package/dist/Select/Select.js +0 -171
  89. package/dist/Select/Select.js.map +0 -1
  90. package/dist/Select/Select.stories.js +0 -77
  91. package/dist/Select/Select.stories.js.map +0 -1
  92. package/dist/Select/Select.test.js +0 -182
  93. package/dist/Select/Select.test.js.map +0 -1
  94. package/dist/Select/Select.types.js +0 -2
  95. package/dist/Select/Select.types.js.map +0 -1
  96. package/dist/Select/index.js +0 -2
  97. package/dist/Select/index.js.map +0 -1
  98. package/dist/Tabs/Tabs.js +0 -22
  99. package/dist/Tabs/Tabs.js.map +0 -1
  100. package/dist/Tabs/Tabs.stories.js +0 -91
  101. package/dist/Tabs/Tabs.stories.js.map +0 -1
  102. package/dist/Tabs/Tabs.test.js +0 -91
  103. package/dist/Tabs/Tabs.test.js.map +0 -1
  104. package/dist/Tabs/Tabs.types.js +0 -2
  105. package/dist/Tabs/Tabs.types.js.map +0 -1
  106. package/dist/Tabs/index.js +0 -2
  107. package/dist/Tabs/index.js.map +0 -1
  108. package/dist/TextArea/TextArea.js +0 -23
  109. package/dist/TextArea/TextArea.js.map +0 -1
  110. package/dist/TextArea/TextArea.stories.js +0 -39
  111. package/dist/TextArea/TextArea.stories.js.map +0 -1
  112. package/dist/TextArea/TextArea.test.js +0 -68
  113. package/dist/TextArea/TextArea.test.js.map +0 -1
  114. package/dist/TextArea/TextArea.types.js +0 -2
  115. package/dist/TextArea/TextArea.types.js.map +0 -1
  116. package/dist/TextArea/index.js +0 -2
  117. package/dist/TextArea/index.js.map +0 -1
  118. package/dist/TextField/TextField.js +0 -64
  119. package/dist/TextField/TextField.js.map +0 -1
  120. package/dist/TextField/TextField.stories.js +0 -41
  121. package/dist/TextField/TextField.stories.js.map +0 -1
  122. package/dist/TextField/TextField.test.js +0 -35
  123. package/dist/TextField/TextField.test.js.map +0 -1
  124. package/dist/TextField/TextField.types.js +0 -2
  125. package/dist/TextField/TextField.types.js.map +0 -1
  126. package/dist/TextField/index.js +0 -2
  127. package/dist/TextField/index.js.map +0 -1
  128. package/dist/ToolbarButton/ToolbarButton.js +0 -73
  129. package/dist/ToolbarButton/ToolbarButton.js.map +0 -1
  130. package/dist/ToolbarButton/ToolbarButton.stories.js +0 -89
  131. package/dist/ToolbarButton/ToolbarButton.stories.js.map +0 -1
  132. package/dist/ToolbarButton/ToolbarButton.test.js +0 -93
  133. package/dist/ToolbarButton/ToolbarButton.test.js.map +0 -1
  134. package/dist/ToolbarButton/ToolbarButton.types.js +0 -2
  135. package/dist/ToolbarButton/ToolbarButton.types.js.map +0 -1
  136. package/dist/ToolbarButton/index.js +0 -2
  137. package/dist/ToolbarButton/index.js.map +0 -1
  138. package/dist/Tooltip/QTip.stories.js +0 -40
  139. package/dist/Tooltip/QTip.stories.js.map +0 -1
  140. package/dist/Tooltip/QTip.types.js +0 -2
  141. package/dist/Tooltip/QTip.types.js.map +0 -1
  142. package/dist/Tooltip/QTipPerformance.stories.js +0 -30
  143. package/dist/Tooltip/QTipPerformance.stories.js.map +0 -1
  144. package/dist/Tooltip/Qtip.js +0 -154
  145. package/dist/Tooltip/Qtip.js.map +0 -1
  146. package/dist/Tooltip/Tooltip.js +0 -36
  147. package/dist/Tooltip/Tooltip.js.map +0 -1
  148. package/dist/Tooltip/Tooltip.stories.js +0 -32
  149. package/dist/Tooltip/Tooltip.stories.js.map +0 -1
  150. package/dist/Tooltip/Tooltip.types.js +0 -3
  151. package/dist/Tooltip/Tooltip.types.js.map +0 -1
  152. package/dist/Tooltip/TooltipPerformance.stories.js +0 -30
  153. package/dist/Tooltip/TooltipPerformance.stories.js.map +0 -1
  154. package/dist/Tooltip/index.js +0 -3
  155. package/dist/Tooltip/index.js.map +0 -1
  156. package/dist/Tooltip/qTip.utilities.js +0 -11
  157. package/dist/Tooltip/qTip.utilities.js.map +0 -1
  158. package/dist/types.js +0 -2
  159. package/dist/types.js.map +0 -1
  160. package/dist/utils/browserId.js +0 -29
  161. package/dist/utils/browserId.js.map +0 -1
package/dist/styles.css CHANGED
@@ -1839,6 +1839,14 @@ ol,
1839
1839
  z-index: 1001;
1840
1840
  }
1841
1841
 
1842
+ .tw-z-\[1009\] {
1843
+ z-index: 1009;
1844
+ }
1845
+
1846
+ .tw-z-\[1010\] {
1847
+ z-index: 1010;
1848
+ }
1849
+
1842
1850
  .tw-z-\[1200\] {
1843
1851
  z-index: 1200;
1844
1852
  }
@@ -2657,10 +2665,22 @@ ol,
2657
2665
  font-weight: 500;
2658
2666
  }
2659
2667
 
2668
+ .tw-font-normal {
2669
+ font-weight: 400;
2670
+ }
2671
+
2672
+ .tw-font-semibold {
2673
+ font-weight: 600;
2674
+ }
2675
+
2660
2676
  .tw-italic {
2661
2677
  font-style: italic;
2662
2678
  }
2663
2679
 
2680
+ .tw-not-italic {
2681
+ font-style: normal;
2682
+ }
2683
+
2664
2684
  .tw-leading-none {
2665
2685
  line-height: 1;
2666
2686
  }
@@ -2669,6 +2689,11 @@ ol,
2669
2689
  line-height: 1.5;
2670
2690
  }
2671
2691
 
2692
+ .\!tw-text-sq-disabled-gray {
2693
+ --tw-text-opacity: 1 !important;
2694
+ color: rgb(var(--sq-disabled-gray)) !important;
2695
+ }
2696
+
2672
2697
  .tw-text-gray-400 {
2673
2698
  --tw-text-opacity: 1;
2674
2699
  color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -3292,11 +3317,6 @@ ol,
3292
3317
  animation: tw-slideDown 0.3s ease-in-out;
3293
3318
  }
3294
3319
 
3295
- .data-\[disabled\]\:tw-text-sq-disabled-gray[data-disabled] {
3296
- --tw-text-opacity: 1;
3297
- color: rgb(var(--sq-disabled-gray));
3298
- }
3299
-
3300
3320
  .tw-dark .dark\:tw-border-gray-500 {
3301
3321
  --tw-border-opacity: 1;
3302
3322
  border-color: rgb(107 114 128 / var(--tw-border-opacity));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seeqdev/qomponents",
3
- "version": "0.0.73",
3
+ "version": "0.0.75",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.esm.js",
6
6
  "types": "dist/index.js",
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { Root, Item, Trigger, Content } from '@radix-ui/react-accordion';
3
- const Accordion = ({ accordionItems, defaultValue, value, onItemSelect, disabled, extraClassNames, testId, }) => {
4
- return (React.createElement(Root, { className: `tw-rounded-md tw-w-full focus-visible:tw-outline-none ${extraClassNames || ''}`, type: "single", defaultValue: defaultValue, value: value, collapsible: true, "data-testid": testId, onValueChange: (_value) => onItemSelect(_value) }, accordionItems.map((item) => (React.createElement(Item, { className: `tw-bg-transparent tw-p-0 tw-flex tw-flex-col tw-w-full`, key: item.value, disabled: disabled, value: item.value },
5
- React.createElement(Trigger, { disabled: disabled, className: `tw-w-full tw-cursor-default focus-visible:tw-outline-none` }, item.trigger),
6
- React.createElement(Content, { className: `data-[state=open]:tw-animate-slideDown data-[state=closed]:tw-animate-slideUp tw-overflow-hidden focus-visible:tw-outline-none ${item.contentClassNames || ''}` }, item.content))))));
7
- };
8
- export default Accordion;
9
- //# sourceMappingURL=Accordion.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAGzE,MAAM,SAAS,GAA4C,CAAC,EAC1D,cAAc,EACd,YAAY,EACZ,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,eAAe,EACf,MAAM,GACP,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,IAAI,IACH,SAAS,EAAE,yDAAyD,eAAe,IAAI,EAAE,EAAE,EAC3F,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,EACZ,WAAW,uBACE,MAAM,EACnB,aAAa,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,IAC9C,cAAc,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC5B,oBAAC,IAAI,IACH,SAAS,EAAE,wDAAwD,EACnE,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,oBAAC,OAAO,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,2DAA2D,IAChG,IAAI,CAAC,OAAO,CACL;QACV,oBAAC,OAAO,IACN,SAAS,EAAE,kIACT,IAAI,CAAC,iBAAiB,IAAI,EAC5B,EAAE,IACD,IAAI,CAAC,OAAO,CACL,CACL,CACR,CAAC,CACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -1,109 +0,0 @@
1
- import React from 'react';
2
- import Accordion from './Accordion';
3
- import { QTip } from '../Tooltip/Qtip';
4
- import Icon from '../Icon';
5
- import Tabs from '../Tabs';
6
- import Button from '../Button';
7
- export default {
8
- title: 'Accordion',
9
- };
10
- const Trigger = ({ label }) => (React.createElement("div", { className: "tw-flex tw-justify-start tw-items-center tw-border-b tw-px-2 tw-text-sq-color-dark" },
11
- React.createElement(Icon, { icon: "fc-arrow-dropdown", extraClassNames: "tw-text-sq-color-dark tw-mr-[0.5rem] tw-text-[12px]", type: "text" }),
12
- label));
13
- const TriggerSecond = ({ label }) => (React.createElement("div", { className: "tw-flex tw-justify-between tw-items-center tw-border-b tw-px-2 tw-text-sq-color-dark tw-py-2" },
14
- label,
15
- React.createElement(Icon, { icon: "fc-arrow-dropdown", extraClassNames: "tw-text-sq-color-dark tw-mr-[0.5rem] tw-text-[12px]", type: "text" })));
16
- const renderData = () => (React.createElement("div", { className: "tw-text-sq-color-gray dark:tw-text-sq-white" },
17
- React.createElement("p", { className: "tw-mb-5 tw-text-[15px] tw-leading-normal" }, "This is a data tab to show details about your data. You can make changes to your account"),
18
- React.createElement(Button, { variant: "outline", label: "Save data" })));
19
- const renderTools = () => (React.createElement("div", { className: "tw-text-sq-color-gray dark:tw-text-sq-white" },
20
- React.createElement("p", { className: "tw-mb-5 tw-text-[15px] tw-leading-normal" }, "Make changes to your account here. Click save when you're done."),
21
- React.createElement(Button, { variant: "outline", label: "Save tools" })));
22
- const renderJournal = () => (React.createElement("div", { className: "tw-text-sq-color-gray dark:tw-text-sq-white" },
23
- React.createElement("p", { className: "tw-mb-5 tw-text-[15px] tw-leading-normal" }, "Make changes to your account here. Click save when you're done."),
24
- React.createElement(Button, { variant: "outline", label: "Save journal" })));
25
- const tabsList = [
26
- {
27
- id: 'data',
28
- label: 'Data',
29
- icon: 'fc-data',
30
- content: renderData(),
31
- },
32
- {
33
- id: 'tools',
34
- label: 'Tools',
35
- icon: 'fc-gears-2',
36
- content: renderTools(),
37
- },
38
- {
39
- id: 'journal',
40
- label: 'Journal',
41
- icon: 'fc-workbook-lock',
42
- content: renderJournal(),
43
- },
44
- ];
45
- export const AllAccordionVariants = () => {
46
- const [activeTab, setActiveTab] = React.useState('data');
47
- const [value, setValue] = React.useState('oranges');
48
- const accordionItems = [
49
- {
50
- value: 'oranges',
51
- id: 'oranges',
52
- itemTestId: 'oranges',
53
- trigger: React.createElement(Trigger, { label: "Oranges" }),
54
- content: (React.createElement("div", { className: "tw-p-2 tw-text-[13px] dark:tw-text-sq-white" }, "Oranges are the fruit of the citrus species Citrus \u00D7 sinensis in the family Rutaceae. They are also called sweet oranges to distinguish them from the related Citrus \u00D7 aurantium, referred to as bitter oranges. They are round and orange, and usually have a sour or bitter taste. Oranges are a good source of vitamin C.")),
55
- },
56
- {
57
- value: 'apples',
58
- id: 'apples',
59
- itemTestId: 'apples',
60
- trigger: React.createElement(Trigger, { label: "Apples" }),
61
- content: (React.createElement("div", null,
62
- React.createElement("div", { className: "tw-p-4" },
63
- React.createElement(Tabs, { stretchTabs: true, activeTab: activeTab, onTabSelect: setActiveTab, defaultActiveTab: "data", tabs: tabsList })))),
64
- },
65
- {
66
- value: 'bananas',
67
- id: 'bananas',
68
- trigger: React.createElement(Trigger, { label: "Bananas" }),
69
- itemTestId: 'bananas',
70
- content: (React.createElement("div", null, "A banana is an elongated, edible fruit \u2013 botanically a berry \u2013 produced by several kinds of large herbaceous flowering plants in the genus Musa. In some countries, bananas used for cooking may be called \"plantains\", distinguishing them from dessert bananas. The fruit is variable in size, color, and firmness, but is usually elongated and curved, with soft flesh rich in starch covered with a rind, which may be green, yellow, red, purple, or brown when ripe.")),
71
- },
72
- {
73
- value: 'pineapples',
74
- id: 'pineapples',
75
- trigger: React.createElement(Trigger, { label: "Pineapples" }),
76
- itemTestId: 'pineapples',
77
- content: (React.createElement("div", null, "The pineapple is a tropical plant with an edible fruit and the most economically significant plant in the family Bromeliaceae. The pineapple is indigenous to South America, where it has been cultivated for many centuries. The introduction of the pineapple to Europe in the 17th century made it a significant cultural icon of luxury. Since the 1820s, pineapple has been commercially grown in greenhouses and many tropical plantations.")),
78
- },
79
- ];
80
- const allAccordions = (isDark) => (React.createElement("div", { className: isDark ? 'tw-dark tw-bg-sq-dark-background' : '' },
81
- React.createElement("div", { className: "tw-p-5 " },
82
- React.createElement(Accordion, { accordionItems: isDark
83
- ? accordionItems
84
- : accordionItems.map((item) => ({ ...item, trigger: React.createElement(TriggerSecond, { label: item.value.toUpperCase() }) })), value: value, testId: "basic-accordion1", onItemSelect: (value) => setValue(value) }))));
85
- const renderAllVariations = (isDark) => React.createElement("div", { className: "tw-p-4" }, allAccordions(isDark));
86
- return (React.createElement(React.Fragment, null,
87
- React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
88
- React.createElement(QTip, null),
89
- React.createElement("div", { className: "color_topic" },
90
- React.createElement("b", null, "Topic Colors"),
91
- renderAllVariations()),
92
- React.createElement("div", { className: "color_analysis" },
93
- React.createElement("b", null, "Analysis Colors"),
94
- renderAllVariations()),
95
- React.createElement("div", { className: "color_datalab" },
96
- React.createElement("b", null, "Datalab Colors"),
97
- renderAllVariations())),
98
- React.createElement("div", { className: "tw-dark tw-bg-sq-dark-background tw-grid tw-grid-cols-3 tw-gap-4 tw-py-4" },
99
- React.createElement("div", { className: "color_topic dark:tw-text-sq-white tw-text-center" },
100
- React.createElement("b", null, "Topic Colors"),
101
- renderAllVariations(true)),
102
- React.createElement("div", { className: "color_analysis dark:tw-text-sq-white tw-text-center" },
103
- React.createElement("b", null, "Analysis Colors"),
104
- renderAllVariations(true)),
105
- React.createElement("div", { className: "color_datalab dark:tw-text-sq-white tw-text-center" },
106
- React.createElement("b", null, "Datalab Colors"),
107
- renderAllVariations(true)))));
108
- };
109
- //# sourceMappingURL=Accordion.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Accordion.stories.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.stories.tsx"],"names":[],"mappings":"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"}
@@ -1,55 +0,0 @@
1
- import React from 'react';
2
- import '@testing-library/jest-dom';
3
- import { render, screen } from '@testing-library/react';
4
- import userEvent from '@testing-library/user-event';
5
- import Accordion from './Accordion';
6
- describe('Accordion', () => {
7
- const mockOnItemSelect = jest.fn();
8
- class Context {
9
- testId = 'buttonTestId';
10
- label = 'button label';
11
- props = {
12
- accordionItems: [
13
- {
14
- id: 'item1',
15
- value: 'item1',
16
- trigger: 'Item 1',
17
- content: 'Content 1',
18
- },
19
- {
20
- id: 'item2',
21
- value: 'item2',
22
- trigger: 'Item 2',
23
- content: 'Content 2',
24
- },
25
- ],
26
- defaultValue: 'item1',
27
- value: 'item1',
28
- onItemSelect: (key) => mockOnItemSelect(key),
29
- disabled: false,
30
- extraClassNames: 'extra-class',
31
- testId: this.testId,
32
- };
33
- }
34
- let tc;
35
- beforeEach(() => {
36
- tc = new Context();
37
- });
38
- const renderAccordion = (props) => render(React.createElement(Accordion, { ...props }));
39
- it('renders accordion items', () => {
40
- renderAccordion(tc.props);
41
- expect(screen.getByText('Item 1')).toBeInTheDocument();
42
- expect(screen.getByText('Item 2')).toBeInTheDocument();
43
- });
44
- it('renders accordion content', () => {
45
- renderAccordion(tc.props);
46
- expect(screen.getByText('Content 1')).toBeInTheDocument();
47
- expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
48
- });
49
- it('calls onItemSelect when an item is selected', async () => {
50
- renderAccordion(tc.props);
51
- await userEvent.click(screen.getByText('Item 2'));
52
- expect(mockOnItemSelect).toHaveBeenCalledWith('item2');
53
- });
54
- });
55
- //# sourceMappingURL=Accordion.test.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Accordion.test.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAEpD,OAAO,SAAS,MAAM,aAAa,CAAC;AAGpC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,MAAM,gBAAgB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IACnC,MAAM,OAAO;QACX,MAAM,GAAG,cAAc,CAAC;QACxB,KAAK,GAAG,cAAc,CAAC;QACvB,KAAK,GAAmB;YACtB,cAAc,EAAE;gBACd;oBACE,EAAE,EAAE,OAAO;oBACX,KAAK,EAAE,OAAO;oBACd,OAAO,EAAE,QAAQ;oBACjB,OAAO,EAAE,WAAW;iBACrB;gBACD;oBACE,EAAE,EAAE,OAAO;oBACX,KAAK,EAAE,OAAO;oBACd,OAAO,EAAE,QAAQ;oBACjB,OAAO,EAAE,WAAW;iBACrB;aACF;YACD,YAAY,EAAE,OAAO;YACrB,KAAK,EAAE,OAAO;YACd,YAAY,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,gBAAgB,CAAC,GAAG,CAAC;YAC5C,QAAQ,EAAE,KAAK;YACf,eAAe,EAAE,aAAa;YAC9B,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;KACH;IAED,IAAI,EAAW,CAAC;IAChB,UAAU,CAAC,GAAG,EAAE;QACd,EAAE,GAAG,IAAI,OAAO,EAAE,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,CAAC,KAAqB,EAAE,EAAE,CAAC,MAAM,CAAC,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC,CAAC;IAEpF,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,eAAe,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QAC1B,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACvD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACzD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;QACnC,eAAe,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QAC1B,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAC1D,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;IAClE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;QAC3D,eAAe,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QAC1B,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;QAClD,MAAM,CAAC,gBAAgB,CAAC,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;IACzD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=Accordion.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Accordion.types.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.types.ts"],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
- export { default } from './Accordion';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}
@@ -1,90 +0,0 @@
1
- import React from 'react';
2
- import '../styles.css';
3
- import { browserIsFirefox } from '../utils/browserId';
4
- import Icon from '../Icon';
5
- import { DEFAULT_TOOL_TIP_DELAY } from '../Tooltip/Tooltip.types';
6
- /**
7
- * All-in-one Button:
8
- * - use "variant" to achieve the desired style
9
- * - include tooltips and/or icons
10
- */
11
- const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, iconPosition = 'left', iconPrefix = undefined, preventBlur = false, isHtmlTooltip = false, tooltipTestId, }) => {
12
- const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';
13
- const baseClassesByVariant = {
14
- 'outline': 'disabled:tw-opacity-50 tw-border-solid tw-border',
15
- 'theme': 'disabled:tw-opacity-50 tw-border-solid tw-border',
16
- 'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-opacity-50 tw-border-solid tw-border ' +
17
- 'tw-border-sq-danger-color hover:tw-border-sq-danger-color-hover',
18
- 'theme-light': 'disabled:tw-opacity-50 tw-border-solid tw-border',
19
- 'no-border': 'disabled:tw-opacity-50',
20
- 'warning': 'tw-bg-sq-warning-color tw-border-solid tw-border tw-border-sq-warning-color',
21
- };
22
- const textClassesByVariantLightTheme = {
23
- 'outline': 'tw-text-sq-text-color',
24
- 'theme': 'tw-text-white',
25
- 'theme-light': 'tw-text-white',
26
- 'danger': 'tw-text-white',
27
- 'no-border': 'tw-text-sq-text-color',
28
- 'warning': 'tw-text-white',
29
- };
30
- const textClassesByVariantDarkTheme = {
31
- 'outline': 'dark:tw-text-sq-dark-text',
32
- 'theme': 'dark:tw-text-white',
33
- 'theme-light': 'dark:tw-text-white',
34
- 'danger': 'dark:tw-text-white',
35
- 'no-border': 'dark:tw-text-sq-dark-text',
36
- 'warning': 'dark:tw-text-white',
37
- };
38
- const classesByVariantLightTheme = {
39
- 'outline': 'tw-bg-white dark:tw-bg-sq-dark-background tw-border-sq-disabled-gray hover:tw-bg-sq-light-gray' +
40
- ' focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark active:tw-border-sq-color-dark',
41
- 'theme': 'tw-bg-sq-color-dark hover:tw-bg-sq-color-highlight tw-border-sq-color-dark' +
42
- ' hover:tw-border-sq-color-highlight',
43
- 'danger': '',
44
- 'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link tw-border-sq-icon hover:tw-border-sq-link',
45
- 'no-border': '',
46
- 'warning': '',
47
- };
48
- const classesByVariantDarkTheme = {
49
- 'outline': 'dark:tw-border-sq-dark-disabled-gray dark:hover:tw-bg-sq-highlight-color-dark' +
50
- ' dark:focus:tw-bg-sq-multi-gray-dark dark:active:tw-bg-sq-multi-gray-dark dark:focus:tw-border-sq-color-dark' +
51
- ' dark:active:tw-border-sq-color-dark',
52
- 'theme': 'dark:tw-bg-sq-color-dark dark:hover:tw-bg-sq-color-highlight dark:tw-border-sq-color-dark' +
53
- ' dark:hover:tw-border-sq-color-highlight',
54
- 'danger': '',
55
- 'theme-light': 'dark:tw-bg-sq-icon-dark dark:hover:tw-bg-sq-link-dark dark:tw-border-sq-icon-dark' +
56
- ' dark:hover:tw-border-sq-link-dark',
57
- 'no-border': '',
58
- 'warning': '',
59
- };
60
- const sizeClasses = {
61
- sm: 'tw-text-sm',
62
- lg: 'tw-text-xl',
63
- };
64
- const appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
65
- let tooltipData = undefined;
66
- if (tooltip) {
67
- tooltipData = {
68
- 'data-qtip-text': tooltip,
69
- 'data-qtip-placement': tooltipOptions?.position,
70
- 'data-qtip-is-html': isHtmlTooltip,
71
- 'data-qtip-testid': tooltipTestId,
72
- 'data-qtip-delay': tooltipOptions?.delay ?? DEFAULT_TOOL_TIP_DELAY,
73
- };
74
- }
75
- const iconClass = (iconPosition === 'left' ? 'tw-mr-1' : 'tw-ml-1');
76
- const iconElement = icon && (React.createElement(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label ? `${iconClass} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` }));
77
- return (React.createElement("button", { id: id, ...tooltipData, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
78
- stopPropagation && e.stopPropagation();
79
- onClick && onClick(e);
80
- }, onMouseDown: (e) => {
81
- if (preventBlur) {
82
- e.preventDefault();
83
- }
84
- }, className: appliedClasses },
85
- iconPosition === 'left' && iconElement,
86
- label,
87
- iconPosition === 'right' && iconElement));
88
- };
89
- export default Button;
90
- //# sourceMappingURL=Button.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
@@ -1,85 +0,0 @@
1
- import React from 'react';
2
- import Button from './Button';
3
- import { buttonVariants } from './Button.types';
4
- export default {
5
- title: 'Button',
6
- };
7
- export const AllButtonVariants = () => {
8
- const renderAllVariations = () => (React.createElement(React.Fragment, null, buttonVariants.map((variant) => (React.createElement("div", { key: `{variant_${variant}`, className: "tw-grid tw-grid-cols-2 tw-gap-4" },
9
- React.createElement("div", { className: "tw-p-4" },
10
- React.createElement(Button, { label: `Variant: ${variant}`, onClick: () => { }, variant: variant })),
11
- React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
12
- React.createElement(Button, { label: `Variant: ${variant}`, onClick: () => { }, variant: variant })))))));
13
- return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
14
- React.createElement("div", { className: "color_topic" },
15
- React.createElement("b", null, "Topic Colors"),
16
- renderAllVariations()),
17
- React.createElement("div", { className: "color_analysis" },
18
- React.createElement("b", null, "Analysis Colors"),
19
- renderAllVariations()),
20
- React.createElement("div", { className: "color_datalab" },
21
- React.createElement("b", null, "Datalab Colors"),
22
- renderAllVariations())));
23
- };
24
- export const ButtonWithTooltip = () => {
25
- const renderButtonWithTooltip = () => (React.createElement(React.Fragment, null,
26
- React.createElement("div", { className: "tw-p-4" },
27
- React.createElement(Button, { tooltip: "Helpful tooltip", variant: "theme", label: "Hover me" })),
28
- React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
29
- React.createElement(Button, { tooltip: "Helpful tooltip", variant: "theme", label: "Hover me" }))));
30
- return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
31
- React.createElement("div", { className: "color_topic" },
32
- React.createElement("b", null, "Topic Colors"),
33
- renderButtonWithTooltip()),
34
- React.createElement("div", { className: "color_analysis" },
35
- React.createElement("b", null, "Analysis Colors"),
36
- renderButtonWithTooltip()),
37
- React.createElement("div", { className: "color_datalab" },
38
- React.createElement("b", null, "Datalab Colors"),
39
- renderButtonWithTooltip())));
40
- };
41
- export const ButtonWithIcon = () => {
42
- const renderButtonWithIcon = () => (React.createElement(React.Fragment, null,
43
- React.createElement("div", { className: "tw-p-4" },
44
- React.createElement(Button, { icon: "fc-search-power", variant: "theme", label: "With Icon" })),
45
- React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
46
- React.createElement(Button, { icon: "fc-search-power", variant: "theme", label: "With Icon" }))));
47
- const renderButtonWithIconOnRight = () => (React.createElement(React.Fragment, null,
48
- React.createElement("div", { className: "tw-p-4" },
49
- React.createElement(Button, { icon: "fc-search-power", iconPosition: "right", variant: "theme", label: "With Icon On Right" })),
50
- React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
51
- React.createElement(Button, { icon: "fc-search-power", iconPosition: "right", variant: "theme", label: "With Icon On Right" }))));
52
- return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
53
- React.createElement("div", { className: "color_topic" },
54
- React.createElement("b", null, "Topic Colors"),
55
- renderButtonWithIcon()),
56
- React.createElement("div", { className: "color_analysis" },
57
- React.createElement("b", null, "Analysis Colors"),
58
- renderButtonWithIcon()),
59
- React.createElement("div", { className: "color_datalab" },
60
- React.createElement("b", null, "Datalab Colors"),
61
- renderButtonWithIcon()),
62
- React.createElement("div", { className: "color_topic" }, renderButtonWithIconOnRight()),
63
- React.createElement("div", { className: "color_analysis" }, renderButtonWithIconOnRight()),
64
- React.createElement("div", { className: "color_datalab" }, renderButtonWithIconOnRight())));
65
- };
66
- export const DisabledButton = () => {
67
- const renderDisabledButton = () => (React.createElement(React.Fragment, null,
68
- React.createElement("div", { className: "tw-p-4" },
69
- React.createElement(Button, { disabled: true, variant: "theme", label: "Disabled Button" }),
70
- React.createElement(Button, { extraClassNames: "tw-m-5", disabled: true, label: "Disabled Button" })),
71
- React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
72
- React.createElement(Button, { disabled: true, variant: "theme", label: "Disabled Button" }),
73
- React.createElement(Button, { extraClassNames: "tw-m-5", disabled: true, label: "Disabled Button" }))));
74
- return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
75
- React.createElement("div", { className: "color_topic" },
76
- React.createElement("b", null, "Topic Colors"),
77
- renderDisabledButton()),
78
- React.createElement("div", { className: "color_analysis" },
79
- React.createElement("b", null, "Analysis Colors"),
80
- renderDisabledButton()),
81
- React.createElement("div", { className: "color_datalab" },
82
- React.createElement("b", null, "Datalab Colors"),
83
- renderDisabledButton())));
84
- };
85
- //# sourceMappingURL=Button.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../src/Button/Button.stories.tsx"],"names":[],"mappings":"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"}
@@ -1,49 +0,0 @@
1
- import React from 'react';
2
- import '@testing-library/jest-dom';
3
- import { render, screen } from '@testing-library/react';
4
- import userEvent from '@testing-library/user-event';
5
- import Button from './Button';
6
- describe('Button', () => {
7
- class Context {
8
- testId = 'buttonTestId';
9
- label = 'button label';
10
- props = {
11
- label: this.label,
12
- onClick: jest.fn(),
13
- testId: this.testId,
14
- };
15
- }
16
- let tc;
17
- beforeEach(() => {
18
- tc = new Context();
19
- });
20
- const renderButton = (props) => render(React.createElement(Button, { ...props }));
21
- it('renders button label', () => {
22
- renderButton(tc.props);
23
- expect(screen.getByText(tc.label)).toBeInTheDocument();
24
- });
25
- it('calls on click', async () => {
26
- renderButton(tc.props);
27
- await userEvent.click(screen.getByTestId(tc.testId));
28
- expect(tc.props.onClick).toHaveBeenCalled();
29
- });
30
- it('renders disabled button', () => {
31
- renderButton({ ...tc.props, disabled: true });
32
- expect(screen.getByText(tc.label)).toBeDisabled();
33
- });
34
- it('respects stopPropagation default', async () => {
35
- const callOnPropagation = jest.fn();
36
- render(React.createElement("div", { onClick: callOnPropagation },
37
- React.createElement(Button, { ...tc.props })));
38
- await userEvent.click(screen.getByTestId(tc.testId));
39
- expect(callOnPropagation).not.toHaveBeenCalled();
40
- });
41
- it('propagates click event if not told not to', async () => {
42
- const callOnPropagation = jest.fn();
43
- render(React.createElement("div", { onClick: callOnPropagation },
44
- React.createElement(Button, { ...{ ...tc.props, stopPropagation: false } })));
45
- await userEvent.click(screen.getByTestId(tc.testId));
46
- expect(callOnPropagation).toHaveBeenCalled();
47
- });
48
- });
49
- //# sourceMappingURL=Button.test.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button.test.js","sourceRoot":"","sources":["../../src/Button/Button.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAEpD,OAAO,MAAM,MAAM,UAAU,CAAC;AAG9B,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,MAAM,OAAO;QACX,MAAM,GAAG,cAAc,CAAC;QACxB,KAAK,GAAG,cAAc,CAAC;QACvB,KAAK,GAAgB;YACnB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE;YAClB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;KACH;IAED,IAAI,EAAW,CAAC;IAChB,UAAU,CAAC,GAAG,EAAE;QACd,EAAE,GAAG,IAAI,OAAO,EAAE,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,MAAM,CAAC,oBAAC,MAAM,OAAK,KAAK,GAAI,CAAC,CAAC;IAE3E,EAAE,CAAC,sBAAsB,EAAE,GAAG,EAAE;QAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACvB,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACzD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACvB,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACpC,MAAM,CACJ,6BAAK,OAAO,EAAE,iBAAiB;YAC7B,oBAAC,MAAM,OAAK,EAAE,CAAC,KAAK,GAAI,CACpB,CACP,CAAC;QACF,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,MAAM,CAAC,iBAAiB,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACpC,MAAM,CACJ,6BAAK,OAAO,EAAE,iBAAiB;YAC7B,oBAAC,MAAM,OAAK,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,GAAI,CACnD,CACP,CAAC;QACF,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,MAAM,CAAC,iBAAiB,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC/C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
@@ -1,5 +0,0 @@
1
- export const buttonTypes = ['button', 'reset', 'submit', 'link'];
2
- export const buttonSizes = ['sm', 'lg'];
3
- export const buttonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
4
- export const iconPositions = ['left', 'right'];
5
- //# sourceMappingURL=Button.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button.types.js","sourceRoot":"","sources":["../../src/Button/Button.types.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAC;AAC1E,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,CAAU,CAAC;AACjD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,CAAU,CAAC;AAC7G,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC"}
@@ -1,2 +0,0 @@
1
- export { default } from "./Button";
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}
@@ -1,60 +0,0 @@
1
- import * as React from 'react';
2
- import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
3
- import Icon from '../Icon';
4
- import { getQTipData } from '../Tooltip/qTip.utilities';
5
- const borderStyles = [
6
- 'tw-border-solid',
7
- 'tw-border',
8
- 'tw-rounded-sm',
9
- 'tw-border-sq-disabled-gray',
10
- 'dark:tw-border-gray-500',
11
- ].join(' ');
12
- const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
13
- const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
14
- const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 5, alignOffset = -35, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, ...tooltipProps }) => {
15
- const tooltipData = getQTipData(tooltipProps);
16
- return (React.createElement(DropdownMenu.Root, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown },
17
- React.createElement(DropdownMenu.Trigger, { id: id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, disabled: disabled },
18
- React.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none ${disabled ? disabledClasses : ''} ${extraClassNames || ''}` }, triggerIcon)),
19
- React.createElement(DropdownMenu.Content, { sideOffset: placementOffset, side: placement, align: align, alignOffset: alignOffset, asChild: true, onCloseAutoFocus: (e) => !setFocusOnTriggerOnClose && e.preventDefault(), className: "focus-visible:tw-outline-none tw-outline-none" },
20
- React.createElement("div", { "data-testid": containerTestId, className: bgStyles +
21
- ' tw-relative tw-z-[1000] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none' +
22
- ' data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out' +
23
- ' forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ' +
24
- borderStyles },
25
- hasArrow && (React.createElement(DropdownMenu.Arrow, { asChild: true },
26
- React.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500 tw-mt-[-7px]" }))),
27
- dropdownItems.map((item, index) => {
28
- if (item.isLabel) {
29
- return (React.createElement(DropdownMenu.Label, { key: (item.label || '') + index, className: item.containerExtraClassNames },
30
- item.icon && (React.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", color: item.iconColor, extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" })),
31
- React.createElement("div", { "data-testid": item.labelTestId, className: "tw-text-[13px] tw-text-sq-text-color dark:tw-text-sq-white tw-ml-1" }, item.label)));
32
- }
33
- if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
34
- return (React.createElement(DropdownMenu.Sub, { key: item.label + index },
35
- React.createElement(DropdownMenu.SubTrigger, { id: id, className: `tw-cursor-pointer tw-flex tw-justify-between dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-h-[27px] tw-pl-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-text-sq-disabled-gray data-[disabled]:tw-pointer-events-none ${item.containerExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled },
36
- React.createElement("div", { className: "tw-flex" },
37
- item.icon && (React.createElement(Icon, { icon: item.icon, extraClassNames: `tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px] ${item.iconExtraClassNames || ''}` })),
38
- React.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[13px] tw-ml-1 ${item.labelClasses}` }, item.label)),
39
- React.createElement(Icon, { small: true, icon: "fc-arrow-dropdown -tw-rotate-90", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px] tw-ml-4 tw-text-[8px] tw-justify-center tw-flex" })),
40
- React.createElement(DropdownMenu.SubContent, { className: "focus-visible:tw-outline-none tw-outline-none" },
41
- React.createElement("div", { "data-testid": containerTestId, className: bgStyles +
42
- ' tw-relative tw-z-[1000] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out' +
43
- ' forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ' +
44
- borderStyles }, item.subMenuItems.map((subItem, subIndex) => {
45
- return (React.createElement(DropdownMenu.Item, { key: subItem.label + subIndex, onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, className: "tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-text-sq-disabled-gray data-[disabled]:tw-pointer-events-none", disabled: subItem.disabled },
46
- subItem.iconClass && (React.createElement(Icon, { icon: subItem.iconClass, extraClassNames: `tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]` })),
47
- React.createElement("div", { className: `tw-text-[13px] tw-ml-1` }, subItem.label)));
48
- })))));
49
- }
50
- return (React.createElement("div", { key: item.label + index },
51
- React.createElement(DropdownMenu.Item, { key: item.label + index, "data-customid": item.itemCustomId, onSelect: (e) => {
52
- item.onClick(e);
53
- }, className: `tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-text-sq-disabled-gray data-[disabled]:tw-pointer-events-none ${item.containerExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled },
54
- item.icon && (React.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: (item.iconType || 'text'), color: item.iconColor, customId: item.iconCustomId, extraClassNames: `tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px] ${item.iconExtraClassNames || ''}` })),
55
- React.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[13px] tw-ml-1 ${item.labelClasses}` }, item.label)),
56
- item.hasDivider && (React.createElement(DropdownMenu.Separator, { "data-testid": `dropdown-divider-${index}`, className: "tw-h-[1px] tw-bg-sq-disabled-gray dark:tw-bg-gray-500 tw-my-[8px]" }))));
57
- })))));
58
- };
59
- export default ButtonWithDropdown;
60
- //# sourceMappingURL=ButtonWithDropdown.js.map