@seeqdev/qomponents 0.0.64 → 0.0.66

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 (152) hide show
  1. package/dist/ButtonWithDropdown/ButtonWithDropdown.types.d.ts +23 -8
  2. package/dist/ButtonWithPopover/ButtonWithPopover.types.d.ts +8 -0
  3. package/dist/index.esm.js +336 -27
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/index.js +336 -27
  6. package/dist/index.js.map +1 -1
  7. package/dist/styles.css +41 -50
  8. package/package.json +1 -1
  9. package/dist/Accordion/Accordion.js +0 -9
  10. package/dist/Accordion/Accordion.js.map +0 -1
  11. package/dist/Accordion/Accordion.stories.js +0 -109
  12. package/dist/Accordion/Accordion.stories.js.map +0 -1
  13. package/dist/Accordion/Accordion.test.js +0 -55
  14. package/dist/Accordion/Accordion.test.js.map +0 -1
  15. package/dist/Accordion/Accordion.types.js +0 -2
  16. package/dist/Accordion/Accordion.types.js.map +0 -1
  17. package/dist/Accordion/index.js +0 -2
  18. package/dist/Accordion/index.js.map +0 -1
  19. package/dist/Button/Button.js +0 -87
  20. package/dist/Button/Button.js.map +0 -1
  21. package/dist/Button/Button.stories.js +0 -77
  22. package/dist/Button/Button.stories.js.map +0 -1
  23. package/dist/Button/Button.test.js +0 -49
  24. package/dist/Button/Button.test.js.map +0 -1
  25. package/dist/Button/Button.types.js +0 -4
  26. package/dist/Button/Button.types.js.map +0 -1
  27. package/dist/Button/index.js +0 -2
  28. package/dist/Button/index.js.map +0 -1
  29. package/dist/ButtonWithDropdown/ButtonWithDropdown.js +0 -39
  30. package/dist/ButtonWithDropdown/ButtonWithDropdown.js.map +0 -1
  31. package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.js +0 -66
  32. package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.js.map +0 -1
  33. package/dist/ButtonWithDropdown/ButtonWithDropdown.test.js +0 -72
  34. package/dist/ButtonWithDropdown/ButtonWithDropdown.test.js.map +0 -1
  35. package/dist/ButtonWithDropdown/ButtonWithDropdown.types.js +0 -2
  36. package/dist/ButtonWithDropdown/ButtonWithDropdown.types.js.map +0 -1
  37. package/dist/ButtonWithDropdown/index.js +0 -2
  38. package/dist/ButtonWithDropdown/index.js.map +0 -1
  39. package/dist/ButtonWithPopover/ButtonWithPopover.js +0 -27
  40. package/dist/ButtonWithPopover/ButtonWithPopover.js.map +0 -1
  41. package/dist/ButtonWithPopover/ButtonWithPopover.stories.js +0 -50
  42. package/dist/ButtonWithPopover/ButtonWithPopover.stories.js.map +0 -1
  43. package/dist/ButtonWithPopover/ButtonWithPopover.test.js +0 -61
  44. package/dist/ButtonWithPopover/ButtonWithPopover.test.js.map +0 -1
  45. package/dist/ButtonWithPopover/ButtonWithPopover.types.js +0 -2
  46. package/dist/ButtonWithPopover/ButtonWithPopover.types.js.map +0 -1
  47. package/dist/ButtonWithPopover/index.js +0 -2
  48. package/dist/ButtonWithPopover/index.js.map +0 -1
  49. package/dist/Checkbox/Checkbox.js +0 -26
  50. package/dist/Checkbox/Checkbox.js.map +0 -1
  51. package/dist/Checkbox/Checkbox.stories.js +0 -34
  52. package/dist/Checkbox/Checkbox.stories.js.map +0 -1
  53. package/dist/Checkbox/Checkbox.test.js +0 -94
  54. package/dist/Checkbox/Checkbox.test.js.map +0 -1
  55. package/dist/Checkbox/Checkbox.types.js +0 -2
  56. package/dist/Checkbox/Checkbox.types.js.map +0 -1
  57. package/dist/Checkbox/index.js +0 -2
  58. package/dist/Checkbox/index.js.map +0 -1
  59. package/dist/Icon/Icon.js +0 -55
  60. package/dist/Icon/Icon.js.map +0 -1
  61. package/dist/Icon/Icon.stories.js +0 -41
  62. package/dist/Icon/Icon.stories.js.map +0 -1
  63. package/dist/Icon/Icon.test.js +0 -55
  64. package/dist/Icon/Icon.test.js.map +0 -1
  65. package/dist/Icon/Icon.types.js +0 -16
  66. package/dist/Icon/Icon.types.js.map +0 -1
  67. package/dist/Icon/index.js +0 -2
  68. package/dist/Icon/index.js.map +0 -1
  69. package/dist/Modal/Modal.js +0 -99
  70. package/dist/Modal/Modal.js.map +0 -1
  71. package/dist/Modal/Modal.stories.js +0 -176
  72. package/dist/Modal/Modal.stories.js.map +0 -1
  73. package/dist/Modal/Modal.test.js +0 -108
  74. package/dist/Modal/Modal.test.js.map +0 -1
  75. package/dist/Modal/Modal.types.js +0 -2
  76. package/dist/Modal/Modal.types.js.map +0 -1
  77. package/dist/Modal/index.js +0 -2
  78. package/dist/Modal/index.js.map +0 -1
  79. package/dist/Select/Select.js +0 -168
  80. package/dist/Select/Select.js.map +0 -1
  81. package/dist/Select/Select.stories.js +0 -72
  82. package/dist/Select/Select.stories.js.map +0 -1
  83. package/dist/Select/Select.test.js +0 -161
  84. package/dist/Select/Select.test.js.map +0 -1
  85. package/dist/Select/Select.types.js +0 -2
  86. package/dist/Select/Select.types.js.map +0 -1
  87. package/dist/Select/index.js +0 -2
  88. package/dist/Select/index.js.map +0 -1
  89. package/dist/Tabs/Tabs.js +0 -22
  90. package/dist/Tabs/Tabs.js.map +0 -1
  91. package/dist/Tabs/Tabs.stories.js +0 -91
  92. package/dist/Tabs/Tabs.stories.js.map +0 -1
  93. package/dist/Tabs/Tabs.test.js +0 -91
  94. package/dist/Tabs/Tabs.test.js.map +0 -1
  95. package/dist/Tabs/Tabs.types.js +0 -2
  96. package/dist/Tabs/Tabs.types.js.map +0 -1
  97. package/dist/Tabs/index.js +0 -2
  98. package/dist/Tabs/index.js.map +0 -1
  99. package/dist/TextArea/TextArea.js +0 -23
  100. package/dist/TextArea/TextArea.js.map +0 -1
  101. package/dist/TextArea/TextArea.stories.js +0 -39
  102. package/dist/TextArea/TextArea.stories.js.map +0 -1
  103. package/dist/TextArea/TextArea.test.js +0 -68
  104. package/dist/TextArea/TextArea.test.js.map +0 -1
  105. package/dist/TextArea/TextArea.types.js +0 -2
  106. package/dist/TextArea/TextArea.types.js.map +0 -1
  107. package/dist/TextArea/index.js +0 -2
  108. package/dist/TextArea/index.js.map +0 -1
  109. package/dist/TextField/TextField.js +0 -64
  110. package/dist/TextField/TextField.js.map +0 -1
  111. package/dist/TextField/TextField.stories.js +0 -41
  112. package/dist/TextField/TextField.stories.js.map +0 -1
  113. package/dist/TextField/TextField.test.js +0 -35
  114. package/dist/TextField/TextField.test.js.map +0 -1
  115. package/dist/TextField/TextField.types.js +0 -2
  116. package/dist/TextField/TextField.types.js.map +0 -1
  117. package/dist/TextField/index.js +0 -2
  118. package/dist/TextField/index.js.map +0 -1
  119. package/dist/ToolbarButton/ToolbarButton.js +0 -76
  120. package/dist/ToolbarButton/ToolbarButton.js.map +0 -1
  121. package/dist/ToolbarButton/ToolbarButton.stories.js +0 -89
  122. package/dist/ToolbarButton/ToolbarButton.stories.js.map +0 -1
  123. package/dist/ToolbarButton/ToolbarButton.test.js +0 -93
  124. package/dist/ToolbarButton/ToolbarButton.test.js.map +0 -1
  125. package/dist/ToolbarButton/ToolbarButton.types.js +0 -2
  126. package/dist/ToolbarButton/ToolbarButton.types.js.map +0 -1
  127. package/dist/ToolbarButton/index.js +0 -2
  128. package/dist/ToolbarButton/index.js.map +0 -1
  129. package/dist/Tooltip/QTip.stories.js +0 -40
  130. package/dist/Tooltip/QTip.stories.js.map +0 -1
  131. package/dist/Tooltip/QTip.types.js +0 -2
  132. package/dist/Tooltip/QTip.types.js.map +0 -1
  133. package/dist/Tooltip/QTipPerformance.stories.js +0 -30
  134. package/dist/Tooltip/QTipPerformance.stories.js.map +0 -1
  135. package/dist/Tooltip/Qtip.js +0 -154
  136. package/dist/Tooltip/Qtip.js.map +0 -1
  137. package/dist/Tooltip/Tooltip.js +0 -36
  138. package/dist/Tooltip/Tooltip.js.map +0 -1
  139. package/dist/Tooltip/Tooltip.stories.js +0 -32
  140. package/dist/Tooltip/Tooltip.stories.js.map +0 -1
  141. package/dist/Tooltip/Tooltip.types.js +0 -3
  142. package/dist/Tooltip/Tooltip.types.js.map +0 -1
  143. package/dist/Tooltip/TooltipPerformance.stories.js +0 -30
  144. package/dist/Tooltip/TooltipPerformance.stories.js.map +0 -1
  145. package/dist/Tooltip/index.js +0 -3
  146. package/dist/Tooltip/index.js.map +0 -1
  147. package/dist/Tooltip/qTip.utilities.js +0 -11
  148. package/dist/Tooltip/qTip.utilities.js.map +0 -1
  149. package/dist/types.js +0 -2
  150. package/dist/types.js.map +0 -1
  151. package/dist/utils/browserId.js +0 -29
  152. package/dist/utils/browserId.js.map +0 -1
