@seeqdev/qomponents 0.0.2 → 0.0.4
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/Checkbox/Checkbox.d.ts +7 -0
- package/dist/Checkbox/Checkbox.js +23 -0
- package/dist/Checkbox/Checkbox.js.map +1 -0
- package/dist/Checkbox/Checkbox.stories.d.ts +5 -0
- package/dist/Checkbox/Checkbox.stories.js +29 -0
- package/dist/Checkbox/Checkbox.stories.js.map +1 -0
- package/dist/Checkbox/Checkbox.test.d.ts +1 -0
- package/dist/Checkbox/Checkbox.test.js +94 -0
- package/dist/Checkbox/Checkbox.test.js.map +1 -0
- package/dist/Checkbox/Checkbox.types.d.ts +17 -0
- package/dist/Checkbox/Checkbox.types.js +2 -0
- package/dist/Checkbox/Checkbox.types.js.map +1 -0
- package/dist/Checkbox/index.d.ts +1 -0
- package/dist/Checkbox/index.js +2 -0
- package/dist/Checkbox/index.js.map +1 -0
- package/dist/Icon/Icon.stories.js +6 -6
- package/dist/Icon/Icon.stories.js.map +1 -1
- package/dist/Select/Select.js +68 -0
- package/dist/Select/Select.js.map +1 -0
- package/dist/Select/Select.stories.js +32 -0
- package/dist/Select/Select.stories.js.map +1 -0
- package/dist/Select/Select.test.js +23 -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/TextArea/TextArea.d.ts +7 -0
- package/dist/TextArea/TextArea.js +15 -0
- package/dist/TextArea/TextArea.js.map +1 -0
- package/dist/TextArea/TextArea.stories.d.ts +5 -0
- package/dist/TextArea/TextArea.stories.js +35 -0
- package/dist/TextArea/TextArea.stories.js.map +1 -0
- package/dist/TextArea/TextArea.test.d.ts +1 -0
- package/dist/TextArea/TextArea.test.js +68 -0
- package/dist/TextArea/TextArea.test.js.map +1 -0
- package/dist/TextArea/TextArea.types.d.ts +28 -0
- package/dist/TextArea/TextArea.types.js +2 -0
- package/dist/TextArea/TextArea.types.js.map +1 -0
- package/dist/TextArea/index.d.ts +1 -0
- package/dist/TextArea/index.js +2 -0
- package/dist/TextArea/index.js.map +1 -0
- package/dist/TextField/TextField.js +4 -2
- package/dist/TextField/TextField.js.map +1 -1
- package/dist/TextField/TextField.types.d.ts +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.esm.js +35 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +36 -0
- package/dist/index.js.map +1 -1
- package/dist/sharedTypes.js +1 -0
- package/dist/sharedTypes.js.map +1 -0
- package/dist/styles.css +160 -0
- package/package.json +2 -1
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import '../styles.css';
|
|
3
|
+
const alignment = 'tw-flex tw-items-center';
|
|
4
|
+
const labelClasses = 'tw-ml-1.5 tw-text-sm';
|
|
5
|
+
const baseClasses = 'tw-border-1 tw-h-3.5 tw-w-3.5 focus:tw-ring-0 focus:tw-ring-offset-0 tw-outline-none focus:tw-outline-none' +
|
|
6
|
+
' dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-text dark:checked:tw-bg-sq-dark-text' +
|
|
7
|
+
' checked:tw-text-sq-text-color' +
|
|
8
|
+
' disabled:tw-text-sq-fairly-dark-gray';
|
|
9
|
+
const checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses}`;
|
|
10
|
+
const radioClasses = `tw-form-radio ${baseClasses}`;
|
|
11
|
+
/**
|
|
12
|
+
* Checkbox and Radio Box Component.
|
|
13
|
+
*/
|
|
14
|
+
export const Checkbox = (props) => {
|
|
15
|
+
const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, id, name, extraClassNames, extraLabelClassNames, testId, } = props;
|
|
16
|
+
const assignedId = id ?? 'checkbox_' + Math.random();
|
|
17
|
+
return (React.createElement("span", { className: `${alignment} ${extraClassNames}` },
|
|
18
|
+
React.createElement("input", { value: value, type: type, "data-testid": testId, name: name, id: assignedId, checked: checked, className: `${type === 'checkbox' ? checkboxClasses : radioClasses} ${disabled ? 'tw-cursor-not-allowed' : 'tw-cursor-pointer'}`, disabled: disabled, onClick: onClick, onChange: onChange, onKeyDown: onKeyDown }),
|
|
19
|
+
React.createElement("label", { htmlFor: assignedId, className: `${labelClasses} ${extraLabelClassNames} ${disabled
|
|
20
|
+
? 'tw-cursor-not-allowed dark:tw-text-sq-fairly-dark-gray tw-text-sq-fairly-dark-gray'
|
|
21
|
+
: 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'}` }, label)));
|
|
22
|
+
};
|
|
23
|
+
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,CAAC;AAEvB,MAAM,SAAS,GAAG,yBAAyB,CAAC;AAC5C,MAAM,YAAY,GAAG,sBAAsB,CAAC;AAE5C,MAAM,WAAW,GACf,4GAA4G;IAC5G,6FAA6F;IAC7F,iCAAiC;IACjC,uCAAuC,CAAC;AAE1C,MAAM,eAAe,GAAG,+BAA+B,WAAW,EAAE,CAAC;AAErE,MAAM,YAAY,GAAG,iBAAiB,WAAW,EAAE,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA2C,CAAC,KAAK,EAAE,EAAE;IACxE,MAAM,EACJ,IAAI,GAAG,UAAU,EACjB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,EACP,EAAE,EACF,IAAI,EACJ,eAAe,EACf,oBAAoB,EACpB,MAAM,GACP,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAG,EAAE,IAAI,WAAW,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;IAErD,OAAO,CACL,8BAAM,SAAS,EAAE,GAAG,SAAS,IAAI,eAAe,EAAE;QAChD,+BACE,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,iBACG,MAAM,EACnB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,GAAG,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY,IAChE,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,mBACvC,EAAE,EACF,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,GACpB;QACF,+BACE,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,GAAG,YAAY,IAAI,oBAAoB,IAChD,QAAQ;gBACN,CAAC,CAAC,oFAAoF;gBACtF,CAAC,CAAC,mEACN,EAAE,IACD,KAAK,CACA,CACH,CACR,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Checkbox } from './Checkbox';
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Checkbox',
|
|
5
|
+
};
|
|
6
|
+
export const AllCheckboxes = () => {
|
|
7
|
+
const getDisplay = (type) => (React.createElement(React.Fragment, null,
|
|
8
|
+
React.createElement("div", { className: "tw-p-4" },
|
|
9
|
+
React.createElement(Checkbox, { value: "a", type: type, checked: true, label: 'with Label' })),
|
|
10
|
+
React.createElement("div", { className: "tw-p-4" },
|
|
11
|
+
React.createElement(Checkbox, { value: "d", type: type, checked: false, disabled: true, label: "Disabled" })),
|
|
12
|
+
React.createElement("div", { className: "tw-p-4" },
|
|
13
|
+
React.createElement(Checkbox, { value: "d", type: type, checked: true, disabled: true, label: "Disabled" })),
|
|
14
|
+
React.createElement("div", { className: "tw-p-4" },
|
|
15
|
+
React.createElement(Checkbox, { value: "b", type: type, checked: true })),
|
|
16
|
+
React.createElement("div", { className: "tw-p-4" },
|
|
17
|
+
React.createElement(Checkbox, { value: "c", type: type, checked: false }))));
|
|
18
|
+
const renderAllVariations = (type) => (React.createElement(React.Fragment, null,
|
|
19
|
+
React.createElement("div", { className: "tw-p-4 light" }, getDisplay(type)),
|
|
20
|
+
React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" }, getDisplay(type))));
|
|
21
|
+
return (React.createElement("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4" },
|
|
22
|
+
React.createElement("div", null,
|
|
23
|
+
React.createElement("b", null, "Checkbox"),
|
|
24
|
+
renderAllVariations('checkbox')),
|
|
25
|
+
React.createElement("div", null,
|
|
26
|
+
React.createElement("b", null, "Radios"),
|
|
27
|
+
renderAllVariations('radio'))));
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=Checkbox.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.stories.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.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,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,UAAU,GAAG,CAAC,IAA0B,EAAE,EAAE,CAAC,CACjD;QACE,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,GAAI,CAClE;QACN,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAC,UAAU,GAAG,CAC/E;QACN,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAC,UAAU,GAAG,CAC9E;QACN,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,GAAI,CAC7C;QACN,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,GAAI,CAC9C,CACL,CACJ,CAAC;IACF,MAAM,mBAAmB,GAAG,CAAC,IAA0B,EAAE,EAAE,CAAC,CAC1D;QACE,6BAAK,SAAS,EAAC,cAAc,IAAE,UAAU,CAAC,IAAI,CAAC,CAAO;QACtD,6BAAK,SAAS,EAAC,yCAAyC,IAAE,UAAU,CAAC,IAAI,CAAC,CAAO,CAChF,CACJ,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C;YACE,0CAAe;YACd,mBAAmB,CAAC,UAAU,CAAC,CAC5B;QAEN;YACE,wCAAa;YACZ,mBAAmB,CAAC,OAAO,CAAC,CACzB,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '@testing-library/jest-dom';
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import '@testing-library/jest-dom';
|
|
3
|
+
import { render, screen } from '@testing-library/react';
|
|
4
|
+
import { Checkbox } from './Checkbox';
|
|
5
|
+
import userEvent from '@testing-library/user-event';
|
|
6
|
+
describe('Checkbox', () => {
|
|
7
|
+
class Context {
|
|
8
|
+
testId = 'checkboxTestId';
|
|
9
|
+
props = {
|
|
10
|
+
onChange: jest.fn(),
|
|
11
|
+
checked: false,
|
|
12
|
+
testId: this.testId,
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
let tc;
|
|
16
|
+
beforeEach(() => {
|
|
17
|
+
tc = new Context();
|
|
18
|
+
});
|
|
19
|
+
const renderCheckbox = (props) => render(React.createElement(Checkbox, { ...props }));
|
|
20
|
+
it('renders checkbox', () => {
|
|
21
|
+
renderCheckbox(tc.props);
|
|
22
|
+
expect(screen.getByTestId(tc.testId)).toBeInTheDocument();
|
|
23
|
+
});
|
|
24
|
+
it('renders radio', () => {
|
|
25
|
+
renderCheckbox({ ...tc.props, type: 'radio' });
|
|
26
|
+
expect(screen.getByTestId(tc.testId)).toHaveProperty('type', 'radio');
|
|
27
|
+
});
|
|
28
|
+
it('renders label', () => {
|
|
29
|
+
const label = 'look at this checkbox!';
|
|
30
|
+
renderCheckbox({ ...tc.props, label });
|
|
31
|
+
expect(screen.getByText(label)).toBeInTheDocument();
|
|
32
|
+
});
|
|
33
|
+
it('respects checked', () => {
|
|
34
|
+
renderCheckbox({ ...tc.props, checked: true });
|
|
35
|
+
expect(screen.getByTestId(tc.testId)).toBeChecked();
|
|
36
|
+
});
|
|
37
|
+
it('calls onChange handler', async () => {
|
|
38
|
+
const onChange = jest.fn();
|
|
39
|
+
renderCheckbox({ ...tc.props, onChange });
|
|
40
|
+
await userEvent.click(screen.getByTestId(tc.testId));
|
|
41
|
+
expect(onChange).toHaveBeenCalled();
|
|
42
|
+
});
|
|
43
|
+
it('calls onKeyDown handler', async () => {
|
|
44
|
+
const onKeyDown = jest.fn();
|
|
45
|
+
renderCheckbox({ ...tc.props, onKeyDown });
|
|
46
|
+
await userEvent.type(screen.getByTestId(tc.testId), 'a');
|
|
47
|
+
expect(onKeyDown).toHaveBeenCalled();
|
|
48
|
+
});
|
|
49
|
+
it('calls onClickHandler handler', async () => {
|
|
50
|
+
const onClick = jest.fn();
|
|
51
|
+
renderCheckbox({ ...tc.props, onClick });
|
|
52
|
+
await userEvent.click(screen.getByTestId(tc.testId));
|
|
53
|
+
expect(onClick).toHaveBeenCalled();
|
|
54
|
+
});
|
|
55
|
+
it('respects disabled', () => {
|
|
56
|
+
renderCheckbox({ ...tc.props, disabled: true });
|
|
57
|
+
expect(screen.getByTestId(tc.testId)).not.toBeEnabled();
|
|
58
|
+
});
|
|
59
|
+
it('renders label clickable', async () => {
|
|
60
|
+
const label = 'amazing checkbox';
|
|
61
|
+
const onClick = jest.fn();
|
|
62
|
+
renderCheckbox({ ...tc.props, label, onClick });
|
|
63
|
+
expect(screen.getByTestId(tc.testId)).not.toBeChecked();
|
|
64
|
+
await userEvent.click(screen.getByText(label));
|
|
65
|
+
expect(onClick).toHaveBeenCalled();
|
|
66
|
+
});
|
|
67
|
+
it('respects id', () => {
|
|
68
|
+
const id = 'checkboxId';
|
|
69
|
+
renderCheckbox({ ...tc.props, id });
|
|
70
|
+
expect(screen.getByTestId(tc.testId)).toHaveProperty('id', id);
|
|
71
|
+
});
|
|
72
|
+
it('respects name', () => {
|
|
73
|
+
const name = 'checkboxName';
|
|
74
|
+
renderCheckbox({ ...tc.props, name });
|
|
75
|
+
expect(screen.getByTestId(tc.testId)).toHaveProperty('name', name);
|
|
76
|
+
});
|
|
77
|
+
it('respects name', () => {
|
|
78
|
+
const value = 'priceless';
|
|
79
|
+
renderCheckbox({ ...tc.props, value });
|
|
80
|
+
expect(screen.getByTestId(tc.testId)).toHaveProperty('value', value);
|
|
81
|
+
});
|
|
82
|
+
it('applies extraClassNames', () => {
|
|
83
|
+
const extraClassNames = 'extra styling so fancy';
|
|
84
|
+
renderCheckbox({ ...tc.props, extraClassNames });
|
|
85
|
+
expect(screen.getByTestId(tc.testId).parentNode).toHaveClass(extraClassNames);
|
|
86
|
+
});
|
|
87
|
+
it('applies extraLabelClassNames', () => {
|
|
88
|
+
const extraLabelClassNames = 'special label';
|
|
89
|
+
const label = 'amazing checkbox';
|
|
90
|
+
renderCheckbox({ ...tc.props, extraLabelClassNames, label });
|
|
91
|
+
expect(screen.getByText(label)).toHaveClass(extraLabelClassNames);
|
|
92
|
+
});
|
|
93
|
+
});
|
|
94
|
+
//# sourceMappingURL=Checkbox.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.test.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAGxD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAEpD,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,MAAM,OAAO;QACX,MAAM,GAAG,gBAAgB,CAAC;QAC1B,KAAK,GAAkB;YACrB,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE;YACnB,OAAO,EAAE,KAAK;YACd,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,cAAc,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,MAAM,CAAC,oBAAC,QAAQ,OAAK,KAAK,GAAI,CAAC,CAAC;IAEjF,EAAE,CAAC,kBAAkB,EAAE,GAAG,EAAE;QAC1B,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACzB,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,eAAe,EAAE,GAAG,EAAE;QACvB,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;QAC/C,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,eAAe,EAAE,GAAG,EAAE;QACvB,MAAM,KAAK,GAAG,wBAAwB,CAAC;QACvC,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QACvC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kBAAkB,EAAE,GAAG,EAAE;QAC1B,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC/C,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;QACtC,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC3B,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;QAC1C,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,MAAM,CAAC,QAAQ,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACvC,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC5B,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QAC3C,MAAM,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC;QACzD,MAAM,CAAC,SAAS,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACvC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC1B,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;QACzC,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,MAAM,CAAC,OAAO,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;QAC3B,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QAChD,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACvC,MAAM,KAAK,GAAG,kBAAkB,CAAC;QACjC,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC1B,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;QAChD,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;QACxD,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;QAC/C,MAAM,CAAC,OAAO,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,aAAa,EAAE,GAAG,EAAE;QACrB,MAAM,EAAE,GAAG,YAAY,CAAC;QACxB,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;QACpC,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,eAAe,EAAE,GAAG,EAAE;QACvB,MAAM,IAAI,GAAG,cAAc,CAAC;QAC5B,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;QACtC,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACrE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,eAAe,EAAE,GAAG,EAAE;QACvB,MAAM,KAAK,GAAG,WAAW,CAAC;QAC1B,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QACvC,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACvE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,MAAM,eAAe,GAAG,wBAAwB,CAAC;QACjD,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,CAAC,CAAC;QACjD,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;IAChF,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE,GAAG,EAAE;QACtC,MAAM,oBAAoB,GAAG,eAAe,CAAC;QAC7C,MAAM,KAAK,GAAG,kBAAkB,CAAC;QACjC,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,CAAC,CAAC;QAC7D,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAC;IACpE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
type FormControlElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
|
|
2
|
+
export interface CheckboxProps {
|
|
3
|
+
extraClassNames?: string;
|
|
4
|
+
extraLabelClassNames?: string;
|
|
5
|
+
type?: 'radio' | 'checkbox';
|
|
6
|
+
id?: string;
|
|
7
|
+
name?: string;
|
|
8
|
+
checked: boolean;
|
|
9
|
+
value?: string | number;
|
|
10
|
+
label?: string | React.ReactNode;
|
|
11
|
+
onChange?: React.ChangeEventHandler<FormControlElement>;
|
|
12
|
+
onKeyDown?: React.KeyboardEventHandler<FormControlElement>;
|
|
13
|
+
onClick?: React.MouseEventHandler<FormControlElement>;
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
testId?: string;
|
|
16
|
+
}
|
|
17
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.types.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Checkbox as default } from './Checkbox';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC"}
|
|
@@ -16,13 +16,13 @@ export const AllIcons = () => {
|
|
|
16
16
|
iconType),
|
|
17
17
|
React.createElement("br", null),
|
|
18
18
|
React.createElement("div", null,
|
|
19
|
-
React.createElement(Icon, { icon:
|
|
20
|
-
React.createElement(Icon, { icon:
|
|
21
|
-
React.createElement(Icon, { icon:
|
|
19
|
+
React.createElement(Icon, { icon: "fc-announcements", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }),
|
|
20
|
+
React.createElement(Icon, { icon: "fc-announcements", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }),
|
|
21
|
+
React.createElement(Icon, { icon: "fc-announcements", large: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })),
|
|
22
22
|
React.createElement("div", { className: "tw-dark tw-bg-sq-dark-background" },
|
|
23
|
-
React.createElement(Icon, { icon:
|
|
24
|
-
React.createElement(Icon, { icon:
|
|
25
|
-
React.createElement(Icon, { icon:
|
|
23
|
+
React.createElement(Icon, { icon: "fc-announcements", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }),
|
|
24
|
+
React.createElement(Icon, { icon: "fc-announcements", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }),
|
|
25
|
+
React.createElement(Icon, { icon: "fc-announcements", large: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })),
|
|
26
26
|
React.createElement("br", null)));
|
|
27
27
|
})));
|
|
28
28
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.stories.js","sourceRoot":"","sources":["../../src/Icon/Icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAe;IACb,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC/B,OAAO,CACL;YACE,+BAAM;YACN,+BAAM;YACL,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;gBAC1B,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,QAAQ,EAAE;oBACrB;;wBAAS,QAAQ,CAAK;oBACtB,+BAAM;oBACN;wBACE,oBAAC,IAAI,IACH,IAAI,
|
|
1
|
+
{"version":3,"file":"Icon.stories.js","sourceRoot":"","sources":["../../src/Icon/Icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAe;IACb,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC/B,OAAO,CACL;YACE,+BAAM;YACN,+BAAM;YACL,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;gBAC1B,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,QAAQ,EAAE;oBACrB;;wBAAS,QAAQ,CAAK;oBACtB,+BAAM;oBACN;wBACE,oBAAC,IAAI,IACH,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAE,IAAI,EACX,eAAe,EAAE,QAAQ,EACzB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,GAClD;wBACF,oBAAC,IAAI,IACH,IAAI,EAAC,kBAAkB,EACvB,eAAe,EAAE,QAAQ,EACzB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GACnD;wBACF,oBAAC,IAAI,IACH,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAE,IAAI,EACX,eAAe,EAAE,QAAQ,EACzB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,GAChD,CACE;oBACN,6BAAK,SAAS,EAAC,kCAAkC;wBAC/C,oBAAC,IAAI,IACH,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAE,IAAI,EACX,eAAe,EAAE,QAAQ,EACzB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,GAClD;wBACF,oBAAC,IAAI,IACH,IAAI,EAAC,kBAAkB,EACvB,eAAe,EAAE,QAAQ,EACzB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GACnD;wBACF,oBAAC,IAAI,IACH,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAE,IAAI,EACX,eAAe,EAAE,QAAQ,EACzB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,GAChD,CACE;oBACN,+BAAM,CACF,CACP,CAAC;YACJ,CAAC,CAAC,CACD,CACJ,CAAC;IACJ,CAAC,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"}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import '../styles.css';
|
|
3
|
+
import { default as ReactSelect } from 'react-select';
|
|
4
|
+
/**
|
|
5
|
+
* Select Component
|
|
6
|
+
* - based on react-select (https://react-select.com/)
|
|
7
|
+
* - include tooltips and/or icons
|
|
8
|
+
*/
|
|
9
|
+
const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no matching options', isSearchable = false, creatable = false, isMulti = false, isClearable = true, closeMenuOnSelect = true, id, inputId, menuPortalTarget, onChange, }) => {
|
|
10
|
+
// figure out the height thing
|
|
11
|
+
const theHeight = ''; //'tw-h-inputs';
|
|
12
|
+
const baseClasses = theHeight + ' ' + 'tw-px-2.5 focus:tw-ring-0 disabled:tw-pointer-events-none ';
|
|
13
|
+
const borderStyles = [
|
|
14
|
+
theHeight,
|
|
15
|
+
'tw-border-solid',
|
|
16
|
+
'tw-border',
|
|
17
|
+
'tw-border-sq-disabled-gray',
|
|
18
|
+
'hover:tw-border-sq-color-dark',
|
|
19
|
+
'focus:tw-border-sq-color-dark',
|
|
20
|
+
'active:tw-border-sq-color-dark',
|
|
21
|
+
'dark:tw-border-sq-dark-disabled-gray',
|
|
22
|
+
'dark:hover:tw-border-sq-color-dark-dark',
|
|
23
|
+
'dark:focus:tw-border-sq-color-dark-dark',
|
|
24
|
+
'dark:active:tw-border-sq-color-dark-dark',
|
|
25
|
+
].join(' ');
|
|
26
|
+
const textStyles = ['tw-text-sq-text-color', 'dark:tw-text-sq-dark-text', 'tw-text-sm'].join(' ');
|
|
27
|
+
const textActiveStyles = [
|
|
28
|
+
'hover:tw-text-sq-color-dark',
|
|
29
|
+
'focus:tw-text-sq-color-dark',
|
|
30
|
+
'active:tw-text-sq-color-dark',
|
|
31
|
+
'dark:tw-text-sq-dark-disabled-gray',
|
|
32
|
+
'dark:hover:tw-text-sq-color-dark-dark',
|
|
33
|
+
'dark:focus:tw-text-sq-color-dark-dark',
|
|
34
|
+
'dark:active:tw-text-sq-color-dark-dark',
|
|
35
|
+
].join(' ');
|
|
36
|
+
const menuStyles = [
|
|
37
|
+
'tw-border-solid',
|
|
38
|
+
'tw-border-x',
|
|
39
|
+
'tw-border-b',
|
|
40
|
+
'tw-rounded-b',
|
|
41
|
+
'tw-border-sq-disabled-gray',
|
|
42
|
+
'dark:tw-border-sq-dark-disabled-gray',
|
|
43
|
+
].join(' ');
|
|
44
|
+
const dropDownIndicatorStyles = `${textStyles} ${textActiveStyles}`;
|
|
45
|
+
return (React.createElement(ReactSelect, { id: id, value: value, inputId: inputId, placeholder: placeholder, closeMenuOnSelect: closeMenuOnSelect, isSearchable: isSearchable, isMulti: isMulti, isClearable: isClearable, noOptionsMessage: () => noOptionsMessage, menuPortalTarget: menuPortalTarget, onChange: onChange, unstyled: true, classNames: {
|
|
46
|
+
control: (state) => {
|
|
47
|
+
const appliedClasses = state.menuIsOpen
|
|
48
|
+
? `${borderStyles} tw-rounded-t-sm reactSelectMinHeight `
|
|
49
|
+
: `${borderStyles} tw-rounded-sm reactSelectMinHeight `;
|
|
50
|
+
return `${appliedClasses} ${baseClasses}`;
|
|
51
|
+
},
|
|
52
|
+
placeholder: () => 'tw-text-gray-400 dark:tw-text-sq-dark-text-lighter',
|
|
53
|
+
container: () => textStyles + ' ',
|
|
54
|
+
input: () => textStyles + '',
|
|
55
|
+
menuList: () => 'tw-rounded-b tw-bg-white dark:tw-bg-sq-dark-background',
|
|
56
|
+
menu: () => menuStyles,
|
|
57
|
+
dropdownIndicator: () => dropDownIndicatorStyles,
|
|
58
|
+
option: (state) => {
|
|
59
|
+
const classes = 'hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-py-1 tw-px-2.5 ';
|
|
60
|
+
return state.isSelected ? classes + 'tw-bg-sq-colored-hover dark:tw-bg-sq-colored-hover-dark' : classes;
|
|
61
|
+
},
|
|
62
|
+
multiValue: () => 'tw-bg-sq-disabled-gray tw-text-sm tw-py-0.5 tw-px-1 tw-m-0.5 tw-rounded-sm',
|
|
63
|
+
multiValueRemove: () => 'hover:tw-text-sq-danger-color',
|
|
64
|
+
clearIndicator: () => 'hover:tw-text-sq-danger-color',
|
|
65
|
+
}, options: options }));
|
|
66
|
+
};
|
|
67
|
+
export default Select;
|
|
68
|
+
//# sourceMappingURL=Select.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Select from './Select';
|
|
3
|
+
import { TextField } from '../index';
|
|
4
|
+
export default {
|
|
5
|
+
title: 'Select',
|
|
6
|
+
};
|
|
7
|
+
export const AllSelectVariants = () => {
|
|
8
|
+
const options = [
|
|
9
|
+
{ value: 'chocolate', label: 'Chocolate' },
|
|
10
|
+
{ value: 'strawberry', label: 'Strawberry' },
|
|
11
|
+
{ value: 'vanilla', label: 'Vanilla' },
|
|
12
|
+
];
|
|
13
|
+
const renderAllVariations = () => (React.createElement(React.Fragment, null,
|
|
14
|
+
React.createElement("div", { className: "tw-grid tw-gap-4" },
|
|
15
|
+
React.createElement("div", { className: "tw-p-40" },
|
|
16
|
+
React.createElement(Select, { onChange: () => { }, options: options, placeholder: "pick", isMulti: true, isSearchable: false })),
|
|
17
|
+
React.createElement("div", { className: "tw-p-40 tw-dark tw-bg-sq-dark-background" },
|
|
18
|
+
React.createElement("div", { className: "tw-grid tw-grid-cols-2 " },
|
|
19
|
+
React.createElement(TextField, { value: 'hi' }),
|
|
20
|
+
React.createElement(Select, { options: options, onChange: () => { } }))))));
|
|
21
|
+
return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
|
|
22
|
+
React.createElement("div", { className: "color_topic" },
|
|
23
|
+
React.createElement("b", null, "Topic Colors"),
|
|
24
|
+
renderAllVariations()),
|
|
25
|
+
React.createElement("div", { className: "color_analysis" },
|
|
26
|
+
React.createElement("b", null, "Analysis Colors"),
|
|
27
|
+
renderAllVariations()),
|
|
28
|
+
React.createElement("div", { className: "color_datalab" },
|
|
29
|
+
React.createElement("b", null, "Datalab Colors"),
|
|
30
|
+
renderAllVariations())));
|
|
31
|
+
};
|
|
32
|
+
//# sourceMappingURL=Select.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select.stories.js","sourceRoot":"","sources":["../../src/Select/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,eAAe;IACb,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,MAAM,OAAO,GAAG;QACd,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;QAC1C,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE;QAC5C,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;KACvC,CAAC;IACF,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CAChC;QACE,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,6BAAK,SAAS,EAAC,SAAS;gBACtB,oBAAC,MAAM,IAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAC,MAAM,EAAC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,GAAI,CACnG;YACN,6BAAK,SAAS,EAAC,0CAA0C;gBACvD,6BAAK,SAAS,EAAC,yBAAyB;oBACtC,oBAAC,SAAS,IAAC,KAAK,EAAE,IAAI,GAAI;oBAC1B,oBAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GAAI,CAC5C,CACF,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"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import '@testing-library/jest-dom';
|
|
3
|
+
import { render } from '@testing-library/react';
|
|
4
|
+
import Select from './Select';
|
|
5
|
+
describe('Button', () => {
|
|
6
|
+
class Context {
|
|
7
|
+
testId = 'buttonTestId';
|
|
8
|
+
label = 'button label';
|
|
9
|
+
props = {
|
|
10
|
+
onChange: jest.fn(),
|
|
11
|
+
options: [],
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
let tc;
|
|
15
|
+
beforeEach(() => {
|
|
16
|
+
tc = new Context();
|
|
17
|
+
});
|
|
18
|
+
const renderSelect = (props) => render(React.createElement(Select, { ...props }));
|
|
19
|
+
it('TODO', () => {
|
|
20
|
+
expect(true).toBeTruthy();
|
|
21
|
+
});
|
|
22
|
+
});
|
|
23
|
+
//# sourceMappingURL=Select.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select.test.js","sourceRoot":"","sources":["../../src/Select/Select.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,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,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE;YACnB,OAAO,EAAE,EAAE;SACZ,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,MAAM,EAAE,GAAG,EAAE;QACd,MAAM,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select.types.js","sourceRoot":"","sources":["../../src/Select/Select.types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
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';
|
|
5
|
+
const darkTheme = 'dark:tw-border-sq-dark-disabled-gray dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text' +
|
|
6
|
+
' dark:focus:tw-border-sq-color-dark-dark dark:active:tw-border-sq-color-dark-dark';
|
|
7
|
+
const lightTheme = 'tw-border-sq-disabled-gray tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';
|
|
8
|
+
/**
|
|
9
|
+
* TextArea.
|
|
10
|
+
*/
|
|
11
|
+
export const TextArea = ({ readonly = false, onChange, onKeyUp, id, name, rows = 3, cols = undefined, value, placeholder, extraClassNames, testId, autofocus = false, }) => {
|
|
12
|
+
const appliedClasses = `${baseClasses} ${extraClassNames} ${lightTheme} ${darkTheme}`;
|
|
13
|
+
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 }));
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=TextArea.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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,kEAAkE,CAAC;AAErE,MAAM,SAAS,GACb,8FAA8F;IAC9F,mFAAmF,CAAC;AACtF,MAAM,UAAU,GACd,+GAA+G,CAAC;AAElH;;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,GAClB,EAAE,EAAE;IACH,MAAM,cAAc,GAAG,GAAG,WAAW,IAAI,eAAe,IAAI,UAAU,IAAI,SAAS,EAAE,CAAC;IAEtF,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"}
|
|
@@ -0,0 +1,35 @@
|
|
|
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, { value: "read-only", readonly: true }))),
|
|
17
|
+
React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
|
|
18
|
+
React.createElement("div", { className: "tw-p-4" },
|
|
19
|
+
React.createElement(TextArea, { value: "value provided" })),
|
|
20
|
+
React.createElement("div", { className: "tw-p-4" },
|
|
21
|
+
React.createElement(TextArea, { placeholder: "placeholder text" })),
|
|
22
|
+
React.createElement("div", { className: "tw-p-4" },
|
|
23
|
+
React.createElement(TextArea, { value: "read-only", readonly: true })))));
|
|
24
|
+
return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
|
|
25
|
+
React.createElement("div", { className: "color_topic" },
|
|
26
|
+
React.createElement("b", null, "Topic Colors"),
|
|
27
|
+
renderAllVariations()),
|
|
28
|
+
React.createElement("div", { className: "color_analysis" },
|
|
29
|
+
React.createElement("b", null, "Analysis Colors"),
|
|
30
|
+
renderAllVariations()),
|
|
31
|
+
React.createElement("div", { className: "color_datalab" },
|
|
32
|
+
React.createElement("b", null, "Datalab Colors"),
|
|
33
|
+
renderAllVariations())));
|
|
34
|
+
};
|
|
35
|
+
//# sourceMappingURL=TextArea.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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,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,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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '@testing-library/jest-dom';
|
|
@@ -0,0 +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, 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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextArea.test.js","sourceRoot":"","sources":["../../src/TextArea/TextArea.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
type FormControlElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
|
|
2
|
+
export interface TextAreaProps {
|
|
3
|
+
/** extra class names to be placed on the TextArea component */
|
|
4
|
+
extraClassNames?: string;
|
|
5
|
+
/** id of TextArea */
|
|
6
|
+
id?: string;
|
|
7
|
+
/** name of TextArea */
|
|
8
|
+
name?: string;
|
|
9
|
+
/** function that will be called when TextArea value changes */
|
|
10
|
+
onChange?: React.ChangeEventHandler<FormControlElement>;
|
|
11
|
+
/** function that will be called on key up within the TextArea */
|
|
12
|
+
onKeyUp?: React.KeyboardEventHandler<FormControlElement>;
|
|
13
|
+
/** placeholder text displayed when TextArea is empty */
|
|
14
|
+
placeholder?: string;
|
|
15
|
+
/** set readonly to true if TextArea can not be edited */
|
|
16
|
+
readonly?: boolean;
|
|
17
|
+
/** specifies the visible number of lines in the TextArea */
|
|
18
|
+
rows?: number;
|
|
19
|
+
/** specifies the visible width of the TextArea */
|
|
20
|
+
cols?: number;
|
|
21
|
+
/** set this to true to focus the TextArea when page loads */
|
|
22
|
+
autofocus?: boolean;
|
|
23
|
+
/** id that will be used in the data-testid attribute on the TextArea */
|
|
24
|
+
testId?: string;
|
|
25
|
+
/** value of the TextArea */
|
|
26
|
+
value?: string | string[] | number;
|
|
27
|
+
}
|
|
28
|
+
export {};
|