@seeqdev/qomponents 0.0.26 → 0.0.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (90) hide show
  1. package/dist/Button/Button.types.d.ts +3 -0
  2. package/dist/Icon/Icon.types.d.ts +3 -0
  3. package/dist/index.esm.js +7 -6
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/index.js +7 -6
  6. package/dist/index.js.map +1 -1
  7. package/dist/styles.css +80 -80
  8. package/package.json +1 -1
  9. package/dist/Button/Button.js +0 -86
  10. package/dist/Button/Button.js.map +0 -1
  11. package/dist/Button/Button.stories.js +0 -77
  12. package/dist/Button/Button.stories.js.map +0 -1
  13. package/dist/Button/Button.test.js +0 -49
  14. package/dist/Button/Button.test.js.map +0 -1
  15. package/dist/Button/Button.types.js +0 -4
  16. package/dist/Button/Button.types.js.map +0 -1
  17. package/dist/Button/index.js +0 -2
  18. package/dist/Button/index.js.map +0 -1
  19. package/dist/Checkbox/Checkbox.js +0 -23
  20. package/dist/Checkbox/Checkbox.js.map +0 -1
  21. package/dist/Checkbox/Checkbox.stories.js +0 -29
  22. package/dist/Checkbox/Checkbox.stories.js.map +0 -1
  23. package/dist/Checkbox/Checkbox.test.js +0 -94
  24. package/dist/Checkbox/Checkbox.test.js.map +0 -1
  25. package/dist/Checkbox/Checkbox.types.js +0 -2
  26. package/dist/Checkbox/Checkbox.types.js.map +0 -1
  27. package/dist/Checkbox/index.js +0 -2
  28. package/dist/Checkbox/index.js.map +0 -1
  29. package/dist/Icon/Icon.js +0 -61
  30. package/dist/Icon/Icon.js.map +0 -1
  31. package/dist/Icon/Icon.stories.js +0 -40
  32. package/dist/Icon/Icon.stories.js.map +0 -1
  33. package/dist/Icon/Icon.test.js +0 -55
  34. package/dist/Icon/Icon.test.js.map +0 -1
  35. package/dist/Icon/Icon.types.js +0 -16
  36. package/dist/Icon/Icon.types.js.map +0 -1
  37. package/dist/Icon/index.js +0 -2
  38. package/dist/Icon/index.js.map +0 -1
  39. package/dist/Select/Select.js +0 -168
  40. package/dist/Select/Select.js.map +0 -1
  41. package/dist/Select/Select.stories.js +0 -72
  42. package/dist/Select/Select.stories.js.map +0 -1
  43. package/dist/Select/Select.test.js +0 -161
  44. package/dist/Select/Select.test.js.map +0 -1
  45. package/dist/Select/Select.types.js +0 -2
  46. package/dist/Select/Select.types.js.map +0 -1
  47. package/dist/Select/index.js +0 -2
  48. package/dist/Select/index.js.map +0 -1
  49. package/dist/TextArea/TextArea.js +0 -23
  50. package/dist/TextArea/TextArea.js.map +0 -1
  51. package/dist/TextArea/TextArea.stories.js +0 -39
  52. package/dist/TextArea/TextArea.stories.js.map +0 -1
  53. package/dist/TextArea/TextArea.test.js +0 -68
  54. package/dist/TextArea/TextArea.test.js.map +0 -1
  55. package/dist/TextArea/TextArea.types.js +0 -2
  56. package/dist/TextArea/TextArea.types.js.map +0 -1
  57. package/dist/TextArea/index.js +0 -2
  58. package/dist/TextArea/index.js.map +0 -1
  59. package/dist/TextField/TextField.js +0 -64
  60. package/dist/TextField/TextField.js.map +0 -1
  61. package/dist/TextField/TextField.stories.js +0 -41
  62. package/dist/TextField/TextField.stories.js.map +0 -1
  63. package/dist/TextField/TextField.test.js +0 -35
  64. package/dist/TextField/TextField.test.js.map +0 -1
  65. package/dist/TextField/TextField.types.js +0 -2
  66. package/dist/TextField/TextField.types.js.map +0 -1
  67. package/dist/TextField/index.js +0 -2
  68. package/dist/TextField/index.js.map +0 -1
  69. package/dist/Tooltip/QTip.stories.js +0 -40
  70. package/dist/Tooltip/QTip.stories.js.map +0 -1
  71. package/dist/Tooltip/QTip.types.js +0 -2
  72. package/dist/Tooltip/QTip.types.js.map +0 -1
  73. package/dist/Tooltip/QTipPerformance.stories.js +0 -30
  74. package/dist/Tooltip/QTipPerformance.stories.js.map +0 -1
  75. package/dist/Tooltip/Qtip.js +0 -146
  76. package/dist/Tooltip/Qtip.js.map +0 -1
  77. package/dist/Tooltip/Tooltip.js +0 -36
  78. package/dist/Tooltip/Tooltip.js.map +0 -1
  79. package/dist/Tooltip/Tooltip.stories.js +0 -32
  80. package/dist/Tooltip/Tooltip.stories.js.map +0 -1
  81. package/dist/Tooltip/Tooltip.types.js +0 -3
  82. package/dist/Tooltip/Tooltip.types.js.map +0 -1
  83. package/dist/Tooltip/TooltipPerformance.stories.js +0 -30
  84. package/dist/Tooltip/TooltipPerformance.stories.js.map +0 -1
  85. package/dist/Tooltip/index.js +0 -3
  86. package/dist/Tooltip/index.js.map +0 -1
  87. package/dist/types.js +0 -2
  88. package/dist/types.js.map +0 -1
  89. package/dist/utils/browserId.js +0 -29
  90. package/dist/utils/browserId.js.map +0 -1