package/dist/styles.css CHANGED
@@ -1945,8 +1945,8 @@ ol,
1945
1945
  margin-top: 0.5rem;
1946
1946
  }
1947
1947
 
1948
- .tw-mt-\[-2px\] {
1949
- margin-top: -2px;
1948
+ .tw-mt-\[-7px\] {
1949
+ margin-top: -7px;
1950
1950
  }
1951
1951
 
1952
1952
  .tw-inline-block {
@@ -1965,6 +1965,10 @@ ol,
1965
1965
  display: none;
1966
1966
  }
1967
1967
 
1968
+ .tw-h-10 {
1969
+ height: 2.5rem;
1970
+ }
1971
+
1968
1972
  .tw-h-3 {
1969
1973
  height: 0.75rem;
1970
1974
  }
@@ -1977,6 +1981,10 @@ ol,
1977
1981
  height: 10px;
1978
1982
  }
1979
1983
 
1984
+ .tw-h-\[15px\] {
1985
+ height: 15px;
1986
+ }
1987
+
1980
1988
  .tw-h-\[1px\] {
1981
1989
  height: 1px;
1982
1990
  }
@@ -1989,10 +1997,6 @@ ol,
1989
1997
  height: 45px;
1990
1998
  }
1991
1999
 
1992
- .tw-h-\[6px\] {
1993
- height: 6px;
1994
- }
1995
-
1996
2000
  .tw-h-full {
1997
2001
  height: 100%;
1998
2002
  }
