@seeqdev/qomponents 0.0.16 → 0.0.17
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/README.md +13 -2
- package/dist/example/package-lock.json +3369 -0
- package/dist/example/src/ComplexSelectExample.tsx +81 -0
- package/dist/example/src/Example.tsx +11 -2
- package/dist/example/src/index.css +20 -0
- package/dist/example/src/main.tsx +1 -1
- package/dist/example/tsconfig.node.json +4 -2
- package/package.json +2 -2
- package/dist/Button/Button.js +0 -71
- package/dist/Button/Button.js.map +0 -1
- package/dist/Button/Button.stories.js +0 -58
- 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 -54
- 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 -15
- package/dist/TextArea/TextArea.js.map +0 -1
- package/dist/TextArea/TextArea.stories.js +0 -35
- 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 -56
- package/dist/TextField/TextField.js.map +0 -1
- package/dist/TextField/TextField.stories.js +0 -37
- 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/Tooltip.js +0 -30
- 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/index.js +0 -2
- 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
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Icon, Select } from '@seeqdev/qomponents';
|
|
3
|
+
|
|
4
|
+
export interface SelectOption {
|
|
5
|
+
id: string;
|
|
6
|
+
label: string;
|
|
7
|
+
color: string;
|
|
8
|
+
asset: string;
|
|
9
|
+
type: 'SCALAR' | 'STRING' | 'NUMERIC';
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
const options: SelectOption[] = [
|
|
13
|
+
{ id: '1', label: 'Label for the first entry', color: 'pink', asset: 'Asset 1', type: 'NUMERIC' },
|
|
14
|
+
{ id: '2', label: 'Label for the second entry', color: 'green', asset: 'Asset 2', type: 'SCALAR' },
|
|
15
|
+
{ id: '3', label: 'Label for the third entry', color: 'orange', asset: 'Asset 3', type: 'STRING' },
|
|
16
|
+
];
|
|
17
|
+
|
|
18
|
+
interface ComplexSelectExampleProps {
|
|
19
|
+
onChange: (selectedOption: SelectOption) => void;
|
|
20
|
+
value: SelectOption | undefined;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
function ComplexSelectExample({ onChange, value }: ComplexSelectExampleProps) {
|
|
24
|
+
const getIcon = (type: string) => {
|
|
25
|
+
switch (type) {
|
|
26
|
+
case 'STRING':
|
|
27
|
+
return 'fa fa-font';
|
|
28
|
+
case 'SCALAR':
|
|
29
|
+
return 'fc-scalar';
|
|
30
|
+
default:
|
|
31
|
+
return 'fc-series';
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
/**
|
|
35
|
+
* This function formats the select option as desired. You can apply css styling here or use additional qomponents
|
|
36
|
+
* to style the select option display.
|
|
37
|
+
*
|
|
38
|
+
* You can use the same function to format the selected value or use a different one (sometimes having a separate
|
|
39
|
+
* function is helpful if you want to limit the space that is taken up by the selected option).
|
|
40
|
+
*
|
|
41
|
+
* This example shows how to use an additional Icon component (styled in color based on the select option) as well
|
|
42
|
+
* as how to display the properties of the select option
|
|
43
|
+
*/
|
|
44
|
+
const getOptionLabel = (optionValue: SelectOption): React.ReactNode => {
|
|
45
|
+
return (
|
|
46
|
+
<div className="selectOptionWrapperDiv">
|
|
47
|
+
<Icon icon={getIcon(optionValue.type)} type="color" color={optionValue.color} extraClassNames="mr-10" />
|
|
48
|
+
<div className="selectOptionDiv">
|
|
49
|
+
<div className="selectOption">
|
|
50
|
+
<strong>{optionValue.label}</strong>
|
|
51
|
+
</div>
|
|
52
|
+
<div className="selectOptionSubText">{optionValue.asset}</div>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
);
|
|
56
|
+
};
|
|
57
|
+
const getOptionValue = (option: SelectOption) => {
|
|
58
|
+
return option.id;
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
return (
|
|
62
|
+
// use the getOptionLabel function to provide a custom render function that determines how the select options
|
|
63
|
+
// are displayed
|
|
64
|
+
// use the getSelectedValueLabel function to provide a custom render function that determines how the selected
|
|
65
|
+
// option is displayed
|
|
66
|
+
<Select
|
|
67
|
+
placeholder="formatted select options"
|
|
68
|
+
extraClassNames="formElementWidth"
|
|
69
|
+
options={options}
|
|
70
|
+
value={value}
|
|
71
|
+
getOptionLabel={getOptionLabel}
|
|
72
|
+
getOptionValue={getOptionValue}
|
|
73
|
+
getSelectedValueLabel={getOptionLabel}
|
|
74
|
+
onChange={(selectedOption: SelectOption) => {
|
|
75
|
+
onChange(selectedOption);
|
|
76
|
+
}}
|
|
77
|
+
/>
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
export default ComplexSelectExample;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Button, Checkbox, Icon, Select, TextArea, TextField, Tooltip } from '@seeqdev/qomponents';
|
|
3
|
+
import ComplexSelectExample, { SelectOption } from './ComplexSelectExample';
|
|
3
4
|
|
|
4
5
|
const availableThemes = [
|
|
5
6
|
{ display: 'Analysis', value: 'color_analysis' },
|
|
@@ -23,7 +24,7 @@ function Example() {
|
|
|
23
24
|
*/
|
|
24
25
|
const [theme, setTheme] = React.useState('color_analysis');
|
|
25
26
|
/**
|
|
26
|
-
* qomponents also support dark-mode. To
|
|
27
|
+
* qomponents also support dark-mode. To render qomponents using dark-mode wrap your addOn in a div and assign the
|
|
27
28
|
* class "tw-dark" for dark-mode or "tw-light" for light mode.
|
|
28
29
|
*/
|
|
29
30
|
const [mode, setMode] = React.useState('tw-light');
|
|
@@ -34,6 +35,7 @@ function Example() {
|
|
|
34
35
|
const [textFieldValue, setTextFieldValue] = React.useState('');
|
|
35
36
|
const [textAreaValue, setTextAreaValue] = React.useState('');
|
|
36
37
|
const [selectValue, setSelectValue] = React.useState();
|
|
38
|
+
const [complexSelectedValue, setComplexSelectedValue] = React.useState<SelectOption>();
|
|
37
39
|
const [display, setDisplay] = React.useState('');
|
|
38
40
|
const [easeOfUse, setEaseOfUse] = React.useState(false);
|
|
39
41
|
const [lookAndFeel, setLookAndFeel] = React.useState(false);
|
|
@@ -91,7 +93,7 @@ function Example() {
|
|
|
91
93
|
<div className="labelWidth">Description</div>
|
|
92
94
|
<TextArea
|
|
93
95
|
value={textAreaValue}
|
|
94
|
-
onChange={(e) => setTextAreaValue(e.target.value)}
|
|
96
|
+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTextAreaValue(e.target.value)}
|
|
95
97
|
extraClassNames="formElementWidth"
|
|
96
98
|
placeholder="provide some text here"
|
|
97
99
|
/>
|
|
@@ -120,6 +122,13 @@ function Example() {
|
|
|
120
122
|
placeholder="please choose"
|
|
121
123
|
/>
|
|
122
124
|
</div>
|
|
125
|
+
<div className="formRow">
|
|
126
|
+
<div className="labelWidth">Advanced</div>
|
|
127
|
+
<ComplexSelectExample
|
|
128
|
+
value={complexSelectedValue}
|
|
129
|
+
onChange={(selectedOption: SelectOption) => setComplexSelectedValue(selectedOption)}
|
|
130
|
+
/>
|
|
131
|
+
</div>
|
|
123
132
|
<div className="buttonRow">
|
|
124
133
|
<Button
|
|
125
134
|
label="Cancel"
|
|
@@ -71,3 +71,23 @@
|
|
|
71
71
|
margin-left: 10px;
|
|
72
72
|
}
|
|
73
73
|
|
|
74
|
+
/* styles for complexSelect*/
|
|
75
|
+
.selectOptionWrapperDiv {
|
|
76
|
+
display: flex;
|
|
77
|
+
flex-direction: row;
|
|
78
|
+
align-items: center;
|
|
79
|
+
height: 34px;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.selectOptionDiv {
|
|
83
|
+
display: flex;
|
|
84
|
+
flex-direction: column;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.selectOptionSubText {
|
|
88
|
+
font-size: smaller;
|
|
89
|
+
padding: 0;
|
|
90
|
+
margin-top: -6px;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* end styles for complexSelect*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seeqdev/qomponents",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.17",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.esm.js",
|
|
6
6
|
"types": "dist/index.js",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"bugs": {
|
|
29
29
|
"url": "TODO"
|
|
30
30
|
},
|
|
31
|
-
"homepage": "
|
|
31
|
+
"homepage": "https://seeq12.github.io/qomponents-documentation/",
|
|
32
32
|
"peerDependencies": {
|
|
33
33
|
"react": ">=17.0.0",
|
|
34
34
|
"react-dom": ">=17.0.0"
|
package/dist/Button/Button.js
DELETED
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import '../styles.css';
|
|
3
|
-
import { browserIsFirefox } from '../utils/browserId';
|
|
4
|
-
import Tooltip from '../Tooltip';
|
|
5
|
-
import Icon from '../Icon';
|
|
6
|
-
/**
|
|
7
|
-
* All-in-one Button:
|
|
8
|
-
* - use "variant" to achieve the desired style
|
|
9
|
-
* - include tooltips and/or icons
|
|
10
|
-
*/
|
|
11
|
-
const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, }) => {
|
|
12
|
-
const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';
|
|
13
|
-
const baseClassesByVariant = {
|
|
14
|
-
'outline': 'tw-border-solid tw-border',
|
|
15
|
-
'theme': 'disabled:tw-bg-opacity-50',
|
|
16
|
-
'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-bg-opacity-50',
|
|
17
|
-
'theme-light': 'disabled:tw-bg-opacity-50',
|
|
18
|
-
'no-border': '',
|
|
19
|
-
'warning': 'tw-bg-sq-warning-color',
|
|
20
|
-
};
|
|
21
|
-
const textClassesByVariantLightTheme = {
|
|
22
|
-
'outline': 'tw-text-sq-text-color',
|
|
23
|
-
'theme': 'tw-text-white',
|
|
24
|
-
'theme-light': 'tw-text-white',
|
|
25
|
-
'danger': 'tw-text-white',
|
|
26
|
-
'no-border': 'tw-text-sq-text-color',
|
|
27
|
-
'warning': 'tw-text-white',
|
|
28
|
-
};
|
|
29
|
-
const textClassesByVariantDarkTheme = {
|
|
30
|
-
'outline': 'dark:tw-text-sq-dark-text',
|
|
31
|
-
'theme': 'dark:tw-text-white',
|
|
32
|
-
'theme-light': 'dark:tw-text-white',
|
|
33
|
-
'danger': 'dark:tw-text-white',
|
|
34
|
-
'no-border': 'dark:tw-text-sq-dark-text',
|
|
35
|
-
'warning': 'dark:tw-text-white',
|
|
36
|
-
};
|
|
37
|
-
const classesByVariantLightTheme = {
|
|
38
|
-
'outline': 'tw-border-sq-disabled-gray hover:tw-bg-sq-light-gray' +
|
|
39
|
-
' focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark active:tw-border-sq-color-dark',
|
|
40
|
-
'theme': 'tw-bg-sq-color-dark hover:tw-bg-sq-color-highlight',
|
|
41
|
-
'danger': '',
|
|
42
|
-
'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link',
|
|
43
|
-
'no-border': '',
|
|
44
|
-
'warning': 'tw-bg-sq-warning-color',
|
|
45
|
-
};
|
|
46
|
-
const classesByVariantDarkTheme = {
|
|
47
|
-
'outline': 'dark:tw-border-sq-dark-disabled-gray dark:hover:tw-bg-sq-highlight-color-dark' +
|
|
48
|
-
' dark:focus:tw-bg-sq-dark-gray dark:active:tw-bg-sq-dark-gray dark:focus:tw-border-sq-color-dark' +
|
|
49
|
-
' dark:active:tw-border-sq-color-dark',
|
|
50
|
-
'theme': 'dark:tw-bg-sq-color-dark dark:hover:tw-bg-sq-color-highlight',
|
|
51
|
-
'danger': '',
|
|
52
|
-
'theme-light': 'dark:tw-bg-sq-icon-dark dark:hover:tw-bg-sq-link-dark',
|
|
53
|
-
'no-border': '',
|
|
54
|
-
'warning': '',
|
|
55
|
-
};
|
|
56
|
-
const sizeClasses = {
|
|
57
|
-
sm: 'tw-text-sm',
|
|
58
|
-
lg: 'tw-text-xl',
|
|
59
|
-
};
|
|
60
|
-
const appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
|
|
61
|
-
const button = (React.createElement("button", { id: id, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
|
|
62
|
-
stopPropagation && e.stopPropagation();
|
|
63
|
-
onClick && onClick();
|
|
64
|
-
}, className: appliedClasses },
|
|
65
|
-
icon && (React.createElement(Icon, { icon: icon, type: iconStyle, color: iconColor, extraClassNames: label ?
|
|
66
|
-
`tw-mr-1 ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` })),
|
|
67
|
-
label));
|
|
68
|
-
return tooltip ? (React.createElement(Tooltip, { text: tooltip, ...tooltipOptions }, button)) : (button);
|
|
69
|
-
};
|
|
70
|
-
export default Button;
|
|
71
|
-
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import Button from './Button';
|
|
3
|
-
import { buttonVariants } from './Button.types';
|
|
4
|
-
export default {
|
|
5
|
-
title: 'Button',
|
|
6
|
-
};
|
|
7
|
-
export const AllButtonVariants = () => {
|
|
8
|
-
const renderAllVariations = () => (React.createElement(React.Fragment, null, buttonVariants.map((variant) => (React.createElement("div", { key: `{variant_${variant}`, className: "tw-grid tw-grid-cols-2 tw-gap-4" },
|
|
9
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
10
|
-
React.createElement(Button, { label: `Variant: ${variant}`, onClick: () => { }, variant: variant })),
|
|
11
|
-
React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
|
|
12
|
-
React.createElement(Button, { label: `Variant: ${variant}`, onClick: () => { }, variant: variant })))))));
|
|
13
|
-
return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
|
|
14
|
-
React.createElement("div", { className: "color_topic" },
|
|
15
|
-
React.createElement("b", null, "Topic Colors"),
|
|
16
|
-
renderAllVariations()),
|
|
17
|
-
React.createElement("div", { className: "color_analysis" },
|
|
18
|
-
React.createElement("b", null, "Analysis Colors"),
|
|
19
|
-
renderAllVariations()),
|
|
20
|
-
React.createElement("div", { className: "color_datalab" },
|
|
21
|
-
React.createElement("b", null, "Datalab Colors"),
|
|
22
|
-
renderAllVariations())));
|
|
23
|
-
};
|
|
24
|
-
export const ButtonWithTooltip = () => {
|
|
25
|
-
const renderButtonWithTooltip = () => (React.createElement(React.Fragment, null,
|
|
26
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
27
|
-
React.createElement(Button, { tooltip: "Helpful tooltip", variant: "theme", label: "Hover me" })),
|
|
28
|
-
React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
|
|
29
|
-
React.createElement(Button, { tooltip: "Helpful tooltip", variant: "theme", label: "Hover me" }))));
|
|
30
|
-
return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
|
|
31
|
-
React.createElement("div", { className: "color_topic" },
|
|
32
|
-
React.createElement("b", null, "Topic Colors"),
|
|
33
|
-
renderButtonWithTooltip()),
|
|
34
|
-
React.createElement("div", { className: "color_analysis" },
|
|
35
|
-
React.createElement("b", null, "Analysis Colors"),
|
|
36
|
-
renderButtonWithTooltip()),
|
|
37
|
-
React.createElement("div", { className: "color_datalab" },
|
|
38
|
-
React.createElement("b", null, "Datalab Colors"),
|
|
39
|
-
renderButtonWithTooltip())));
|
|
40
|
-
};
|
|
41
|
-
export const ButtonWithIcon = () => {
|
|
42
|
-
const renderButtonWithIcon = () => (React.createElement(React.Fragment, null,
|
|
43
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
44
|
-
React.createElement(Button, { icon: "fc-search-power", variant: "theme", label: "With Icon" })),
|
|
45
|
-
React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
|
|
46
|
-
React.createElement(Button, { icon: "fc-search-power", variant: "theme", label: "With Icon" }))));
|
|
47
|
-
return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
|
|
48
|
-
React.createElement("div", { className: "color_topic" },
|
|
49
|
-
React.createElement("b", null, "Topic Colors"),
|
|
50
|
-
renderButtonWithIcon()),
|
|
51
|
-
React.createElement("div", { className: "color_analysis" },
|
|
52
|
-
React.createElement("b", null, "Analysis Colors"),
|
|
53
|
-
renderButtonWithIcon()),
|
|
54
|
-
React.createElement("div", { className: "color_datalab" },
|
|
55
|
-
React.createElement("b", null, "Datalab Colors"),
|
|
56
|
-
renderButtonWithIcon())));
|
|
57
|
-
};
|
|
58
|
-
//# sourceMappingURL=Button.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../src/Button/Button.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,49 +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 Button from './Button';
|
|
6
|
-
describe('Button', () => {
|
|
7
|
-
class Context {
|
|
8
|
-
testId = 'buttonTestId';
|
|
9
|
-
label = 'button label';
|
|
10
|
-
props = {
|
|
11
|
-
label: this.label,
|
|
12
|
-
onClick: jest.fn(),
|
|
13
|
-
testId: this.testId,
|
|
14
|
-
};
|
|
15
|
-
}
|
|
16
|
-
let tc;
|
|
17
|
-
beforeEach(() => {
|
|
18
|
-
tc = new Context();
|
|
19
|
-
});
|
|
20
|
-
const renderButton = (props) => render(React.createElement(Button, { ...props }));
|
|
21
|
-
it('renders button label', () => {
|
|
22
|
-
renderButton(tc.props);
|
|
23
|
-
expect(screen.getByText(tc.label)).toBeInTheDocument();
|
|
24
|
-
});
|
|
25
|
-
it('calls on click', async () => {
|
|
26
|
-
renderButton(tc.props);
|
|
27
|
-
await userEvent.click(screen.getByTestId(tc.testId));
|
|
28
|
-
expect(tc.props.onClick).toHaveBeenCalled();
|
|
29
|
-
});
|
|
30
|
-
it('renders disabled button', () => {
|
|
31
|
-
renderButton({ ...tc.props, disabled: true });
|
|
32
|
-
expect(screen.getByText(tc.label)).toBeDisabled();
|
|
33
|
-
});
|
|
34
|
-
it('respects stopPropagation default', async () => {
|
|
35
|
-
const callOnPropagation = jest.fn();
|
|
36
|
-
render(React.createElement("div", { onClick: callOnPropagation },
|
|
37
|
-
React.createElement(Button, { ...tc.props })));
|
|
38
|
-
await userEvent.click(screen.getByTestId(tc.testId));
|
|
39
|
-
expect(callOnPropagation).not.toHaveBeenCalled();
|
|
40
|
-
});
|
|
41
|
-
it('propagates click event if not told not to', async () => {
|
|
42
|
-
const callOnPropagation = jest.fn();
|
|
43
|
-
render(React.createElement("div", { onClick: callOnPropagation },
|
|
44
|
-
React.createElement(Button, { ...{ ...tc.props, stopPropagation: false } })));
|
|
45
|
-
await userEvent.click(screen.getByTestId(tc.testId));
|
|
46
|
-
expect(callOnPropagation).toHaveBeenCalled();
|
|
47
|
-
});
|
|
48
|
-
});
|
|
49
|
-
//# sourceMappingURL=Button.test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Button.test.js","sourceRoot":"","sources":["../../src/Button/Button.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAEpD,OAAO,MAAM,MAAM,UAAU,CAAC;AAG9B,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,MAAM,OAAO;QACX,MAAM,GAAG,cAAc,CAAC;QACxB,KAAK,GAAG,cAAc,CAAC;QACvB,KAAK,GAAgB;YACnB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE;YAClB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;KACH;IAED,IAAI,EAAW,CAAC;IAChB,UAAU,CAAC,GAAG,EAAE;QACd,EAAE,GAAG,IAAI,OAAO,EAAE,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,MAAM,CAAC,oBAAC,MAAM,OAAK,KAAK,GAAI,CAAC,CAAC;IAE3E,EAAE,CAAC,sBAAsB,EAAE,GAAG,EAAE;QAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACvB,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACzD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACvB,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACpC,MAAM,CACJ,6BAAK,OAAO,EAAE,iBAAiB;YAC7B,oBAAC,MAAM,OAAK,EAAE,CAAC,KAAK,GAAI,CACpB,CACP,CAAC;QACF,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,MAAM,CAAC,iBAAiB,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACpC,MAAM,CACJ,6BAAK,OAAO,EAAE,iBAAiB;YAC7B,oBAAC,MAAM,OAAK,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,GAAI,CACnD,CACP,CAAC;QACF,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,MAAM,CAAC,iBAAiB,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC/C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Button.types.js","sourceRoot":"","sources":["../../src/Button/Button.types.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAC;AAC1E,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,CAAU,CAAC;AACjD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,CAAU,CAAC"}
|
package/dist/Button/index.js
DELETED
package/dist/Button/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Button/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 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, defaultChecked, 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, defaultChecked: defaultChecked, 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
|
|
@@ -1 +0,0 @@
|
|
|
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,cAAc,EACd,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,cAAc,EAAE,cAAc,EAC9B,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"}
|
|
@@ -1,29 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
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"}
|
|
@@ -1,94 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.test.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.types.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.types.ts"],"names":[],"mappings":""}
|
package/dist/Checkbox/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC"}
|