@seeqdev/qomponents 0.0.108 → 0.0.109
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 +8 -8
- package/dist/Accordion/Accordion.stories.js +114 -114
- package/dist/Accordion/Accordion.test.js +54 -54
- package/dist/Accordion/Accordion.types.js +1 -1
- package/dist/Accordion/index.js +1 -1
- package/dist/Alert/Alert.js +31 -31
- package/dist/Alert/Alert.stories.js +44 -44
- package/dist/Alert/Alert.test.js +50 -50
- package/dist/Alert/Alert.types.js +1 -1
- package/dist/Alert/index.js +1 -1
- package/dist/Button/Button.js +91 -91
- package/dist/Button/Button.stories.js +97 -97
- package/dist/Button/Button.test.js +48 -48
- package/dist/Button/Button.types.js +4 -4
- package/dist/Button/index.js +1 -1
- package/dist/ButtonWithDropdown/ButtonWithDropdown.js +66 -66
- package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.js +97 -97
- package/dist/ButtonWithDropdown/ButtonWithDropdown.test.js +84 -84
- package/dist/ButtonWithDropdown/ButtonWithDropdown.types.js +1 -1
- package/dist/ButtonWithDropdown/index.js +1 -1
- package/dist/ButtonWithPopover/ButtonWithPopover.js +50 -50
- package/dist/ButtonWithPopover/ButtonWithPopover.stories.js +74 -74
- package/dist/ButtonWithPopover/ButtonWithPopover.test.js +81 -81
- package/dist/ButtonWithPopover/ButtonWithPopover.types.js +1 -1
- package/dist/ButtonWithPopover/index.js +1 -1
- package/dist/Checkbox/Checkbox.js +25 -25
- package/dist/Checkbox/Checkbox.stories.js +33 -33
- package/dist/Checkbox/Checkbox.test.js +93 -93
- package/dist/Checkbox/Checkbox.types.js +1 -1
- package/dist/Checkbox/index.js +1 -1
- package/dist/Icon/Icon.js +53 -53
- package/dist/Icon/Icon.stories.js +44 -44
- package/dist/Icon/Icon.test.js +54 -54
- package/dist/Icon/Icon.types.js +15 -15
- package/dist/Icon/index.js +1 -1
- package/dist/InputGroup/InputGroup.js +25 -25
- package/dist/InputGroup/InputGroup.stories.js +141 -141
- package/dist/InputGroup/InputGroup.test.js +42 -42
- package/dist/InputGroup/InputGroup.types.js +1 -1
- package/dist/InputGroup/index.js +1 -1
- package/dist/Modal/Modal.js +97 -97
- package/dist/Modal/Modal.stories.js +126 -126
- package/dist/Modal/Modal.test.js +107 -107
- package/dist/Modal/Modal.types.js +1 -1
- package/dist/Modal/index.js +1 -1
- package/dist/SeeqActionDropdown/SeeqActionDropdown.js +47 -47
- package/dist/SeeqActionDropdown/SeeqActionDropdown.stories.js +79 -79
- package/dist/SeeqActionDropdown/SeeqActionDropdown.test.js +72 -72
- package/dist/SeeqActionDropdown/SeeqActionDropdown.types.js +1 -1
- package/dist/SeeqActionDropdown/index.js +1 -1
- package/dist/SeeqActionDropdown/variants.js +22 -22
- package/dist/Select/Select.js +173 -173
- package/dist/Select/Select.stories.js +79 -79
- package/dist/Select/Select.test.js +181 -181
- package/dist/Select/Select.types.js +1 -1
- package/dist/Select/index.js +2 -2
- package/dist/Tabs/Tabs.js +21 -21
- package/dist/Tabs/Tabs.stories.js +90 -90
- package/dist/Tabs/Tabs.test.js +90 -90
- package/dist/Tabs/Tabs.types.js +1 -1
- package/dist/Tabs/index.js +1 -1
- package/dist/TextArea/TextArea.js +24 -24
- package/dist/TextArea/TextArea.stories.js +45 -45
- package/dist/TextArea/TextArea.test.js +67 -67
- package/dist/TextArea/TextArea.types.js +1 -1
- package/dist/TextArea/index.js +1 -1
- package/dist/TextField/TextField.js +78 -78
- package/dist/TextField/TextField.stories.js +69 -69
- package/dist/TextField/TextField.test.js +38 -38
- package/dist/TextField/TextField.types.js +1 -1
- package/dist/TextField/index.js +1 -1
- package/dist/ToolbarButton/ToolbarButton.js +74 -74
- package/dist/ToolbarButton/ToolbarButton.stories.js +93 -93
- package/dist/ToolbarButton/ToolbarButton.test.js +92 -92
- package/dist/ToolbarButton/ToolbarButton.types.js +1 -1
- package/dist/ToolbarButton/index.js +1 -1
- package/dist/Tooltip/QTip.stories.js +44 -44
- package/dist/Tooltip/QTip.types.js +1 -1
- package/dist/Tooltip/QTipPerformance.stories.js +29 -29
- package/dist/Tooltip/Qtip.js +154 -154
- package/dist/Tooltip/Tooltip.js +30 -30
- package/dist/Tooltip/Tooltip.stories.js +31 -31
- package/dist/Tooltip/Tooltip.types.js +2 -2
- package/dist/Tooltip/TooltipPerformance.stories.js +29 -29
- package/dist/Tooltip/index.js +2 -2
- package/dist/Tooltip/qTip.utilities.js +10 -10
- package/dist/index.esm.js +30 -17
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +30 -17
- package/dist/index.js.map +1 -1
- package/dist/types.js +1 -1
- package/dist/utils/browserId.js +28 -28
- package/dist/utils/svg.js +19 -19
- package/dist/utils/validateStyleDimension.js +13 -13
- package/dist/utils/validateStyleDimension.test.js +19 -19
- package/package.json +1 -1
package/dist/Tabs/Tabs.test.js
CHANGED
|
@@ -1,91 +1,91 @@
|
|
|
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 Tabs from './Tabs';
|
|
6
|
-
const renderData = () => (React.createElement("div", { className: "tw-text-sq-color-gray dark:tw-text-sq-white" },
|
|
7
|
-
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"),
|
|
8
|
-
React.createElement("button", null, "save data")));
|
|
9
|
-
const renderTools = () => (React.createElement("div", { className: "tw-text-sq-color-gray dark:tw-text-sq-white" },
|
|
10
|
-
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."),
|
|
11
|
-
React.createElement("button", null, "save tools")));
|
|
12
|
-
const renderJournal = () => (React.createElement("div", { className: "tw-text-sq-color-gray dark:tw-text-sq-white" },
|
|
13
|
-
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."),
|
|
14
|
-
React.createElement("button", null, "save journal")));
|
|
15
|
-
const tabsList = [
|
|
16
|
-
{
|
|
17
|
-
id: 'data',
|
|
18
|
-
label: 'Data',
|
|
19
|
-
icon: 'fc-data',
|
|
20
|
-
content: renderData(),
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
id: 'tools',
|
|
24
|
-
label: 'Tools',
|
|
25
|
-
icon: 'fc-gears-2',
|
|
26
|
-
content: renderTools(),
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
id: 'journal',
|
|
30
|
-
label: 'Journal',
|
|
31
|
-
icon: 'fc-workbook-lock',
|
|
32
|
-
content: renderJournal(),
|
|
33
|
-
},
|
|
34
|
-
];
|
|
35
|
-
const mockTabsClick = jest.fn();
|
|
36
|
-
const SampleComponent = (props) => {
|
|
37
|
-
const [activeTab, setActiveTab] = React.useState('data');
|
|
38
|
-
return (React.createElement(Tabs, { ...props, activeTab: activeTab, onTabSelect: (tabId) => {
|
|
39
|
-
setActiveTab(tabId);
|
|
40
|
-
mockTabsClick(tabId);
|
|
41
|
-
} }));
|
|
42
|
-
};
|
|
43
|
-
describe('Tabs', () => {
|
|
44
|
-
class Context {
|
|
45
|
-
props = {
|
|
46
|
-
tabs: tabsList,
|
|
47
|
-
defaultActiveTab: 'data',
|
|
48
|
-
activeTab: 'data',
|
|
49
|
-
id: 'tabs-table',
|
|
50
|
-
onTabSelect: jest.fn(),
|
|
51
|
-
};
|
|
52
|
-
}
|
|
53
|
-
let tc;
|
|
54
|
-
beforeEach(() => {
|
|
55
|
-
tc = new Context();
|
|
56
|
-
});
|
|
57
|
-
const renderTabs = (props) => render(React.createElement(SampleComponent, { ...props }));
|
|
58
|
-
it('renders Tabs label with correct content based on default active tab', () => {
|
|
59
|
-
renderTabs(tc.props);
|
|
60
|
-
expect(screen.getByText('Data')).toBeInTheDocument();
|
|
61
|
-
expect(screen.getByText('Tools')).toBeInTheDocument();
|
|
62
|
-
expect(screen.getByText('Journal')).toBeInTheDocument();
|
|
63
|
-
expect(screen.getByTestId('journal_tab-icon')).toBeInTheDocument();
|
|
64
|
-
expect(screen.getByText('save data')).toBeInTheDocument();
|
|
65
|
-
expect(screen.queryByText('save tools')).not.toBeInTheDocument();
|
|
66
|
-
expect(screen.queryByText('save journals')).not.toBeInTheDocument();
|
|
67
|
-
});
|
|
68
|
-
it('renders correct content after tab is selected', async () => {
|
|
69
|
-
renderTabs(tc.props);
|
|
70
|
-
expect(screen.getByText('save data')).toBeInTheDocument();
|
|
71
|
-
await userEvent.click(screen.getByText('Tools'));
|
|
72
|
-
expect(mockTabsClick).toHaveBeenCalled();
|
|
73
|
-
expect(screen.getByText('save tools')).toBeInTheDocument();
|
|
74
|
-
});
|
|
75
|
-
it('does not render icon if it is not provided', async () => {
|
|
76
|
-
renderTabs({ ...tc.props, tabs: tc.props.tabs.map((tab) => ({ ...tab, icon: undefined })) });
|
|
77
|
-
expect(screen.queryByText('journal_tab-icon')).not.toBeInTheDocument();
|
|
78
|
-
});
|
|
79
|
-
it('calls the onTabSelect callback when a new tab is clicked', async () => {
|
|
80
|
-
mockTabsClick.mockClear();
|
|
81
|
-
renderTabs(tc.props);
|
|
82
|
-
await userEvent.click(screen.getByText('Journal'));
|
|
83
|
-
expect(mockTabsClick).toBeCalledWith('journal');
|
|
84
|
-
expect(mockTabsClick).toBeCalledTimes(1);
|
|
85
|
-
mockTabsClick.mockClear();
|
|
86
|
-
await userEvent.click(screen.getByText('Tools'));
|
|
87
|
-
expect(mockTabsClick).toBeCalledWith('tools');
|
|
88
|
-
expect(mockTabsClick).toBeCalledTimes(1);
|
|
89
|
-
});
|
|
90
|
-
});
|
|
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 Tabs from './Tabs';
|
|
6
|
+
const renderData = () => (React.createElement("div", { className: "tw-text-sq-color-gray dark:tw-text-sq-white" },
|
|
7
|
+
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"),
|
|
8
|
+
React.createElement("button", null, "save data")));
|
|
9
|
+
const renderTools = () => (React.createElement("div", { className: "tw-text-sq-color-gray dark:tw-text-sq-white" },
|
|
10
|
+
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."),
|
|
11
|
+
React.createElement("button", null, "save tools")));
|
|
12
|
+
const renderJournal = () => (React.createElement("div", { className: "tw-text-sq-color-gray dark:tw-text-sq-white" },
|
|
13
|
+
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."),
|
|
14
|
+
React.createElement("button", null, "save journal")));
|
|
15
|
+
const tabsList = [
|
|
16
|
+
{
|
|
17
|
+
id: 'data',
|
|
18
|
+
label: 'Data',
|
|
19
|
+
icon: 'fc-data',
|
|
20
|
+
content: renderData(),
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
id: 'tools',
|
|
24
|
+
label: 'Tools',
|
|
25
|
+
icon: 'fc-gears-2',
|
|
26
|
+
content: renderTools(),
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
id: 'journal',
|
|
30
|
+
label: 'Journal',
|
|
31
|
+
icon: 'fc-workbook-lock',
|
|
32
|
+
content: renderJournal(),
|
|
33
|
+
},
|
|
34
|
+
];
|
|
35
|
+
const mockTabsClick = jest.fn();
|
|
36
|
+
const SampleComponent = (props) => {
|
|
37
|
+
const [activeTab, setActiveTab] = React.useState('data');
|
|
38
|
+
return (React.createElement(Tabs, { ...props, activeTab: activeTab, onTabSelect: (tabId) => {
|
|
39
|
+
setActiveTab(tabId);
|
|
40
|
+
mockTabsClick(tabId);
|
|
41
|
+
} }));
|
|
42
|
+
};
|
|
43
|
+
describe('Tabs', () => {
|
|
44
|
+
class Context {
|
|
45
|
+
props = {
|
|
46
|
+
tabs: tabsList,
|
|
47
|
+
defaultActiveTab: 'data',
|
|
48
|
+
activeTab: 'data',
|
|
49
|
+
id: 'tabs-table',
|
|
50
|
+
onTabSelect: jest.fn(),
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
let tc;
|
|
54
|
+
beforeEach(() => {
|
|
55
|
+
tc = new Context();
|
|
56
|
+
});
|
|
57
|
+
const renderTabs = (props) => render(React.createElement(SampleComponent, { ...props }));
|
|
58
|
+
it('renders Tabs label with correct content based on default active tab', () => {
|
|
59
|
+
renderTabs(tc.props);
|
|
60
|
+
expect(screen.getByText('Data')).toBeInTheDocument();
|
|
61
|
+
expect(screen.getByText('Tools')).toBeInTheDocument();
|
|
62
|
+
expect(screen.getByText('Journal')).toBeInTheDocument();
|
|
63
|
+
expect(screen.getByTestId('journal_tab-icon')).toBeInTheDocument();
|
|
64
|
+
expect(screen.getByText('save data')).toBeInTheDocument();
|
|
65
|
+
expect(screen.queryByText('save tools')).not.toBeInTheDocument();
|
|
66
|
+
expect(screen.queryByText('save journals')).not.toBeInTheDocument();
|
|
67
|
+
});
|
|
68
|
+
it('renders correct content after tab is selected', async () => {
|
|
69
|
+
renderTabs(tc.props);
|
|
70
|
+
expect(screen.getByText('save data')).toBeInTheDocument();
|
|
71
|
+
await userEvent.click(screen.getByText('Tools'));
|
|
72
|
+
expect(mockTabsClick).toHaveBeenCalled();
|
|
73
|
+
expect(screen.getByText('save tools')).toBeInTheDocument();
|
|
74
|
+
});
|
|
75
|
+
it('does not render icon if it is not provided', async () => {
|
|
76
|
+
renderTabs({ ...tc.props, tabs: tc.props.tabs.map((tab) => ({ ...tab, icon: undefined })) });
|
|
77
|
+
expect(screen.queryByText('journal_tab-icon')).not.toBeInTheDocument();
|
|
78
|
+
});
|
|
79
|
+
it('calls the onTabSelect callback when a new tab is clicked', async () => {
|
|
80
|
+
mockTabsClick.mockClear();
|
|
81
|
+
renderTabs(tc.props);
|
|
82
|
+
await userEvent.click(screen.getByText('Journal'));
|
|
83
|
+
expect(mockTabsClick).toBeCalledWith('journal');
|
|
84
|
+
expect(mockTabsClick).toBeCalledTimes(1);
|
|
85
|
+
mockTabsClick.mockClear();
|
|
86
|
+
await userEvent.click(screen.getByText('Tools'));
|
|
87
|
+
expect(mockTabsClick).toBeCalledWith('tools');
|
|
88
|
+
expect(mockTabsClick).toBeCalledTimes(1);
|
|
89
|
+
});
|
|
90
|
+
});
|
|
91
91
|
//# sourceMappingURL=Tabs.test.js.map
|
package/dist/Tabs/Tabs.types.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
|
2
2
|
//# sourceMappingURL=Tabs.types.js.map
|
package/dist/Tabs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default } from './Tabs';
|
|
1
|
+
export { default } from './Tabs';
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import '../styles.css';
|
|
3
|
-
const baseClasses = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm tw-w-full' +
|
|
4
|
-
' disabled:tw-pointer-events-none disabled:tw-bg-sq-light-gray disabled:dark:tw-bg-sq-dark-disabled-gray' +
|
|
5
|
-
' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-text-sm';
|
|
6
|
-
const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text ' +
|
|
7
|
-
'dark:tw-placeholder-sq-dark-text-lighter disabled:dark:tw-text-sq-dark-text-lighter';
|
|
8
|
-
const lightTheme = 'tw-text-sq-text-color tw-placeholder-gray-400 disabled:tw-text-sq-darkish-gray';
|
|
9
|
-
const errorClasses = 'tw-border-sq-danger-color';
|
|
10
|
-
const borderColorClasses = [
|
|
11
|
-
'tw-border-sq-disabled-gray',
|
|
12
|
-
'dark:tw-border-sq-dark-disabled-gray',
|
|
13
|
-
'dark:focus:tw-border-sq-color-dark-dark',
|
|
14
|
-
'dark:active:tw-border-sq-color-dark-dark',
|
|
15
|
-
'focus:tw-border-sq-color-dark',
|
|
16
|
-
'active:tw-border-sq-color-dark',
|
|
17
|
-
].join(' ');
|
|
18
|
-
/**
|
|
19
|
-
* TextArea.
|
|
20
|
-
*/
|
|
21
|
-
export const TextArea = ({ readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, rows = 3, cols = undefined, value, placeholder, showError, extraClassNames, testId, autoFocus = false, }) => {
|
|
22
|
-
const appliedClasses = `${baseClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${showError ? errorClasses : borderColorClasses}`;
|
|
23
|
-
return (React.createElement("textarea", { "data-testid": testId, name: name, id: id, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, rows: rows, cols: cols, autoFocus: autoFocus }));
|
|
24
|
-
};
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import '../styles.css';
|
|
3
|
+
const baseClasses = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm tw-w-full' +
|
|
4
|
+
' disabled:tw-pointer-events-none disabled:tw-bg-sq-light-gray disabled:dark:tw-bg-sq-dark-disabled-gray' +
|
|
5
|
+
' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-text-sm';
|
|
6
|
+
const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text ' +
|
|
7
|
+
'dark:tw-placeholder-sq-dark-text-lighter disabled:dark:tw-text-sq-dark-text-lighter';
|
|
8
|
+
const lightTheme = 'tw-text-sq-text-color tw-placeholder-gray-400 disabled:tw-text-sq-darkish-gray';
|
|
9
|
+
const errorClasses = 'tw-border-sq-danger-color';
|
|
10
|
+
const borderColorClasses = [
|
|
11
|
+
'tw-border-sq-disabled-gray',
|
|
12
|
+
'dark:tw-border-sq-dark-disabled-gray',
|
|
13
|
+
'dark:focus:tw-border-sq-color-dark-dark',
|
|
14
|
+
'dark:active:tw-border-sq-color-dark-dark',
|
|
15
|
+
'focus:tw-border-sq-color-dark',
|
|
16
|
+
'active:tw-border-sq-color-dark',
|
|
17
|
+
].join(' ');
|
|
18
|
+
/**
|
|
19
|
+
* TextArea.
|
|
20
|
+
*/
|
|
21
|
+
export const TextArea = ({ readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, rows = 3, cols = undefined, value, placeholder, showError, extraClassNames, testId, autoFocus = false, }) => {
|
|
22
|
+
const appliedClasses = `${baseClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${showError ? errorClasses : borderColorClasses}`;
|
|
23
|
+
return (React.createElement("textarea", { "data-testid": testId, name: name, id: id, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, rows: rows, cols: cols, autoFocus: autoFocus }));
|
|
24
|
+
};
|
|
25
25
|
//# sourceMappingURL=TextArea.js.map
|
|
@@ -1,46 +1,46 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { TextArea } from './TextArea';
|
|
3
|
-
export default {
|
|
4
|
-
title: 'TextArea',
|
|
5
|
-
};
|
|
6
|
-
export const AllTextAreas = () => {
|
|
7
|
-
const renderAllVariations = () => (React.createElement(React.Fragment, null,
|
|
8
|
-
React.createElement("div", { className: "tw-p-4 light" },
|
|
9
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
10
|
-
React.createElement(TextArea, { value: "Short text provided." })),
|
|
11
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
12
|
-
React.createElement(TextArea, { value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio morbi quis commodo odio aenean. Lectus sit amet est placerat in egestas erat. Dui nunc mattis enim ut tellus. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Nibh mauris cursus mattis molestie a. Aenean vel elit scelerisque mauris pellentesque. Nunc sed id semper risus in hendrerit gravida rutrum quisque. Tortor dignissim convallis aenean et tortor at risus. Vitae congue mauris rhoncus aenean vel elit scelerisque. Tellus id interdum velit laoreet id donec ultrices. Ac turpis egestas maecenas pharetra. Commodo odio aenean sed adipiscing diam donec adipiscing tristique risus. Consequat interdum varius sit amet mattis. Lacus laoreet non curabitur gravida arcu ac tortor. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Odio ut enim blandit volutpat maecenas volutpat." })),
|
|
13
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
14
|
-
React.createElement(TextArea, { placeholder: "placeholder text" })),
|
|
15
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
16
|
-
React.createElement(TextArea, { placeholder: "with error", showError: true })),
|
|
17
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
18
|
-
React.createElement(TextArea, { value: "read-only", readonly: true, onFocus: (e) => e.currentTarget.select() })),
|
|
19
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
20
|
-
React.createElement(TextArea, { value: "disabled", disabled: true }))),
|
|
21
|
-
React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
|
|
22
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
23
|
-
React.createElement(TextArea, { value: "value provided" })),
|
|
24
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
25
|
-
React.createElement(TextArea, { placeholder: "placeholder text" })),
|
|
26
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
27
|
-
React.createElement(TextArea, { placeholder: "with error", showError: true })),
|
|
28
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
29
|
-
React.createElement(TextArea, { value: "read-only", readonly: true, onFocus: (e) => e.currentTarget.select() })),
|
|
30
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
31
|
-
React.createElement(TextArea, { value: "disabled", disabled: true })))));
|
|
32
|
-
return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
|
|
33
|
-
React.createElement("div", { className: "color_topic" },
|
|
34
|
-
React.createElement("b", null, "Topic Colors"),
|
|
35
|
-
renderAllVariations()),
|
|
36
|
-
React.createElement("div", { className: "color_analysis" },
|
|
37
|
-
React.createElement("b", null, "Analysis Colors"),
|
|
38
|
-
renderAllVariations()),
|
|
39
|
-
React.createElement("div", { className: "color_datalab" },
|
|
40
|
-
React.createElement("b", null, "Datalab Colors"),
|
|
41
|
-
renderAllVariations()),
|
|
42
|
-
React.createElement("div", { className: "color_vantage" },
|
|
43
|
-
React.createElement("b", null, "Vantage Colors"),
|
|
44
|
-
renderAllVariations())));
|
|
45
|
-
};
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TextArea } from './TextArea';
|
|
3
|
+
export default {
|
|
4
|
+
title: 'TextArea',
|
|
5
|
+
};
|
|
6
|
+
export const AllTextAreas = () => {
|
|
7
|
+
const renderAllVariations = () => (React.createElement(React.Fragment, null,
|
|
8
|
+
React.createElement("div", { className: "tw-p-4 light" },
|
|
9
|
+
React.createElement("div", { className: "tw-p-4" },
|
|
10
|
+
React.createElement(TextArea, { value: "Short text provided." })),
|
|
11
|
+
React.createElement("div", { className: "tw-p-4" },
|
|
12
|
+
React.createElement(TextArea, { value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio morbi quis commodo odio aenean. Lectus sit amet est placerat in egestas erat. Dui nunc mattis enim ut tellus. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Nibh mauris cursus mattis molestie a. Aenean vel elit scelerisque mauris pellentesque. Nunc sed id semper risus in hendrerit gravida rutrum quisque. Tortor dignissim convallis aenean et tortor at risus. Vitae congue mauris rhoncus aenean vel elit scelerisque. Tellus id interdum velit laoreet id donec ultrices. Ac turpis egestas maecenas pharetra. Commodo odio aenean sed adipiscing diam donec adipiscing tristique risus. Consequat interdum varius sit amet mattis. Lacus laoreet non curabitur gravida arcu ac tortor. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Odio ut enim blandit volutpat maecenas volutpat." })),
|
|
13
|
+
React.createElement("div", { className: "tw-p-4" },
|
|
14
|
+
React.createElement(TextArea, { placeholder: "placeholder text" })),
|
|
15
|
+
React.createElement("div", { className: "tw-p-4" },
|
|
16
|
+
React.createElement(TextArea, { placeholder: "with error", showError: true })),
|
|
17
|
+
React.createElement("div", { className: "tw-p-4" },
|
|
18
|
+
React.createElement(TextArea, { value: "read-only", readonly: true, onFocus: (e) => e.currentTarget.select() })),
|
|
19
|
+
React.createElement("div", { className: "tw-p-4" },
|
|
20
|
+
React.createElement(TextArea, { value: "disabled", disabled: true }))),
|
|
21
|
+
React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
|
|
22
|
+
React.createElement("div", { className: "tw-p-4" },
|
|
23
|
+
React.createElement(TextArea, { value: "value provided" })),
|
|
24
|
+
React.createElement("div", { className: "tw-p-4" },
|
|
25
|
+
React.createElement(TextArea, { placeholder: "placeholder text" })),
|
|
26
|
+
React.createElement("div", { className: "tw-p-4" },
|
|
27
|
+
React.createElement(TextArea, { placeholder: "with error", showError: true })),
|
|
28
|
+
React.createElement("div", { className: "tw-p-4" },
|
|
29
|
+
React.createElement(TextArea, { value: "read-only", readonly: true, onFocus: (e) => e.currentTarget.select() })),
|
|
30
|
+
React.createElement("div", { className: "tw-p-4" },
|
|
31
|
+
React.createElement(TextArea, { value: "disabled", disabled: true })))));
|
|
32
|
+
return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
|
|
33
|
+
React.createElement("div", { className: "color_topic" },
|
|
34
|
+
React.createElement("b", null, "Topic Colors"),
|
|
35
|
+
renderAllVariations()),
|
|
36
|
+
React.createElement("div", { className: "color_analysis" },
|
|
37
|
+
React.createElement("b", null, "Analysis Colors"),
|
|
38
|
+
renderAllVariations()),
|
|
39
|
+
React.createElement("div", { className: "color_datalab" },
|
|
40
|
+
React.createElement("b", null, "Datalab Colors"),
|
|
41
|
+
renderAllVariations()),
|
|
42
|
+
React.createElement("div", { className: "color_vantage" },
|
|
43
|
+
React.createElement("b", null, "Vantage Colors"),
|
|
44
|
+
renderAllVariations())));
|
|
45
|
+
};
|
|
46
46
|
//# sourceMappingURL=TextArea.stories.js.map
|
|
@@ -1,68 +1,68 @@
|
|
|
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 { TextArea } from './TextArea';
|
|
6
|
-
describe('TextArea', () => {
|
|
7
|
-
class Context {
|
|
8
|
-
testId = 'textAreaTestId';
|
|
9
|
-
props = {
|
|
10
|
-
onChange: jest.fn(),
|
|
11
|
-
onKeyUp: jest.fn(),
|
|
12
|
-
testId: this.testId,
|
|
13
|
-
};
|
|
14
|
-
}
|
|
15
|
-
let tc;
|
|
16
|
-
beforeEach(() => {
|
|
17
|
-
tc = new Context();
|
|
18
|
-
});
|
|
19
|
-
const renderTextArea = (props) => render(React.createElement(TextArea, { ...props }));
|
|
20
|
-
it('renders the provided value', () => {
|
|
21
|
-
const value = 'hello, this is text for a text area.';
|
|
22
|
-
renderTextArea({ ...tc.props, value });
|
|
23
|
-
expect(screen.getByDisplayValue(value)).toBeInTheDocument();
|
|
24
|
-
});
|
|
25
|
-
it('renders the provided placeholder', () => {
|
|
26
|
-
const placeholder = 'Prompt to enter';
|
|
27
|
-
renderTextArea({ ...tc.props, placeholder });
|
|
28
|
-
expect(screen.getByPlaceholderText(placeholder)).toBeInTheDocument();
|
|
29
|
-
});
|
|
30
|
-
it('calls onChange handler', async () => {
|
|
31
|
-
renderTextArea({ ...tc.props });
|
|
32
|
-
await userEvent.type(screen.getByTestId(tc.testId), 'trigger');
|
|
33
|
-
expect(tc.props.onChange).toHaveBeenCalled();
|
|
34
|
-
});
|
|
35
|
-
it('calls the onKeyUp handler', async () => {
|
|
36
|
-
renderTextArea({ ...tc.props });
|
|
37
|
-
await userEvent.type(screen.getByTestId(tc.testId), 'trigger');
|
|
38
|
-
expect(tc.props.onKeyUp).toHaveBeenCalled();
|
|
39
|
-
});
|
|
40
|
-
it('respects readOnly', async () => {
|
|
41
|
-
renderTextArea({ ...tc.props, disabled: true });
|
|
42
|
-
expect(screen.getByTestId(tc.testId)).not.toBeEnabled();
|
|
43
|
-
});
|
|
44
|
-
it('provides rows', async () => {
|
|
45
|
-
renderTextArea({ ...tc.props, rows: 7 });
|
|
46
|
-
expect(screen.getByTestId(tc.testId)).toHaveProperty('rows', 7);
|
|
47
|
-
});
|
|
48
|
-
it('provides cols', async () => {
|
|
49
|
-
renderTextArea({ ...tc.props, cols: 8 });
|
|
50
|
-
expect(screen.getByTestId(tc.testId)).toHaveProperty('cols', 8);
|
|
51
|
-
});
|
|
52
|
-
it('provides name', async () => {
|
|
53
|
-
const name = 'myTextArea';
|
|
54
|
-
renderTextArea({ ...tc.props, name });
|
|
55
|
-
expect(screen.getByTestId(tc.testId)).toHaveProperty('name', name);
|
|
56
|
-
});
|
|
57
|
-
it('provides id', async () => {
|
|
58
|
-
const id = 'myTextId';
|
|
59
|
-
renderTextArea({ ...tc.props, id });
|
|
60
|
-
expect(screen.getByTestId(tc.testId)).toHaveProperty('id', id);
|
|
61
|
-
});
|
|
62
|
-
it('provides extraClassNames', async () => {
|
|
63
|
-
const extraClassNames = 'extra css';
|
|
64
|
-
renderTextArea({ ...tc.props, extraClassNames });
|
|
65
|
-
expect(screen.getByTestId(tc.testId)).toHaveClass(extraClassNames);
|
|
66
|
-
});
|
|
67
|
-
});
|
|
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 { TextArea } from './TextArea';
|
|
6
|
+
describe('TextArea', () => {
|
|
7
|
+
class Context {
|
|
8
|
+
testId = 'textAreaTestId';
|
|
9
|
+
props = {
|
|
10
|
+
onChange: jest.fn(),
|
|
11
|
+
onKeyUp: jest.fn(),
|
|
12
|
+
testId: this.testId,
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
let tc;
|
|
16
|
+
beforeEach(() => {
|
|
17
|
+
tc = new Context();
|
|
18
|
+
});
|
|
19
|
+
const renderTextArea = (props) => render(React.createElement(TextArea, { ...props }));
|
|
20
|
+
it('renders the provided value', () => {
|
|
21
|
+
const value = 'hello, this is text for a text area.';
|
|
22
|
+
renderTextArea({ ...tc.props, value });
|
|
23
|
+
expect(screen.getByDisplayValue(value)).toBeInTheDocument();
|
|
24
|
+
});
|
|
25
|
+
it('renders the provided placeholder', () => {
|
|
26
|
+
const placeholder = 'Prompt to enter';
|
|
27
|
+
renderTextArea({ ...tc.props, placeholder });
|
|
28
|
+
expect(screen.getByPlaceholderText(placeholder)).toBeInTheDocument();
|
|
29
|
+
});
|
|
30
|
+
it('calls onChange handler', async () => {
|
|
31
|
+
renderTextArea({ ...tc.props });
|
|
32
|
+
await userEvent.type(screen.getByTestId(tc.testId), 'trigger');
|
|
33
|
+
expect(tc.props.onChange).toHaveBeenCalled();
|
|
34
|
+
});
|
|
35
|
+
it('calls the onKeyUp handler', async () => {
|
|
36
|
+
renderTextArea({ ...tc.props });
|
|
37
|
+
await userEvent.type(screen.getByTestId(tc.testId), 'trigger');
|
|
38
|
+
expect(tc.props.onKeyUp).toHaveBeenCalled();
|
|
39
|
+
});
|
|
40
|
+
it('respects readOnly', async () => {
|
|
41
|
+
renderTextArea({ ...tc.props, disabled: true });
|
|
42
|
+
expect(screen.getByTestId(tc.testId)).not.toBeEnabled();
|
|
43
|
+
});
|
|
44
|
+
it('provides rows', async () => {
|
|
45
|
+
renderTextArea({ ...tc.props, rows: 7 });
|
|
46
|
+
expect(screen.getByTestId(tc.testId)).toHaveProperty('rows', 7);
|
|
47
|
+
});
|
|
48
|
+
it('provides cols', async () => {
|
|
49
|
+
renderTextArea({ ...tc.props, cols: 8 });
|
|
50
|
+
expect(screen.getByTestId(tc.testId)).toHaveProperty('cols', 8);
|
|
51
|
+
});
|
|
52
|
+
it('provides name', async () => {
|
|
53
|
+
const name = 'myTextArea';
|
|
54
|
+
renderTextArea({ ...tc.props, name });
|
|
55
|
+
expect(screen.getByTestId(tc.testId)).toHaveProperty('name', name);
|
|
56
|
+
});
|
|
57
|
+
it('provides id', async () => {
|
|
58
|
+
const id = 'myTextId';
|
|
59
|
+
renderTextArea({ ...tc.props, id });
|
|
60
|
+
expect(screen.getByTestId(tc.testId)).toHaveProperty('id', id);
|
|
61
|
+
});
|
|
62
|
+
it('provides extraClassNames', async () => {
|
|
63
|
+
const extraClassNames = 'extra css';
|
|
64
|
+
renderTextArea({ ...tc.props, extraClassNames });
|
|
65
|
+
expect(screen.getByTestId(tc.testId)).toHaveClass(extraClassNames);
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
68
|
//# sourceMappingURL=TextArea.test.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
|
2
2
|
//# sourceMappingURL=TextArea.types.js.map
|
package/dist/TextArea/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { TextArea as default } from './TextArea';
|
|
1
|
+
export { TextArea as default } from './TextArea';
|
|
2
2
|
//# sourceMappingURL=index.js.map
|