@@ -2001,6 +2005,10 @@ ol,
2001
2005
  height: 34px;
2002
2006
  }
2003
2007
 
2008
+ .tw-w-10 {
2009
+ width: 2.5rem;
2010
+ }
2011
+
2004
2012
  .tw-w-3 {
2005
2013
  width: 0.75rem;
2006
2014
  }
@@ -2017,6 +2025,10 @@ ol,
2017
2025
  width: 10px;
2018
2026
  }
2019
2027
 
2028
+ .tw-w-\[15px\] {
2029
+ width: 15px;
2030
+ }
2031
+
2020
2032
  .tw-w-\[18px\] {
2021
2033
  width: 18px;
2022
2034
  }
@@ -2025,10 +2037,6 @@ ol,
2025
2037
  width: 200px;
2026
2038
  }
2027
2039
 
2028
- .tw-w-\[6px\] {
2029
- width: 6px;
2030
- }
2031
-
2032
2040
  .tw-w-full {
2033
2041
  width: 100%;
2034
2042
  }
@@ -2138,6 +2146,11 @@ ol,
2138
2146
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2139
2147
  }
2140
2148
 
2149
+ .-tw-rotate-90 {
2150
+ --tw-rotate: -90deg;
2151
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2152
+ }
2153
+
2141
2154
  .tw-rotate-45 {
2142
2155
  --tw-rotate: 45deg;
2143
2156
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2442,18 +2455,6 @@ ol,
2442
2455
  fill: transparent;
2443
2456
  }
