@seeqdev/qomponents 0.0.74 → 0.0.76
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.
- package/dist/NewWorkbench/NewWorkbench.types.d.ts +11 -29
- package/dist/index.d.ts +2 -0
- package/dist/index.esm.js +77 -36
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +77 -35
- package/dist/index.js.map +1 -1
- package/dist/styles.css +71 -0
- package/package.json +1 -1
- package/dist/NewWorkbench/NewWorkbench.js +0 -43
- package/dist/NewWorkbench/NewWorkbench.js.map +0 -1
- package/dist/NewWorkbench/NewWorkbench.stories.js +0 -60
- package/dist/NewWorkbench/NewWorkbench.stories.js.map +0 -1
- package/dist/NewWorkbench/NewWorkbench.test.js +0 -72
- package/dist/NewWorkbench/NewWorkbench.test.js.map +0 -1
- package/dist/NewWorkbench/NewWorkbench.types.js +0 -2
- package/dist/NewWorkbench/NewWorkbench.types.js.map +0 -1
- package/dist/NewWorkbench/index.js +0 -2
- package/dist/NewWorkbench/index.js.map +0 -1
- package/dist/NewWorkbench/variants.d.ts +0 -3
- package/dist/NewWorkbench/variants.js +0 -11
- package/dist/NewWorkbench/variants.js.map +0 -1
package/dist/styles.css
CHANGED
|
@@ -1993,6 +1993,10 @@ ol,
|
|
|
1993
1993
|
height: 0.875rem;
|
|
1994
1994
|
}
|
|
1995
1995
|
|
|
1996
|
+
.tw-h-8 {
|
|
1997
|
+
height: 2rem;
|
|
1998
|
+
}
|
|
1999
|
+
|
|
1996
2000
|
.tw-h-\[10px\] {
|
|
1997
2001
|
height: 10px;
|
|
1998
2002
|
}
|
|
@@ -2037,6 +2041,10 @@ ol,
|
|
|
2037
2041
|
width: 18rem;
|
|
2038
2042
|
}
|
|
2039
2043
|
|
|
2044
|
+
.tw-w-8 {
|
|
2045
|
+
width: 2rem;
|
|
2046
|
+
}
|
|
2047
|
+
|
|
2040
2048
|
.tw-w-\[10px\] {
|
|
2041
2049
|
width: 10px;
|
|
2042
2050
|
}
|
|
@@ -2053,6 +2061,10 @@ ol,
|
|
|
2053
2061
|
width: 200px;
|
|
2054
2062
|
}
|
|
2055
2063
|
|
|
2064
|
+
.tw-w-\[600px\] {
|
|
2065
|
+
width: 600px;
|
|
2066
|
+
}
|
|
2067
|
+
|
|
2056
2068
|
.tw-w-full {
|
|
2057
2069
|
width: 100%;
|
|
2058
2070
|
}
|
|
@@ -2214,6 +2226,10 @@ ol,
|
|
|
2214
2226
|
flex-wrap: wrap;
|
|
2215
2227
|
}
|
|
2216
2228
|
|
|
2229
|
+
.tw-items-end {
|
|
2230
|
+
align-items: flex-end;
|
|
2231
|
+
}
|
|
2232
|
+
|
|
2217
2233
|
.tw-items-center {
|
|
2218
2234
|
align-items: center;
|
|
2219
2235
|
}
|
|
@@ -2266,6 +2282,10 @@ ol,
|
|
|
2266
2282
|
border-radius: 0.25rem;
|
|
2267
2283
|
}
|
|
2268
2284
|
|
|
2285
|
+
.tw-rounded-\[3px\] {
|
|
2286
|
+
border-radius: 3px;
|
|
2287
|
+
}
|
|
2288
|
+
|
|
2269
2289
|
.tw-rounded-full {
|
|
2270
2290
|
border-radius: 9999px;
|
|
2271
2291
|
}
|
|
@@ -2507,6 +2527,10 @@ ol,
|
|
|
2507
2527
|
padding: 0.5rem;
|
|
2508
2528
|
}
|
|
2509
2529
|
|
|
2530
|
+
.tw-p-\[10px\] {
|
|
2531
|
+
padding: 10px;
|
|
2532
|
+
}
|
|
2533
|
+
|
|
2510
2534
|
.tw-px-1 {
|
|
2511
2535
|
padding-left: 0.25rem;
|
|
2512
2536
|
padding-right: 0.25rem;
|
|
@@ -2598,6 +2622,10 @@ ol,
|
|
|
2598
2622
|
padding-left: 0.625rem;
|
|
2599
2623
|
}
|
|
2600
2624
|
|
|
2625
|
+
.tw-pl-5 {
|
|
2626
|
+
padding-left: 1.25rem;
|
|
2627
|
+
}
|
|
2628
|
+
|
|
2601
2629
|
.tw-pl-\[19px\] {
|
|
2602
2630
|
padding-left: 19px;
|
|
2603
2631
|
}
|
|
@@ -2638,10 +2666,19 @@ ol,
|
|
|
2638
2666
|
font-size: 15px;
|
|
2639
2667
|
}
|
|
2640
2668
|
|
|
2669
|
+
.tw-text-\[22px\] {
|
|
2670
|
+
font-size: 22px;
|
|
2671
|
+
}
|
|
2672
|
+
|
|
2641
2673
|
.tw-text-\[8px\] {
|
|
2642
2674
|
font-size: 8px;
|
|
2643
2675
|
}
|
|
2644
2676
|
|
|
2677
|
+
.tw-text-base {
|
|
2678
|
+
font-size: 1rem;
|
|
2679
|
+
line-height: 1.5rem;
|
|
2680
|
+
}
|
|
2681
|
+
|
|
2645
2682
|
.tw-text-sm {
|
|
2646
2683
|
font-size: 0.875rem;
|
|
2647
2684
|
line-height: 1.25rem;
|
|
@@ -2657,6 +2694,14 @@ ol,
|
|
|
2657
2694
|
line-height: 1rem;
|
|
2658
2695
|
}
|
|
2659
2696
|
|
|
2697
|
+
.tw-font-\[400\] {
|
|
2698
|
+
font-weight: 400;
|
|
2699
|
+
}
|
|
2700
|
+
|
|
2701
|
+
.tw-font-\[600\] {
|
|
2702
|
+
font-weight: 600;
|
|
2703
|
+
}
|
|
2704
|
+
|
|
2660
2705
|
.tw-font-bold {
|
|
2661
2706
|
font-weight: 700;
|
|
2662
2707
|
}
|
|
@@ -2665,10 +2710,26 @@ ol,
|
|
|
2665
2710
|
font-weight: 500;
|
|
2666
2711
|
}
|
|
2667
2712
|
|
|
2713
|
+
.tw-font-normal {
|
|
2714
|
+
font-weight: 400;
|
|
2715
|
+
}
|
|
2716
|
+
|
|
2717
|
+
.tw-font-semibold {
|
|
2718
|
+
font-weight: 600;
|
|
2719
|
+
}
|
|
2720
|
+
|
|
2668
2721
|
.tw-italic {
|
|
2669
2722
|
font-style: italic;
|
|
2670
2723
|
}
|
|
2671
2724
|
|
|
2725
|
+
.tw-not-italic {
|
|
2726
|
+
font-style: normal;
|
|
2727
|
+
}
|
|
2728
|
+
|
|
2729
|
+
.tw-leading-\[20px\] {
|
|
2730
|
+
line-height: 20px;
|
|
2731
|
+
}
|
|
2732
|
+
|
|
2672
2733
|
.tw-leading-none {
|
|
2673
2734
|
line-height: 1;
|
|
2674
2735
|
}
|
|
@@ -2677,6 +2738,11 @@ ol,
|
|
|
2677
2738
|
line-height: 1.5;
|
|
2678
2739
|
}
|
|
2679
2740
|
|
|
2741
|
+
.\!tw-text-sq-disabled-gray {
|
|
2742
|
+
--tw-text-opacity: 1 !important;
|
|
2743
|
+
color: rgb(var(--sq-disabled-gray)) !important;
|
|
2744
|
+
}
|
|
2745
|
+
|
|
2680
2746
|
.tw-text-gray-400 {
|
|
2681
2747
|
--tw-text-opacity: 1;
|
|
2682
2748
|
color: rgb(156 163 175 / var(--tw-text-opacity));
|
|
@@ -2737,6 +2803,11 @@ ol,
|
|
|
2737
2803
|
color: rgb(var(--sq-warning-color));
|
|
2738
2804
|
}
|
|
2739
2805
|
|
|
2806
|
+
.tw-text-sq-white {
|
|
2807
|
+
--tw-text-opacity: 1;
|
|
2808
|
+
color: rgb(var(--sq-white));
|
|
2809
|
+
}
|
|
2810
|
+
|
|
2740
2811
|
.tw-text-white {
|
|
2741
2812
|
--tw-text-opacity: 1;
|
|
2742
2813
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
package/package.json
CHANGED
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
|
3
|
-
import { getQTipData } from '../Tooltip/qTip.utilities';
|
|
4
|
-
import { NewWorkbenchItem } from './variants';
|
|
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 variants = {
|
|
13
|
-
newWorkbenchItem: NewWorkbenchItem,
|
|
14
|
-
};
|
|
15
|
-
const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
16
|
-
const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
17
|
-
const NewWorkbench = ({ newWorkbenchItems, trigger, id, variant = 'newWorkbenchItem', extraClassNames, containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 5, alignOffset = -35, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, ...tooltipProps }) => {
|
|
18
|
-
const tooltipData = getQTipData(tooltipProps);
|
|
19
|
-
return (React.createElement(DropdownMenu.Root, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown },
|
|
20
|
-
React.createElement(DropdownMenu.Trigger, { id: id, "data-testid": id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, asChild: true, disabled: disabled },
|
|
21
|
-
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 || ''}` }, trigger)),
|
|
22
|
-
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" },
|
|
23
|
-
React.createElement("div", { "data-testid": containerTestId, className: bgStyles +
|
|
24
|
-
' tw-relative tw-z-[1200] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none' +
|
|
25
|
-
' data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out' +
|
|
26
|
-
' 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 ' +
|
|
27
|
-
borderStyles },
|
|
28
|
-
hasArrow && (React.createElement(DropdownMenu.Arrow, { asChild: true },
|
|
29
|
-
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]" }))),
|
|
30
|
-
newWorkbenchItems.map((item, index) => {
|
|
31
|
-
if (variant && variants[variant]) {
|
|
32
|
-
const CustomComponent = variants[variant];
|
|
33
|
-
return (React.createElement(React.Fragment, null,
|
|
34
|
-
React.createElement(DropdownMenu.Item, { key: item.label + index, onSelect: (e) => {
|
|
35
|
-
item.onClick(e);
|
|
36
|
-
}, 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-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 },
|
|
37
|
-
React.createElement(CustomComponent, { ...item })),
|
|
38
|
-
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]" }))));
|
|
39
|
-
}
|
|
40
|
-
})))));
|
|
41
|
-
};
|
|
42
|
-
export default NewWorkbench;
|
|
43
|
-
//# sourceMappingURL=NewWorkbench.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"NewWorkbench.js","sourceRoot":"","sources":["../../src/NewWorkbench/NewWorkbench.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import NewWorkbench from './NewWorkbench';
|
|
3
|
-
import { QTip } from '../Tooltip/Qtip';
|
|
4
|
-
import Button from '../Button/Button';
|
|
5
|
-
export default {
|
|
6
|
-
title: 'New Workbench',
|
|
7
|
-
};
|
|
8
|
-
const options = [
|
|
9
|
-
{
|
|
10
|
-
label: 'NEW WORKBOOK',
|
|
11
|
-
description: 'WORKBOOK_DESCRIPTION',
|
|
12
|
-
icon: 'fc-analysis',
|
|
13
|
-
id: 'newWorkbook',
|
|
14
|
-
disabled: true,
|
|
15
|
-
iconExtraClassNames: 'workbenchDisplay',
|
|
16
|
-
onClick: () => { },
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
label: 'NEW REPORTBINDER',
|
|
20
|
-
description: 'REPORTBINDER_DESCRIPTION',
|
|
21
|
-
icon: 'fc-report',
|
|
22
|
-
onClick: () => { },
|
|
23
|
-
id: 'newReportBinder',
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
label: 'NEW DATALAB',
|
|
27
|
-
description: 'DATALAB_DESCRIPTION',
|
|
28
|
-
icon: 'fc-seeq-datalab',
|
|
29
|
-
id: 'newDataLab',
|
|
30
|
-
onClick: () => { },
|
|
31
|
-
divider: true,
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
label: 'FOLDER',
|
|
35
|
-
icon: 'fa-folder-open',
|
|
36
|
-
onClick: () => { },
|
|
37
|
-
id: 'newFolder',
|
|
38
|
-
},
|
|
39
|
-
];
|
|
40
|
-
export const AllNewWorkbenchVariants = () => {
|
|
41
|
-
const [openDropdown, setOpenDropdown] = React.useState('');
|
|
42
|
-
const allNewWorkbenchs = (color, isDark) => (React.createElement("div", { className: isDark ? 'tw-dark tw-bg-sq-dark-background' : '' },
|
|
43
|
-
React.createElement("div", { className: "tw-p-5 " },
|
|
44
|
-
React.createElement(NewWorkbench, { trigger: React.createElement(Button, { label: "New", icon: "fa-plus", variant: "theme" }), key: "newWorkbenchItem", "data-testid": "homeScreenNewButton", id: "newWorkbenchItem", variant: "newWorkbenchItem", align: "start", alignOffset: 0, placementOffset: 0, newWorkbenchItems: options }))));
|
|
45
|
-
const renderAllVariations = (color) => (React.createElement("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4 tw-p-4" },
|
|
46
|
-
allNewWorkbenchs(color),
|
|
47
|
-
allNewWorkbenchs(color, true)));
|
|
48
|
-
return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
|
|
49
|
-
React.createElement(QTip, null),
|
|
50
|
-
React.createElement("div", { className: "color_topic" },
|
|
51
|
-
React.createElement("b", null, "Topic Colors"),
|
|
52
|
-
renderAllVariations('topic')),
|
|
53
|
-
React.createElement("div", { className: "color_analysis" },
|
|
54
|
-
React.createElement("b", null, "Analysis Colors"),
|
|
55
|
-
renderAllVariations('analysis')),
|
|
56
|
-
React.createElement("div", { className: "color_datalab" },
|
|
57
|
-
React.createElement("b", null, "Datalab Colors"),
|
|
58
|
-
renderAllVariations('datalab'))));
|
|
59
|
-
};
|
|
60
|
-
//# sourceMappingURL=NewWorkbench.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"NewWorkbench.stories.js","sourceRoot":"","sources":["../../src/NewWorkbench/NewWorkbench.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC,eAAe;IACb,KAAK,EAAE,eAAe;CACvB,CAAC;AAEF,MAAM,OAAO,GAAG;IACd;QACE,KAAK,EAAE,cAAc;QACrB,WAAW,EAAE,sBAAsB;QACnC,IAAI,EAAE,aAAa;QACnB,EAAE,EAAE,aAAa;QACjB,QAAQ,EAAE,IAAI;QACd,mBAAmB,EAAE,kBAAkB;QACvC,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;KAClB;IACD;QACE,KAAK,EAAE,kBAAkB;QACzB,WAAW,EAAE,0BAA0B;QACvC,IAAI,EAAE,WAAW;QACjB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;QACjB,EAAE,EAAE,iBAAiB;KACtB;IACD;QACE,KAAK,EAAE,aAAa;QACpB,WAAW,EAAE,qBAAqB;QAClC,IAAI,EAAE,iBAAiB;QACvB,EAAE,EAAE,YAAY;QAChB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;QACjB,OAAO,EAAE,IAAI;KACd;IACD;QACE,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,gBAAgB;QACtB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;QACjB,EAAE,EAAE,WAAW;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAC1C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC3D,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,MAAgB,EAAE,EAAE,CAAC,CAC5D,6BAAK,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,EAAE;QAC9D,6BAAK,SAAS,EAAC,SAAS;YACtB,oBAAC,YAAY,IACX,OAAO,EAAE,oBAAC,MAAM,IAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,SAAS,EAAC,OAAO,EAAC,OAAO,GAAG,EAC9D,GAAG,EAAC,kBAAkB,iBACV,qBAAqB,EACjC,EAAE,EAAC,kBAAkB,EACrB,OAAO,EAAC,kBAAkB,EAC1B,KAAK,EAAC,OAAO,EACb,WAAW,EAAE,CAAC,EACd,eAAe,EAAE,CAAC,EAClB,iBAAiB,EAAE,OAAO,GAAiB,CACzC,CACF,CACP,CAAC;IACF,MAAM,mBAAmB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAC7C,6BAAK,SAAS,EAAC,wCAAwC;QACpD,gBAAgB,CAAC,KAAK,CAAC;QACvB,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,CAC1B,CACP,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,oBAAC,IAAI,OAAG;QACR,6BAAK,SAAS,EAAC,aAAa;YAC1B,8CAAmB;YAClB,mBAAmB,CAAC,OAAO,CAAC,CACzB;QAEN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,iDAAsB;YACrB,mBAAmB,CAAC,UAAU,CAAC,CAC5B;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,mBAAmB,CAAC,SAAS,CAAC,CAC3B,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,72 +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 ButtonWithDropdown from './NewWorkbench';
|
|
6
|
-
import Icon from '../Icon';
|
|
7
|
-
describe('NewWorkbench', () => {
|
|
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
|
-
containerTestId: 'basic-dropdown1',
|
|
14
|
-
tooltip: 'This is a small dropdown.',
|
|
15
|
-
tooltipDelay: 0,
|
|
16
|
-
tooltipPlacement: 'top',
|
|
17
|
-
isHtmlTooltip: false,
|
|
18
|
-
newWorkbenchItems: [
|
|
19
|
-
{ label: 'Orange', icon: 'fc-data-file', onClick: mockOnClick },
|
|
20
|
-
{ label: 'Mango', icon: 'fc-user-community', onClick: mockOnClick },
|
|
21
|
-
{ label: 'Guava', icon: 'fc-user-community', onClick: mockOnClick },
|
|
22
|
-
{ label: 'Banana', icon: 'fc-user-community', onClick: mockOnClick },
|
|
23
|
-
],
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
let tc;
|
|
27
|
-
beforeEach(() => {
|
|
28
|
-
tc = new Context();
|
|
29
|
-
jest.clearAllMocks();
|
|
30
|
-
});
|
|
31
|
-
const renderButtonWithDropdown = (props) => render(React.createElement(ButtonWithDropdown, { ...props }));
|
|
32
|
-
const openDropdown = async () => {
|
|
33
|
-
const popover = screen.getByTestId(testId);
|
|
34
|
-
await userEvent.click(popover);
|
|
35
|
-
};
|
|
36
|
-
test('renders trigger and opens dropdown content on trigger click', async () => {
|
|
37
|
-
renderButtonWithDropdown(tc.props);
|
|
38
|
-
expect(screen.getByTestId('trigger-icon')).toBeInTheDocument();
|
|
39
|
-
await openDropdown();
|
|
40
|
-
expect(screen.getByText('Orange')).toBeInTheDocument();
|
|
41
|
-
});
|
|
42
|
-
test('renders dividers correctly', async () => {
|
|
43
|
-
tc.props.newWorkbenchItems[1].hasDivider = true;
|
|
44
|
-
renderButtonWithDropdown(tc.props);
|
|
45
|
-
expect(screen.getByTestId('trigger-icon')).toBeInTheDocument();
|
|
46
|
-
await openDropdown();
|
|
47
|
-
expect(screen.getByText('Orange')).toBeInTheDocument();
|
|
48
|
-
expect(screen.getByTestId('dropdown-divider-1')).toBeInTheDocument();
|
|
49
|
-
});
|
|
50
|
-
test('calls onClick handler when dropdown item is selected', async () => {
|
|
51
|
-
renderButtonWithDropdown(tc.props);
|
|
52
|
-
await openDropdown();
|
|
53
|
-
const item1 = screen.getByText('Orange');
|
|
54
|
-
await userEvent.click(item1);
|
|
55
|
-
expect(mockOnClick).toHaveBeenCalledTimes(1);
|
|
56
|
-
});
|
|
57
|
-
test('closes dropdown when item is clicked', async () => {
|
|
58
|
-
renderButtonWithDropdown(tc.props);
|
|
59
|
-
await openDropdown();
|
|
60
|
-
const item1 = screen.getByText('Orange');
|
|
61
|
-
await userEvent.click(item1);
|
|
62
|
-
expect(mockOnClick).toHaveBeenCalledTimes(1);
|
|
63
|
-
expect(screen.queryByText('Orange')).not.toBeInTheDocument();
|
|
64
|
-
});
|
|
65
|
-
test('does not open when disabled', async () => {
|
|
66
|
-
tc.props.disabled = true;
|
|
67
|
-
renderButtonWithDropdown(tc.props);
|
|
68
|
-
await openDropdown();
|
|
69
|
-
expect(screen.queryByText('Orange')).not.toBeInTheDocument();
|
|
70
|
-
});
|
|
71
|
-
});
|
|
72
|
-
//# sourceMappingURL=NewWorkbench.test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"NewWorkbench.test.js","sourceRoot":"","sources":["../../src/NewWorkbench/NewWorkbench.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"NewWorkbench.types.js","sourceRoot":"","sources":["../../src/NewWorkbench/NewWorkbench.types.ts"],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/NewWorkbench/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import Icon from '../Icon/Icon';
|
|
3
|
-
export const NewWorkbenchItem = (item) => {
|
|
4
|
-
return (React.createElement("div", { className: "tw-flex-col tw-flex tw-p-[10px] tw-pl-5 tw-w-[600px]" },
|
|
5
|
-
React.createElement("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end" },
|
|
6
|
-
item.icon && (React.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", extraClassNames: 'tw-rounded-[3px] tw-h-8 tw-w-8 tw-flex tw-justify-center tw-items-center tw-bg-sq-color-dark dark:tw-text-sq-white tw-text-[22px] tw-text-sq-white ' +
|
|
7
|
-
item.iconExtraClassNames })),
|
|
8
|
-
React.createElement("h4", { className: "tw-text-base tw-font-[600] tw-leading-[20px]" }, item.label)),
|
|
9
|
-
React.createElement("div", { className: "tw-text-[13px] tw-font-[400]" }, item.description)));
|
|
10
|
-
};
|
|
11
|
-
//# sourceMappingURL=variants.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"variants.js","sourceRoot":"","sources":["../../src/NewWorkbench/variants.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,IAAI,MAAM,cAAc,CAAC;AAEhC,MAAM,CAAC,MAAM,gBAAgB,GAAgC,CAAC,IAAI,EAAE,EAAE;IACpE,OAAO,CACL,6BAAK,SAAS,EAAC,sDAAsD;QACnE,6BAAK,SAAS,EAAC,2CAA2C;YACvD,IAAI,CAAC,IAAI,IAAI,CACZ,oBAAC,IAAI,IACH,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,IAAI,EAAC,MAAM,EACX,eAAe,EACb,qJAAqJ;oBACrJ,IAAI,CAAC,mBAAmB,GAE1B,CACH;YACD,4BAAI,SAAS,EAAC,8CAA8C,IAAE,IAAI,CAAC,KAAK,CAAM,CAC1E;QACN,6BAAK,SAAS,EAAC,8BAA8B,IAAE,IAAI,CAAC,WAAW,CAAO,CAClE,CACP,CAAC;AACJ,CAAC,CAAC"}
|