package/dist/styles.css CHANGED
@@ -1480,81 +1480,81 @@ video {
1480
1480
  }
1481
1481
 
1482
1482
  :root {
1483
- --sq-color-dark: 42, 92, 132;
1484
- --sq-color-dark-dark: 145, 180, 203;
1485
- --sq-white: 255, 255, 255;
1486
- --sq-color-highlight: 4, 145, 194;
1487
- --sq-text-color: 58, 58, 58;
1488
- --sq-disabled-gray: 221, 225, 227;
1489
- --sq-light-gray: 241, 245, 247;
1490
- --sq-dark-gray: 226, 226, 226;
1491
- --sq-fairly-dark-gray: 96, 96, 97;
1492
- --sq-darkish-gray: 183, 183, 183;
1493
- --sq-danger-color: 217, 83, 79;
1494
- --sq-warning-color: 240, 173, 78;
1495
- --sq-success-color: 114, 192, 44;
1496
- --sq-icon: 4, 145, 194;
1497
- --sq-link: 42, 92, 132;
1498
- --sq-dark-background: 36, 37, 37;
1499
- --sq-dark-text: 194, 188, 176;
1500
- --sq-dark-disabled-gray: 70, 73, 73;
1501
- --sq-highlight-color-dark: 36, 45, 49;
1502
- --sq-gray-highlight: 249, 249, 249;
1503
- --sq-gray-highlight-dark: 36, 45, 49;
1504
- --sq-colored-hover: 238, 246, 253;
1505
- --sq-colored-hover-dark: 40, 42, 42;
1506
- --sq-multi-gray-dark: 66, 69, 69;
1507
- --sq-field-disabled-gray: 239, 239, 239;
1508
- }
1483
+ --sq-color-dark: 42, 92, 132;
1484
+ --sq-color-dark-dark: 145, 180, 203;
1485
+ --sq-white: 255, 255, 255;
1486
+ --sq-color-highlight: 4, 145, 194;
1487
+ --sq-text-color: 58, 58, 58;
1488
+ --sq-disabled-gray: 221, 225, 227;
1489
+ --sq-light-gray: 241, 245, 247;
1490
+ --sq-dark-gray: 226, 226, 226;
1491
+ --sq-fairly-dark-gray: 96, 96, 97;
1492
+ --sq-darkish-gray: 183, 183, 183;
1493
+ --sq-danger-color: 217, 83, 79;
1494
+ --sq-warning-color: 240, 173, 78;
1495
+ --sq-success-color: 114, 192, 44;
1496
+ --sq-icon: 4, 145, 194;
1497
+ --sq-link: 42, 92, 132;
1498
+ --sq-dark-background: 36, 37, 37;
1499
+ --sq-dark-text: 194, 188, 176;
1500
+ --sq-dark-disabled-gray: 70, 73, 73;
1501
+ --sq-highlight-color-dark: 36, 45, 49;
1502
+ --sq-gray-highlight: 249, 249, 249;
1503
+ --sq-gray-highlight-dark: 36, 45, 49;
1504
+ --sq-colored-hover: 238, 246, 253;
1505
+ --sq-colored-hover-dark: 40, 42, 42;
1506
+ --sq-multi-gray-dark: 66, 69, 69;
1507
+ --sq-field-disabled-gray: 239, 239, 239;
1508
+ }
1509
1509
 