2444
2457
 
2445
- .tw-fill-white {
2446
- fill: #fff;
2447
- }
2448
-
2449
- .tw-stroke-slate-300 {
2450
- stroke: #cbd5e1;
2451
- }
2452
-
2453
- .tw-stroke-2 {
2454
- stroke-width: 2;
2455
- }
2456
-
2457
2458
  .\!tw-p-0 {
2458
2459
  padding: 0px !important;
2459
2460
  }
@@ -2577,6 +2578,10 @@ ol,
2577
2578
  padding-left: 0.625rem;
2578
2579
  }
2579
2580
 
2581
+ .tw-pl-\[19px\] {
2582
+ padding-left: 19px;
2583
+ }
2584
+
2580
2585
  .tw-pr-1 {
2581
2586
  padding-right: 0.25rem;
2582
2587
  }
@@ -2632,6 +2637,10 @@ ol,
2632
2637
  line-height: 1rem;
2633
2638
  }
2634
2639
 
2640
+ .tw-font-bold {
2641
+ font-weight: 700;
2642
+ }
2643
+
2635
2644
  .tw-font-medium {
2636
2645
  font-weight: 500;
2637
2646
  }
@@ -3013,11 +3022,6 @@ ol,
3013
3022
  border-color: rgb(var(--sq-darkish-gray));
3014
3023
  }
3015
3024
 
3016
- .hover\:tw-border-sq-light-gray:hover {
3017
- --tw-border-opacity: 1;
3018
- border-color: rgb(var(--sq-light-gray));
3019
- }
3020
-
3021
3025
  .hover\:tw-border-sq-link:hover {
3022
3026
  --tw-border-opacity: 1;
3023
3027
  border-color: rgb(var(--sq-link));
@@ -3033,11 +3037,6 @@ ol,
3033
3037
  background-color: rgb(var(--sq-color-highlight));
3034
3038
  }
3035
3039
 
3036
- .hover\:tw-bg-sq-colored-hover:hover {
3037
- --tw-bg-opacity: 1;
3038
- background-color: rgb(var(--sq-colored-hover));
3039
- }
3040
-
3041
3040
  .hover\:tw-bg-sq-danger-color-hover:hover {
3042
3041
  --tw-bg-opacity: 1;
3043
3042
  background-color: rgb(212 59 55 / var(--tw-bg-opacity));
@@ -3090,11 +3089,6 @@ ol,
3090
3089
  border-color: rgb(var(--sq-color-dark));
3091
3090
  }
3092
3091
 
3093
- .focus\:tw-border-sq-light-gray:focus {
3094
- --tw-border-opacity: 1;
3095
- border-color: rgb(var(--sq-light-gray));
3096
- }
3097
-
3098
3092
  .focus\:tw-bg-sq-dark-gray:focus {
3099
3093
  --tw-bg-opacity: 1;
3100
3094
  background-color: rgb(var(--sq-dark-gray));
@@ -3291,6 +3285,11 @@ ol,
3291
3285
  color: rgb(var(--sq-disabled-gray));
3292
3286
  }
3293
3287
 
3288
+ .tw-dark .dark\:tw-border-gray-500 {
3289
+ --tw-border-opacity: 1;
3290
+ border-color: rgb(107 114 128 / var(--tw-border-opacity));
3291
+ }
3292
+
3294
3293
  .tw-dark .dark\:tw-border-gray-700 {
3295
3294
  --tw-border-opacity: 1;
3296
3295
  border-color: rgb(55 65 81 / var(--tw-border-opacity));
@@ -3321,6 +3320,11 @@ ol,
3321
3320
  border-bottom-color: rgb(var(--sq-color-dark));
3322
3321
  }
