@seeqdev/qomponents 0.0.26 → 0.0.28
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/Button/Button.types.d.ts +3 -0
- package/dist/Icon/Icon.types.d.ts +3 -0
- package/dist/index.esm.js +7 -6
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +7 -6
- package/dist/index.js.map +1 -1
- package/dist/styles.css +80 -80
- package/package.json +1 -1
- package/dist/Button/Button.js +0 -86
- package/dist/Button/Button.js.map +0 -1
- package/dist/Button/Button.stories.js +0 -77
- package/dist/Button/Button.stories.js.map +0 -1
- package/dist/Button/Button.test.js +0 -49
- package/dist/Button/Button.test.js.map +0 -1
- package/dist/Button/Button.types.js +0 -4
- package/dist/Button/Button.types.js.map +0 -1
- package/dist/Button/index.js +0 -2
- package/dist/Button/index.js.map +0 -1
- package/dist/Checkbox/Checkbox.js +0 -23
- package/dist/Checkbox/Checkbox.js.map +0 -1
- package/dist/Checkbox/Checkbox.stories.js +0 -29
- package/dist/Checkbox/Checkbox.stories.js.map +0 -1
- package/dist/Checkbox/Checkbox.test.js +0 -94
- package/dist/Checkbox/Checkbox.test.js.map +0 -1
- package/dist/Checkbox/Checkbox.types.js +0 -2
- package/dist/Checkbox/Checkbox.types.js.map +0 -1
- package/dist/Checkbox/index.js +0 -2
- package/dist/Checkbox/index.js.map +0 -1
- package/dist/Icon/Icon.js +0 -61
- package/dist/Icon/Icon.js.map +0 -1
- package/dist/Icon/Icon.stories.js +0 -40
- package/dist/Icon/Icon.stories.js.map +0 -1
- package/dist/Icon/Icon.test.js +0 -55
- package/dist/Icon/Icon.test.js.map +0 -1
- package/dist/Icon/Icon.types.js +0 -16
- package/dist/Icon/Icon.types.js.map +0 -1
- package/dist/Icon/index.js +0 -2
- package/dist/Icon/index.js.map +0 -1
- package/dist/Select/Select.js +0 -168
- package/dist/Select/Select.js.map +0 -1
- package/dist/Select/Select.stories.js +0 -72
- package/dist/Select/Select.stories.js.map +0 -1
- package/dist/Select/Select.test.js +0 -161
- package/dist/Select/Select.test.js.map +0 -1
- package/dist/Select/Select.types.js +0 -2
- package/dist/Select/Select.types.js.map +0 -1
- package/dist/Select/index.js +0 -2
- package/dist/Select/index.js.map +0 -1
- package/dist/TextArea/TextArea.js +0 -23
- package/dist/TextArea/TextArea.js.map +0 -1
- package/dist/TextArea/TextArea.stories.js +0 -39
- package/dist/TextArea/TextArea.stories.js.map +0 -1
- package/dist/TextArea/TextArea.test.js +0 -68
- package/dist/TextArea/TextArea.test.js.map +0 -1
- package/dist/TextArea/TextArea.types.js +0 -2
- package/dist/TextArea/TextArea.types.js.map +0 -1
- package/dist/TextArea/index.js +0 -2
- package/dist/TextArea/index.js.map +0 -1
- package/dist/TextField/TextField.js +0 -64
- package/dist/TextField/TextField.js.map +0 -1
- package/dist/TextField/TextField.stories.js +0 -41
- package/dist/TextField/TextField.stories.js.map +0 -1
- package/dist/TextField/TextField.test.js +0 -35
- package/dist/TextField/TextField.test.js.map +0 -1
- package/dist/TextField/TextField.types.js +0 -2
- package/dist/TextField/TextField.types.js.map +0 -1
- package/dist/TextField/index.js +0 -2
- package/dist/TextField/index.js.map +0 -1
- package/dist/Tooltip/QTip.stories.js +0 -40
- package/dist/Tooltip/QTip.stories.js.map +0 -1
- package/dist/Tooltip/QTip.types.js +0 -2
- package/dist/Tooltip/QTip.types.js.map +0 -1
- package/dist/Tooltip/QTipPerformance.stories.js +0 -30
- package/dist/Tooltip/QTipPerformance.stories.js.map +0 -1
- package/dist/Tooltip/Qtip.js +0 -146
- package/dist/Tooltip/Qtip.js.map +0 -1
- package/dist/Tooltip/Tooltip.js +0 -36
- package/dist/Tooltip/Tooltip.js.map +0 -1
- package/dist/Tooltip/Tooltip.stories.js +0 -32
- package/dist/Tooltip/Tooltip.stories.js.map +0 -1
- package/dist/Tooltip/Tooltip.types.js +0 -3
- package/dist/Tooltip/Tooltip.types.js.map +0 -1
- package/dist/Tooltip/TooltipPerformance.stories.js +0 -30
- package/dist/Tooltip/TooltipPerformance.stories.js.map +0 -1
- package/dist/Tooltip/index.js +0 -3
- package/dist/Tooltip/index.js.map +0 -1
- package/dist/types.js +0 -2
- package/dist/types.js.map +0 -1
- package/dist/utils/browserId.js +0 -29
- package/dist/utils/browserId.js.map +0 -1
|
@@ -1,161 +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 Select from './Select';
|
|
6
|
-
describe('Select', () => {
|
|
7
|
-
class Context {
|
|
8
|
-
testId = 'selectTestId';
|
|
9
|
-
label = 'button label';
|
|
10
|
-
options = [
|
|
11
|
-
{ label: 'vanilla', value: 'a' },
|
|
12
|
-
{ label: 'chocolate', value: 'b' },
|
|
13
|
-
{ label: 'strawberry', value: 'c' },
|
|
14
|
-
];
|
|
15
|
-
otherOptions = [
|
|
16
|
-
{ label: 'red', value: 'd' },
|
|
17
|
-
{ label: 'green', value: 'e' },
|
|
18
|
-
];
|
|
19
|
-
groupedOptions = [
|
|
20
|
-
{
|
|
21
|
-
label: 'Ice Cream Flavors',
|
|
22
|
-
options: this.options,
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
label: 'Colors',
|
|
26
|
-
options: this.otherOptions,
|
|
27
|
-
},
|
|
28
|
-
];
|
|
29
|
-
props = {
|
|
30
|
-
onChange: jest.fn(),
|
|
31
|
-
options: this.options,
|
|
32
|
-
};
|
|
33
|
-
}
|
|
34
|
-
let tc;
|
|
35
|
-
beforeEach(() => {
|
|
36
|
-
tc = new Context();
|
|
37
|
-
});
|
|
38
|
-
const openSelect = async () => {
|
|
39
|
-
const select = document.querySelector(`.specOpenSelect`);
|
|
40
|
-
await userEvent.click(select);
|
|
41
|
-
};
|
|
42
|
-
const renderSelect = (props) => render(React.createElement("div", { id: "wrapper" },
|
|
43
|
-
React.createElement(Select, { ...props })));
|
|
44
|
-
it('renders the select', () => {
|
|
45
|
-
renderSelect(tc.props);
|
|
46
|
-
expect(document.querySelector('.specSelectControl')).toBeInTheDocument();
|
|
47
|
-
});
|
|
48
|
-
it('displays options', async () => {
|
|
49
|
-
renderSelect(tc.props);
|
|
50
|
-
await openSelect();
|
|
51
|
-
expect(document.querySelectorAll('.specSelectOption')).toHaveLength(3);
|
|
52
|
-
});
|
|
53
|
-
it('displays grouped options', async () => {
|
|
54
|
-
renderSelect({ ...tc.props, options: tc.groupedOptions });
|
|
55
|
-
await openSelect();
|
|
56
|
-
expect(document.querySelectorAll('.specSelectOption')).toHaveLength(5);
|
|
57
|
-
expect(document.querySelectorAll('.specSelectGroupHeading')).toHaveLength(2);
|
|
58
|
-
expect(document.querySelectorAll('.specSelectGroup')).toHaveLength(2);
|
|
59
|
-
});
|
|
60
|
-
it('reflects error state', () => {
|
|
61
|
-
renderSelect({ ...tc.props, showError: true });
|
|
62
|
-
expect(document.querySelector('.specSelectControl')).toHaveClass('tw-border-sq-danger-color');
|
|
63
|
-
});
|
|
64
|
-
it('reflects custom render function for option', async () => {
|
|
65
|
-
const getOptionLabel = (option) => (React.createElement("div", null,
|
|
66
|
-
option.label,
|
|
67
|
-
React.createElement("br", null),
|
|
68
|
-
"custom formatting applied"));
|
|
69
|
-
renderSelect({ ...tc.props, getOptionLabel });
|
|
70
|
-
await openSelect();
|
|
71
|
-
expect(document.querySelectorAll('.specSelectOption')[0]).toHaveTextContent('custom formatting applied');
|
|
72
|
-
});
|
|
73
|
-
it('reflects custom render for selected option', async () => {
|
|
74
|
-
const getSelectedValueLabel = (option) => (React.createElement("div", null,
|
|
75
|
-
option.label,
|
|
76
|
-
React.createElement("br", null),
|
|
77
|
-
"the chosen one"));
|
|
78
|
-
renderSelect({ ...tc.props, getSelectedValueLabel });
|
|
79
|
-
await openSelect();
|
|
80
|
-
await userEvent.click(screen.getByText(tc.options[0].label));
|
|
81
|
-
expect(document.querySelectorAll('.specOpenSelect')[0]).toHaveTextContent('the chosen one');
|
|
82
|
-
});
|
|
83
|
-
it('renders the provided value as selected', () => {
|
|
84
|
-
const value = tc.options[1];
|
|
85
|
-
renderSelect({ ...tc.props, value });
|
|
86
|
-
expect(document.querySelectorAll('.specOpenSelect')[0]).toHaveTextContent(value.label);
|
|
87
|
-
});
|
|
88
|
-
it('renders the provided placeholder', () => {
|
|
89
|
-
const placeholder = 'choose your favorite flavor';
|
|
90
|
-
renderSelect({ ...tc.props, placeholder });
|
|
91
|
-
expect(screen.getByText(placeholder)).toBeInTheDocument();
|
|
92
|
-
});
|
|
93
|
-
it('renders the provided noOptionsMessage', async () => {
|
|
94
|
-
const noOptionsMessage = 'Nothing to see here.';
|
|
95
|
-
renderSelect({ ...tc.props, noOptionsMessage, options: [] });
|
|
96
|
-
await openSelect();
|
|
97
|
-
expect(screen.getByText(noOptionsMessage)).toBeInTheDocument();
|
|
98
|
-
});
|
|
99
|
-
it('supports multi selection', async () => {
|
|
100
|
-
const isMulti = true;
|
|
101
|
-
renderSelect({ ...tc.props, isMulti });
|
|
102
|
-
await openSelect();
|
|
103
|
-
await userEvent.click(screen.getByText(tc.options[0].label));
|
|
104
|
-
await openSelect();
|
|
105
|
-
await userEvent.click(screen.getByText(tc.options[1].label));
|
|
106
|
-
expect(document.querySelectorAll('.specOpenSelect')).toHaveLength(2);
|
|
107
|
-
});
|
|
108
|
-
it('renders isClearable', async () => {
|
|
109
|
-
const isClearable = true;
|
|
110
|
-
const placeholder = 'no worries - you can clear this.';
|
|
111
|
-
renderSelect({ ...tc.props, isClearable, placeholder });
|
|
112
|
-
await openSelect();
|
|
113
|
-
await userEvent.click(screen.getByText(tc.options[0].label));
|
|
114
|
-
expect(document.querySelectorAll('.specOpenSelect')[0]).toHaveTextContent(tc.options[0].label);
|
|
115
|
-
expect(document.querySelector('.specClearSelect')).toBeInTheDocument();
|
|
116
|
-
await userEvent.click(document.querySelector('.specClearSelect'));
|
|
117
|
-
expect(document.querySelectorAll('.specOpenSelect')[0]).toHaveTextContent(placeholder);
|
|
118
|
-
});
|
|
119
|
-
it('supports menuIsOpen', async () => {
|
|
120
|
-
const menuIsOpen = true;
|
|
121
|
-
renderSelect({ ...tc.props, menuIsOpen, menuPortalTarget: document.querySelector('#wrapper') });
|
|
122
|
-
expect(document.querySelectorAll('.specSelectOption')).toHaveLength(tc.options.length);
|
|
123
|
-
});
|
|
124
|
-
it('supports closeMenuOnSelect', async () => {
|
|
125
|
-
const closeMenuOnSelect = false;
|
|
126
|
-
renderSelect({ ...tc.props, closeMenuOnSelect });
|
|
127
|
-
await openSelect();
|
|
128
|
-
await userEvent.click(screen.getByText(tc.options[1].label));
|
|
129
|
-
await userEvent.click(screen.getByText(tc.options[2].label));
|
|
130
|
-
expect(document.querySelectorAll('.specOpenSelect')[0]).toHaveTextContent(tc.options[2].label);
|
|
131
|
-
});
|
|
132
|
-
it('removes selected option from multi-select options list', async () => {
|
|
133
|
-
const closeMenuOnSelect = false;
|
|
134
|
-
renderSelect({ ...tc.props, isMulti: true, closeMenuOnSelect });
|
|
135
|
-
await openSelect();
|
|
136
|
-
await userEvent.click(screen.getByText(tc.options[1].label));
|
|
137
|
-
await userEvent.click(screen.getByText(tc.options[2].label));
|
|
138
|
-
expect(document.querySelectorAll('.specSelectOption')).toHaveLength(tc.options.length - 2);
|
|
139
|
-
});
|
|
140
|
-
it('calls onChange handler', async () => {
|
|
141
|
-
const onChange = jest.fn();
|
|
142
|
-
renderSelect({ ...tc.props, onChange });
|
|
143
|
-
await openSelect();
|
|
144
|
-
await userEvent.click(screen.getByText(tc.options[1].label));
|
|
145
|
-
expect(onChange).toHaveBeenCalledWith(tc.options[1]);
|
|
146
|
-
});
|
|
147
|
-
it('includes inputId', async () => {
|
|
148
|
-
const inputId = 'idMe';
|
|
149
|
-
renderSelect({ ...tc.props, inputId });
|
|
150
|
-
expect(document.querySelector(`#${inputId}`)).toBeInTheDocument();
|
|
151
|
-
});
|
|
152
|
-
it('supports creating options', async () => {
|
|
153
|
-
const inputId = 'idMe';
|
|
154
|
-
const favorite = 'Almond Joy';
|
|
155
|
-
renderSelect({ ...tc.props, creatable: true, inputId });
|
|
156
|
-
await openSelect();
|
|
157
|
-
await userEvent.type(document.querySelector(`#${inputId}`), favorite);
|
|
158
|
-
expect(screen.getByText(`Create "${favorite}"`)).toBeInTheDocument();
|
|
159
|
-
});
|
|
160
|
-
});
|
|
161
|
-
//# sourceMappingURL=Select.test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Select.test.js","sourceRoot":"","sources":["../../src/Select/Select.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Select.types.js","sourceRoot":"","sources":["../../src/Select/Select.types.ts"],"names":[],"mappings":""}
|
package/dist/Select/index.js
DELETED
package/dist/Select/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}
|
|
@@ -1,23 +0,0 @@
|
|
|
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' +
|
|
4
|
-
' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-text-sm';
|
|
5
|
-
const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text ' + 'dark:tw-placeholder-sq-dark-text-lighter';
|
|
6
|
-
const lightTheme = 'tw-text-sq-text-color tw-placeholder-gray-400';
|
|
7
|
-
const errorClasses = 'tw-border-sq-danger-color';
|
|
8
|
-
const borderColorClasses = [
|
|
9
|
-
'tw-border-sq-disabled-gray',
|
|
10
|
-
'dark:tw-border-sq-dark-disabled-gray',
|
|
11
|
-
'dark:focus:tw-border-sq-color-dark-dark',
|
|
12
|
-
'dark:active:tw-border-sq-color-dark-dark',
|
|
13
|
-
'focus:tw-border-sq-color-dark',
|
|
14
|
-
'active:tw-border-sq-color-dark',
|
|
15
|
-
].join(' ');
|
|
16
|
-
/**
|
|
17
|
-
* TextArea.
|
|
18
|
-
*/
|
|
19
|
-
export const TextArea = ({ readonly = false, onChange, onKeyUp, id, name, rows = 3, cols = undefined, value, placeholder, extraClassNames, testId, autofocus = false, showError, }) => {
|
|
20
|
-
const appliedClasses = `${baseClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${showError ? errorClasses : borderColorClasses}`;
|
|
21
|
-
return (React.createElement("textarea", { "data-testid": testId, name: name, id: id, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, onChange: onChange, onKeyUp: onKeyUp, rows: rows, cols: cols, autoFocus: autofocus }));
|
|
22
|
-
};
|
|
23
|
-
//# sourceMappingURL=TextArea.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../src/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,GACf,iEAAiE;IACjE,6EAA6E,CAAC;AAEhF,MAAM,SAAS,GACb,0DAA0D,GAAG,0CAA0C,CAAC;AAC1G,MAAM,UAAU,GAAG,+CAA+C,CAAC;AAEnE,MAAM,YAAY,GAAG,2BAA2B,CAAC;AAEjD,MAAM,kBAAkB,GAAG;IACzB,4BAA4B;IAC5B,sCAAsC;IACtC,yCAAyC;IACzC,0CAA0C;IAC1C,+BAA+B;IAC/B,gCAAgC;CACjC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA2C,CAAC,EAC/D,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,OAAO,EACP,EAAE,EACF,IAAI,EACJ,IAAI,GAAG,CAAC,EACR,IAAI,GAAG,SAAS,EAChB,KAAK,EACL,WAAW,EACX,eAAe,EACf,MAAM,EACN,SAAS,GAAG,KAAK,EACjB,SAAS,GACV,EAAE,EAAE;IACH,MAAM,cAAc,GAAG,GAAG,WAAW,IAAI,eAAe,IAAI,UAAU,IAAI,SAAS,IACjF,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,kBAC7B,EAAE,CAAC;IAEH,OAAO,CACL,iDACe,MAAM,EACnB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,cAAc,EACzB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,39 +0,0 @@
|
|
|
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 }))),
|
|
19
|
-
React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
|
|
20
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
21
|
-
React.createElement(TextArea, { value: "value provided" })),
|
|
22
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
23
|
-
React.createElement(TextArea, { placeholder: "placeholder text" })),
|
|
24
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
25
|
-
React.createElement(TextArea, { placeholder: "with error", showError: true })),
|
|
26
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
27
|
-
React.createElement(TextArea, { value: "read-only", readonly: true })))));
|
|
28
|
-
return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
|
|
29
|
-
React.createElement("div", { className: "color_topic" },
|
|
30
|
-
React.createElement("b", null, "Topic Colors"),
|
|
31
|
-
renderAllVariations()),
|
|
32
|
-
React.createElement("div", { className: "color_analysis" },
|
|
33
|
-
React.createElement("b", null, "Analysis Colors"),
|
|
34
|
-
renderAllVariations()),
|
|
35
|
-
React.createElement("div", { className: "color_datalab" },
|
|
36
|
-
React.createElement("b", null, "Datalab Colors"),
|
|
37
|
-
renderAllVariations())));
|
|
38
|
-
};
|
|
39
|
-
//# sourceMappingURL=TextArea.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../src/TextArea/TextArea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,eAAe;IACb,KAAK,EAAE,UAAU;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CAChC;QACE,6BAAK,SAAS,EAAC,cAAc;YAC3B,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,sBAAsB,GAAG,CACrC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,q7BAAq7B,GAAG,CACp8B;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,WAAW,EAAC,kBAAkB,GAAG,CACvC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,GAAI,CAClD;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,GAAI,CAC1C,CACF;QAEN,6BAAK,SAAS,EAAC,yCAAyC;YACtD,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,gBAAgB,GAAG,CAC/B;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,WAAW,EAAC,kBAAkB,GAAG,CACvC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,GAAI,CAClD;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,GAAI,CAC1C,CACF,CACL,CACJ,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,6BAAK,SAAS,EAAC,aAAa;YAC1B,8CAAmB;YAClB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,iDAAsB;YACrB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,mBAAmB,EAAE,CAClB,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,68 +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 { 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, readonly: 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
|
-
//# sourceMappingURL=TextArea.test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.test.js","sourceRoot":"","sources":["../../src/TextArea/TextArea.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.types.js","sourceRoot":"","sources":["../../src/TextArea/TextArea.types.ts"],"names":[],"mappings":""}
|
package/dist/TextArea/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TextArea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC"}
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useRef, useState } from 'react';
|
|
2
|
-
import '../styles.css';
|
|
3
|
-
const errorClasses = 'tw-border-sq-danger-color';
|
|
4
|
-
const borderColorClasses = [
|
|
5
|
-
'tw-border-sq-disabled-gray',
|
|
6
|
-
'dark:tw-border-sq-dark-disabled-gray',
|
|
7
|
-
'dark:focus:tw-border-sq-color-dark-dark',
|
|
8
|
-
'dark:active:tw-border-sq-color-dark-dark',
|
|
9
|
-
'focus:tw-border-sq-color-dark',
|
|
10
|
-
'active:tw-border-sq-color-dark',
|
|
11
|
-
].join(' ');
|
|
12
|
-
const baseClasses = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
|
|
13
|
-
' disabled:tw-pointer-events-none' +
|
|
14
|
-
' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-placeholder-gray-400' +
|
|
15
|
-
' dark:tw-placeholder-sq-dark-text-lighter specTextField';
|
|
16
|
-
const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text';
|
|
17
|
-
const lightTheme = 'tw-text-sq-text-color';
|
|
18
|
-
const sizeClasses = {
|
|
19
|
-
sm: 'tw-text-sm',
|
|
20
|
-
lg: 'tw-text-xl',
|
|
21
|
-
};
|
|
22
|
-
/**
|
|
23
|
-
* Textfield.
|
|
24
|
-
*/
|
|
25
|
-
export const TextField = React.forwardRef((props, ref) => {
|
|
26
|
-
const { readonly = false, onChange, onKeyUp, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, } = props;
|
|
27
|
-
const internalRef = useRef(null);
|
|
28
|
-
const [cursor, setCursor] = useState(null);
|
|
29
|
-
const setAllRefs = (receivedRef) => {
|
|
30
|
-
if (ref)
|
|
31
|
-
ref.current = receivedRef;
|
|
32
|
-
internalRef.current = receivedRef;
|
|
33
|
-
};
|
|
34
|
-
useEffect(() => {
|
|
35
|
-
const input = internalRef.current;
|
|
36
|
-
if (input && type !== 'number')
|
|
37
|
-
input.setSelectionRange(cursor, cursor);
|
|
38
|
-
}, [ref, cursor, value]);
|
|
39
|
-
const handleChange = (e) => {
|
|
40
|
-
setCursor(e.target.selectionStart);
|
|
41
|
-
onChange && onChange(e);
|
|
42
|
-
};
|
|
43
|
-
useEffect(() => {
|
|
44
|
-
/**
|
|
45
|
-
* we need to change the value only if it's different since the internal state of "input" will change it anyway
|
|
46
|
-
* this will only be the case when the value has been changed externally via store (undo / redo)
|
|
47
|
-
*/
|
|
48
|
-
if (value !== null && value !== undefined && value !== internalRef.current?.value && internalRef.current) {
|
|
49
|
-
// we need to use this method because using the value props directly will switch the input to a "controlled"
|
|
50
|
-
// component
|
|
51
|
-
internalRef.current.value = `${value}`;
|
|
52
|
-
}
|
|
53
|
-
}, [value]);
|
|
54
|
-
let borderRadius = 'tw-rounded-sm';
|
|
55
|
-
if (inputGroup === 'left') {
|
|
56
|
-
borderRadius = 'tw-rounded-l-sm tw-border-r-0 focus:tw-border-r' + ' active:tw-border-r';
|
|
57
|
-
}
|
|
58
|
-
else if (inputGroup === 'right') {
|
|
59
|
-
borderRadius = 'tw-rounded-r-sm tw-border-l-0 focus:tw-border-l active:tw-border-l';
|
|
60
|
-
}
|
|
61
|
-
const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${extraClassNames} ${lightTheme} ${darkTheme} ${borderRadius} ${showError ? errorClasses : borderColorClasses} `;
|
|
62
|
-
return (React.createElement("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, autoComplete: "none", onChange: handleChange, onKeyUp: onKeyUp, step: step }));
|
|
63
|
-
});
|
|
64
|
-
//# sourceMappingURL=TextField.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/TextField/TextField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { TextField } from './TextField';
|
|
3
|
-
export default {
|
|
4
|
-
title: 'TextField',
|
|
5
|
-
};
|
|
6
|
-
export const AllTextFields = () => {
|
|
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(TextField, { value: "value provided" })),
|
|
11
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
12
|
-
React.createElement(TextField, { placeholder: "placeholder text" })),
|
|
13
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
14
|
-
React.createElement(TextField, { placeholder: "with error", showError: true })),
|
|
15
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
16
|
-
React.createElement(TextField, { value: "read-only", readonly: true })),
|
|
17
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
18
|
-
React.createElement(TextField, { value: "large", size: "lg" }))),
|
|
19
|
-
React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
|
|
20
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
21
|
-
React.createElement(TextField, { value: "value provided" })),
|
|
22
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
23
|
-
React.createElement(TextField, { placeholder: "placeholder text" })),
|
|
24
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
25
|
-
React.createElement(TextField, { placeholder: "with error", showError: true })),
|
|
26
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
27
|
-
React.createElement(TextField, { value: "read-only", readonly: true })),
|
|
28
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
29
|
-
React.createElement(TextField, { value: "large", size: "lg" })))));
|
|
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
|
-
renderAllVariations()),
|
|
34
|
-
React.createElement("div", { className: "color_analysis" },
|
|
35
|
-
React.createElement("b", null, "Analysis Colors"),
|
|
36
|
-
renderAllVariations()),
|
|
37
|
-
React.createElement("div", { className: "color_datalab" },
|
|
38
|
-
React.createElement("b", null, "Datalab Colors"),
|
|
39
|
-
renderAllVariations())));
|
|
40
|
-
};
|
|
41
|
-
//# sourceMappingURL=TextField.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.stories.js","sourceRoot":"","sources":["../../src/TextField/TextField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,eAAe;IACb,KAAK,EAAE,WAAW;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CAChC;QACE,6BAAK,SAAS,EAAC,cAAc;YAC3B,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,gBAAgB,GAAG,CAChC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,WAAW,EAAC,kBAAkB,GAAG,CACxC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,GAAI,CACnD;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,GAAI,CAC3C;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG,CACjC,CACF;QAEN,6BAAK,SAAS,EAAC,yCAAyC;YACtD,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,gBAAgB,GAAG,CAChC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,WAAW,EAAC,kBAAkB,GAAG,CACxC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,GAAI,CACnD;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,GAAI,CAC3C;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG,CACjC,CACF,CACL,CACJ,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,6BAAK,SAAS,EAAC,aAAa;YAC1B,8CAAmB;YAClB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,iDAAsB;YACrB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,mBAAmB,EAAE,CAClB,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,35 +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 { TextField } from './TextField';
|
|
6
|
-
describe('TextField', () => {
|
|
7
|
-
class Context {
|
|
8
|
-
testId = 'textFieldTestId';
|
|
9
|
-
props = {
|
|
10
|
-
onChange: jest.fn(),
|
|
11
|
-
testId: this.testId,
|
|
12
|
-
};
|
|
13
|
-
}
|
|
14
|
-
let tc;
|
|
15
|
-
beforeEach(() => {
|
|
16
|
-
tc = new Context();
|
|
17
|
-
});
|
|
18
|
-
const renderTextField = (props) => render(React.createElement(TextField, { ...props }));
|
|
19
|
-
it('renders the provided value', () => {
|
|
20
|
-
const value = 'hello';
|
|
21
|
-
renderTextField({ ...tc.props, value });
|
|
22
|
-
expect(screen.getByDisplayValue(value)).toBeInTheDocument();
|
|
23
|
-
});
|
|
24
|
-
it('renders the provided placeholder', () => {
|
|
25
|
-
const placeholder = 'Prompt to enter';
|
|
26
|
-
renderTextField({ ...tc.props, placeholder });
|
|
27
|
-
expect(screen.getByPlaceholderText(placeholder)).toBeInTheDocument();
|
|
28
|
-
});
|
|
29
|
-
it('calls onChange handler', async () => {
|
|
30
|
-
renderTextField({ ...tc.props });
|
|
31
|
-
await userEvent.type(screen.getByTestId(tc.testId), 'trigger');
|
|
32
|
-
expect(tc.props.onChange).toHaveBeenCalled();
|
|
33
|
-
});
|
|
34
|
-
});
|
|
35
|
-
//# sourceMappingURL=TextField.test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.test.js","sourceRoot":"","sources":["../../src/TextField/TextField.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,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,MAAM,OAAO;QACX,MAAM,GAAG,iBAAiB,CAAC;QAC3B,KAAK,GAAmB;YACtB,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE;YACnB,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;IACH,MAAM,eAAe,GAAG,CAAC,KAAqB,EAAE,EAAE,CAAC,MAAM,CAAC,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC,CAAC;IAEpF,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACpC,MAAM,KAAK,GAAG,OAAO,CAAC;QACtB,eAAe,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QACxC,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC9D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,GAAG,EAAE;QAC1C,MAAM,WAAW,GAAG,iBAAiB,CAAC;QACtC,eAAe,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,CAAC;QAC9C,MAAM,CAAC,MAAM,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACvE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;QACtC,eAAe,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;QACjC,MAAM,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC;QAC/D,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC/C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.types.js","sourceRoot":"","sources":["../../src/TextField/TextField.types.ts"],"names":[],"mappings":""}
|
package/dist/TextField/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TextField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,OAAO,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import Button from '../Button';
|
|
3
|
-
import { tooltipPositions } from './Tooltip.types';
|
|
4
|
-
import { QTip } from './Qtip';
|
|
5
|
-
import Icon from '../Icon';
|
|
6
|
-
export default {
|
|
7
|
-
title: 'Tooltip',
|
|
8
|
-
};
|
|
9
|
-
export const AllQTips = () => {
|
|
10
|
-
const renderButtonsWithTooltip = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_button` },
|
|
11
|
-
React.createElement(Button, { tooltip: `Tooltip on the ${position}`, label: position, tooltipOptions: { position } }))));
|
|
12
|
-
const renderIconsWithHtmlTooltip = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_icon` },
|
|
13
|
-
React.createElement(Icon, { tooltip: "<div><h2>Fancy Tooltip</h2> This is a special tooltip. Why? <br />Because it supports <b>HTML!</b></div>", tooltipPlacement: position, icon: "fc-sun", isHtmlTooltip: true }))));
|
|
14
|
-
const renderTextTooltipOnText = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_text` },
|
|
15
|
-
React.createElement("span", { "data-qtip-text": "Helpful information provided here", "data-qtip-placement": position },
|
|
16
|
-
"Hover for Tooltip (on the ",
|
|
17
|
-
position,
|
|
18
|
-
")"))));
|
|
19
|
-
const renderTextTooltipOnTextWithDelay = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_text` },
|
|
20
|
-
React.createElement("span", { "data-qtip-text": "Helpful information provided here", "data-qtip-placement": position, "data-qtip-delay": 1500 },
|
|
21
|
-
"Hover for Tooltip (on the ",
|
|
22
|
-
position,
|
|
23
|
-
") - with delay (1500ms)"))));
|
|
24
|
-
const renderTextTooltipOnOverflowHiddenText = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_text`, className: "tw-overflow-hidden" },
|
|
25
|
-
React.createElement("span", { "data-qtip-text": "Helpful information provided here", "data-qtip-placement": position },
|
|
26
|
-
"Hover for Tooltip (on the ",
|
|
27
|
-
position,
|
|
28
|
-
")",
|
|
29
|
-
React.createElement("br", null),
|
|
30
|
-
"(Overflow set to hidden)"))));
|
|
31
|
-
return (React.createElement(React.Fragment, null,
|
|
32
|
-
React.createElement(QTip, null),
|
|
33
|
-
React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4 tw-text-center" },
|
|
34
|
-
renderButtonsWithTooltip(),
|
|
35
|
-
renderIconsWithHtmlTooltip(),
|
|
36
|
-
renderTextTooltipOnText(),
|
|
37
|
-
renderTextTooltipOnTextWithDelay(),
|
|
38
|
-
renderTextTooltipOnOverflowHiddenText())));
|
|
39
|
-
};
|
|
40
|
-
//# sourceMappingURL=QTip.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"QTip.stories.js","sourceRoot":"","sources":["../../src/Tooltip/QTip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,eAAe;IACb,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,MAAM,wBAAwB,GAAG,GAAG,EAAE,CACpC,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,6BAAK,GAAG,EAAE,GAAG,QAAQ,SAAS;QAC5B,oBAAC,MAAM,IAAC,OAAO,EAAE,kBAAkB,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAI,CAC5F,CACP,CAAC,CAAC;IAEL,MAAM,0BAA0B,GAAG,GAAG,EAAE,CACtC,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,6BAAK,GAAG,EAAE,GAAG,QAAQ,OAAO;QAC1B,oBAAC,IAAI,IACH,OAAO,EAAC,0GAA0G,EAClH,gBAAgB,EAAE,QAAQ,EAC1B,IAAI,EAAC,QAAQ,EACb,aAAa,EAAE,IAAI,GACnB,CACE,CACP,CAAC,CAAC;IAEL,MAAM,uBAAuB,GAAG,GAAG,EAAE,CACnC,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,6BAAK,GAAG,EAAE,GAAG,QAAQ,OAAO;QAC1B,gDAAqB,mCAAmC,yBAAsB,QAAQ;;YACzD,QAAQ;gBAC9B,CACH,CACP,CAAC,CAAC;IAEL,MAAM,gCAAgC,GAAG,GAAG,EAAE,CAC5C,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,6BAAK,GAAG,EAAE,GAAG,QAAQ,OAAO;QAC1B,gDAAqB,mCAAmC,yBAAsB,QAAQ,qBAAmB,IAAI;;YAChF,QAAQ;sCAC9B,CACH,CACP,CAAC,CAAC;IAEL,MAAM,qCAAqC,GAAG,GAAG,EAAE,CACjD,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,6BAAK,GAAG,EAAE,GAAG,QAAQ,OAAO,EAAE,SAAS,EAAC,oBAAoB;QAC1D,gDAAqB,mCAAmC,yBAAsB,QAAQ;;YACzD,QAAQ;;YAAE,+BAAM;uCAEtC,CACH,CACP,CAAC,CAAC;IAEL,OAAO,CACL;QACE,oBAAC,IAAI,OAAG;QACR,6BAAK,SAAS,EAAC,gDAAgD;YAC5D,wBAAwB,EAAE;YAC1B,0BAA0B,EAAE;YAC5B,uBAAuB,EAAE;YACzB,gCAAgC,EAAE;YAClC,qCAAqC,EAAE,CACpC,CACL,CACJ,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"QTip.types.js","sourceRoot":"","sources":["../../src/Tooltip/QTip.types.ts"],"names":[],"mappings":""}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { QTip } from './Qtip';
|
|
3
|
-
import Icon from '../Icon';
|
|
4
|
-
export default {
|
|
5
|
-
title: 'Tooltip',
|
|
6
|
-
};
|
|
7
|
-
const renderManyQTips = () => {
|
|
8
|
-
const colsCount = 100;
|
|
9
|
-
const rowCount = 100;
|
|
10
|
-
const rows = [];
|
|
11
|
-
const getCols = (rowId) => {
|
|
12
|
-
const cols = [];
|
|
13
|
-
for (let i = 0; i < colsCount; i++) {
|
|
14
|
-
cols.push(React.createElement("td", { key: 'col_' + i + '_row_' + rowId },
|
|
15
|
-
React.createElement(Icon, { icon: "fc-sun", tooltip: `hello there ${i}` })));
|
|
16
|
-
}
|
|
17
|
-
return cols;
|
|
18
|
-
};
|
|
19
|
-
for (let i = 0; i < rowCount; i++) {
|
|
20
|
-
rows.push(React.createElement("tr", { key: 'row_' + i }, ...getCols(i)));
|
|
21
|
-
}
|
|
22
|
-
return (React.createElement("table", null,
|
|
23
|
-
React.createElement("tbody", null, rows.map((row) => row))));
|
|
24
|
-
};
|
|
25
|
-
export const QtipPerformance = () => {
|
|
26
|
-
return (React.createElement(React.Fragment, null,
|
|
27
|
-
React.createElement(QTip, null),
|
|
28
|
-
React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4 tw-text-center" }, renderManyQTips())));
|
|
29
|
-
};
|
|
30
|
-
//# sourceMappingURL=QTipPerformance.stories.js.map
|