1510
1510
  .color_topic {
1511
- --sq-color-dark: 42, 92, 132;
1512
- --sq-color-dark-dark: 145, 180, 203;
1513
- --sq-color-light: 237, 247, 246;
1514
- --sq-color-highlight: 4, 145, 194;
1515
- --sq-icon: 4, 145, 194;
1516
- --sq-link: 42, 92, 132;
1517
- --sq-link-dark: 145, 180, 203;
1518
- --sq-icon-dark: 4, 145, 194;
1519
- --sq-gray-highlight-dark: 36, 45, 49;
1520
- --sq-colored-hover: 238, 246, 253;
1521
- --sq-colored-hover-dark: 40, 42, 42;
1522
- }
1511
+ --sq-color-dark: 42, 92, 132;
1512
+ --sq-color-dark-dark: 145, 180, 203;
1513
+ --sq-color-light: 237, 247, 246;
1514
+ --sq-color-highlight: 4, 145, 194;
1515
+ --sq-icon: 4, 145, 194;
1516
+ --sq-link: 42, 92, 132;
1517
+ --sq-link-dark: 145, 180, 203;
1518
+ --sq-icon-dark: 4, 145, 194;
1519
+ --sq-gray-highlight-dark: 36, 45, 49;
1520
+ --sq-colored-hover: 238, 246, 253;
1521
+ --sq-colored-hover-dark: 40, 42, 42;
1522
+ }
1523
1523
 
1524
1524
  .color_analysis {
1525
- --sq-color-dark: 0, 121, 96;
1526
- --sq-color-dark-dark: 31, 207, 166;
1527
- --sq-color-light: 237, 247, 246;
1528
- --sq-color-highlight: 0, 153, 100;
1529
- --sq-icon: 0, 160, 89;
1530
- --sq-link: 0, 121, 96;
1531
- --sq-link-dark: 21, 99, 81;
1532
- --sq-icon-dark: 23, 126, 77;
1533
- --sq-gray-highlight-dark: 36, 45, 49;
1534
- --sq-colored-hover: 238, 248, 244;
1535
- --sq-colored-hover-dark: 33, 54, 47;
1536
- }
1525
+ --sq-color-dark: 0, 121, 96;
1526
+ --sq-color-dark-dark: 31, 207, 166;
1527
+ --sq-color-light: 237, 247, 246;
1528
+ --sq-color-highlight: 0, 153, 100;
1529
+ --sq-icon: 0, 160, 89;
1530
+ --sq-link: 0, 121, 96;
1531
+ --sq-link-dark: 21, 99, 81;
1532
+ --sq-icon-dark: 23, 126, 77;
1533
+ --sq-gray-highlight-dark: 36, 45, 49;
1534
+ --sq-colored-hover: 238, 248, 244;
1535
+ --sq-colored-hover-dark: 33, 54, 47;
1536
+ }
1537
1537
 