3323
3322
 
3323
+ .tw-dark .dark\:tw-bg-gray-500 {
3324
+ --tw-bg-opacity: 1;
3325
+ background-color: rgb(107 114 128 / var(--tw-bg-opacity));
3326
+ }
3327
+
3324
3328
  .tw-dark .dark\:tw-bg-gray-700 {
3325
3329
  --tw-bg-opacity: 1;
3326
3330
  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
@@ -3356,14 +3360,6 @@ ol,
3356
3360
  background-color: rgb(var(--sq-multi-gray-dark));
3357
3361
  }
3358
3362
 
3359
- .tw-dark .dark\:tw-fill-sq-dark-background {
3360
- fill: rgb(var(--sq-dark-background));
3361
- }
3362
-
3363
- .tw-dark .dark\:tw-stroke-sq-color-dark-dark {
3364
- stroke: rgb(var(--sq-color-dark-dark));
3365
- }
3366
-
3367
3363
  .tw-dark .dark\:tw-text-sq-color-dark-dark {
3368
3364
  --tw-text-opacity: 1;
3369
3365
  color: rgb(var(--sq-color-dark-dark));
@@ -3459,11 +3455,6 @@ ol,
3459
3455
  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
3460
3456
  }
3461
3457
 
3462
- .tw-dark .hover\:dark\:tw-bg-sq-colored-hover-dark:hover {
3463
- --tw-bg-opacity: 1;
3464
- background-color: rgb(var(--sq-colored-hover-dark));
3465
- }
3466
-
3467
3458
  .tw-dark .dark\:hover\:tw-text-sq-color-dark-dark:hover {
3468
3459
  --tw-text-opacity: 1;
3469
3460
  color: rgb(var(--sq-color-dark-dark));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seeqdev/qomponents",
3
- "version": "0.0.64",
3
+ "version": "0.0.66",
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,87 +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, 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
- return (React.createElement("button", { id: id, ...tooltipData, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
76
- stopPropagation && e.stopPropagation();
77
- onClick && onClick(e);
78
- }, onMouseDown: (e) => {
79
- if (preventBlur) {
80
- e.preventDefault();
81
- }
82
- }, className: appliedClasses },
83
- icon && (React.createElement(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label ? `tw-mr-1 ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` })),
84
- label));
85
- };
86
- export default Button;
87
- //# 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,77 +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
- return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
48
- React.createElement("div", { className: "color_topic" },
49
- React.createElement("b", null, "Topic Colors"),
50
- renderButtonWithIcon()),
51
- React.createElement("div", { className: "color_analysis" },
52
- React.createElement("b", null, "Analysis Colors"),
53
- renderButtonWithIcon()),
54
- React.createElement("div", { className: "color_datalab" },
55
- React.createElement("b", null, "Datalab Colors"),
56
- renderButtonWithIcon())));
57
- };
58
- export const DisabledButton = () => {
59
- const renderDisabledButton = () => (React.createElement(React.Fragment, null,
60
- React.createElement("div", { className: "tw-p-4" },
61
- React.createElement(Button, { disabled: true, variant: "theme", label: "Disabled Button" }),
62
- React.createElement(Button, { extraClassNames: "tw-m-5", disabled: true, label: "Disabled Button" })),
63
- React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
64
- React.createElement(Button, { disabled: true, variant: "theme", label: "Disabled Button" }),
65
- React.createElement(Button, { extraClassNames: "tw-m-5", disabled: true, label: "Disabled Button" }))));
66
- return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
67
- React.createElement("div", { className: "color_topic" },
68
- React.createElement("b", null, "Topic Colors"),
69
- renderDisabledButton()),
70
- React.createElement("div", { className: "color_analysis" },
71
- React.createElement("b", null, "Analysis Colors"),
72
- renderDisabledButton()),
73
- React.createElement("div", { className: "color_datalab" },
74
- React.createElement("b", null, "Datalab Colors"),
75
- renderDisabledButton())));
76
- };
77
- //# 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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"}