@seeqdev/qomponents 0.0.76 → 0.0.77
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/Accordion/Accordion.js +9 -0
- package/dist/Accordion/Accordion.js.map +1 -0
- package/dist/Accordion/Accordion.stories.js +109 -0
- package/dist/Accordion/Accordion.stories.js.map +1 -0
- package/dist/Accordion/Accordion.test.js +55 -0
- package/dist/Accordion/Accordion.test.js.map +1 -0
- package/dist/Accordion/Accordion.types.js +2 -0
- package/dist/Accordion/Accordion.types.js.map +1 -0
- package/dist/Accordion/index.js +2 -0
- package/dist/Accordion/index.js.map +1 -0
- package/dist/Button/Button.js +90 -0
- package/dist/Button/Button.js.map +1 -0
- package/dist/Button/Button.stories.js +85 -0
- package/dist/Button/Button.stories.js.map +1 -0
- package/dist/Button/Button.test.js +49 -0
- package/dist/Button/Button.test.js.map +1 -0
- package/dist/Button/Button.types.js +5 -0
- package/dist/Button/Button.types.js.map +1 -0
- package/dist/Button/index.js +2 -0
- package/dist/Button/index.js.map +1 -0
- package/dist/ButtonWithDropdown/ButtonWithDropdown.js +64 -0
- package/dist/ButtonWithDropdown/ButtonWithDropdown.js.map +1 -0
- package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.js +93 -0
- package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.js.map +1 -0
- package/dist/ButtonWithDropdown/ButtonWithDropdown.test.js +72 -0
- package/dist/ButtonWithDropdown/ButtonWithDropdown.test.js.map +1 -0
- package/dist/ButtonWithDropdown/ButtonWithDropdown.types.js +2 -0
- package/dist/ButtonWithDropdown/ButtonWithDropdown.types.js.map +1 -0
- package/dist/ButtonWithDropdown/index.js +2 -0
- package/dist/ButtonWithDropdown/index.js.map +1 -0
- package/dist/ButtonWithPopover/ButtonWithPopover.js +53 -0
- package/dist/ButtonWithPopover/ButtonWithPopover.js.map +1 -0
- package/dist/ButtonWithPopover/ButtonWithPopover.stories.js +72 -0
- package/dist/ButtonWithPopover/ButtonWithPopover.stories.js.map +1 -0
- package/dist/ButtonWithPopover/ButtonWithPopover.test.js +82 -0
- package/dist/ButtonWithPopover/ButtonWithPopover.test.js.map +1 -0
- package/dist/ButtonWithPopover/ButtonWithPopover.types.js +2 -0
- package/dist/ButtonWithPopover/ButtonWithPopover.types.js.map +1 -0
- package/dist/ButtonWithPopover/index.js +2 -0
- package/dist/ButtonWithPopover/index.js.map +1 -0
- package/dist/Checkbox/Checkbox.js +26 -0
- package/dist/Checkbox/Checkbox.js.map +1 -0
- package/dist/Checkbox/Checkbox.stories.js +34 -0
- package/dist/Checkbox/Checkbox.stories.js.map +1 -0
- package/dist/Checkbox/Checkbox.test.js +94 -0
- package/dist/Checkbox/Checkbox.test.js.map +1 -0
- package/dist/Checkbox/Checkbox.types.js +2 -0
- package/dist/Checkbox/Checkbox.types.js.map +1 -0
- package/dist/Checkbox/index.js +2 -0
- package/dist/Checkbox/index.js.map +1 -0
- package/dist/Icon/Icon.js +55 -0
- package/dist/Icon/Icon.js.map +1 -0
- package/dist/Icon/Icon.stories.js +41 -0
- package/dist/Icon/Icon.stories.js.map +1 -0
- package/dist/Icon/Icon.test.js +55 -0
- package/dist/Icon/Icon.test.js.map +1 -0
- package/dist/Icon/Icon.types.js +16 -0
- package/dist/Icon/Icon.types.js.map +1 -0
- package/dist/Icon/index.js +2 -0
- package/dist/Icon/index.js.map +1 -0
- package/dist/Modal/Modal.js +88 -0
- package/dist/Modal/Modal.js.map +1 -0
- package/dist/Modal/Modal.stories.js +176 -0
- package/dist/Modal/Modal.stories.js.map +1 -0
- package/dist/Modal/Modal.test.js +108 -0
- package/dist/Modal/Modal.test.js.map +1 -0
- package/dist/Modal/Modal.types.js +2 -0
- package/dist/Modal/Modal.types.js.map +1 -0
- package/dist/Modal/index.js +2 -0
- package/dist/Modal/index.js.map +1 -0
- package/dist/NewWorkbench/NewWorkbench.js +55 -0
- package/dist/NewWorkbench/NewWorkbench.js.map +1 -0
- package/dist/NewWorkbench/NewWorkbench.stories.js +71 -0
- package/dist/NewWorkbench/NewWorkbench.stories.js.map +1 -0
- package/dist/NewWorkbench/NewWorkbench.test.js +72 -0
- package/dist/NewWorkbench/NewWorkbench.test.js.map +1 -0
- package/dist/NewWorkbench/NewWorkbench.types.js +2 -0
- package/dist/NewWorkbench/NewWorkbench.types.js.map +1 -0
- package/dist/NewWorkbench/index.js +2 -0
- package/dist/NewWorkbench/index.js.map +1 -0
- package/dist/Select/Select.js +171 -0
- package/dist/Select/Select.js.map +1 -0
- package/dist/Select/Select.stories.js +77 -0
- package/dist/Select/Select.stories.js.map +1 -0
- package/dist/Select/Select.test.js +182 -0
- package/dist/Select/Select.test.js.map +1 -0
- package/dist/Select/Select.types.js +2 -0
- package/dist/Select/Select.types.js.map +1 -0
- package/dist/Select/index.js +2 -0
- package/dist/Select/index.js.map +1 -0
- package/dist/Tabs/Tabs.js +22 -0
- package/dist/Tabs/Tabs.js.map +1 -0
- package/dist/Tabs/Tabs.stories.js +91 -0
- package/dist/Tabs/Tabs.stories.js.map +1 -0
- package/dist/Tabs/Tabs.test.js +91 -0
- package/dist/Tabs/Tabs.test.js.map +1 -0
- package/dist/Tabs/Tabs.types.js +2 -0
- package/dist/Tabs/Tabs.types.js.map +1 -0
- package/dist/Tabs/index.js +2 -0
- package/dist/Tabs/index.js.map +1 -0
- package/dist/TextArea/TextArea.js +23 -0
- package/dist/TextArea/TextArea.js.map +1 -0
- package/dist/TextArea/TextArea.stories.js +39 -0
- package/dist/TextArea/TextArea.stories.js.map +1 -0
- package/dist/TextArea/TextArea.test.js +68 -0
- package/dist/TextArea/TextArea.test.js.map +1 -0
- package/dist/TextArea/TextArea.types.js +2 -0
- package/dist/TextArea/TextArea.types.js.map +1 -0
- package/dist/TextArea/index.js +2 -0
- package/dist/TextArea/index.js.map +1 -0
- package/dist/TextField/TextField.js +64 -0
- package/dist/TextField/TextField.js.map +1 -0
- package/dist/TextField/TextField.stories.js +41 -0
- package/dist/TextField/TextField.stories.js.map +1 -0
- package/dist/TextField/TextField.test.js +35 -0
- package/dist/TextField/TextField.test.js.map +1 -0
- package/dist/TextField/TextField.types.js +2 -0
- package/dist/TextField/TextField.types.js.map +1 -0
- package/dist/TextField/index.js +2 -0
- package/dist/TextField/index.js.map +1 -0
- package/dist/ToolbarButton/ToolbarButton.js +73 -0
- package/dist/ToolbarButton/ToolbarButton.js.map +1 -0
- package/dist/ToolbarButton/ToolbarButton.stories.js +89 -0
- package/dist/ToolbarButton/ToolbarButton.stories.js.map +1 -0
- package/dist/ToolbarButton/ToolbarButton.test.js +93 -0
- package/dist/ToolbarButton/ToolbarButton.test.js.map +1 -0
- package/dist/ToolbarButton/ToolbarButton.types.js +2 -0
- package/dist/ToolbarButton/ToolbarButton.types.js.map +1 -0
- package/dist/ToolbarButton/index.js +2 -0
- package/dist/ToolbarButton/index.js.map +1 -0
- package/dist/Tooltip/QTip.stories.js +40 -0
- package/dist/Tooltip/QTip.stories.js.map +1 -0
- package/dist/Tooltip/QTip.types.js +2 -0
- package/dist/Tooltip/QTip.types.js.map +1 -0
- package/dist/Tooltip/QTipPerformance.stories.js +30 -0
- package/dist/Tooltip/QTipPerformance.stories.js.map +1 -0
- package/dist/Tooltip/Qtip.js +154 -0
- package/dist/Tooltip/Qtip.js.map +1 -0
- package/dist/Tooltip/Tooltip.js +36 -0
- package/dist/Tooltip/Tooltip.js.map +1 -0
- package/dist/Tooltip/Tooltip.stories.js +32 -0
- package/dist/Tooltip/Tooltip.stories.js.map +1 -0
- package/dist/Tooltip/Tooltip.types.js +3 -0
- package/dist/Tooltip/Tooltip.types.js.map +1 -0
- package/dist/Tooltip/TooltipPerformance.stories.js +30 -0
- package/dist/Tooltip/TooltipPerformance.stories.js.map +1 -0
- package/dist/Tooltip/index.js +3 -0
- package/dist/Tooltip/index.js.map +1 -0
- package/dist/Tooltip/qTip.utilities.js +11 -0
- package/dist/Tooltip/qTip.utilities.js.map +1 -0
- package/dist/example/package.json +1 -1
- package/dist/example/src/Example.tsx +242 -1
- package/dist/types.js +2 -0
- package/dist/types.js.map +1 -0
- package/dist/utils/browserId.js +29 -0
- package/dist/utils/browserId.js.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,9 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,109 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Accordion.stories.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,55 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Accordion.types.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -0,0 +1,90 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE;;;;GAIG;AACH,MAAM,MAAM,GAAyC,CAAC,EACpD,OAAO,EACP,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,eAAe,EACf,EAAE,EACF,MAAM,EACN,eAAe,GAAG,IAAI,EACtB,OAAO,EACP,cAAc,EACd,SAAS,GAAG,MAAM,EAClB,IAAI,EACJ,SAAS,EACT,YAAY,GAAG,MAAM,EACrB,UAAU,GAAG,SAAS,EACtB,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,EACrB,aAAa,GACd,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,iFAAiF,CAAC;IACtG,MAAM,oBAAoB,GAAG;QAC3B,SAAS,EAAE,kDAAkD;QAC7D,OAAO,EAAE,kDAAkD;QAC3D,QAAQ,EACN,2GAA2G;YAC3G,iEAAiE;QACnE,aAAa,EAAE,kDAAkD;QACjE,WAAW,EAAE,wBAAwB;QACrC,SAAS,EAAE,6EAA6E;KACzF,CAAC;IACF,MAAM,8BAA8B,GAAG;QACrC,SAAS,EAAE,uBAAuB;QAClC,OAAO,EAAE,eAAe;QACxB,aAAa,EAAE,eAAe;QAC9B,QAAQ,EAAE,eAAe;QACzB,WAAW,EAAE,uBAAuB;QACpC,SAAS,EAAE,eAAe;KAC3B,CAAC;IACF,MAAM,6BAA6B,GAAG;QACpC,SAAS,EAAE,2BAA2B;QACtC,OAAO,EAAE,oBAAoB;QAC7B,aAAa,EAAE,oBAAoB;QACnC,QAAQ,EAAE,oBAAoB;QAC9B,WAAW,EAAE,2BAA2B;QACxC,SAAS,EAAE,oBAAoB;KAChC,CAAC;IAEF,MAAM,0BAA0B,GAAG;QACjC,SAAS,EACP,gGAAgG;YAChG,kHAAkH;QACpH,OAAO,EACL,4EAA4E;YAC5E,qCAAqC;QACvC,QAAQ,EAAE,EAAE;QACZ,aAAa,EAAE,6EAA6E;QAC5F,WAAW,EAAE,EAAE;QACf,SAAS,EAAE,EAAE;KACd,CAAC;IAEF,MAAM,yBAAyB,GAAG;QAChC,SAAS,EACP,+EAA+E;YAC/E,8GAA8G;YAC9G,sCAAsC;QACxC,OAAO,EACL,2FAA2F;YAC3F,0CAA0C;QAC5C,QAAQ,EAAE,EAAE;QACZ,aAAa,EACX,mFAAmF;YACnF,oCAAoC;QACtC,WAAW,EAAE,EAAE;QACf,SAAS,EAAE,EAAE;KACd,CAAC;IACF,MAAM,WAAW,GAAG;QAClB,EAAE,EAAE,YAAY;QAChB,EAAE,EAAE,YAAY;KACjB,CAAC;IACF,MAAM,cAAc,GAAG,GAAG,WAAW,IAAI,oBAAoB,CAAC,OAAO,CAAC,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,0BAA0B,CAAC,OAAO,CAAC,IAAI,yBAAyB,CAAC,OAAO,CAAC,IAAI,8BAA8B,CAAC,OAAO,CAAC,IAAI,6BAA6B,CAAC,OAAO,CAAC,IAAI,eAAe,EAAE,CAAC;IACnR,IAAI,WAAW,GAAmC,SAAS,CAAC;IAE5D,IAAI,OAAO,EAAE;QACX,WAAW,GAAG;YACZ,gBAAgB,EAAE,OAAO;YACzB,qBAAqB,EAAE,cAAc,EAAE,QAAQ;YAC/C,mBAAmB,EAAE,aAAa;YAClC,kBAAkB,EAAE,aAAa;YACjC,iBAAiB,EAAE,cAAc,EAAE,KAAK,IAAI,sBAAsB;SACnE,CAAC;KACH;IAED,MAAM,SAAS,GAAG,CAAC,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACpE,MAAM,WAAW,GAAG,IAAI,IAAI,CAAE,oBAAC,IAAI,IAC/B,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,SAAS,EAChB,eAAe,EACb,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS,IAAI,8BAA8B,CAAC,OAAO,CAAC,KAAK,6BAA6B,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAEnH,MAAM,EAAE,GAAG,EAAE,UAAU,GACvB,CACH,CAAC;IAEF,OAAO,CACL,gCACE,EAAE,EAAE,EAAE,KACF,WAAW,EACf,QAAQ,EAAE,QAAQ,iBACL,MAAM,EACnB,IAAI,EAAE,IAAI,KAAK,MAAM,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,gBAAgB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAClF,OAAO,EAAE,CAAC,CAAmB,EAAE,EAAE;YAC/B,eAAe,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;YACvC,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;QACxB,CAAC,EACD,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;YACjB,IAAI,WAAW,EAAE;gBACf,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;QACH,CAAC,EACD,SAAS,EAAE,cAAc;QACxB,YAAY,KAAK,MAAM,IAAI,WAAW;QACtC,KAAK;QACL,YAAY,KAAK,OAAO,IAAI,WAAW,CACjC,CACV,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,85 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../src/Button/Button.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,49 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,5 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}
|
|
@@ -0,0 +1,64 @@
|
|
|
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-[1200] 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-ml-1 ${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}` }, 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-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-w-[18px] ${item.disabled ? '!tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} ${item.iconExtraClassNames || ''}` })),
|
|
38
|
+
React.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[13px] tw-ml-1 ${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-semibold ${item.labelClasses}` }, item.label)),
|
|
39
|
+
React.createElement(Icon, { small: true, icon: "fc-arrow-dropdown -tw-rotate-90", extraClassNames: `${item.disabled ? 'tw-text-sq-disabled-gray' : '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-pointer-events-none", disabled: subItem.disabled },
|
|
46
|
+
subItem.iconClass && (React.createElement(Icon, { icon: subItem.iconClass, extraClassNames: `tw-w-[18px] ${subItem.disabled
|
|
47
|
+
? '!tw-text-sq-disabled-gray'
|
|
48
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-white'}` })),
|
|
49
|
+
React.createElement("div", { className: `tw-text-[13px] tw-ml-1 ${subItem.disabled
|
|
50
|
+
? 'tw-text-sq-disabled-gray'
|
|
51
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}` }, subItem.label)));
|
|
52
|
+
})))));
|
|
53
|
+
}
|
|
54
|
+
return (React.createElement("div", { key: item.label + index },
|
|
55
|
+
React.createElement(DropdownMenu.Item, { key: item.label + index, "data-customid": item.itemCustomId, onSelect: (e) => {
|
|
56
|
+
item.onClick(e);
|
|
57
|
+
}, 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-pointer-events-none ${item.containerExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled },
|
|
58
|
+
item.icon && (React.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: (item.iconType || 'text'), color: item.iconColor, customId: item.iconCustomId, extraClassNames: `tw-w-[18px] ${item.disabled ? '!tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} ${item.iconExtraClassNames || ''}` })),
|
|
59
|
+
React.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[13px] tw-ml-1 ${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses || ''}` }, item.label)),
|
|
60
|
+
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]" }))));
|
|
61
|
+
})))));
|
|
62
|
+
};
|
|
63
|
+
export default ButtonWithDropdown;
|
|
64
|
+
//# sourceMappingURL=ButtonWithDropdown.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonWithDropdown.js","sourceRoot":"","sources":["../../src/ButtonWithDropdown/ButtonWithDropdown.tsx"],"names":[],"mappings":"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"}
|