1538
1538
  .color_datalab {
1539
- --sq-color-dark: 242, 103, 34;
1540
- --sq-color-dark-dark: 242, 103, 34;
1541
- --sq-color-light: 237, 247, 246;
1542
- --sq-color-highlight: 244, 123, 62;
1543
- --sq-icon: 242, 103, 34;
1544
- --sq-icon-dark: 36, 37, 37;
1545
- --sq-link-dark: 36, 37, 37;
1546
- --sq-link: 242, 103, 34;
1547
- --sq-gray-highlight-dark: 36, 45, 49;
1548
- --sq-colored-hover: 241, 162, 120;
1549
- --sq-colored-hover-dark: 80, 43, 26;
1550
- }
1539
+ --sq-color-dark: 242, 103, 34;
1540
+ --sq-color-dark-dark: 242, 103, 34;
1541
+ --sq-color-light: 237, 247, 246;
1542
+ --sq-color-highlight: 244, 123, 62;
1543
+ --sq-icon: 242, 103, 34;
1544
+ --sq-icon-dark: 36, 37, 37;
1545
+ --sq-link-dark: 36, 37, 37;
1546
+ --sq-link: 242, 103, 34;
1547
+ --sq-gray-highlight-dark: 36, 45, 49;
1548
+ --sq-colored-hover: 241, 162, 120;
1549
+ --sq-colored-hover-dark: 80, 43, 26;
1550
+ }
1551
1551
 
1552
1552
  ol,
1553
- ul,
1554
- menu {
1555
- list-style: revert;
1556
- padding: revert;
1557
- }
1553
+ ul,
1554
+ menu {
1555
+ list-style: revert;
1556
+ padding: revert;
1557
+ }
1558
1558
 
