@seeqdev/qomponents 0.0.48 → 0.0.49
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/index.esm.js +1 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/styles.css +36 -34
- package/package.json +1 -1
- package/dist/Button/Button.js +0 -87
- 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 -24
- package/dist/Checkbox/Checkbox.js.map +0 -1
- package/dist/Checkbox/Checkbox.stories.js +0 -32
- 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 -63
- 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/Modal/Modal.js +0 -103
- package/dist/Modal/Modal.js.map +0 -1
- package/dist/Modal/Modal.stories.js +0 -176
- package/dist/Modal/Modal.stories.js.map +0 -1
- package/dist/Modal/Modal.test.js +0 -108
- package/dist/Modal/Modal.test.js.map +0 -1
- package/dist/Modal/Modal.types.js +0 -2
- package/dist/Modal/Modal.types.js.map +0 -1
- package/dist/Modal/index.js +0 -2
- package/dist/Modal/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/Tabs/Tabs.js +0 -22
- package/dist/Tabs/Tabs.js.map +0 -1
- package/dist/Tabs/Tabs.stories.js +0 -91
- package/dist/Tabs/Tabs.stories.js.map +0 -1
- package/dist/Tabs/Tabs.test.js +0 -91
- package/dist/Tabs/Tabs.test.js.map +0 -1
- package/dist/Tabs/Tabs.types.js +0 -2
- package/dist/Tabs/Tabs.types.js.map +0 -1
- package/dist/Tabs/index.js +0 -2
- package/dist/Tabs/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/ToolbarButton/ToolbarButton.js +0 -74
- package/dist/ToolbarButton/ToolbarButton.js.map +0 -1
- package/dist/ToolbarButton/ToolbarButton.stories.js +0 -79
- package/dist/ToolbarButton/ToolbarButton.stories.js.map +0 -1
- package/dist/ToolbarButton/ToolbarButton.test.js +0 -93
- package/dist/ToolbarButton/ToolbarButton.test.js.map +0 -1
- package/dist/ToolbarButton/ToolbarButton.types.js +0 -2
- package/dist/ToolbarButton/ToolbarButton.types.js.map +0 -1
- package/dist/ToolbarButton/index.js +0 -2
- package/dist/ToolbarButton/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 -148
- 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
package/dist/styles.css
CHANGED
|
@@ -1576,40 +1576,42 @@ ol,
|
|
|
1576
1576
|
padding: revert;
|
|
1577
1577
|
}
|
|
1578
1578
|
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1579
|
+
.modalHeader {
|
|
1580
|
+
h1 {
|
|
1581
|
+
font-size: 2.125rem !important;
|
|
1582
|
+
margin-top: 0 !important;
|
|
1583
|
+
margin-bottom: 0 !important;
|
|
1584
|
+
}
|
|
1585
|
+
|
|
1586
|
+
h2 {
|
|
1587
|
+
font-size: 1.875rem !important;
|
|
1588
|
+
margin-top: 0 !important;
|
|
1589
|
+
margin-bottom: 0 !important;
|
|
1590
|
+
}
|
|
1591
|
+
|
|
1592
|
+
h3 {
|
|
1593
|
+
font-size: 1.5rem !important;
|
|
1594
|
+
margin-top: 0 !important;
|
|
1595
|
+
margin-bottom: 0 !important;
|
|
1596
|
+
}
|
|
1597
|
+
|
|
1598
|
+
h4 {
|
|
1599
|
+
font-size: 1.25rem !important;
|
|
1600
|
+
margin-top: 0 !important;
|
|
1601
|
+
margin-bottom: 0 !important;
|
|
1602
|
+
}
|
|
1603
|
+
|
|
1604
|
+
h5 {
|
|
1605
|
+
font-size: 1.125rem !important;
|
|
1606
|
+
margin-top: 0 !important;
|
|
1607
|
+
margin-bottom: 0 !important;
|
|
1608
|
+
}
|
|
1609
|
+
|
|
1610
|
+
h6 {
|
|
1611
|
+
font-size: 1rem !important;
|
|
1612
|
+
margin-top: 0 !important;
|
|
1613
|
+
margin-bottom: 0 !important;
|
|
1614
|
+
}
|
|
1613
1615
|
}
|
|
1614
1616
|
|
|
1615
1617
|
*, ::before, ::after {
|
package/package.json
CHANGED
package/dist/Button/Button.js
DELETED
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import '../styles.css';
|
|
3
|
-
import { browserIsFirefox } from '../utils/browserId';
|
|
4
|
-
import Icon from '../Icon';
|
|
5
|
-
import { DEFAULT_TOOL_TIP_DELAY } from '../Tooltip/Tooltip.types';
|
|
6
|
-
/**
|
|
7
|
-
* All-in-one Button:
|
|
8
|
-
* - use "variant" to achieve the desired style
|
|
9
|
-
* - include tooltips and/or icons
|
|
10
|
-
*/
|
|
11
|
-
const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, iconPrefix = undefined, preventBlur = false, isHtmlTooltip = false, tooltipTestId, }) => {
|
|
12
|
-
const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';
|
|
13
|
-
const baseClassesByVariant = {
|
|
14
|
-
'outline': 'disabled:tw-opacity-50 tw-border-solid tw-border',
|
|
15
|
-
'theme': 'disabled:tw-opacity-50 tw-border-solid tw-border',
|
|
16
|
-
'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-opacity-50 tw-border-solid tw-border ' +
|
|
17
|
-
'tw-border-sq-danger-color hover:tw-border-sq-danger-color-hover',
|
|
18
|
-
'theme-light': 'disabled:tw-opacity-50 tw-border-solid tw-border',
|
|
19
|
-
'no-border': 'disabled:tw-opacity-50',
|
|
20
|
-
'warning': 'tw-bg-sq-warning-color tw-border-solid tw-border tw-border-sq-warning-color',
|
|
21
|
-
};
|
|
22
|
-
const textClassesByVariantLightTheme = {
|
|
23
|
-
'outline': 'tw-text-sq-text-color',
|
|
24
|
-
'theme': 'tw-text-white',
|
|
25
|
-
'theme-light': 'tw-text-white',
|
|
26
|
-
'danger': 'tw-text-white',
|
|
27
|
-
'no-border': 'tw-text-sq-text-color',
|
|
28
|
-
'warning': 'tw-text-white',
|
|
29
|
-
};
|
|
30
|
-
const textClassesByVariantDarkTheme = {
|
|
31
|
-
'outline': 'dark:tw-text-sq-dark-text',
|
|
32
|
-
'theme': 'dark:tw-text-white',
|
|
33
|
-
'theme-light': 'dark:tw-text-white',
|
|
34
|
-
'danger': 'dark:tw-text-white',
|
|
35
|
-
'no-border': 'dark:tw-text-sq-dark-text',
|
|
36
|
-
'warning': 'dark:tw-text-white',
|
|
37
|
-
};
|
|
38
|
-
const classesByVariantLightTheme = {
|
|
39
|
-
'outline': 'tw-bg-white dark:tw-bg-sq-dark-background tw-border-sq-disabled-gray hover:tw-bg-sq-light-gray' +
|
|
40
|
-
' focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark active:tw-border-sq-color-dark',
|
|
41
|
-
'theme': 'tw-bg-sq-color-dark hover:tw-bg-sq-color-highlight tw-border-sq-color-dark' +
|
|
42
|
-
' hover:tw-border-sq-color-highlight',
|
|
43
|
-
'danger': '',
|
|
44
|
-
'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link tw-border-sq-icon hover:tw-border-sq-link',
|
|
45
|
-
'no-border': '',
|
|
46
|
-
'warning': '',
|
|
47
|
-
};
|
|
48
|
-
const classesByVariantDarkTheme = {
|
|
49
|
-
'outline': 'dark:tw-border-sq-dark-disabled-gray dark:hover:tw-bg-sq-highlight-color-dark' +
|
|
50
|
-
' dark:focus:tw-bg-sq-multi-gray-dark dark:active:tw-bg-sq-multi-gray-dark dark:focus:tw-border-sq-color-dark' +
|
|
51
|
-
' dark:active:tw-border-sq-color-dark',
|
|
52
|
-
'theme': 'dark:tw-bg-sq-color-dark dark:hover:tw-bg-sq-color-highlight dark:tw-border-sq-color-dark' +
|
|
53
|
-
' dark:hover:tw-border-sq-color-highlight',
|
|
54
|
-
'danger': '',
|
|
55
|
-
'theme-light': 'dark:tw-bg-sq-icon-dark dark:hover:tw-bg-sq-link-dark dark:tw-border-sq-icon-dark' +
|
|
56
|
-
' dark:hover:tw-border-sq-link-dark',
|
|
57
|
-
'no-border': '',
|
|
58
|
-
'warning': '',
|
|
59
|
-
};
|
|
60
|
-
const sizeClasses = {
|
|
61
|
-
sm: 'tw-text-sm',
|
|
62
|
-
lg: 'tw-text-xl',
|
|
63
|
-
};
|
|
64
|
-
const appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
|
|
65
|
-
let tooltipData = undefined;
|
|
66
|
-
if (tooltip) {
|
|
67
|
-
tooltipData = {
|
|
68
|
-
'data-qtip-text': tooltip,
|
|
69
|
-
'data-qtip-placement': tooltipOptions?.position,
|
|
70
|
-
'data-qtip-is-html': isHtmlTooltip,
|
|
71
|
-
'data-qtip-testid': tooltipTestId,
|
|
72
|
-
'data-qtip-delay': tooltipOptions?.delay ?? DEFAULT_TOOL_TIP_DELAY,
|
|
73
|
-
};
|
|
74
|
-
}
|
|
75
|
-
return (React.createElement("button", { id: id, ...tooltipData, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
|
|
76
|
-
stopPropagation && e.stopPropagation();
|
|
77
|
-
onClick && onClick(e);
|
|
78
|
-
}, onMouseDown: (e) => {
|
|
79
|
-
if (preventBlur) {
|
|
80
|
-
e.preventDefault();
|
|
81
|
-
}
|
|
82
|
-
}, className: appliedClasses },
|
|
83
|
-
icon && (React.createElement(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label ? `tw-mr-1 ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` })),
|
|
84
|
-
label));
|
|
85
|
-
};
|
|
86
|
-
export default Button;
|
|
87
|
-
//# 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,77 +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
|
-
export const DisabledButton = () => {
|
|
59
|
-
const renderDisabledButton = () => (React.createElement(React.Fragment, null,
|
|
60
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
61
|
-
React.createElement(Button, { disabled: true, variant: "theme", label: "Disabled Button" }),
|
|
62
|
-
React.createElement(Button, { extraClassNames: "tw-m-5", disabled: true, label: "Disabled Button" })),
|
|
63
|
-
React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
|
|
64
|
-
React.createElement(Button, { disabled: true, variant: "theme", label: "Disabled Button" }),
|
|
65
|
-
React.createElement(Button, { extraClassNames: "tw-m-5", disabled: true, label: "Disabled Button" }))));
|
|
66
|
-
return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
|
|
67
|
-
React.createElement("div", { className: "color_topic" },
|
|
68
|
-
React.createElement("b", null, "Topic Colors"),
|
|
69
|
-
renderDisabledButton()),
|
|
70
|
-
React.createElement("div", { className: "color_analysis" },
|
|
71
|
-
React.createElement("b", null, "Analysis Colors"),
|
|
72
|
-
renderDisabledButton()),
|
|
73
|
-
React.createElement("div", { className: "color_datalab" },
|
|
74
|
-
React.createElement("b", null, "Datalab Colors"),
|
|
75
|
-
renderDisabledButton())));
|
|
76
|
-
};
|
|
77
|
-
//# 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":"AAIA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAC;AAC1E,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,CAAU,CAAC;AACjD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,CAAU,CAAC"}
|
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,24 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import '../styles.css';
|
|
3
|
-
const alignment = 'tw-flex';
|
|
4
|
-
const labelClasses = 'tw-ml-1.5 tw-text-sm tw--mt-0.5';
|
|
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:hover:tw-bg-sq-dark-background' +
|
|
7
|
-
' checked:tw-text-white checked:tw-border-sq-text-color checked:hover:tw-border-sq-color-dark' +
|
|
8
|
-
' checked:active:tw-border-sq-color-dark checked:focus:tw-border-sq-color-dark disabled:tw-border-sq-disabled-gray' +
|
|
9
|
-
' dark:disabled:tw-border-sq-fairly-dark-gray dark:checked:focus:tw-bg-sq-dark-background';
|
|
10
|
-
const checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses}`;
|
|
11
|
-
const radioClasses = `tw-form-radio ${baseClasses}`;
|
|
12
|
-
/**
|
|
13
|
-
* Checkbox and Radio Box Component.
|
|
14
|
-
*/
|
|
15
|
-
export const Checkbox = (props) => {
|
|
16
|
-
const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, defaultChecked, id, name, extraClassNames, extraLabelClassNames, testId, } = props;
|
|
17
|
-
const assignedId = id ?? 'checkbox_' + Math.random();
|
|
18
|
-
return (React.createElement("span", { className: `${alignment} ${extraClassNames}` },
|
|
19
|
-
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 }),
|
|
20
|
-
React.createElement("label", { htmlFor: assignedId, className: `${labelClasses} ${extraLabelClassNames} ${disabled
|
|
21
|
-
? 'tw-cursor-not-allowed dark:tw-text-sq-fairly-dark-gray tw-text-sq-fairly-dark-gray'
|
|
22
|
-
: 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'}` }, label)));
|
|
23
|
-
};
|
|
24
|
-
//# 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,SAAS,CAAC;AAC5B,MAAM,YAAY,GAAG,iCAAiC,CAAC;AAEvD,MAAM,WAAW,GACf,4GAA4G;IAC5G,iGAAiG;IACjG,8FAA8F;IAC9F,mHAAmH;IACnH,0FAA0F,CAAC;AAE7F,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,32 +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: React.createElement("div", null,
|
|
12
|
-
"Disabled",
|
|
13
|
-
React.createElement("br", null),
|
|
14
|
-
"multi-Line") })),
|
|
15
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
16
|
-
React.createElement(Checkbox, { value: "d", type: type, checked: true, disabled: true, label: "Disabled" })),
|
|
17
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
18
|
-
React.createElement(Checkbox, { value: "b", type: type, checked: true })),
|
|
19
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
20
|
-
React.createElement(Checkbox, { value: "c", type: type, checked: false }))));
|
|
21
|
-
const renderAllVariations = (type) => (React.createElement(React.Fragment, null,
|
|
22
|
-
React.createElement("div", { className: "tw-p-4 light" }, getDisplay(type)),
|
|
23
|
-
React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" }, getDisplay(type))));
|
|
24
|
-
return (React.createElement("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4" },
|
|
25
|
-
React.createElement("div", null,
|
|
26
|
-
React.createElement("b", null, "Checkbox"),
|
|
27
|
-
renderAllVariations('checkbox')),
|
|
28
|
-
React.createElement("div", null,
|
|
29
|
-
React.createElement("b", null, "Radios"),
|
|
30
|
-
renderAllVariations('radio'))));
|
|
31
|
-
};
|
|
32
|
-
//# 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,EAAE;;oBAAa,+BAAM;iCAAgB,GAAI,CAC1G;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"}
|
package/dist/Icon/Icon.js
DELETED
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import '../styles.css';
|
|
3
|
-
import { DEFAULT_TOOL_TIP_DELAY } from '../Tooltip/Tooltip.types';
|
|
4
|
-
const colorClassesThemeLight = {
|
|
5
|
-
'theme': 'tw-text-sq-color-dark',
|
|
6
|
-
'white': 'tw-text-white',
|
|
7
|
-
'dark-gray': 'tw-text-sq-fairly-dark-gray',
|
|
8
|
-
'warning': 'tw-text-sq-warning-color',
|
|
9
|
-
'darkish-gray': 'tw-text-sq-darkish-gray',
|
|
10
|
-
'gray': 'tw-text-sq-disabled-gray',
|
|
11
|
-
'color': '',
|
|
12
|
-
'info': 'tw-text-sq-link',
|
|
13
|
-
'text': 'tw-text-sq-text-color',
|
|
14
|
-
'inherit': '',
|
|
15
|
-
'danger': 'tw-text-sq-danger-color',
|
|
16
|
-
'theme-light': 'tw-text-sq-color-light',
|
|
17
|
-
'success': 'tw-text-sq-success-color',
|
|
18
|
-
};
|
|
19
|
-
const colorClassesThemeDark = {
|
|
20
|
-
'theme': 'dark:tw-text-sq-color-dark-dark',
|
|
21
|
-
'white': '',
|
|
22
|
-
'dark-gray': 'tw-text-sq-fairly-dark-gray',
|
|
23
|
-
'warning': '',
|
|
24
|
-
'darkish-gray': 'tw-text-sq-darkish-gray',
|
|
25
|
-
'gray': 'dark:tw-text-sq-dark-disabled-gray',
|
|
26
|
-
'color': '',
|
|
27
|
-
'info': 'dark:tw-text-sq-link-dark',
|
|
28
|
-
'text': 'dark:tw-text-sq-dark-text',
|
|
29
|
-
'inherit': '',
|
|
30
|
-
'danger': 'tw-text-sq-danger-color',
|
|
31
|
-
'theme-light': 'tw-text-sq-color-light',
|
|
32
|
-
'success': 'tw-text-sq-success-color',
|
|
33
|
-
};
|
|
34
|
-
/**
|
|
35
|
-
* Icon:
|
|
36
|
-
* - access to Seeq custom icons by providing the desired icon
|
|
37
|
-
* - leverage "type" to style your icon
|
|
38
|
-
*/
|
|
39
|
-
const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClassNames, id, large, small, color, testId, customId, tooltip, tooltipPlacement, number, isHtmlTooltip = false, tooltipTestId, tooltipDelay = DEFAULT_TOOL_TIP_DELAY, }) => {
|
|
40
|
-
if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {
|
|
41
|
-
const errorMessage = color === undefined || color === ''
|
|
42
|
-
? 'Icon with type="color" must have prop color specified.'
|
|
43
|
-
: 'Icon with prop color must have type="color".';
|
|
44
|
-
return React.createElement("div", { className: "tw-text-sq-danger-color" }, errorMessage);
|
|
45
|
-
}
|
|
46
|
-
const fontAwesomePrefix = iconPrefix ? iconPrefix : 'fa-sharp fa-regular';
|
|
47
|
-
const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
|
|
48
|
-
const style = type === 'color' && color ? { color } : {};
|
|
49
|
-
const appliedClassNames = `${iconPrefixString} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''}
|
|
50
|
-
${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'cursor-pointer' : ''} ${extraClassNames}`;
|
|
51
|
-
const tooltipData = tooltip
|
|
52
|
-
? {
|
|
53
|
-
'data-qtip-text': tooltip,
|
|
54
|
-
'data-qtip-placement': tooltipPlacement,
|
|
55
|
-
'data-qtip-is-html': isHtmlTooltip,
|
|
56
|
-
'data-qtip-testid': tooltipTestId,
|
|
57
|
-
'data-qtip-delay': tooltipDelay,
|
|
58
|
-
}
|
|
59
|
-
: undefined;
|
|
60
|
-
return (React.createElement("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
|
|
61
|
-
};
|
|
62
|
-
export default Icon;
|
|
63
|
-
//# sourceMappingURL=Icon.js.map
|
package/dist/Icon/Icon.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"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"}
|