1559
1559
  *, ::before, ::after {
1560
1560
  --tw-border-spacing-x: 0;
@@ -2246,34 +2246,34 @@ ol,
2246
2246
  /* Make sure to keep these colors in sync with the webserver/_custom_variables.scss values to ensure cohesive UIs */
2247
2247
 
2248
2248
  .reactSelectMinHeight {
2249
- min-height: 34px !important;
2249
+ min-height: 34px !important;
2250
2250
  }
2251
2251
 
2252
2252
  .reactSelectMinHeightSmall {
2253
- min-height: 22px !important;
2253
+ min-height: 22px !important;
2254
2254
  }
2255
2255
 
2256
2256
  [type='checkbox']:checked,
2257
2257
  [type='radio']:checked {
2258
- background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
2258
+ background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
2259
2259
  }
2260
2260
 
2261
2261
  .tw-dark [type='checkbox']:checked,
2262
2262
  .tw-dark [type='radio']:checked {
2263
- background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
2263
+ background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
2264
2264
  }
2265
2265
 
2266
2266
  @keyframes fadeIn {
2267
- 0% {
2268
- opacity: 0;
2269
- }
2270
- 100% {
2271
- opacity: 1;
2272
- }
2267
+ 0% {
2268
+ opacity: 0;
2269
+ }
2270
+ 100% {
2271
+ opacity: 1;
2272
+ }
2273
2273
  }
2274
2274
 
2275
2275
  .fade-in {
2276
- animation: fadeIn 500ms;
2276
+ animation: fadeIn 500ms;
2277
2277
  }
2278
2278
 
2279
2279
  .before\:tw-absolute::before {
@@ -2378,8 +2378,8 @@ ol,
2378
2378
  border-top-color: transparent;
2379
2379
  }
2380
2380
 
2381
- .before\:tw-content-\[\'\'\]::before {
2382
- --tw-content: '';
2381
+ .before\:tw-content-\[\\\'\\\'\]::before {
2382
+ --tw-content: \'\';
2383
2383
  content: var(--tw-content);
2384
2384
  }
2385
2385
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seeqdev/qomponents",
3
- "version": "0.0.26",
3
+ "version": "0.0.28",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.esm.js",
6
6
  "types": "dist/index.js",
@@ -1,86 +0,0 @@
1
- import React from 'react';
2
- import '../styles.css';
3
- import { browserIsFirefox } from '../utils/browserId';
4
- import Icon from '../Icon';
5
- /**
6
- * All-in-one Button:
7
- * - use "variant" to achieve the desired style
8
- * - include tooltips and/or icons
9
- */
10
- const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, preventBlur = false, isHtmlTooltip = false, tooltipTestId, }) => {
11
- const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';
12
- const baseClassesByVariant = {
13
- 'outline': 'disabled:tw-opacity-50 tw-border-solid tw-border',
14
- 'theme': 'disabled:tw-opacity-50 tw-border-solid tw-border',
15
- 'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-opacity-50 tw-border-solid tw-border ' +
16
- 'tw-border-sq-danger-color hover:tw-border-sq-danger-color-hover',
17
- 'theme-light': 'disabled:tw-opacity-50 tw-border-solid tw-border',
18
- 'no-border': 'disabled:tw-opacity-50',
19
- 'warning': 'tw-bg-sq-warning-color tw-border-solid tw-border tw-border-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-bg-white dark:tw-bg-sq-dark-background 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 tw-border-sq-color-dark' +
41
- ' hover:tw-border-sq-color-highlight',
42
- 'danger': '',
43
- 'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link tw-border-sq-icon hover:tw-border-sq-link',
44
- 'no-border': '',
45
- 'warning': '',
46
- };
47
- const classesByVariantDarkTheme = {
48
- 'outline': 'dark:tw-border-sq-dark-disabled-gray dark:hover:tw-bg-sq-highlight-color-dark' +
49
- ' dark:focus:tw-bg-sq-dark-gray dark:active:tw-bg-sq-dark-gray dark:focus:tw-border-sq-color-dark' +
50
- ' dark:active:tw-border-sq-color-dark',
51
- 'theme': 'dark:tw-bg-sq-color-dark dark:hover:tw-bg-sq-color-highlight dark:tw-border-sq-color-dark' +
52
- ' dark:hover:tw-border-sq-color-highlight',
53
- 'danger': '',
54
- 'theme-light': 'dark:tw-bg-sq-icon-dark dark:hover:tw-bg-sq-link-dark dark:tw-border-sq-icon-dark' +
55
- ' dark:hover:tw-border-sq-link-dark',
56
- 'no-border': '',
57
- 'warning': '',
58
- };
59
- const sizeClasses = {
60
- sm: 'tw-text-sm',
61
- lg: 'tw-text-xl',
62
- };
63
- const appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
64
- let tooltipData = undefined;
65
- if (tooltip) {
66
- tooltipData = {
67
- 'data-qtip-text': tooltip,
68
- 'data-qtip-placement': tooltipOptions?.position,
69
- 'data-qtip-is-html': isHtmlTooltip,
70
- 'data-qtip-testid': tooltipTestId,
71
- 'data-qtip-delay': tooltipOptions?.delay ?? 0,
72
- };
73
- }
74
- return (React.createElement("button", { id: id, ...tooltipData, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
75
- stopPropagation && e.stopPropagation();
76
- onClick && onClick();
77
- }, onMouseDown: (e) => {
78
- if (preventBlur) {
79
- e.preventDefault();
80
- }
81
- }, className: appliedClasses },
82
- icon && (React.createElement(Icon, { icon: icon, type: iconStyle, color: iconColor, extraClassNames: label ? `tw-mr-1 ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` })),
83
- label));
84
- };
85
- export default Button;
86
- //# 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,4 +0,0 @@
1
- export const buttonTypes = ['button', 'reset', 'submit', 'link'];
2
- export const buttonSizes = ['sm', 'lg'];
3
- export const buttonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
4
- //# sourceMappingURL=Button.types.js.map
@@ -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"}
@@ -1,2 +0,0 @@
1
- export { default } from "./Button";
2
- //# sourceMappingURL=index.js.map
@@ -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